MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 05:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace some el-button

Browse Source
This commit is contained in:
pa
2026-01-12 18:10:14 +09:00
committed by Natsumi
parent f1874434de
commit 59700b90ab
29 changed files with 697 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/InviteYourself.vue
View File

@@ -1,21 +1,28 @@
<template>
<div v-if="isVisible" :class="['inline-block']">
<TooltipWrapper v-if="!canOpenInstanceInGame" side="top" :content="t('dialog.user.info.self_invite_tooltip')">
<el-button v-show="isVisible" @click="confirmInvite" size="small" :icon="Message" circle />
<Button
class="rounded-full h-6 w-6 text-xs"
size="icon-sm"
variant="outline"
v-show="isVisible"
@click="confirmInvite"
><i class="ri-mail-line"></i
></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
<el-button v-if="isOpeningInstance" size="small" circle>
<el-icon class="is-loading">
<Loading />
</el-icon>
</el-button>
<el-button v-else @click="openInstance" size="small" :icon="Message" circle />
<Button class="rounded-full h-6 w-6 text-xs" size="icon-sm" variant="outline" v-if="isOpeningInstance">
<i class="ri-loader-line"></i>
</Button>
<Button class="rounded-full h-6 w-6 text-xs" size="icon-sm" variant="outline" v-else @click="openInstance"
><i class="ri-mail-line"></i
></Button>
</TooltipWrapper>
</div>
</template>
<script setup>
import { Loading, Message } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';

93
src/components/dialogs/CustomNavDialog.vue
View File

