replace el-tag with Badge

This commit is contained in:
pa
2026-01-07 17:41:33 +09:00
committed by Natsumi
parent 02e221e307
commit f819a3f500
16 changed files with 272 additions and 414 deletions

View File

@@ -44,111 +44,85 @@
v-text="groupDialog.ownerDisplayName"></span>
</div>
<div class="group-tags">
<el-tag
<Badge
v-if="groupDialog.ref.isVerified"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.verified') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.privacy === 'private'"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.private') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.privacy === 'default'"
type="success"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.public') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.joinState === 'open'"
type="success"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.open') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'request'"
type="warning"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.request') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'invite'"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.invite') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'closed'"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.closed') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.inGroup"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.joined') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.banned') }}
</el-tag>
</Badge>
<template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
<el-tag
<Badge
v-if="groupDialog.ref.myMember.visibility === 'visible'"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.visible') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.friends') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.hidden') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.subscribed') }}
</el-tag>
</Badge>
</template>
</div>
<div style="margin-top: 5px">
@@ -192,9 +166,7 @@
</TooltipWrapper>
</template>
<template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
<TooltipWrapper
side="top"
:content="t('dialog.group.actions.cancel_join_request_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
<span>
<el-button
type="default"
@@ -649,8 +621,8 @@
:icon="CopyDocument"
circle
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.ref.$url)" />
</TooltipWrapper></span>
@click="copyToClipboard(groupDialog.ref.$url)" /> </TooltipWrapper
></span>
</div>
</div>
<div class="x-friend-item" style="width: 350px; cursor: default">
@@ -665,8 +637,8 @@
:icon="CopyDocument"
circle
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.id)" />
</TooltipWrapper></span>
@click="copyToClipboard(groupDialog.id)" /> </TooltipWrapper
></span>
</div>
</div>
<div
@@ -1205,6 +1177,7 @@
} from '../../../shared/utils';
import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { Badge } from '../../ui/badge';
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
import { groupRequest } from '../../../api';

View File

@@ -723,14 +723,11 @@
style="margin-left: 5px"
@click="clearSelectedGroupMembers"></el-button>
<br />
<el-tag
<Badge
v-for="user in selectedUsersArray"
:key="user.id"
type="info"
:disable-transitions="true"
style="margin-right: 5px; margin-top: 5px"
closable
@close="deleteSelectedGroupMember(user)">
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
<template #content>
<span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
@@ -738,7 +735,22 @@
<el-icon style="margin-left: 3px; display: inline-block"><Warning /></el-icon>
</TooltipWrapper>
<span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span>
</el-tag>
<button
type="button"
style="
margin-left: 6px;
border: none;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
color: inherit;
cursor: pointer;
"
@click="deleteSelectedGroupMember(user)">
<i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
</button>
</Badge>
<br />
<br />
<span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
@@ -860,6 +872,7 @@
import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { groupRequest, userRequest } from '../../../api';
import { Badge } from '../../ui/badge';
import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';