@@ -18,16 +18,22 @@
</div>
<div class="custom-nav-entry__controls">
<div class="custom-nav-entry__move">
<el-button circle size="small" :disabled="index === 0" @click="handleMoveEntry(index, -1)">
<Button
class="rounded-full w-6 h-6 text-xs"
size="icon-sm"
variant="outline"
:disabled="index === 0"
@click="handleMoveEntry(index, -1)">
<i class="ri-arrow-up-line"></i>
</el-button>
<el-button
circle
size="small"
</Button>
<Button
class="rounded-full w-6 h-6 text-xs"
size="icon-sm"
variant="outline"
:disabled="index === localLayout.length - 1"
@click="handleMoveEntry(index, 1)">
<i class="ri-arrow-down-line"></i>
</el-button>
</Button>
</div>
</div>
</template>
@@ -38,25 +44,27 @@
<span>{{ entry.name?.trim() || t('nav_menu.custom_nav.folder_name_placeholder') }}</span>
</div>
<div class="custom-nav-entry__actions">
<el-button size="small" plain @click="openFolderEditor(index)">
<Button size="icon-sm w-6 h-6 text-xs" variant="outline" @click="openFolderEditor(index)">
<i class="ri-edit-box-line"></i>
{{ t('nav_menu.custom_nav.edit_folder') }}
</el-button>
</Button>
<div class="custom-nav-entry__move">
<el-button
circle
size="small"
<Button
class="rounded-full text-xs w-6 h-6"
size="icon-sm"
variant="outline"
:disabled="index === 0"
@click="handleMoveEntry(index, -1)">
<i class="ri-arrow-up-line"></i>
</el-button>
<el-button
circle
size="small"
</Button>
<Button
class="rounded-full text-xs w-6 h-6"
size="icon-sm"
variant="outline"
:disabled="index === localLayout.length - 1"
@click="handleMoveEntry(index, 1)">
<i class="ri-arrow-down-line"></i>
</el-button>
</Button>
</div>
</div>
</div>
@@ -85,20 +93,20 @@
<template #footer>
<div class="custom-nav-dialog__footer">
<div class="custom-nav-dialog__footer-left">
<el-button type="primary" plain @click="openFolderEditor()">
<Button variant="outline" @click="openFolderEditor()">
{{ t('nav_menu.custom_nav.add_folder') }}
</el-button>
<el-button type="warning" plain @click="handleReset">
</Button>
<Button variant="outline" @click="handleReset">
{{ t('nav_menu.custom_nav.restore_default') }}
</el-button>
</Button>
</div>
<div class="custom-nav-dialog__footer-right">
<el-button @click="handleClose">
<Button variant="secondary" @click="handleClose">
{{ t('nav_menu.custom_nav.cancel') }}
</el-button>
<el-button type="primary" :disabled="isSaveDisabled" @click="handleSave">
</Button>
<Button :disabled="isSaveDisabled" @click="handleSave">
{{ t('nav_menu.custom_nav.save') }}
</el-button>
</Button>
</div>
</div>
</template>
@@ -156,24 +164,26 @@
</div>
<div class="folder-editor__selected-actions">
<div class="custom-nav-entry__move">
<el-button
circle
size="small"
<Button
class="rounded-full text-xs w-6 h-6"
size="icon-sm"
variant="outline"
:disabled="index === 0"
@click="handleFolderItemMove(index, -1)">
<i class="ri-arrow-up-line"></i>
</el-button>
<el-button
circle
size="small"
</Button>
<Button
class="rounded-full text-xs w-6 h-6"
size="icon-sm"
variant="outline"
:disabled="index === folderEditor.data.items.length - 1"
@click="handleFolderItemMove(index, 1)">
<i class="ri-arrow-down-line"></i>
</el-button>
</Button>
</div>
<el-button size="small" text @click="toggleFolderItem(key, false)">
<Button size="sm" variant="outline" @click="toggleFolderItem(key, false)">
{{ t('nav_menu.custom_nav.remove_from_folder') }}
</el-button>
</Button>
</div>
</div>
</div>
@@ -181,20 +191,20 @@
</div>
<template #footer>
<div class="folder-editor__footer">
<el-button
<Button
variant="destructive"
v-if="folderEditor.isEditing"
type="danger"
:disabled="!canDeleteFolder"
@click="handleFolderEditorDelete">
{{ t('nav_menu.custom_nav.delete_folder') }}
</el-button>
</Button>
<div class="folder-editor__footer-spacer"></div>
<el-button @click="closeFolderEditor">
<Button variant="secondary" @click="closeFolderEditor">
{{ t('nav_menu.custom_nav.cancel') }}
</el-button>
<el-button type="primary" :disabled="folderEditorSaveDisabled" @click="handleFolderEditorSave">
</Button>
<Button :disabled="folderEditorSaveDisabled" @click="handleFolderEditorSave">
{{ t('nav_menu.custom_nav.save') }}
</el-button>
</Button>
</div>
</template>
</el-dialog>
@@ -202,6 +212,7 @@
<script setup>
import { computed, reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';

166
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
View File

@@ -70,8 +70,9 @@
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
)
">
<el-button
size="small"
<Button
size="sm"
variant="outline"
:disabled="
Boolean(
isGroupMembersLoading ||
@@ -84,7 +85,7 @@
{{ t(memberFilter.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span>
</el-button>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
@@ -110,20 +111,18 @@
style="margin-top: 10px; margin-bottom: 10px"
@input="groupMembersSearch"></el-input>
<br />
<el-button size="small" @click="selectAllGroupMembers">{{
<Button size="sm" variant="outline" @click="selectAllGroupMembers">{{
t('dialog.group_member_moderation.select_all')
}}</el-button>
}}</Button>
<DataTable
v-if="groupMemberModerationTable.data.length"
v-bind="groupMemberModerationTable"
style="margin-top: 10px">
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
</el-button>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
</template>
</el-table-column>
<el-table-column
@@ -228,17 +227,15 @@
:placeholder="t('dialog.group.members.search')"
style="margin-top: 10px; margin-bottom: 10px"></el-input>
<br />
<el-button size="small" @click="selectAllGroupBans">{{
<Button size="sm" variant="outline" @click="selectAllGroupBans">{{
t('dialog.group_member_moderation.select_all')
}}</el-button>
}}</Button>
<DataTable v-bind="groupBansModerationTable" style="margin-top: 10px">
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
</el-button>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
</template>
</el-table-column>
<el-table-column
@@ -342,19 +339,17 @@
groupInvitesModerationTable.data.length
}}</span>
</template>
<el-button size="small" @click="selectAllGroupInvites">{{
<Button size="sm" variant="outline" @click="selectAllGroupInvites">{{
t('dialog.group_member_moderation.select_all')
}}</el-button>
}}</Button>
<DataTable v-bind="groupInvitesModerationTable" style="margin-top: 10px">
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
" />
</el-button>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
" />
</template>
</el-table-column>
<el-table-column
@@ -403,7 +398,8 @@
</el-table-column>
</DataTable>
<br />
<el-button
<Button
variant="outline"
:disabled="
Boolean(
progressCurrent ||
@@ -411,7 +407,7 @@
)
"
@click="groupMembersDeleteSentInvite"
>{{ t('dialog.group_member_moderation.delete_sent_invite') }}</el-button
>{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
>
</el-tab-pane>
@@ -424,19 +420,17 @@
groupJoinRequestsModerationTable.data.length
}}</span>
</template>
<el-button size="small" @click="selectAllGroupJoinRequests">{{
<Button size="sm" variant="outline" @click="selectAllGroupJoinRequests">{{
t('dialog.group_member_moderation.select_all')
}}</el-button>
}}</Button>
<DataTable v-bind="groupJoinRequestsModerationTable" style="margin-top: 10px">
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
" />
</el-button>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
" />
</template>
</el-table-column>
<el-table-column
@@ -485,7 +479,8 @@
</el-table-column>
</DataTable>
<br />
<el-button
<Button
variant="outline"
:disabled="
Boolean(
progressCurrent ||
@@ -493,9 +488,10 @@
)
"
@click="groupMembersAcceptInviteRequest"
>{{ t('dialog.group_member_moderation.accept_join_requests') }}</el-button
>{{ t('dialog.group_member_moderation.accept_join_requests') }}</Button
>
<el-button
<Button
variant="outline"
:disabled="
Boolean(
progressCurrent ||
@@ -503,9 +499,10 @@
)
"
@click="groupMembersRejectInviteRequest"
>{{ t('dialog.group_member_moderation.reject_join_requests') }}</el-button
>{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
>
<el-button
<Button
variant="outline"
:disabled="
Boolean(
progressCurrent ||
@@ -513,7 +510,7 @@
)
"
@click="groupMembersBlockJoinRequest"
>{{ t('dialog.group_member_moderation.block_join_requests') }}</el-button
>{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
>
</el-tab-pane>
@@ -526,19 +523,17 @@
groupBlockedModerationTable.data.length
}}</span>
</template>
<el-button size="small" @click="selectAllGroupBlocked">{{
<Button size="sm" variant="outline" @click="selectAllGroupBlocked">{{
t('dialog.group_member_moderation.select_all')
}}</el-button>
}}</Button>
<DataTable v-bind="groupBlockedModerationTable" style="margin-top: 10px">
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
" />
</el-button>
<Checkbox
v-model="scope.row.$selected"
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
" />
</template>
</el-table-column>
<el-table-column
@@ -587,7 +582,8 @@
</el-table-column>
</DataTable>
<br />
<el-button
<Button
variant="secondary"
:disabled="
Boolean(
progressCurrent ||
@@ -595,7 +591,7 @@
)
"
@click="groupMembersDeleteBlockedRequest"
>{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</el-button
>{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
>
</el-tab-pane>
</el-tabs>
@@ -634,9 +630,9 @@
</Select>
</div>
<div>
<el-button @click="showGroupLogsExportDialog">{{
<Button variant="outline" @click="showGroupLogsExportDialog">{{
t('dialog.group_member_moderation.export_logs')
}}</el-button>
}}</Button>
</div>
</div>
<el-input
@@ -709,23 +705,25 @@
style="margin-top: 5px; width: 340px"
:placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
clearable></el-input>
<el-button
size="small"
<Button
size="sm"
variant="outline"
style="margin-top: 5px; margin-left: 5px"
:disabled="!selectUserId"
@click="selectGroupMemberUserId"
>{{ t('dialog.group_member_moderation.select_user') }}</el-button
>{{ t('dialog.group_member_moderation.select_user') }}</Button
>
<br />
<br />
<span class="name">{{ t('dialog.group_member_moderation.selected_users') }}</span>
<el-button
type="default"
size="small"
:icon="Delete"
circle
<Button
class="rounded-full"
size="icon-sm"
variant="outline"
style="margin-left: 5px"
@click="clearSelectedGroupMembers"></el-button>
@click="clearSelectedGroupMembers">
<Trash2
/></Button>
<br />
<Badge
v-for="user in selectedUsersArray"
@@ -786,7 +784,8 @@
<br />
<span class="name">{{ t('dialog.group_member_moderation.actions') }}</span>
<br />
<el-button
<Button
variant="outline"
:disabled="
Boolean(
!selectedRoles.length ||
@@ -795,9 +794,10 @@
)
"
@click="groupMembersAddRoles"
>{{ t('dialog.group_member_moderation.add_roles') }}</el-button
>{{ t('dialog.group_member_moderation.add_roles') }}</Button
>
<el-button
<Button
variant="secondary"
:disabled="
Boolean(
!selectedRoles.length ||
@@ -806,47 +806,51 @@
)
"
@click="groupMembersRemoveRoles"
>{{ t('dialog.group_member_moderation.remove_roles') }}</el-button
>{{ t('dialog.group_member_moderation.remove_roles') }}</Button
>
<el-button
<Button
variant="outline"
:disabled="
Boolean(
progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
)
"
@click="groupMembersSaveNote"
>{{ t('dialog.group_member_moderation.save_note') }}</el-button
>{{ t('dialog.group_member_moderation.save_note') }}</Button
>
<el-button
<Button
variant="outline"
:disabled="
Boolean(
progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
)
"
@click="groupMembersKick"
>{{ t('dialog.group_member_moderation.kick') }}</el-button
>{{ t('dialog.group_member_moderation.kick') }}</Button
>
<el-button
<Button
variant="outline"
:disabled="
Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
"
@click="groupMembersBan"
>{{ t('dialog.group_member_moderation.ban') }}</el-button
>{{ t('dialog.group_member_moderation.ban') }}</Button
>
<el-button
<Button
variant="outline"
:disabled="
Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
"
@click="groupMembersUnban"
>{{ t('dialog.group_member_moderation.unban') }}</el-button
>{{ t('dialog.group_member_moderation.unban') }}</Button
>
<span v-if="progressCurrent" style="margin-top: 10px">
<el-icon class="is-loading" style="margin-left: 5px; margin-right: 5px"><Loading /></el-icon>
{{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
</span>
<el-button v-if="progressCurrent" style="margin-left: 5px" @click="progressTotal = 0">{{
<Button variant="secondary" v-if="progressCurrent" style="margin-left: 5px" @click="progressTotal = 0">{{
t('dialog.group_member_moderation.cancel')
}}</el-button>
}}</Button>
</div>
<group-member-moderation-export-dialog
v-model:isGroupLogsExportDialogVisible="isGroupLogsExportDialogVisible"
@@ -855,8 +859,10 @@
</template>
<script setup>
import { ArrowDown, Delete, Loading, Refresh, Warning } from '@element-plus/icons-vue';
import { ArrowDown, Loading, Refresh, Warning } from '@element-plus/icons-vue';
import { reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Trash2 } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

22
src/components/dialogs/InviteDialog/SendInviteDialog.vue
View File

@@ -57,22 +57,24 @@
</el-table-column>
<el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
<template #default="scope">
<el-button
text
:icon="Edit"
size="small"
@click.stop="showEditAndSendInviteDialog(scope.row)"></el-button>
<Button
size="icon-sm"
class="w-6 h-6"
variant="ghost"
@click.stop="showEditAndSendInviteDialog(scope.row)">
<SquarePen />
</Button>
</template>
</el-table-column>
</DataTable>
<template #footer>
<el-button @click="cancelSendInvite">
<Button variant="secondary" @click="cancelSendInvite">
{{ t('dialog.invite_message.cancel') }}
</el-button>
<el-button @click="refreshInviteMessageTableData('message')">
</Button>
<Button variant="outline" @click="refreshInviteMessageTableData('message')">
{{ t('dialog.invite_message.refresh') }}
</el-button>
</Button>
</template>
<SendInviteConfirmDialog
v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
@@ -90,7 +92,7 @@
</template>
<script setup>
import { Edit } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

38
src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
View File

@@ -37,24 +37,30 @@
<el-table-column :label="t('table.previous_instances.action')" width="90" align="right">
<template #default="scope">
<el-button
text
:icon="DataLine"
size="small"
@click="showPreviousInstancesInfoDialog(scope.row.location)" />
<el-button
<Button
size="icon-sm"
class="w-6 h-6 text-xs"
variant="ghost"
@click="showPreviousInstancesInfoDialog(scope.row.location)"
><i class="ri-information-line"></i
></Button>
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
v-if="shiftHeld"
style="color: #f56c6c"
text
:icon="Close"
size="small"
@click="deleteGameLogGroupInstance(scope.row)" />
<el-button
@click="deleteGameLogGroupInstance(scope.row)"
><i class="ri-delete-bin-line"></i
></Button>
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
v-else
text
:icon="Close"
size="small"
@click="deleteGameLogGroupInstancePrompt(scope.row)" />
@click="deleteGameLogGroupInstancePrompt(scope.row)"
><i class="ri-delete-bin-line"></i
></Button>
</template>
</el-table-column>
</DataTable>
@@ -63,7 +69,7 @@
<script setup>
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { Close, DataLine } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { useI18n } from 'vue-i18n';

41
src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
View File

@@ -41,27 +41,30 @@
</el-table-column>
<el-table-column :label="t('table.previous_instances.action')" width="90" align="right">
<template #default="scope">
<el-button
text
:icon="DataLine"
size="small"
class="button-pd-0"
@click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
<el-button
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0 w-6 h-6 text-xs"
@click="showPreviousInstancesInfoDialog(scope.row.location)"
><i class="ri-information-line"></i
></Button>
<Button
size="icon-sm"
variant="ghost"
v-if="shiftHeld"
style="color: #f56c6c"
text
:icon="Close"
size="small"
class="button-pd-0"
@click="deleteGameLogWorldInstance(scope.row)"></el-button>
<el-button
class="button-pd-0 w-6 h-6 text-xs"
@click="deleteGameLogWorldInstance(scope.row)"
><i class="ri-delete-bin-line"></i
></Button>
<Button
size="icon-sm"
variant="ghost"
v-else
text
:icon="Close"
size="small"
class="button-pd-0"
@click="deleteGameLogWorldInstancePrompt(scope.row)"></el-button>
class="button-pd-0 w-6 h-6 text-xs"
@click="deleteGameLogWorldInstancePrompt(scope.row)"
><i class="ri-delete-bin-line"></i
></Button>
</template>
</el-table-column>
</DataTable>
@@ -70,7 +73,7 @@
<script setup>
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { Close, DataLine } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

16
src/components/dialogs/UserDialog/BioDialog.vue
View File

@@ -23,27 +23,29 @@
show-word-limit
style="margin-top: 5px">
<img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
<el-button :icon="Delete" @click="bioDialog.bioLinks.splice(index, 1)" />
<Button variant="outline" @click="bioDialog.bioLinks.splice(index, 1)" />
</el-input>
<el-button
<Button
variant="outline"
:disabled="bioDialog.bioLinks.length >= 3"
size="small"
style="margin-top: 5px"
size="sm"
class="mt-2"
@click="bioDialog.bioLinks.push('')">
{{ t('dialog.bio.add_link') }}
</el-button>
</Button>
</div>
<template #footer>
<el-button type="primary" :disabled="bioDialog.loading" @click="saveBio">
<Button :disabled="bioDialog.loading" @click="saveBio">
{{ t('dialog.bio.update') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { Delete } from '@element-plus/icons-vue';
import { InputGroupCharCount } from '@/components/ui/input-group';
import { toast } from 'vue-sonner';

54
src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
View File

@@ -38,33 +38,37 @@
</el-table-column>
<el-table-column :label="t('table.previous_instances.action')" width="90" align="right">
<template #default="scope">
<el-button
text
:icon="SwitchButton"
size="small"
class="button-pd-0"
@click="showLaunchDialog(scope.row.location)"></el-button>
<el-button
text
:icon="DataLine"
size="small"
class="button-pd-0"
@click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
<el-button
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0 w-6 h-6 text-xs"
@click="showLaunchDialog(scope.row.location)"
><i class="ri-door-open-line"></i
></Button>
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0 w-6 h-6 text-xs"
@click="showPreviousInstancesInfoDialog(scope.row.location)"
><i class="ri-information-line"></i
></Button>
<Button
size="icon-sm"
variant="ghost"
v-if="shiftHeld"
style="color: #f56c6c"
text
:icon="Close"
size="small"
class="button-pd-0"
@click="deleteGameLogUserInstance(scope.row)"></el-button>
<el-button
class="button-pd-0 w-6 h-6 text-xs"
@click="deleteGameLogUserInstance(scope.row)"
><i class="ri-delete-bin-line"></i
></Button>
<Button
size="icon-sm"
variant="ghost"
v-else
text
:icon="Close"
size="small"
class="button-pd-0"
@click="deleteGameLogUserInstancePrompt(scope.row)"></el-button>
class="button-pd-0 w-6 h-6 text-xs"
@click="deleteGameLogUserInstancePrompt(scope.row)"
><i class="ri-delete-bin-line"></i
></Button>
</template>
</el-table-column>
</DataTable>
@@ -73,7 +77,7 @@
<script setup>
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { Close, DataLine, SwitchButton } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

19
src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
View File

@@ -32,20 +32,20 @@
</el-table-column>
<el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
<template #default="scope">
<el-button
text
:icon="Edit"
size="small"
@click.stop="showEditAndSendInviteDialog(scope.row)"></el-button>
<Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteDialog(scope.row)">
<SquarePen
/></Button>
</template>
</el-table-column>
</DataTable>
<template #footer>
<el-button @click="cancelSendInviteRequest">{{ t('dialog.invite_request_message.cancel') }}</el-button>
<el-button @click="refreshInviteMessageTableData('request')">{{
<Button variant="secondary" class="mr-2" @click="cancelSendInviteRequest">{{
t('dialog.invite_request_message.cancel')
}}</Button>
<Button @click="refreshInviteMessageTableData('request')">{{
t('dialog.invite_request_message.refresh')
}}</el-button>
}}</Button>
</template>
<SendInviteConfirmDialog
v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
@@ -63,7 +63,8 @@
</template>
<script setup>
import { Edit } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { SquarePen } from 'lucide-vue-next';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

12
src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
View File

@@ -12,23 +12,23 @@
v-model="urlList[index]"
size="small"
style="margin-top: 5px">
<el-button :icon="Delete" @click="urlList.splice(index, 1)"></el-button>
<Button variant="outline" @click="urlList.splice(index, 1)"></Button>
</el-input>
<el-button size="small" style="margin-top: 5px" @click="urlList.push('')">
<Button size="sm" variant="outline" style="margin-top: 5px" @click="urlList.push('')">
{{ t('dialog.allowed_video_player_domains.add_domain') }}
</el-button>
</Button>
</div>
<template #footer>
<el-button type="primary" :disabled="!worldAllowedDomainsDialog.worldId" @click="saveWorldAllowedDomains">
<Button :disabled="!worldAllowedDomainsDialog.worldId" @click="saveWorldAllowedDomains">
{{ t('dialog.allowed_video_player_domains.save') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

69
src/views/Favorites/FavoritesAvatar.vue
View File

@@ -35,7 +35,7 @@
@input="searchAvatarFavorites" />
<DropdownMenu v-model:open="avatarToolbarMenuOpen">
<DropdownMenuTrigger as-child>
<el-button :icon="MoreFilled" size="small" circle />
<Button class="rounded-full" size="icon-sm" variant="ghost"> <Ellipsis /> </Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="favorites-dropdown">
<li class="favorites-dropdown__control" @click.stop>
@@ -195,16 +195,19 @@
<div class="group-section__header">
<span>{{ t('view.favorite.avatars.local_favorites') }}</span>
<template v-if="!refreshingLocalFavorites">
<el-button
size="small"
:icon="Refresh"
circle
@click.stop="refreshLocalAvatarFavorites" />
<Button
class="rounded-full"
size="icon"
variant="outline"
@click.stop="refreshLocalAvatarFavorites"
><RefreshCcw
/></Button>
</template>
<el-button v-else size="small" text @click.stop="cancelLocalAvatarRefresh">
<el-icon class="is-loading"><Loading /></el-icon>
<Button size="sm" variant="ghost" v-else @click.stop="cancelLocalAvatarRefresh">
<Loader />
{{ t('view.favorite.avatars.cancel_refresh') }}
</el-button>
</Button>
</div>
<div class="group-section__list">
<template v-if="localAvatarFavoriteGroups.length">
@@ -226,12 +229,13 @@
:open="activeGroupMenu === localGroupMenuKey(group)"
@update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
<PopoverTrigger asChild>
<el-button
text
size="small"
:icon="MoreFilled"
circle
@click.stop></el-button>
<Button
class="rounded-full"
size="icon-sm"
variant="ghost"
@click.stop
><Ellipsis
/></Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
@@ -295,7 +299,9 @@
:open="activeGroupMenu === historyGroupMenuKey"
@update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
<PopoverTrigger asChild>
<el-button text size="small" :icon="MoreFilled" circle @click.stop></el-button>
<Button class="rounded-full" size="icon-sm" variant="ghost" @click.stop
><Ellipsis
/></Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-45 p-1 rounded-lg">
<div class="favorites-group-menu">
@@ -359,25 +365,34 @@
<div
v-if="avatarEditMode && !isSearchActive && activeRemoteGroup"
class="favorites-content__actions">
<el-button size="small" @click="toggleSelectAllAvatars">
<Button size="sm" variant="outline" @click="toggleSelectAllAvatars">
{{
isAllAvatarsSelected
? t('view.favorite.deselect_all')
: t('view.favorite.select_all')
}}
</el-button>
<el-button size="small" :disabled="!hasAvatarSelection" @click="clearSelectedAvatars">
</Button>
<Button
size="sm"
variant="secondary"
:disabled="!hasAvatarSelection"
@click="clearSelectedAvatars">
{{ t('view.favorite.clear') }}
</el-button>
<el-button size="small" :disabled="!hasAvatarSelection" @click="copySelectedAvatars">
</Button>
<Button
size="sm"
variant="outline"
:disabled="!hasAvatarSelection"
@click="copySelectedAvatars">
{{ t('view.favorite.copy') }}
</el-button>
<el-button
size="small"
</Button>
<Button
size="sm"
variant="outline"
:disabled="!hasAvatarSelection"
@click="showAvatarBulkUnfavoriteSelectionConfirm">
{{ t('view.favorite.bulk_unfavorite') }}
</el-button>
</Button>
</div>
</div>
<div ref="avatarFavoritesContainerRef" class="favorites-content__list">
@@ -496,8 +511,10 @@
<script setup>
import { computed, h, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
import { ElMessageBox, ElNotification, ElProgress } from 'element-plus';
import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

31
src/views/Favorites/FavoritesFriend.vue
View File

@@ -35,7 +35,7 @@
@input="searchFriendFavorites" />
<DropdownMenu v-model:open="friendToolbarMenuOpen">
<DropdownMenuTrigger as-child>
<el-button :icon="MoreFilled" size="small" circle />
<Button class="rounded-full" size="icon-sm" variant="ghost"><Ellipsis /></Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="favorites-dropdown">
<li class="favorites-dropdown__control" @click.stop>
@@ -196,25 +196,34 @@
</div>
<div class="favorites-content__edit-actions">
<div v-if="friendEditMode && !isSearchActive" class="favorites-content__actions">
<el-button size="small" @click="toggleSelectAllFriends">
<Button size="sm" variant="outline" @click="toggleSelectAllFriends">
{{
isAllFriendsSelected
? t('view.favorite.deselect_all')
: t('view.favorite.select_all')
}}
</el-button>
<el-button size="small" :disabled="!hasFriendSelection" @click="clearSelectedFriends">
</Button>
<Button
size="sm"
variant="secondary"
:disabled="!hasFriendSelection"
@click="clearSelectedFriends">
{{ t('view.favorite.clear') }}
</el-button>
<el-button size="small" :disabled="!hasFriendSelection" @click="copySelectedFriends">
</Button>
<Button
size="sm"
variant="outline"
:disabled="!hasFriendSelection"
@click="copySelectedFriends">
{{ t('view.favorite.copy') }}
</el-button>
<el-button
size="small"
</Button>
<Button
size="sm"
variant="outline"
:disabled="!hasFriendSelection"
@click="showFriendBulkUnfavoriteSelectionConfirm">
{{ t('view.favorite.bulk_unfavorite') }}
</el-button>
</Button>
</div>
</div>
<div ref="friendFavoritesContainerRef" class="favorites-content__list">
@@ -287,7 +296,9 @@
<script setup>
import { computed, onBeforeMount, ref, watch } from 'vue';
import { MoreFilled, Refresh } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { Ellipsis } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

62
src/views/Favorites/FavoritesWorld.vue
View File

@@ -35,7 +35,7 @@
@input="searchWorldFavorites" />
<DropdownMenu v-model:open="worldToolbarMenuOpen">
<DropdownMenuTrigger as-child>
<el-button :icon="MoreFilled" size="small" circle />
<Button class="rounded-full" size="icon" variant="outline"><Ellipsis /></Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="favorites-dropdown">
<li class="favorites-dropdown__control" @click.stop>
@@ -194,16 +194,18 @@
<div class="group-section">
<div class="group-section__header">
<span>{{ t('view.favorite.worlds.local_favorites') }}</span>
<el-button
<Button
class="rounded-full"
size="icon-sm"
variant="outline"
v-if="!refreshingLocalFavorites"
size="small"
@click.stop="refreshLocalWorldFavorites"
:icon="Refresh"
circle />
<el-button v-else size="small" text @click.stop="cancelLocalWorldRefresh">
<el-icon class="is-loading"><Loading /></el-icon>
><RefreshCcw
/></Button>
<Button size="icon-sm" variant="ghost" v-else @click.stop="cancelLocalWorldRefresh">
<RefreshCcw />
{{ t('view.favorite.worlds.cancel_refresh') }}
</el-button>
</Button>
</div>
<div class="group-section__list">
<template v-if="localWorldFavoriteGroups.length">
@@ -226,12 +228,13 @@
handleGroupMenuVisible(localGroupMenuKey(group), $event)
">
<PopoverTrigger asChild>
<el-button
text
size="small"
:icon="MoreFilled"
circle
@click.stop></el-button>
<Button
class="rounded-full"
size="icon-sm"
variant="ghost"
@click.stop
><Ellipsis
/></Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
@@ -302,25 +305,34 @@
</div>
<div class="favorites-content__edit-actions">
<div v-if="worldEditMode && !isSearchActive" class="favorites-content__actions">
<el-button size="small" @click="toggleSelectAllWorlds">
<Button size="sm" variant="outline" @click="toggleSelectAllWorlds">
{{
isAllWorldsSelected
? t('view.favorite.deselect_all')
: t('view.favorite.select_all')
}}
</el-button>
<el-button size="small" :disabled="!hasWorldSelection" @click="clearSelectedWorlds">
</Button>
<Button
size="sm"
variant="secondary"
:disabled="!hasWorldSelection"
@click="clearSelectedWorlds">
{{ t('view.favorite.clear') }}
</el-button>
<el-button size="small" :disabled="!hasWorldSelection" @click="copySelectedWorlds">
</Button>
<Button
size="sm"
variant="outline"
:disabled="!hasWorldSelection"
@click="copySelectedWorlds">
{{ t('view.favorite.copy') }}
</el-button>
<el-button
size="small"
</Button>
<Button
size="sm"
variant="outline"
:disabled="!hasWorldSelection"
@click="showWorldBulkUnfavoriteSelectionConfirm">
{{ t('view.favorite.bulk_unfavorite') }}
</el-button>
</Button>
</div>
</div>
<div ref="worldFavoritesContainerRef" class="favorites-content__list">
@@ -413,7 +425,9 @@
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';

51
src/views/Favorites/components/FavoritesAvatarItem.vue
View File

@@ -68,13 +68,14 @@
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action" v-if="canSelectAvatar">
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
<el-button
<Button
size="icon-sm"
variant="outline"
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
:icon="Check"
circle
class="favorites-search-card__action-btn"
@click.stop="selectAvatarWithConfirmation(favorite.id)" />
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="selectAvatarWithConfirmation(favorite.id)"
><i class="ri-check-line"></i
></Button>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
@@ -82,22 +83,22 @@
v-if="showDangerUnfavorite"
side="bottom"
:content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
:icon="Close"
circle
class="favorites-search-card__action-btn"
type="danger"
@click.stop="handlePrimaryDeleteAction" />
<Button
size="icon-sm"
variant="destructive"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="handlePrimaryDeleteAction"
><i class="ri-delete-bin-line"></i
></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
type="default"
:icon="Star"
size="small"
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('avatar', favorite.id)" />
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('avatar', favorite.id)"
><i class="ri-star-line"></i
></Button>
</TooltipWrapper>
</div>
</div>
@@ -113,9 +114,13 @@
</div>
<div class="favorites-search-card__actions">
<div class="favorites-search-card__action">
<el-button circle type="default" size="small" @click.stop="handlePrimaryDeleteAction">
<Button
class="rounded-full text-xs h-6 w-6"
size="icon-sm"
variant="outline"
@click.stop="handlePrimaryDeleteAction">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</div>
</div>
</template>
@@ -123,7 +128,7 @@
</template>
<script setup>
import { Check, Close, Star } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';

38
src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
View File

@@ -15,24 +15,33 @@
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action">
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
<el-button
<Button
size="icon-sm"
variant="outline"
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
:icon="Check"
circle
class="favorites-search-card__action-btn"
@click.stop="selectAvatarWithConfirmation(favorite.id)" />
class="favorites-search-card__action-btn rounded-full"
@click.stop="selectAvatarWithConfirmation(favorite.id)">
<Check
/></Button>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
<TooltipWrapper side="bottom" :content="t('view.favorite.favorite_tooltip')">
<el-button
type="default"
:icon="favoriteExists ? Star : StarFilled"
size="small"
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('avatar', favorite.id)" />
<Button
v-if="favoriteExists"
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full"
@click.stop="showFavoriteDialog('avatar', favorite.id)">
<Star />
</Button>
<Button
else
size="icon-sm"
class="favorites-search-card__action-btn rounded-full"
@click.stop="showFavoriteDialog('avatar', favorite.id)">
<Star />
</Button>
</TooltipWrapper>
</div>
</div>
@@ -41,7 +50,8 @@
</template>
<script setup>
import { Check, Star, StarFilled } from '@element-plus/icons-vue';
import { Check, Star } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

34
src/views/Favorites/components/FavoritesFriendItem.vue
View File

@@ -34,14 +34,13 @@
</div>
<div class="favorites-search-card__action">
<TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
circle
class="favorites-search-card__action-btn"
type="default"
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</TooltipWrapper>
</div>
</div>
@@ -49,12 +48,13 @@
<template v-else>
<div class="favorites-search-card__action">
<TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
size="small"
:icon="Star"
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('friend', favorite.id)" />
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('friend', favorite.id)"
><i class="ri-star-line"></i
></Button>
</TooltipWrapper>
</div>
</template>
@@ -69,9 +69,13 @@
</div>
<div class="favorites-search-card__actions">
<div class="favorites-search-card__action">
<el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
<Button
class="rounded-full text-xs h-6 w-6"
size="icon-sm"
variant="outline"
@click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</div>
</div>
</template>
@@ -79,8 +83,8 @@
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Star } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

6
src/views/Favorites/components/FavoritesMoveDropdown.vue
View File

@@ -1,7 +1,9 @@
<template>
<DropdownMenu v-model:open="moveDropdownOpen" style="margin-left: 5px">
<DropdownMenuTrigger as-child>
<el-button type="default" :icon="Back" size="small" circle></el-button>
<Button class="rounded-full w-6 h-6 text-xs" size="icon-sm" variant="ghost"
><i class="ri-arrow-left-line"></i
></Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="favorites-dropdown">
<span style="font-weight: bold; display: block; text-align: center">
@@ -23,7 +25,7 @@
<script setup>
import { computed, ref } from 'vue';
import { Back } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

60
src/views/Favorites/components/FavoritesWorldItem.vue
View File

@@ -50,14 +50,13 @@
type="world" />
</div>
<div class="favorites-search-card__action">
<el-button
size="small"
circle
class="favorites-search-card__action-btn"
type="default"
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</div>
</div>
</template>
@@ -65,12 +64,13 @@
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action">
<TooltipWrapper side="top" :content="inviteOrLaunchText">
<el-button
size="small"
:icon="Message"
class="favorites-search-card__action-btn"
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="newInstanceSelfInvite(favorite.id)"
circle />
><i class="ri-mail-line"></i
></Button>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
@@ -78,22 +78,22 @@
v-if="showDangerUnfavorite"
side="top"
:content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
:icon="Close"
circle
class="favorites-search-card__action-btn"
type="danger"
@click.stop="handleDeleteFavorite" />
<Button
size="icon-sm"
variant="destructive"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite"
><i class="ri-star-line"></i
></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
type="default"
:icon="Star"
size="small"
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('world', favorite.id)" />
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('world', favorite.id)"
><i class="ri-delete-bin-line"></i
></Button>
</TooltipWrapper>
</div>
</div>
@@ -113,9 +113,13 @@
</div>
<div class="favorites-search-card__actions">
<div class="favorites-search-card__action">
<el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
<Button
class="rounded-full text-xs h-6 w-6"
size="icon-sm"
variant="outline"
@click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</div>
</div>
</template>
@@ -123,7 +127,7 @@
</template>
<script setup>
import { Close, Message, Star } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';

49
src/views/Favorites/components/FavoritesWorldLocalItem.vue
View File

@@ -47,12 +47,13 @@
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action">
<TooltipWrapper side="top" :content="inviteOrLaunchText">
<el-button
size="small"
:icon="Message"
class="favorites-search-card__action-btn"
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="newInstanceSelfInvite(favorite.id)"
circle />
><i class="ri-mail-line"></i
></Button>
</TooltipWrapper>
</div>
<div class="favorites-search-card__action">
@@ -60,22 +61,22 @@
v-if="showDangerUnfavorite"
side="top"
:content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
:icon="Close"
circle
class="favorites-search-card__action-btn"
type="danger"
@click.stop="handleDeleteFavorite" />
<Button
size="icon-sm"
variant="destructive"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite"
><i class="ri-delete-bin-line"></i
></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<el-button
type="default"
:icon="Star"
size="small"
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('world', favorite.id)" />
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('world', favorite.id)"
><i class="ri-star-line"></i
></Button>
</TooltipWrapper>
</div>
</div>
@@ -91,9 +92,13 @@
</div>
<div class="favorites-search-card__actions">
<div class="favorites-search-card__action">
<el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
<Button
class="rounded-full text-xs h-6 w-6"
size="icon-sm"
variant="outline"
@click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</div>
</div>
</template>
@@ -101,7 +106,7 @@
</template>
<script setup>
import { Close, Message, Star } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

30
src/views/Favorites/dialogs/AvatarImportDialog.vue
View File

@@ -12,12 +12,12 @@
{{ avatarImportDialog.progressTotal }}
<el-icon style="margin: 0 5px"><Loading /></el-icon>
</div>
<el-button v-if="avatarImportDialog.loading" size="small" @click="cancelAvatarImport">
<Button v-if="avatarImportDialog.loading" size="sm" variant="secondary" @click="cancelAvatarImport">
{{ t('dialog.avatar_import.cancel') }}
</el-button>
<el-button v-else size="small" :disabled="!avatarImportDialog.input" @click="processAvatarImportList">
</Button>
<Button size="sm" v-else :disabled="!avatarImportDialog.input" @click="processAvatarImportList">
{{ t('dialog.avatar_import.process_list') }}
</el-button>
</Button>
</div>
</div>
<el-input
@@ -75,13 +75,11 @@
</span>
</div>
<div>
<el-button size="small" @click="clearAvatarImportTable">
<Button size="sm" variant="secondary" class="mr-2" @click="clearAvatarImportTable">
{{ t('dialog.avatar_import.clear_table') }}
</el-button>
<el-button
size="small"
type="primary"
style="margin: 5px"
</Button>
<Button
size="sm"
:disabled="
avatarImportTable.data.length === 0 ||
(!avatarImportDialog.avatarImportFavoriteGroup &&
@@ -89,7 +87,7 @@
"
@click="importAvatarImportTable">
{{ t('dialog.avatar_import.import') }}
</el-button>
</Button>
</div>
</div>
<span v-if="avatarImportDialog.importProgress" style="margin: 10px">
@@ -99,9 +97,9 @@
</span>
<br />
<template v-if="avatarImportDialog.errors">
<el-button size="small" @click="avatarImportDialog.errors = ''">
<Button size="sm" variant="secondary" @click="avatarImportDialog.errors = ''">
{{ t('dialog.avatar_import.clear_errors') }}
</el-button>
</Button>
<h2 style="font-weight: bold; margin: 5px 0">
{{ t('dialog.avatar_import.errors') }}
</h2>
@@ -154,7 +152,7 @@
</el-table-column>
<el-table-column :label="t('table.import.action')" width="90" align="right">
<template #default="{ row }">
<el-button text :icon="Close" size="small" @click="deleteItemAvatarImport(row)"> </el-button>
<Button size="icon-sm" variant="ghost" @click="deleteItemAvatarImport(row)"><Trash2 /> </Button>
</template>
</el-table-column>
</DataTable>
@@ -164,7 +162,9 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { Close, Loading } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Loading } from '@element-plus/icons-vue';
import { Trash2 } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

35
src/views/Favorites/dialogs/FriendImportDialog.vue
View File

@@ -12,12 +12,12 @@
{{ friendImportDialog.progressTotal }}
<el-icon style="margin: 0 5px"><Loading /></el-icon>
</div>
<el-button v-if="friendImportDialog.loading" size="small" @click="cancelFriendImport">
<Button v-if="friendImportDialog.loading" size="sm" variant="secondary" @click="cancelFriendImport">
{{ t('dialog.friend_import.cancel') }}
</el-button>
<el-button v-else size="small" :disabled="!friendImportDialog.input" @click="processFriendImportList">
</Button>
<Button size="sm" v-else :disabled="!friendImportDialog.input" @click="processFriendImportList">
{{ t('dialog.friend_import.process_list') }}
</el-button>
</Button>
</div>
</div>
<el-input
@@ -56,17 +56,20 @@
</span>
</div>
<div>
<el-button size="small" :disabled="friendImportTable.data.length === 0" @click="clearFriendImportTable">
<Button
size="sm"
class="mr-2"
variant="secondary"
:disabled="friendImportTable.data.length === 0"
@click="clearFriendImportTable">
{{ t('dialog.friend_import.clear_table') }}
</el-button>
<el-button
size="small"
type="primary"
style="margin: 5px"
</Button>
<Button
size="sm"
:disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup"
@click="importFriendImportTable">
{{ t('dialog.friend_import.import') }}
</el-button>
</Button>
</div>
</div>
<span v-if="friendImportDialog.importProgress" style="margin: 10px">
@@ -77,9 +80,9 @@
</span>
<br />
<template v-if="friendImportDialog.errors">
<el-button size="small" @click="friendImportDialog.errors = ''">
<Button size="sm" variant="secondary" @click="friendImportDialog.errors = ''">
{{ t('dialog.friend_import.clear_errors') }}
</el-button>
</Button>
<h2 style="font-weight: bold; margin: 5px 0">{{ t('dialog.friend_import.errors') }}</h2>
<pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
</template>
@@ -107,7 +110,7 @@
</el-table-column>
<el-table-column :label="t('table.import.action')" width="90" align="right">
<template #default="{ row }">
<el-button text :icon="Close" size="small" @click="deleteItemFriendImport(row)"> </el-button>
<Button size="icon-sm" variant="ghost" @click="deleteItemFriendImport(row)"><Trash2 /></Button>
</template>
</el-table-column>
</DataTable>
@@ -117,7 +120,9 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { Close, Loading } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Loading } from '@element-plus/icons-vue';
import { Trash2 } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

37
src/views/Favorites/dialogs/WorldImportDialog.vue
View File

@@ -13,12 +13,12 @@
{{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }}
<el-icon style="margin: 0 5px"><Loading /></el-icon>
</div>
<el-button v-if="worldImportDialog.loading" size="small" @click="cancelWorldImport">
<Button v-if="worldImportDialog.loading" size="sm" variant="outline" @click="cancelWorldImport">
{{ t('dialog.world_import.cancel') }}
</el-button>
<el-button v-else size="small" :disabled="!worldImportDialog.input" @click="processWorldImportList">
</Button>
<Button size="sm" v-else :disabled="!worldImportDialog.input" @click="processWorldImportList">
{{ t('dialog.world_import.process_list') }}
</el-button>
</Button>
</div>
</div>
<el-input
@@ -75,13 +75,16 @@
</span>
</div>
<div>
<el-button size="small" :disabled="worldImportTable.data.length === 0" @click="clearWorldImportTable">
<Button
size="sm"
variant="secondary"
class="mr-2"
:disabled="worldImportTable.data.length === 0"
@click="clearWorldImportTable">
{{ t('dialog.world_import.clear_table') }}
</el-button>
<el-button
size="small"
type="primary"
style="margin: 5px"
</Button>
<Button
size="sm"
:disabled="
worldImportTable.data.length === 0 ||
(!worldImportDialog.worldImportFavoriteGroup &&
@@ -89,7 +92,7 @@
"
@click="importWorldImportTable">
{{ t('dialog.world_import.import') }}
</el-button>
</Button>
</div>
</div>
<span v-if="worldImportDialog.importProgress" style="margin: 10px">
@@ -99,9 +102,9 @@
</span>
<br />
<template v-if="worldImportDialog.errors">
<el-button size="small" @click="worldImportDialog.errors = ''">
<Button size="sm" variant="secondary" @click="worldImportDialog.errors = ''">
{{ t('dialog.world_import.clear_errors') }}
</el-button>
</Button>
<h2 style="font-weight: bold; margin: 5px 0">
{{ t('dialog.world_import.errors') }}
</h2>
@@ -149,7 +152,9 @@
</el-table-column>
<el-table-column :label="t('table.import.action')" width="90" align="right">
<template #default="{ row }">
<el-button text :icon="Close" size="small" @click="deleteItemWorldImport(row)"></el-button>
<Button size="icon-sm" class="w-6 h-6" variant="ghost" @click="deleteItemWorldImport(row)"
><Trash2
/></Button>
</template>
</el-table-column>
</DataTable>
@@ -159,7 +164,9 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { Close, Loading } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Loading } from '@element-plus/icons-vue';
import { Trash2 } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

25
src/views/FriendList/FriendList.vue
View File

@@ -29,9 +29,9 @@
</div>
<div class="flex items-center">
<div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
<el-button @click="showBulkUnfriendSelectionConfirm">
<Button variant="outline" @click="showBulkUnfriendSelectionConfirm">
{{ t('view.friend_list.bulk_unfriend_selection') }}
</el-button>
</Button>
<!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
</div>
<div class="flex items-center mr-3">
@@ -41,11 +41,13 @@
@update:modelValue="toggleFriendsListBulkUnfriendMode" />
</div>
<div class="flex items-center">
<el-button @click="openChartsTab">
<Button variant="outline" @click="openChartsTab">
{{ t('view.friend_list.load_mutual_friends') }}
</el-button>
</Button>
<el-button @click="friendsListLoadUsers">{{ t('view.friend_list.load') }}</el-button>
<Button variant="outline" @click="friendsListLoadUsers">{{
t('view.friend_list.load')
}}</Button>
</div>
</div>
</div>
@@ -56,11 +58,9 @@
@row-click="selectFriendsListRow">
<el-table-column v-if="friendsListBulkUnfriendMode" width="55">
<template #default="{ row }">
<div class="flex items-center justify-center" @click.stop>
<Checkbox
:model-value="selectedFriends.has(row.id)"
@update:modelValue="toggleFriendSelection(row.id)" />
</div>
<Checkbox
:model-value="selectedFriends.has(row.id)"
@update:modelValue="toggleFriendSelection(row.id)" />
</template>
</el-table-column>
<el-table-column width="20"></el-table-column>
@@ -249,9 +249,9 @@
<span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
</div>
<template #footer>
<el-button @click="cancelFriendsListLoad">
<Button variant="outline" @click="cancelFriendsListLoad">
{{ t('view.friend_list.load_cancel') }}
</el-button>
</Button>
</template>
</el-dialog>
</div>
@@ -260,6 +260,7 @@
<script setup>
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';

20
src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
View File

@@ -29,23 +29,20 @@
</el-table-column>
<el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
<template #default="scope">
<el-button
text
:icon="Edit"
size="small"
@click.stop="showEditAndSendInviteResponseDialog(scope.row)">
</el-button>
<Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
<SquarePen
/></Button>
</template>
</el-table-column>
</DataTable>
<template #footer>
<el-button @click="cancelSendInviteRequestResponse">
<Button variant="secondary" class="mr-2" @click="cancelSendInviteRequestResponse">
{{ t('dialog.invite_request_response_message.cancel') }}
</el-button>
<el-button @click="refreshInviteMessageTableData('requestResponse')">
</Button>
<Button @click="refreshInviteMessageTableData('requestResponse')">
{{ t('dialog.invite_request_response_message.refresh') }}
</el-button>
</Button>
</template>
<EditAndSendInviteResponseDialog
:edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
@@ -61,7 +58,8 @@
</template>
<script setup>
import { Edit } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { SquarePen } from 'lucide-vue-next';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

8
src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
View File

@@ -11,10 +11,10 @@
</div>
<template #footer>
<el-button @click="cancelInviteResponseConfirm">{{ t('dialog.invite_response_message.cancel') }}</el-button>
<el-button type="primary" @click="sendInviteResponseConfirm">{{
t('dialog.invite_response_message.confirm')
}}</el-button>
<Button variant="secondary" class="mr-2" @click="cancelInviteResponseConfirm">{{
t('dialog.invite_response_message.cancel')
}}</Button>
<Button @click="sendInviteResponseConfirm">{{ t('dialog.invite_response_message.confirm') }}</Button>
</template>
</el-dialog>
</template>

19
src/views/Notifications/dialogs/SendInviteResponseDialog.vue
View File

@@ -28,20 +28,20 @@
</el-table-column>
<el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
<template #default="scope">
<el-button
text
:icon="Edit"
size="small"
@click.stop="showEditAndSendInviteResponseDialog(scope.row)" />
<Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
<SquarePen
/></Button>
</template>
</el-table-column>
</DataTable>
<template #footer>
<el-button @click="cancelSendInviteResponse">{{ t('dialog.invite_response_message.cancel') }}</el-button>
<el-button @click="refreshInviteMessageTableData('response')">{{
<Button variant="secondary" class="mr-2" @click="cancelSendInviteResponse">{{
t('dialog.invite_response_message.cancel')
}}</Button>
<Button @click="refreshInviteMessageTableData('response')">{{
t('dialog.invite_response_message.refresh')
}}</el-button>
}}</Button>
</template>
<EditAndSendInviteResponseDialog
:edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
@@ -57,7 +57,8 @@
</template>
<script setup>
import { Edit } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { SquarePen } from 'lucide-vue-next';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

9
src/views/Settings/dialogs/AvatarProviderDialog.vue
View File

@@ -13,18 +13,19 @@
size="small"
style="margin-top: 5px"
@change="saveAvatarProviderList">
<el-button :icon="Delete" @click="removeAvatarProvider(provider)"></el-button>
<Button variant="outline" size="icon" @click="removeAvatarProvider(provider)"><Trash2 /></Button>
</el-input>
<el-button size="small" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
<Button size="sm" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
{{ t('dialog.avatar_database_provider.add_provider') }}
</el-button>
</Button>
</div>
</el-dialog>
</template>
<script setup>
import { Delete } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Trash2 } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

48
src/views/Settings/dialogs/RegistryBackupDialog.vue
View File

@@ -32,43 +32,46 @@
<el-table-column :label="t('dialog.registry_backup.action')" width="90" align="right">
<template #default="scope">
<TooltipWrapper side="top" :content="t('dialog.registry_backup.restore')">
<el-button
text
:icon="Upload"
size="small"
<Button
size="sm"
variant="ghost"
class="button-pd-0"
@click="restoreVrcRegistryBackup(scope.row)"></el-button>
@click="restoreVrcRegistryBackup(scope.row)">
<RotateCcw
/></Button>
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.registry_backup.save_to_file')">
<el-button
text
:icon="Download"
size="small"
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0"
@click="saveVrcRegistryBackupToFile(scope.row)"></el-button>
@click="saveVrcRegistryBackupToFile(scope.row)">
<Download
/></Button>
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.registry_backup.delete')">
<el-button
text
:icon="Delete"
size="small"
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0"
@click="deleteVrcRegistryBackup(scope.row)"></el-button>
@click="deleteVrcRegistryBackup(scope.row)"
><Trash2
/></Button>
</TooltipWrapper>
</template>
</el-table-column>
</DataTable>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">
<el-button type="danger" size="small" @click="deleteVrcRegistry">{{
<Button size="sm" variant="destructive" @click="deleteVrcRegistry">{{
t('dialog.registry_backup.reset')
}}</el-button>
}}</Button>
<div>
<el-button size="small" @click="promptVrcRegistryBackupName">{{
<Button size="sm" variant="outline" @click="promptVrcRegistryBackupName">{{
t('dialog.registry_backup.backup')
}}</el-button>
<el-button size="small" @click="restoreVrcRegistryFromFile">{{
}}</Button>
<Button size="sm" variant="outline" @click="restoreVrcRegistryFromFile">{{
t('dialog.registry_backup.restore_from_file')
}}</el-button>
}}</Button>
</div>
</div>
</div>
@@ -76,8 +79,9 @@
</template>
<script setup>
import { Delete, Download, Upload } from '@element-plus/icons-vue';
import { Download, RotateCcw, Trash2 } from 'lucide-vue-next';
import { ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';

149
src/views/Tools/Gallery.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="gallery-page x-container">
<div class="gallery-page__header">
<el-button text :icon="ArrowLeft" class="gallery-page__back" @click="goBack">
<Button variant="ghost" class="gallery-page__back" @click="goBack">
{{ t('nav_tooltip.tools') }}
</el-button>
</Button>
<span class="header">{{ t('dialog.gallery_icons.header') }}</span>
</div>
<el-progress
@@ -70,19 +70,20 @@
loading="lazy" />
</div>
<div class="float-right" style="margin-top: 5px">
<el-button
type="default"
@click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
size="small"
:icon="Picture"
circle></el-button>
<el-button
type="default"
@click="deleteGalleryImage(image.id)"
size="small"
:icon="Delete"
circle
style="margin-left: 5px"></el-button>
<Button
class="rounded-full mr-2"
size="icon-sm"
variant="outline"
@click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
<Maximize2 />
</Button>
<Button
class="rounded-full"
size="icon-sm"
variant="outline"
@click="deleteGalleryImage(image.id)">
<Trash2 />
</Button>
</div>
</template>
</div>
@@ -140,19 +141,20 @@
loading="lazy" />
</div>
<div class="float-right" style="margin-top: 5px">
<el-button
type="default"
@click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
size="small"
:icon="Picture"
circle></el-button>
<el-button
type="default"
<Button
class="rounded-full mr-2"
size="icon-sm"
variant="outline"
@click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
<Maximize2 />
</Button>
<Button
class="rounded-full"
size="icon-sm"
variant="outline"
@click="deleteVRCPlusIcon(image.id)"
size="small"
:icon="Delete"
circle
style="margin-left: 5px"></el-button></div
><Trash2
/></Button></div
></template>
</div>
</el-tab-pane>
@@ -217,14 +219,13 @@
<span>{{ t('dialog.gallery_icons.emoji_animation_type') }}</span>
</label>
<template v-if="emojiAnimType">
<el-button
type="default"
size="small"
:icon="Link"
style="margin-right: 10px"
<Button
size="sm"
variant="outline"
class="mr-3"
@click="openExternalLink('https://vrcemoji.com')">
{{ t('dialog.gallery_icons.create_animated_emoji') }}
</el-button>
</Button>
<span style="margin-right: 10px">{{ t('dialog.gallery_icons.emoji_animation_fps') }}</span>
<NumberField
v-model="emojiAnimFps"
@@ -295,24 +296,25 @@
<br />
</div>
<div class="float-right" style="margin-top: 5px">
<el-button
type="default"
<Button
class="rounded-full mr-2"
size="icon-sm"
variant="outline"
@click="
showFullscreenImageDialog(
image.versions[image.versions.length - 1].file.url,
getEmojiFileName(image)
)
"
size="small"
:icon="Picture"
circle></el-button>
<el-button
type="default"
@click="deleteEmoji(image.id)"
size="small"
:icon="Delete"
circle
style="margin-left: 5px"></el-button></div
><Maximize2
/></Button>
<Button
class="rounded-full mr-2"
size="icon-sm"
variant="outline"
@click="deleteEmoji(image.id)">
<Trash2
/></Button></div
></template>
</div>
</el-tab-pane>
@@ -367,19 +369,20 @@
loading="lazy" />
</div>
<div class="float-right" style="margin-top: 5px">
<el-button
type="default"
<Button
class="rounded-full mr-2"
size="icon-sm"
variant="outline"
@click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
size="small"
:icon="Picture"
circle></el-button>
<el-button
type="default"
><Maximize2
/></Button>
<Button
class="rounded-full"
size="icon-sm"
variant="outline"
@click="deleteSticker(image.id)"
size="small"
:icon="Delete"
circle
style="margin-left: 5px"></el-button></div
><Trash2
/></Button></div
></template>
</div>
</el-tab-pane>
@@ -463,19 +466,16 @@
<span v-else style="display: block">&nbsp;</span>
</div>
<div class="float-right">
<el-button
type="default"
@click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))"
size="small"
:icon="Picture"
circle></el-button>
<el-button
type="default"
@click="deletePrint(image.id)"
size="small"
:icon="Delete"
circle
style="margin-left: 5px"></el-button>
<Button
class="rounded-full mr-2"
size="icon-sm"
variant="outline"
@click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
<Maximize2
/></Button>
<Button class="rounded-full" size="icon-sm" variant="outline" @click="deletePrint(image.id)">
<Trash2
/></Button>
</div>
</div>
</el-tab-pane>
@@ -531,15 +531,13 @@
<span v-else-if="item.itemType === 'emoji'">{{ t('dialog.gallery_icons.emoji') }}</span>
<span v-else v-text="item.itemTypeLabel"></span>
</div>
<el-button
<Button
size="sm"
v-if="item.itemType === 'bundle'"
type="default"
@click="consumeInventoryBundle(item.id)"
size="small"
:icon="Plus"
class="float-right">
{{ t('dialog.gallery_icons.consume_bundle') }}
</el-button>
</Button>
</div>
</el-tab-pane>
</el-tabs>
@@ -547,7 +545,6 @@
</template>
<script setup>
import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
import {
NumberField,
NumberFieldContent,
@@ -555,7 +552,9 @@
NumberFieldIncrement,
NumberFieldInput
} from '@/components/ui/number-field';
import { Close, Present, Refresh, Upload } from '@element-plus/icons-vue';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { Maximize2, Trash2 } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Checkbox } from '@/components/ui/checkbox';