From 05707163833d55b387b07f88c0895811101fa468 Mon Sep 17 00:00:00 2001 From: Map1en_ Date: Mon, 16 Dec 2024 18:52:08 +0900 Subject: [PATCH 1/6] ui: Enhancement (#1033) --- html/src/app.scss | 17 ++++- html/src/classes/uiComponents.js | 2 +- html/src/mixins/dialogs/avatarDialog.pug | 2 +- html/src/mixins/dialogs/feedFilters.pug | 4 +- html/src/mixins/dialogs/images.pug | 5 +- html/src/mixins/dialogs/settings.pug | 40 ++++++----- html/src/mixins/dialogs/userDialog.pug | 88 +++++++++++++----------- html/src/mixins/tabs/feed.pug | 4 +- html/src/mixins/tabs/friendLog.pug | 4 +- html/src/mixins/tabs/friendsList.pug | 2 +- html/src/mixins/tabs/gameLog.pug | 2 +- html/src/mixins/tabs/moderation.pug | 4 +- html/src/mixins/tabs/notifications.pug | 4 +- html/src/mixins/tabs/playerList.pug | 2 +- html/src/mixins/tabs/profile.pug | 2 +- html/src/mixins/tabs/search.pug | 43 +++++++----- 16 files changed, 130 insertions(+), 95 deletions(-) diff --git a/html/src/app.scss b/html/src/app.scss index 43e2c61d7..5926b9bcc 100644 --- a/html/src/app.scss +++ b/html/src/app.scss @@ -749,7 +749,7 @@ i.x-status-icon.red { .toggle-list .toggle-name { display: inline-block; min-width: 190px; - padding-right: 5px; + padding-right: 10px; text-align: right; } @@ -914,3 +914,18 @@ i.x-status-icon.red { .el-pagination .el-input .el-input__icon { line-height: 22px; } + +// User dialog memo: tag line-height +.el-dialog__body .el-tag--mini { + line-height: 17px; +} + +// User dialog memo: input count background color +.x-friend-item:hover .el-input__count { + background: #f0f0f0; +} + +// Align the left page with the right friend bar +.x-app > .x-container { + padding-top: 15px; +} diff --git a/html/src/classes/uiComponents.js b/html/src/classes/uiComponents.js index c6a6d6ef2..14353ede5 100644 --- a/html/src/classes/uiComponents.js +++ b/html/src/classes/uiComponents.js @@ -73,7 +73,7 @@ export default class extends baseClass { '' + '{{ text }}' + '({{ groupName }})' + - '' + + '' + '', props: { location: String, diff --git a/html/src/mixins/dialogs/avatarDialog.pug b/html/src/mixins/dialogs/avatarDialog.pug index 157a47c8f..13d34904a 100644 --- a/html/src/mixins/dialogs/avatarDialog.pug +++ b/html/src/mixins/dialogs/avatarDialog.pug @@ -74,7 +74,7 @@ mixin avatarDialog() .x-friend-list .x-friend-item(style="width:100%;cursor:default") .detail - span.name {{ $t('dialog.avatar.info.memo') }} + span.name(style="margin-bottom:5px") {{ $t('dialog.avatar.info.memo') }} el-input.extra(v-model="avatarDialog.memo" @change="onAvatarMemoChange" size="mini" type="textarea" :rows="2" :autosize="{minRows: 1, maxRows: 20}" :placeholder="$t('dialog.avatar.info.memo_placeholder')" resize="none") .x-friend-item(style="width:100%;cursor:default") .detail diff --git a/html/src/mixins/dialogs/feedFilters.pug b/html/src/mixins/dialogs/feedFilters.pug index 23a967bef..dd28c08c0 100644 --- a/html/src/mixins/dialogs/feedFilters.pug +++ b/html/src/mixins/dialogs/feedFilters.pug @@ -499,5 +499,5 @@ mixin feedFilters() el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }} el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }} template(#footer) - el-button(type="small" @click="resetSharedFeedFilters") {{ $t('dialog.shared_feed_filters.reset') }} - el-button(size="small" @click="wristFeedFiltersDialog.visible = false") {{ $t('dialog.shared_feed_filters.close') }} + el-button(size="small" @click="resetSharedFeedFilters") {{ $t('dialog.shared_feed_filters.reset') }} + el-button(size="small" type="primary" @click="wristFeedFiltersDialog.visible = false") {{ $t('dialog.shared_feed_filters.close') }} diff --git a/html/src/mixins/dialogs/images.pug b/html/src/mixins/dialogs/images.pug index 414b347f3..77a54ba3d 100644 --- a/html/src/mixins/dialogs/images.pug +++ b/html/src/mixins/dialogs/images.pug @@ -55,6 +55,7 @@ mixin images() //- dialog: full screen image el-dialog.x-dialog(ref="fullscreenImageDialog" :before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" :visible.sync="fullscreenImageDialog.visible" top="3vh" width="97vw") - el-button(@click="copyImageUrl(fullscreenImageDialog.imageUrl)" size="mini" icon="el-icon-s-order" circle) - el-button(type="default" size="mini" icon="el-icon-download" circle @click="downloadAndSaveImage(fullscreenImageDialog.imageUrl, fullscreenImageDialog.fileName)" style="margin-left:5px") + div(style="margin:0 0 5px 5px") + el-button(@click="copyImageUrl(fullscreenImageDialog.imageUrl)" size="mini" icon="el-icon-s-order" circle) + el-button(type="default" size="mini" icon="el-icon-download" circle @click="downloadAndSaveImage(fullscreenImageDialog.imageUrl, fullscreenImageDialog.fileName)" style="margin-left:5px") img(v-lazy="fullscreenImageDialog.imageUrl" style="width:100%;height:100vh;object-fit:contain") diff --git a/html/src/mixins/dialogs/settings.pug b/html/src/mixins/dialogs/settings.pug index 6c49ada0b..40a222b64 100644 --- a/html/src/mixins/dialogs/settings.pug +++ b/html/src/mixins/dialogs/settings.pug @@ -12,17 +12,17 @@ mixin settings() span GB el-tooltip(placement="top" :content="$t('dialog.config_json.refresh')" :disabled="hideTooltips") el-button(type="default" :loading="VRChatCacheSizeLoading" @click="getVRChatCacheSize" size="small" icon="el-icon-refresh" circle style="margin-left:5px") - br - span {{ $t('dialog.config_json.delete_all_cache') }} - el-button(size="small" style="margin-left:5px" icon="el-icon-delete" @click="showDeleteAllVRChatCacheConfirm()") {{ $t('dialog.config_json.delete_cache') }} - br - span {{ $t('dialog.config_json.delete_old_cache') }} - el-button(size="small" style="margin-left:5px" icon="el-icon-folder-delete" @click="sweepVRChatCache()") {{ $t('dialog.config_json.sweep_cache') }} - br + div(style="margin-top:10px") + span(style="margin-right:5px") {{ $t('dialog.config_json.delete_all_cache') }} + el-button(size="small" style="margin-left:5px" icon="el-icon-delete" @click="showDeleteAllVRChatCacheConfirm()") {{ $t('dialog.config_json.delete_cache') }} + div(style="margin-top:10px") + span(style="margin-right:5px") {{ $t('dialog.config_json.delete_old_cache') }} + el-button(size="small" style="margin-left:5px" icon="el-icon-folder-delete" @click="sweepVRChatCache()") {{ $t('dialog.config_json.sweep_cache') }} div(style="display:inline-block;margin-top:10px" v-for="(item, value) in VRChatConfigList" :key="value") span(v-text="item.name" style="word-break:keep-all") |: - el-input(v-model="VRChatConfigFile[value]" :placeholder="item.default" size="mini" :type="item.type?item.type:'text'" :min="item.min" :max="item.max") + el-input(v-model="VRChatConfigFile[value]" :placeholder="item.default" size="mini" :type="item.type?item.type:'text'" :min="item.min" :max="item.max" style="margin-top:5px") + br div(style="display:inline-block;margin-top:10px") span {{ $t('dialog.config_json.camera_resolution') }} br @@ -52,9 +52,12 @@ mixin settings() el-checkbox(v-model="VRChatConfigFile.picture_output_split_by_date" style="margin-top:5px;display:block" :checked="true") {{ $t('dialog.config_json.picture_sort_by_date') }} el-checkbox(v-model="VRChatConfigFile.disableRichPresence" style="margin-top:5px;display:block") {{ $t('dialog.config_json.disable_discord_presence') }} template(#footer) - el-button(size="small" @click="openExternalLink('https://docs.vrchat.com/docs/configuration-file')") {{ $t('dialog.config_json.vrchat_docs') }} - el-button(size="small" @click="VRChatConfigDialog.visible = false") {{ $t('dialog.config_json.cancel') }} - el-button(type="primary" size="small" :disabled="VRChatConfigDialog.loading" @click="saveVRChatConfigFile") {{ $t('dialog.config_json.save') }} + div(style="display:flex;align-items:center;justify-content:space-between") + div + el-button(size="small" @click="openExternalLink('https://docs.vrchat.com/docs/configuration-file')") {{ $t('dialog.config_json.vrchat_docs') }} + div + el-button(size="small" @click="VRChatConfigDialog.visible = false") {{ $t('dialog.config_json.cancel') }} + el-button(size="small" type="primary" :disabled="VRChatConfigDialog.loading" @click="saveVRChatConfigFile") {{ $t('dialog.config_json.save') }} //- dialog: YouTube Api Dialog el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="youTubeApiDialog" :visible.sync="youTubeApiDialog.visible" :title="$t('dialog.youtube_api.header')" width="400px") @@ -150,13 +153,10 @@ mixin settings() //- dialog: Registry Auto Backup el-dialog.x-dialog(:before-close="beforeDialogClose" @closed="clearVrcRegistryDialog" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="registryBackupDialog" :visible.sync="registryBackupDialog.visible" :title="$t('dialog.registry_backup.header')" width="600px") div(v-if="registryBackupDialog.visible" style="margin-top:10px") - div.options-container - div.options-container-item - span.name {{ $t('dialog.registry_backup.auto_backup') }} + div.options-container(style="padding:0") + div.options-container-item(style="display:flex;align-items:center;justify-content:space-between") + span.name(style="margin-right:24px") {{ $t('dialog.registry_backup.auto_backup') }} el-switch(v-model="vrcRegistryAutoBackup" @change="saveVrcRegistryAutoBackup") - el-button(@click="promptVrcRegistryBackupName" size="small") {{ $t('dialog.registry_backup.backup') }} - el-button(@click="AppApi.OpenVrcRegJsonFileDialog()" size="small") {{ $t('dialog.registry_backup.restore_from_file') }} - el-button(@click="deleteVrcRegistry" size="small") {{ $t('dialog.registry_backup.reset') }} data-tables(v-bind="registryBackupTable" style="margin-top:10px") el-table-column(:label="$t('dialog.registry_backup.name')" prop="name") el-table-column(:label="$t('dialog.registry_backup.date')" prop="date") @@ -170,6 +170,12 @@ mixin settings() el-button(type="text" icon="el-icon-download" size="mini" @click="saveVrcRegistryBackupToFile(scope.row)") el-tooltip(placement="top" :content="$t('dialog.registry_backup.delete')" :disabled="hideTooltips") el-button(type="text" icon="el-icon-delete" size="mini" @click="deleteVrcRegistryBackup(scope.row)") + div(style="display:flex;align-items:center;justify-content:space-between;margin-top:10px") + el-button(type="danger" @click="deleteVrcRegistry" size="small") {{ $t('dialog.registry_backup.reset') }} + div + el-button(@click="promptVrcRegistryBackupName" size="small") {{ $t('dialog.registry_backup.backup') }} + el-button(@click="AppApi.OpenVrcRegJsonFileDialog()" size="small") {{ $t('dialog.registry_backup.restore_from_file') }} + //- dialog: Enable primary password el-dialog.x-dialog( diff --git a/html/src/mixins/dialogs/userDialog.pug b/html/src/mixins/dialogs/userDialog.pug index 844712174..14b9bbf74 100644 --- a/html/src/mixins/dialogs/userDialog.pug +++ b/html/src/mixins/dialogs/userDialog.pug @@ -193,7 +193,7 @@ mixin userDialog() avatar-info(:imageurl="userDialog.ref.currentAvatarImageUrl" :userid="userDialog.id" :avatartags="userDialog.ref.currentAvatarTags") .x-friend-item(style="width:100%;cursor:default") .detail - span.name {{ $t('dialog.user.info.represented_group') }} + span.name(style="margin-bottom:5px") {{ $t('dialog.user.info.represented_group') }} .extra(v-if="userDialog.representedGroup?.isRepresenting") div(style="display:inline-block;flex:none;margin-right:5px") el-popover(placement="right" width="500px" trigger="click") @@ -318,20 +318,22 @@ mixin userDialog() el-dropdown-item(@click.native="copyUserURL(userDialog.id)") {{ $t('dialog.user.info.copy_url') }} el-dropdown-item(@click.native="copyUserDisplayName(userDialog.ref.displayName)") {{ $t('dialog.user.info.copy_display_name') }} el-tab-pane(:label="$t('dialog.user.groups.header')") - el-button(type="default" :loading="userDialog.isGroupsLoading" @click="getUserGroups(userDialog.id)" size="mini" icon="el-icon-refresh" circle) - span(style="margin-left:5px") {{ $t('dialog.user.groups.total_count', { count: userGroups.groups.length }) }} - template(v-if="userDialogGroupEditMode") - span(style="margin-left:10px;color:#909399;font-size:10px") {{ $t('dialog.user.groups.hold_shift') }} - div(style="float:right") - template(v-if="!userDialogGroupEditMode") - span(style="margin-right:5px") {{ $t('dialog.user.groups.sort_by') }} - el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="userDialog.isGroupsLoading") - el-button(size="mini") - span {{ userDialog.groupSorting.name }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - el-dropdown-item(:disabled="item === userDialogGroupSortingOptions.inGame && userDialog.id !== API.currentUser.id" v-for="(item) in userDialogGroupSortingOptions" v-text="item.name" @click.native="setUserDialogGroupSorting(item)") - el-button(v-if="userDialogGroupEditMode" size="small" @click="exitEditModeCurrentUserGroups" icon="el-icon-edit" style="margin-right:5px") {{ $t('dialog.user.groups.exit_edit_mode') }} - el-button(v-else-if="API.currentUser.id === userDialog.id" size="small" @click="editModeCurrentUserGroups" icon="el-icon-edit" style="margin-right:5px") {{ $t('dialog.user.groups.edit_mode') }} + div(style="display:flex;align-items:center;justify-content:space-between") + div(style="display:flex;align-items:center") + el-button(type="default" :loading="userDialog.isGroupsLoading" @click="getUserGroups(userDialog.id)" size="mini" icon="el-icon-refresh" circle) + span(style="margin-left:5px") {{ $t('dialog.user.groups.total_count', { count: userGroups.groups.length }) }} + template(v-if="userDialogGroupEditMode") + span(style="margin-left:10px;color:#909399;font-size:10px") {{ $t('dialog.user.groups.hold_shift') }} + div(style="display:flex;align-items:center;") + template(v-if="!userDialogGroupEditMode") + span(style="margin-right:5px") {{ $t('dialog.user.groups.sort_by') }} + el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="userDialog.isGroupsLoading") + el-button(size="mini") + span {{ userDialog.groupSorting.name }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + el-dropdown-item(:disabled="item === userDialogGroupSortingOptions.inGame && userDialog.id !== API.currentUser.id" v-for="(item) in userDialogGroupSortingOptions" v-text="item.name" @click.native="setUserDialogGroupSorting(item)") + el-button(v-if="userDialogGroupEditMode" size="small" @click="exitEditModeCurrentUserGroups" icon="el-icon-edit" style="margin-right:5px;height:29px;padding:7px 15px;") {{ $t('dialog.user.groups.exit_edit_mode') }} + el-button(v-else-if="API.currentUser.id === userDialog.id" size="small" @click="editModeCurrentUserGroups" icon="el-icon-edit" style="margin-right:5px;height:29px;padding: 7px 15px;") {{ $t('dialog.user.groups.edit_mode') }} div(v-loading="userDialog.isGroupsLoading" style="margin-top:10px") template(v-if="userDialogGroupEditMode") .x-friend-list(style="margin-top:10px;margin-bottom:15px;max-height:unset") @@ -439,21 +441,23 @@ mixin userDialog() i.el-icon-view(style="margin-right:5px") span ({{ group.memberCount }}) el-tab-pane(:label="$t('dialog.user.worlds.header')") - el-button(type="default" :loading="userDialog.isWorldsLoading" @click="refreshUserDialogWorlds()" size="mini" icon="el-icon-refresh" circle) - span(style="margin-left:5px") {{ $t('dialog.user.worlds.total_count', { count: userDialog.worlds.length }) }} - div(style="float:right") - span(style="margin-right:5px") {{ $t('dialog.user.worlds.sort_by') }} - el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="userDialog.isWorldsLoading") - el-button(size="mini") - span {{ userDialog.worldSorting.name }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - el-dropdown-item(v-for="(item) in userDialogWorldSortingOptions" v-text="item.name" @click.native="setUserDialogWorldSorting(item)") - span(style="margin-right:5px") {{ $t('dialog.user.worlds.order_by') }} - el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="userDialog.isWorldsLoading") - el-button(size="mini") - span {{ userDialog.worldOrder.name }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - el-dropdown-item(v-for="(item) in userDialogWorldOrderOptions" v-text="item.name" @click.native="setUserDialogWorldOrder(item)") + div(style="display:flex;align-items:center;justify-content:space-between") + div(style="display:flex;align-items:center;") + el-button(type="default" :loading="userDialog.isWorldsLoading" @click="refreshUserDialogWorlds()" size="mini" icon="el-icon-refresh" circle) + span(style="margin-left:5px") {{ $t('dialog.user.worlds.total_count', { count: userDialog.worlds.length }) }} + div(style="display:flex;align-items:center") + span(style="margin-right:5px") {{ $t('dialog.user.worlds.sort_by') }} + el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="userDialog.isWorldsLoading") + el-button(size="mini") + span {{ userDialog.worldSorting.name }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + el-dropdown-item(v-for="(item) in userDialogWorldSortingOptions" v-text="item.name" @click.native="setUserDialogWorldSorting(item)") + span(style="margin:0 5px") {{ $t('dialog.user.worlds.order_by') }} + el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="userDialog.isWorldsLoading") + el-button(size="mini") + span {{ userDialog.worldOrder.name }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + el-dropdown-item(v-for="(item) in userDialogWorldOrderOptions" v-text="item.name" @click.native="setUserDialogWorldOrder(item)") .x-friend-list(v-loading="userDialog.isWorldsLoading" style="margin-top:10px;min-height:60px") .x-friend-item(v-for="world in userDialog.worlds" :key="world.id" @click="showWorldDialog(world.id)" class="x-friend-item-border") .avatar @@ -478,16 +482,20 @@ mixin userDialog() span.name(v-text="world.name") span.extra(v-if="world.occupants") ({{ world.occupants }}) el-tab-pane(:label="$t('dialog.user.avatars.header')") - el-button(v-if="userDialog.ref.id === API.currentUser.id" type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle) - el-button(v-else type="default" :loading="userDialog.isAvatarsLoading" @click="setUserDialogAvatarsRemote(userDialog.id)" size="mini" icon="el-icon-refresh" circle) - span(style="margin-left:5px") {{ $t('dialog.user.avatars.total_count', { count: userDialogAvatars.length }) }} - el-radio-group(v-if="userDialog.ref.id === API.currentUser.id" v-model="userDialog.avatarSorting" size="mini" style="margin-left:30px;margin-right:30px" @change="changeUserDialogAvatarSorting") - el-radio(label="name") {{ $t('dialog.user.avatars.sort_by_name') }} - el-radio(label="update") {{ $t('dialog.user.avatars.sort_by_update') }} - el-radio-group(v-if="userDialog.ref.id === API.currentUser.id" v-model="userDialog.avatarReleaseStatus" size="mini" style="margin-left:30px") - el-radio(label="all") {{ $t('dialog.user.avatars.all') }} - el-radio(label="public") {{ $t('dialog.user.avatars.public') }} - el-radio(label="private") {{ $t('dialog.user.avatars.private') }} + div(style="display:flex;align-items:center;justify-content:space-between") + div(style="display:flex;align-items:center") + el-button(v-if="userDialog.ref.id === API.currentUser.id" type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle) + el-button(v-else type="default" :loading="userDialog.isAvatarsLoading" @click="setUserDialogAvatarsRemote(userDialog.id)" size="mini" icon="el-icon-refresh" circle) + span(style="margin-left:5px") {{ $t('dialog.user.avatars.total_count', { count: userDialogAvatars.length }) }} + div + el-radio-group(v-if="userDialog.ref.id === API.currentUser.id" v-model="userDialog.avatarSorting" size="mini" @change="changeUserDialogAvatarSorting") + el-radio(label="name") {{ $t('dialog.user.avatars.sort_by_name') }} + el-radio(label="update") {{ $t('dialog.user.avatars.sort_by_update') }} + el-divider(direction="vertical") + el-radio-group(v-if="userDialog.ref.id === API.currentUser.id" v-model="userDialog.avatarReleaseStatus" size="mini") + el-radio(label="all") {{ $t('dialog.user.avatars.all') }} + el-radio(label="public") {{ $t('dialog.user.avatars.public') }} + el-radio(label="private") {{ $t('dialog.user.avatars.private') }} .x-friend-list(style="margin-top:10px;min-height:60px") .x-friend-item(v-for="avatar in userDialogAvatars" @click="showAvatarDialog(avatar.id)" class="x-friend-item-border") .avatar diff --git a/html/src/mixins/tabs/feed.pug b/html/src/mixins/tabs/feed.pug index c0b74d460..3da51eb61 100644 --- a/html/src/mixins/tabs/feed.pug +++ b/html/src/mixins/tabs/feed.pug @@ -6,7 +6,7 @@ mixin feedTab() div(style="flex:none;margin-right:10px") el-tooltip(placement="bottom" :content="$t('view.feed.favorites_only_tooltip')" :disabled="hideTooltips") el-switch(v-model="feedTable.vip" @change="feedTableLookup" active-color="#13ce66") - el-select(v-model="feedTable.filter" @change="feedTableLookup" multiple clearable collapse-tags style="flex:1" :placeholder="$t('view.feed.filter_placeholder')") + el-select(v-model="feedTable.filter" @change="feedTableLookup" multiple clearable style="flex:1" :placeholder="$t('view.feed.filter_placeholder')") el-option(v-once v-for="type in ['GPS', 'Online', 'Offline', 'Status', 'Avatar', 'Bio']" :key="type" :label="type" :value="type") el-input(v-model="feedTable.search" :placeholder="$t('view.feed.search_placeholder')" @keyup.native.13="feedTableLookup" @change="feedTableLookup" clearable style="flex:none;width:150px;margin:0 10px") el-table-column(type="expand" width="20") @@ -16,7 +16,7 @@ mixin feedTab() location(v-if="scope.row.previousLocation" :location="scope.row.previousLocation") el-tag(type="info" effect="plain" size="mini" style="margin-left:5px") {{ timeToText(scope.row.time) }} br - span + span(style="margin-right:5px") i.el-icon-right location(v-if="scope.row.location" :location="scope.row.location" :hint="scope.row.worldName" :grouphint="scope.row.groupName") template(v-else-if="scope.row.type === 'Offline'") diff --git a/html/src/mixins/tabs/friendLog.pug b/html/src/mixins/tabs/friendLog.pug index 9788834d8..297d473e7 100644 --- a/html/src/mixins/tabs/friendLog.pug +++ b/html/src/mixins/tabs/friendLog.pug @@ -1,9 +1,9 @@ mixin friendLogTab() - .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'friendLog'" v-if="$refs.menu && $refs.menu.activeIndex === 'friendLog'") + .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'friendLog'") data-tables(v-bind="friendLogTable" ref="friendLogTableRef") template(#tool) div(style="margin:0 0 10px;display:flex;align-items:center") - el-select(v-model="friendLogTable.filters[0].value" @change="saveTableFilters" multiple clearable collapse-tags style="flex:1" :placeholder="$t('view.friend_log.filter_placeholder')") + el-select(v-model="friendLogTable.filters[0].value" @change="saveTableFilters" multiple clearable style="flex:1" :placeholder="$t('view.friend_log.filter_placeholder')") el-option(v-once v-for="type in ['Friend', 'Unfriend', 'FriendRequest', 'CancelFriendRequest', 'DisplayName', 'TrustLevel']" :key="type" :label="type" :value="type") el-input(v-model="friendLogTable.filters[1].value" :placeholder="$t('view.friend_log.search_placeholder')" style="flex:none;width:150px;margin-left:10px") el-table-column(:label="$t('table.friendLog.date')" prop="created_at" sortable="custom" width="200") diff --git a/html/src/mixins/tabs/friendsList.pug b/html/src/mixins/tabs/friendsList.pug index d06989db3..8158707c0 100644 --- a/html/src/mixins/tabs/friendsList.pug +++ b/html/src/mixins/tabs/friendsList.pug @@ -1,5 +1,5 @@ mixin friendsListTab() - .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'friendsList'" v-if="$refs.menu && $refs.menu.activeIndex === 'friendsList'") + .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'friendsList'") div.options-container(style="margin-top:0") span.header {{ $t('view.friend_list.header') }} div(style="float:right;font-size:13px") diff --git a/html/src/mixins/tabs/gameLog.pug b/html/src/mixins/tabs/gameLog.pug index 6a724e60e..6083a3bff 100644 --- a/html/src/mixins/tabs/gameLog.pug +++ b/html/src/mixins/tabs/gameLog.pug @@ -6,7 +6,7 @@ mixin gameLogTab() div(style="flex:none;margin-right:10px") el-tooltip(placement="bottom" :content="$t('view.feed.favorites_only_tooltip')" :disabled="hideTooltips") el-switch(v-model="gameLogTable.vip" @change="gameLogTableLookup" active-color="#13ce66") - el-select(v-model="gameLogTable.filter" @change="gameLogTableLookup" multiple clearable collapse-tags style="flex:1" :placeholder="$t('view.game_log.filter_placeholder')") + el-select(v-model="gameLogTable.filter" @change="gameLogTableLookup" multiple clearable style="flex:1" :placeholder="$t('view.game_log.filter_placeholder')") el-option(v-once v-for="type in ['Location', 'OnPlayerJoined', 'OnPlayerLeft', 'PortalSpawn', 'VideoPlay', 'Event', 'External', 'StringLoad', 'ImageLoad']" :key="type" :label="type" :value="type") el-input(v-model="gameLogTable.search" :placeholder="$t('view.game_log.search_placeholder')" @keyup.native.13="gameLogTableLookup" @change="gameLogTableLookup" clearable style="flex:none;width:150px;margin:0 10px") el-table-column(:label="$t('table.gameLog.date')" prop="created_at" sortable="custom" width="120") diff --git a/html/src/mixins/tabs/moderation.pug b/html/src/mixins/tabs/moderation.pug index a2af8b52b..674f82ba4 100644 --- a/html/src/mixins/tabs/moderation.pug +++ b/html/src/mixins/tabs/moderation.pug @@ -1,9 +1,9 @@ mixin moderationTab() - .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'moderation'" v-if="$refs.menu && $refs.menu.activeIndex === 'moderation'") + .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'moderation'") data-tables(v-bind="playerModerationTable" ref="playerModerationTableRef" v-loading="API.isPlayerModerationsLoading") template(#tool) div(style="margin:0 0 10px;display:flex;align-items:center") - el-select(v-model="playerModerationTable.filters[0].value" @change="saveTableFilters" multiple clearable collapse-tags style="flex:1" :placeholder="$t('view.moderation.filter_placeholder')") + el-select(v-model="playerModerationTable.filters[0].value" @change="saveTableFilters" multiple clearable style="flex:1" :placeholder="$t('view.moderation.filter_placeholder')") el-option(v-once v-for="type in ['block', 'unblock', 'mute', 'unmute', 'interactOn', 'interactOff', 'muteChat']" :key="type" :label="type" :value="type") el-input(v-model="playerModerationTable.filters[1].value" :placeholder="$t('view.moderation.search_placeholder')" style="flex:none;width:150px;margin:0 10px") el-tooltip(placement="bottom" :content="$t('view.moderation.refresh_tooltip')" :disabled="hideTooltips") diff --git a/html/src/mixins/tabs/notifications.pug b/html/src/mixins/tabs/notifications.pug index 1fd10ffc8..3b15a5697 100644 --- a/html/src/mixins/tabs/notifications.pug +++ b/html/src/mixins/tabs/notifications.pug @@ -1,9 +1,9 @@ mixin notificationsTab() - .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'notification'" v-if="$refs.menu && $refs.menu.activeIndex === 'notification'" v-loading="API.isNotificationsLoading") + .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'notification'" v-loading="API.isNotificationsLoading") data-tables(v-bind="notificationTable" ref="notificationTableRef" class="notification-table") template(#tool) div(style="margin:0 0 10px;display:flex;align-items:center") - el-select(v-model="notificationTable.filters[0].value" @change="saveTableFilters" multiple clearable collapse-tags style="flex:1" :placeholder="$t('view.notification.filter_placeholder')") + el-select(v-model="notificationTable.filters[0].value" @change="saveTableFilters" multiple clearable style="flex:1" :placeholder="$t('view.notification.filter_placeholder')") el-option(v-once v-for="type in ['requestInvite', 'invite', 'requestInviteResponse', 'inviteResponse', 'friendRequest', 'ignoredFriendRequest', 'message', 'boop', 'groupChange', 'group.announcement', 'group.informative', 'group.invite', 'group.joinRequest', 'group.transfer', 'group.queueReady', 'moderation.warning.group', 'moderation.report.closed', 'instance.closed']" :key="type" :label="type" :value="type") el-input(v-model="notificationTable.filters[1].value" :placeholder="$t('view.notification.search_placeholder')" style="flex:none;width:150px;margin:0 10px") el-tooltip(placement="bottom" :content="$t('view.notification.refresh_tooltip')" :disabled="hideTooltips") diff --git a/html/src/mixins/tabs/playerList.pug b/html/src/mixins/tabs/playerList.pug index c0ca6e8ca..39e550554 100644 --- a/html/src/mixins/tabs/playerList.pug +++ b/html/src/mixins/tabs/playerList.pug @@ -1,5 +1,5 @@ mixin playerListTab() - .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'playerList'") + .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'playerList'" style="padding-top:5px") div(style="display:flex;flex-direction:column;height:100%") div(v-if="currentInstanceWorld.ref.id" style="display:flex") el-popover(placement="right" width="500px" trigger="click" style="height:120px") diff --git a/html/src/mixins/tabs/profile.pug b/html/src/mixins/tabs/profile.pug index 3d2e65830..29d088e5a 100644 --- a/html/src/mixins/tabs/profile.pug +++ b/html/src/mixins/tabs/profile.pug @@ -1,5 +1,5 @@ mixin profileTab() - .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'profile'" v-if="$refs.menu && $refs.menu.activeIndex === 'profile'") + .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'profile'") div.options-container(style="margin-top:0") span.header {{ $t('view.profile.profile.header') }} .x-friend-list(style="margin-top:10px") diff --git a/html/src/mixins/tabs/search.pug b/html/src/mixins/tabs/search.pug index 2baedc6e3..9a29fcd63 100644 --- a/html/src/mixins/tabs/search.pug +++ b/html/src/mixins/tabs/search.pug @@ -37,25 +37,30 @@ mixin searchTab() el-button(:disabled="!searchWorldParams.offset" @click="moreSearchWorld(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }} el-button(:disabled="searchWorldResults.length < 10" @click="moreSearchWorld(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }} el-tab-pane(:label="$t('view.search.avatar.header')" v-loading="isSearchAvatarLoading" style="min-height:60px") - el-dropdown(v-if="avatarRemoteDatabaseProviderList.length > 1" trigger="click" @click.native.stop size="mini" style="margin-right:5px") - el-button(size="small") {{ $t('view.search.avatar.search_provider') }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - el-dropdown-item(v-for="provider in avatarRemoteDatabaseProviderList" :key="provider" @click.native="setAvatarProvider(provider)") #[i.el-icon-check.el-icon--left(v-if="provider === avatarRemoteDatabaseProvider")] {{ provider }} - el-tooltip(placement="bottom" :content="$t('view.search.avatar.refresh_tooltip')" :disabled="hideTooltips") - el-button(type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle) - span(style="font-size:14px;margin-left:5px;margin-right:5px") {{ $t("view.search.avatar.result_count", { count: searchAvatarResults.length }) }} - el-radio-group(v-model="searchAvatarFilter" size="mini" style="margin:5px;display:block" @change="searchAvatar") - el-radio(label="all") {{ $t('view.search.avatar.all') }} - el-radio(label="public") {{ $t('view.search.avatar.public') }} - el-radio(label="private") {{ $t('view.search.avatar.private') }} - el-radio-group(v-model="searchAvatarFilterRemote" size="mini" style="margin:5px;display:block" @change="searchAvatar") - el-radio(label="all") {{ $t('view.search.avatar.all') }} - el-radio(label="local") {{ $t('view.search.avatar.local') }} - el-radio(label="remote" :disabled="!avatarRemoteDatabase") {{ $t('view.search.avatar.remote') }} - el-radio-group(:disabled="searchAvatarFilterRemote !== 'local'" v-model="searchAvatarSort" size="mini" style="margin:5px;display:block" @change="searchAvatar") - el-radio(label="name") {{ $t('view.search.avatar.sort_name') }} - el-radio(label="update") {{ $t('view.search.avatar.sort_update') }} - el-radio(label="created") {{ $t('view.search.avatar.sort_created') }} + div(style="display:flex;align-items:center;justify-content:space-between;") + div(style="display:flex;align-items:center;") + el-dropdown(v-if="avatarRemoteDatabaseProviderList.length > 1" trigger="click" @click.native.stop size="mini" style="margin-right:5px") + el-button(size="small") {{ $t('view.search.avatar.search_provider') }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + el-dropdown-item(v-for="provider in avatarRemoteDatabaseProviderList" :key="provider" @click.native="setAvatarProvider(provider)") #[i.el-icon-check.el-icon--left(v-if="provider === avatarRemoteDatabaseProvider")] {{ provider }} + el-tooltip(placement="bottom" :content="$t('view.search.avatar.refresh_tooltip')" :disabled="hideTooltips") + el-button(type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle) + span(style="font-size:14px;margin-left:5px;margin-right:5px") {{ $t("view.search.avatar.result_count", { count: searchAvatarResults.length }) }} + div(style="display:flex;align-items:center;") + el-radio-group(v-model="searchAvatarFilter" size="mini" style="margin:5px;display:block" @change="searchAvatar") + el-radio(label="all") {{ $t('view.search.avatar.all') }} + el-radio(label="public") {{ $t('view.search.avatar.public') }} + el-radio(label="private") {{ $t('view.search.avatar.private') }} + el-divider(direction="vertical") + el-radio-group(v-model="searchAvatarFilterRemote" size="mini" style="margin:5px;display:block" @change="searchAvatar") + el-radio(label="all") {{ $t('view.search.avatar.all') }} + el-radio(label="local") {{ $t('view.search.avatar.local') }} + el-radio(label="remote" :disabled="!avatarRemoteDatabase") {{ $t('view.search.avatar.remote') }} + div(style="display:flex;justify-content:end;") + el-radio-group(:disabled="searchAvatarFilterRemote !== 'local'" v-model="searchAvatarSort" size="mini" style="margin:5px;display:block" @change="searchAvatar") + el-radio(label="name") {{ $t('view.search.avatar.sort_name') }} + el-radio(label="update") {{ $t('view.search.avatar.sort_update') }} + el-radio(label="created") {{ $t('view.search.avatar.sort_created') }} .x-friend-list(style="margin-top:20px;min-height:500px") .x-friend-item(v-for="avatar in searchAvatarPage" :key="avatar.id" @click="showAvatarDialog(avatar.id)") template(v-once) From cdf5688193baa29c31547541c407aa7bb9b6a1d3 Mon Sep 17 00:00:00 2001 From: Map1en_ Date: Tue, 17 Dec 2024 13:44:31 +0900 Subject: [PATCH 2/6] fix(style): bg color issue when hovering over input count in other themes --- html/src/theme.dark.scss | 7 ++++++- html/src/theme.darkvanilla.scss | 7 ++++++- html/src/theme.darkvanillaold.scss | 7 ++++++- html/src/theme.material3.scss | 9 +++++++++ html/src/theme.pink.scss | 5 +++++ 5 files changed, 32 insertions(+), 3 deletions(-) diff --git a/html/src/theme.dark.scss b/html/src/theme.dark.scss index e51eb3fa0..8e25398f6 100644 --- a/html/src/theme.dark.scss +++ b/html/src/theme.dark.scss @@ -44,10 +44,15 @@ button { .el-textarea .el-input__count, .el-input .el-input__count .el-input__count-inner { color: #fff; - background-color: #444; + background-color: #333; border: #333; } +// User dialog memo: input count background color +.x-friend-item:hover .el-input__count { + background: #3e3e3e; +} + .el-input-group__append, .el-input-group__prepend { color: #fff; diff --git a/html/src/theme.darkvanilla.scss b/html/src/theme.darkvanilla.scss index c66fdb25a..1e25cc565 100644 --- a/html/src/theme.darkvanilla.scss +++ b/html/src/theme.darkvanilla.scss @@ -3,7 +3,7 @@ * https://github.com/MintLily/Dark-Vanilla */ - :root { +:root { --ThemeName: 'Dark Vanilla'; --ThemeVers: '2.0.2'; --ThemeAuth: 'MintLily'; @@ -682,3 +682,8 @@ i[class='el-icon-star-off']:not(.el-menu-item div.el-tooltip i) { ::-webkit-scrollbar-thumb { background: var(--dv_bg-bot); } + +// User dialog memo: input count background color +.x-friend-item:hover .el-input__count { + background-color: transparent; +} diff --git a/html/src/theme.darkvanillaold.scss b/html/src/theme.darkvanillaold.scss index e7949e5e1..b3c84f940 100644 --- a/html/src/theme.darkvanillaold.scss +++ b/html/src/theme.darkvanillaold.scss @@ -73,10 +73,15 @@ a { .el-textarea__inner, .el-textarea .el-input__count, .el-input .el-input__count .el-input__count-inner { - background: var(--top) !important; + background: transparent; border: var(--top-border) !important; } +// User dialog memo: input count background color +.x-friend-item:hover .el-input__count { + background: transparent; +} + .el-table th.is-leaf { background: var(--top) !important; /*border: 1px solid var(--top-border) !important;*/ diff --git a/html/src/theme.material3.scss b/html/src/theme.material3.scss index 1b26f7a13..c1569ab9b 100644 --- a/html/src/theme.material3.scss +++ b/html/src/theme.material3.scss @@ -1121,6 +1121,15 @@ input[type='number'], border-radius: 25px; } +.x-friend-item .el-input__count { + background-color: transparent; +} + +// User dialog memo: input count background color +.x-friend-item:hover .el-input__count { + background-color: transparent; +} + .x-friend-item .detail { margin: 0 -2px; } diff --git a/html/src/theme.pink.scss b/html/src/theme.pink.scss index 7e74af412..b3ababe64 100644 --- a/html/src/theme.pink.scss +++ b/html/src/theme.pink.scss @@ -356,3 +356,8 @@ input[type='checkbox']:checked + .el-switch__core { .el-loading-spinner .path { stroke: var(--theme); } + +// User dialog memo: input count background color +.x-friend-item:hover .el-input__count { + background-color: var(--lighter-lighter-bg); +} From cb22cd0c24e52e66c971ba3726f5896c2ea30f14 Mon Sep 17 00:00:00 2001 From: Map1en_ Date: Tue, 17 Dec 2024 14:33:01 +0900 Subject: [PATCH 3/6] fix(style): el-select height of feed tab improve(style): status change style of feed page improve(style): feed page --- html/src/mixins/tabs/feed.pug | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/html/src/mixins/tabs/feed.pug b/html/src/mixins/tabs/feed.pug index 3da51eb61..d67dfae33 100644 --- a/html/src/mixins/tabs/feed.pug +++ b/html/src/mixins/tabs/feed.pug @@ -6,7 +6,7 @@ mixin feedTab() div(style="flex:none;margin-right:10px") el-tooltip(placement="bottom" :content="$t('view.feed.favorites_only_tooltip')" :disabled="hideTooltips") el-switch(v-model="feedTable.vip" @change="feedTableLookup" active-color="#13ce66") - el-select(v-model="feedTable.filter" @change="feedTableLookup" multiple clearable style="flex:1" :placeholder="$t('view.feed.filter_placeholder')") + el-select(v-model="feedTable.filter" @change="feedTableLookup" multiple clearable style="flex:1;height:40px;" :placeholder="$t('view.feed.filter_placeholder')") el-option(v-once v-for="type in ['GPS', 'Online', 'Offline', 'Status', 'Avatar', 'Bio']" :key="type" :label="type" :value="type") el-input(v-model="feedTable.search" :placeholder="$t('view.feed.search_placeholder')" @keyup.native.13="feedTableLookup" @change="feedTableLookup" clearable style="flex:none;width:150px;margin:0 10px") el-table-column(type="expand" width="20") @@ -51,7 +51,7 @@ mixin feedTab() span(v-else-if="scope.row.previousStatus === 'busy'") {{ $t('dialog.user.status.busy') }} span(v-else) {{ $t('dialog.user.status.offline') }} i.x-user-status(:class="statusClass(scope.row.previousStatus)") - span(v-text="scope.row.previousStatusDescription") + span(v-text="scope.row.previousStatusDescription" style="margin-left:5px") br span i.el-icon-right @@ -62,7 +62,7 @@ mixin feedTab() span(v-else-if="scope.row.status === 'ask me'") {{ $t('dialog.user.status.ask_me') }} span(v-else-if="scope.row.status === 'busy'") {{ $t('dialog.user.status.busy') }} span(v-else) {{ $t('dialog.user.status.offline') }} - i.x-user-status(:class="statusClass(scope.row.status)") + i.x-user-status(:class="statusClass(scope.row.status)" style="margin:0 5px") span(v-text="scope.row.statusDescription") template(v-else-if="scope.row.type === 'Bio'") template(v-for="(bio,idx) in formatDifference(scope.row.previousBio, scope.row.bio)") @@ -95,7 +95,7 @@ mixin feedTab() span(v-else-if="scope.row.previousStatus === 'busy'") {{ $t('dialog.user.status.busy') }} span(v-else) {{ $t('dialog.user.status.offline') }} i.x-user-status(:class="statusClass(scope.row.previousStatus)") - span + span(style="margin:0 5px") i.el-icon-right el-tooltip(placement="top") template(#content) @@ -113,8 +113,7 @@ mixin feedTab() span(v-else-if="scope.row.status === 'ask me'") {{ $t('dialog.user.status.ask_me') }} span(v-else-if="scope.row.status === 'busy'") {{ $t('dialog.user.status.busy') }} span(v-else) {{ $t('dialog.user.status.offline') }} - i.x-user-status(:class="statusClass(scope.row.status)") - span ‎ + i.x-user-status(:class="statusClass(scope.row.status)" style="margin-right:3px") span(v-text="scope.row.statusDescription") template(v-else-if="scope.row.type === 'Avatar'") avatar-info(:imageurl="scope.row.currentAvatarImageUrl" :userid="scope.row.userId" :hintownerid="scope.row.ownerId" :hintavatarname="scope.row.avatarName" :avatartags="scope.row.currentAvatarTags") From 3cce05cd587e31a5ea99fc590c4c4b91ae77c779 Mon Sep 17 00:00:00 2001 From: Map1en_ Date: Wed, 18 Dec 2024 18:21:04 +0900 Subject: [PATCH 4/6] improve(ui): favorites page --- html/src/app.js | 63 ++++++++ html/src/app.scss | 10 +- html/src/mixins/dialogs/favoritesDialog.pug | 167 ++++++++++---------- html/src/mixins/tabs/favorites.pug | 89 +++++++---- html/src/theme.dark.scss | 3 +- html/src/theme.darkvanilla.scss | 5 + html/src/theme.darkvanillaold.scss | 5 + html/src/theme.material3.scss | 5 + html/src/theme.pink.scss | 5 + 9 files changed, 236 insertions(+), 116 deletions(-) diff --git a/html/src/app.js b/html/src/app.js index dbcf20c91..f596c0ca3 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -17159,6 +17159,18 @@ speechSynthesis.getVoices(); return style; }; + $app.methods.userFavoriteWorldsStatusForFavTab = function (visibility) { + let style = ''; + if (visibility === 'public') { + style = ''; + } else if (visibility === 'friends') { + style = 'success'; + } else { + style = 'info'; + } + return style; + }; + $app.methods.changeWorldGroupVisibility = function (name, visibility) { var params = { type: 'world', @@ -19630,6 +19642,23 @@ speechSynthesis.getVoices(); this.worldExportDialogVisible = true; }; + $app.methods.handleCopyWorldExportData = function (event) { + event.target.tagName === 'TEXTAREA' && event.target.select(); + navigator.clipboard + .writeText(this.worldExportContent) + .then(() => { + this.$message({ + message: 'Copied successfully!', + type: 'success', + duration: 2000 + }); + }) + .catch((err) => { + console.error('Copy failed:', err); + this.$message.error('Copy failed!'); + }); + }; + $app.methods.updateWorldExportDialog = function () { const formatter = function (str) { if (/[\x00-\x1f,"]/.test(str) === true) { @@ -19895,6 +19924,23 @@ speechSynthesis.getVoices(); this.avatarExportDialogVisible = true; }; + $app.methods.handleCopyAvatarExportData = function (event) { + event.target.tagName === 'TEXTAREA' && event.target.select(); + navigator.clipboard + .writeText(this.avatarExportContent) + .then(() => { + this.$message({ + message: 'Copied successfully!', + type: 'success', + duration: 2000 + }); + }) + .catch((err) => { + console.error('Copy failed:', err); + this.$message.error('Copy failed!'); + }); + }; + /** * Update the content of the avatar export dialog based on the selected options */ @@ -20136,6 +20182,23 @@ speechSynthesis.getVoices(); this.friendExportDialogVisible = true; }; + $app.methods.handleCopyFriendExportData = function (event) { + event.target.tagName === 'TEXTAREA' && event.target.select(); + navigator.clipboard + .writeText(this.friendExportContent) + .then(() => { + this.$message({ + message: 'Copied successfully!', + type: 'success', + duration: 2000 + }); + }) + .catch((err) => { + console.error('Copy failed:', err); + this.$message.error('Copy failed!'); + }); + }; + $app.methods.updateFriendExportDialog = function () { var _ = function (str) { if (/[\x00-\x1f,"]/.test(str) === true) { diff --git a/html/src/app.scss b/html/src/app.scss index 5926b9bcc..3eacd1354 100644 --- a/html/src/app.scss +++ b/html/src/app.scss @@ -407,7 +407,6 @@ img.friends-list-avatar { object-fit: cover; } -.x-friend-item > .avatar.offline > img, .x-friend-item > .avatar.active > img { filter: grayscale(1); } @@ -920,6 +919,11 @@ i.x-status-icon.red { line-height: 17px; } +// feed table detail time tag line-height +.el-table__expanded-cell .el-tag--mini { + line-height: 17px; +} + // User dialog memo: input count background color .x-friend-item:hover .el-input__count { background: #f0f0f0; @@ -929,3 +933,7 @@ i.x-status-icon.red { .x-app > .x-container { padding-top: 15px; } + +.el-collapse-item .el-tag--mini { + line-height: 17px; +} diff --git a/html/src/mixins/dialogs/favoritesDialog.pug b/html/src/mixins/dialogs/favoritesDialog.pug index 1eeef7b7c..c2abab6dc 100644 --- a/html/src/mixins/dialogs/favoritesDialog.pug +++ b/html/src/mixins/dialogs/favoritesDialog.pug @@ -52,39 +52,42 @@ mixin favoritesDialog() template(v-for="group in localWorldFavoriteGroups" :key="group") el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldExportLocalGroup(group)") {{ group }} ({{ localWorldFavorites[group].length }}) br - el-input(type="textarea" v-if="worldExportDialogVisible" v-model="worldExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()") + el-input(type="textarea" v-if="worldExportDialogVisible" v-model="worldExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="handleCopyWorldExportData") //- dialog: World import dialog el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="worldImportDialog" :visible.sync="worldImportDialog.visible" :title="$t('dialog.world_import.header')" width="650px") - div(style="font-size:12px") - | {{ $t('dialog.world_import.description') }} - el-input(type="textarea" v-model="worldImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:15px") - el-button(size="small" @click="processWorldImportList" :disabled="!worldImportDialog.input") {{ $t('dialog.world_import.process_list') }} - span(v-if="worldImportDialog.progress" style="margin-top:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.world_import.process_progress') }} {{ worldImportDialog.progress }}/{{ worldImportDialog.progressTotal }} - br - el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px") - el-button(size="mini") - span(v-if="worldImportDialog.worldImportFavoriteGroup") {{ worldImportDialog.worldImportFavoriteGroup.displayName }} ({{ worldImportDialog.worldImportFavoriteGroup.count }}/{{ worldImportDialog.worldImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right] - span(v-else) {{ $t('dialog.world_import.select_vrchat_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - template(v-for="groupAPI in API.favoriteWorldGroups" :key="groupAPI.name") - el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }}) - el-dropdown(@click.native.stop trigger="click" size="small" style="margin:5px") - el-button(size="mini") - span(v-if="worldImportDialog.worldImportLocalFavoriteGroup") {{ worldImportDialog.worldImportLocalFavoriteGroup }} ({{ getLocalWorldFavoriteGroupLength(worldImportDialog.worldImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right] - span(v-else) {{ $t('dialog.world_import.select_local_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - template(v-for="group in localWorldFavoriteGroups" :key="group") - el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldImportLocalGroup(group)" ) {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }}) - el-button(size="small" @click="importWorldImportTable" style="margin:5px" :disabled="worldImportTable.data.length === 0 || (!worldImportDialog.worldImportFavoriteGroup && !worldImportDialog.worldImportLocalFavoriteGroup)") {{ $t('dialog.world_import.import') }} - el-button(v-if="worldImportDialog.loading" size="small" @click="cancelWorldImport" style="margin-top:10px") {{ $t('dialog.world_import.cancel') }} - span(v-if="worldImportDialog.worldImportFavoriteGroup") {{ worldImportTable.data.length }} / {{ worldImportDialog.worldImportFavoriteGroup.capacity - worldImportDialog.worldImportFavoriteGroup.count }} + div(style="display:flex;align-items:center;justify-content:space-between") + div(style="font-size:12px") {{ $t('dialog.world_import.description') }} + div(style="display:flex;align-items:center;") + div(v-if="worldImportDialog.progress") {{ $t('dialog.world_import.process_progress') }} {{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }} #[i.el-icon-loading(style="margin:0 5px")] + el-button(v-if="worldImportDialog.loading" size="small" @click="cancelWorldImport") {{ $t('dialog.world_import.cancel') }} + el-button(v-else size="small" @click="processWorldImportList" :disabled="!worldImportDialog.input") {{ $t('dialog.world_import.process_list') }} + el-input(type="textarea" v-model="worldImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:10px") + div(style="display:flex;align-items:center;justify-content:space-between;margin-top:5px") + div + el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px") + el-button(size="mini") + span(v-if="worldImportDialog.worldImportFavoriteGroup") {{ worldImportDialog.worldImportFavoriteGroup.displayName }} ({{ worldImportDialog.worldImportFavoriteGroup.count }}/{{ worldImportDialog.worldImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right] + span(v-else) {{ $t('dialog.world_import.select_vrchat_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + template(v-for="groupAPI in API.favoriteWorldGroups" :key="groupAPI.name") + el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }}) + el-dropdown(@click.native.stop trigger="click" size="small" style="margin:5px") + el-button(size="mini") + span(v-if="worldImportDialog.worldImportLocalFavoriteGroup") {{ worldImportDialog.worldImportLocalFavoriteGroup }} ({{ getLocalWorldFavoriteGroupLength(worldImportDialog.worldImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right] + span(v-else) {{ $t('dialog.world_import.select_local_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + template(v-for="group in localWorldFavoriteGroups" :key="group") + el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldImportLocalGroup(group)" ) {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }}) + span(v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left:5px") {{ worldImportTable.data.length }} / {{ worldImportDialog.worldImportFavoriteGroup.capacity - worldImportDialog.worldImportFavoriteGroup.count }} + div + el-button(size="small" @click="clearWorldImportTable" :disabled="worldImportTable.data.length === 0") {{ $t('dialog.world_import.clear_table') }} + el-button(size="small" type="primary" @click="importWorldImportTable" style="margin:5px" :disabled="worldImportTable.data.length === 0 || (!worldImportDialog.worldImportFavoriteGroup && !worldImportDialog.worldImportLocalFavoriteGroup)") {{ $t('dialog.world_import.import') }} span(v-if="worldImportDialog.importProgress" style="margin:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.world_import.import_progress') }} {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }} br - el-button(size="small" @click="clearWorldImportTable") {{ $t('dialog.world_import.clear_table') }} template(v-if="worldImportDialog.errors") - el-button(size="small" @click="worldImportDialog.errors = ''" style="margin-left:5px") {{ $t('dialog.world_import.clear_errors') }} - h2(style="font-weight:bold;margin:0") {{ $t('dialog.world_import.errors') }} + el-button(size="small" @click="worldImportDialog.errors = ''") {{ $t('dialog.world_import.clear_errors') }} + h2(style="font-weight:bold;margin:5px 0") {{ $t('dialog.world_import.errors') }} pre(v-text="worldImportDialog.errors" style="white-space:pre-wrap;font-size:12px") data-tables(v-if="worldImportDialog.visible" v-bind="worldImportTable" v-loading="worldImportDialog.loading" style="margin-top:10px") el-table-column(:label="$t('table.import.image')" width="70" prop="thumbnailImageUrl") @@ -100,9 +103,7 @@ mixin favoritesDialog() span.x-link(v-text="scope.row.authorName" @click="showUserDialog(scope.row.authorId)") el-table-column(:label="$t('table.import.status')" width="70" prop="releaseStatus") template(v-once #default="scope") - span(v-text="scope.row.releaseStatus" v-if="scope.row.releaseStatus === 'public'" style="color:#67c23a") - span(v-text="scope.row.releaseStatus" v-else-if="scope.row.releaseStatus === 'private'" style="color:#f56c6c") - span(v-text="scope.row.releaseStatus" v-else) + span(v-text="scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1)" :style="{ color: scope.row.releaseStatus === 'public' ? '#67c23a' : scope.row.releaseStatus === 'private' ? '#f56c6c' : undefined }") el-table-column(:label="$t('table.import.action')" width="90" align="right") template(v-once #default="scope") el-button(type="text" icon="el-icon-close" size="mini" @click="deleteItemWorldImport(scope.row)") @@ -129,39 +130,42 @@ mixin favoritesDialog() template(v-for="group in localAvatarFavoriteGroups" :key="group") el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarExportLocalGroup(group)" ) {{ group }} ({{ getLocalAvatarFavoriteGroupLength(group) }}) br - el-input(type="textarea" v-if="avatarExportDialogVisible" v-model="avatarExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()") + el-input(type="textarea" v-if="avatarExportDialogVisible" v-model="avatarExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="handleCopyAvatarExportData") //- dialog: Avatar import dialog el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="avatarImportDialog" :visible.sync="avatarImportDialog.visible" :title="$t('dialog.avatar_import.header')" width="650px") - div(style="font-size:12px") - | {{ $t('dialog.avatar_import.description') }} - el-input(type="textarea" v-model="avatarImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:15px") - el-button(size="small" @click="processAvatarImportList" :disabled="!avatarImportDialog.input") {{ $t('dialog.avatar_import.process_list') }} - span(v-if="avatarImportDialog.progress" style="margin-top:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }}/{{ avatarImportDialog.progressTotal }} - br - el-dropdown(@click.native.stop trigger="click" size="small") - el-button(size="mini") - span(v-if="avatarImportDialog.avatarImportFavoriteGroup") {{ avatarImportDialog.avatarImportFavoriteGroup.displayName }} ({{ avatarImportDialog.avatarImportFavoriteGroup.count }}/{{ avatarImportDialog.avatarImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right] - span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - template(v-for="groupAPI in API.favoriteAvatarGroups" :key="groupAPI.name") - el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }}) - el-dropdown(@click.native.stop trigger="click" size="small" style="margin:5px") - el-button(size="mini") - span(v-if="avatarImportDialog.avatarImportLocalFavoriteGroup") {{ avatarImportDialog.avatarImportLocalFavoriteGroup }} ({{ getLocalAvatarFavoriteGroupLength(avatarImportDialog.avatarImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right] - span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - template(v-for="group in localAvatarFavoriteGroups" :key="group") - el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarImportLocalGroup(group)" ) {{ group }} ({{ getLocalAvatarFavoriteGroupLength(group) }}) - el-button(size="small" @click="importAvatarImportTable" style="margin:5px" :disabled="avatarImportTable.data.length === 0 || (!avatarImportDialog.avatarImportFavoriteGroup && !avatarImportDialog.avatarImportLocalFavoriteGroup)") {{ $t('dialog.avatar_import.import') }} - el-button(v-if="avatarImportDialog.loading" size="small" @click="cancelAvatarImport" style="margin-top:10px") {{ $t('dialog.avatar_import.cancel') }} - span(v-if="avatarImportDialog.avatarImportFavoriteGroup") {{ avatarImportTable.data.length }} / {{ avatarImportDialog.avatarImportFavoriteGroup.capacity - avatarImportDialog.avatarImportFavoriteGroup.count }} + div(style="display:flex;align-items:center;justify-content:space-between") + div(style="font-size:12px") {{ $t('dialog.avatar_import.description') }} + div(style="display:flex;align-items:center;") + div(v-if="avatarImportDialog.progress") {{ $t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} / {{ avatarImportDialog.progressTotal }} #[i.el-icon-loading(style="margin:0 5px")] + el-button(v-if="avatarImportDialog.loading" size="small" @click="cancelAvatarImport") {{ $t('dialog.avatar_import.cancel') }} + el-button(v-else size="small" @click="processAvatarImportList" :disabled="!avatarImportDialog.input") {{ $t('dialog.avatar_import.process_list') }} + el-input(type="textarea" v-model="avatarImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:10px") + div(style="display:flex;align-items:center;justify-content:space-between;margin-top:5px") + div + el-dropdown(@click.native.stop trigger="click" size="small") + el-button(size="mini") + span(v-if="avatarImportDialog.avatarImportFavoriteGroup") {{ avatarImportDialog.avatarImportFavoriteGroup.displayName }} ({{ avatarImportDialog.avatarImportFavoriteGroup.count }}/{{ avatarImportDialog.avatarImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right] + span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + template(v-for="groupAPI in API.favoriteAvatarGroups" :key="groupAPI.name") + el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }}) + el-dropdown(@click.native.stop trigger="click" size="small" style="margin:5px") + el-button(size="mini") + span(v-if="avatarImportDialog.avatarImportLocalFavoriteGroup") {{ avatarImportDialog.avatarImportLocalFavoriteGroup }} ({{ getLocalAvatarFavoriteGroupLength(avatarImportDialog.avatarImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right] + span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + template(v-for="group in localAvatarFavoriteGroups" :key="group") + el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarImportLocalGroup(group)" ) {{ group }} ({{ getLocalAvatarFavoriteGroupLength(group) }}) + span(v-if="avatarImportDialog.avatarImportFavoriteGroup" style="margin-left:5px") {{ avatarImportTable.data.length }} / {{ avatarImportDialog.avatarImportFavoriteGroup.capacity - avatarImportDialog.avatarImportFavoriteGroup.count }} + div + el-button(size="small" @click="clearAvatarImportTable") {{ $t('dialog.avatar_import.clear_table') }} + el-button(size="small" type="primary" @click="importAvatarImportTable" style="margin:5px" :disabled="avatarImportTable.data.length === 0 || (!avatarImportDialog.avatarImportFavoriteGroup && !avatarImportDialog.avatarImportLocalFavoriteGroup)") {{ $t('dialog.avatar_import.import') }} span(v-if="avatarImportDialog.importProgress" style="margin:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.avatar_import.import_progress') }} {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }} br - el-button(size="small" @click="clearAvatarImportTable") {{ $t('dialog.avatar_import.clear_table') }} template(v-if="avatarImportDialog.errors") - el-button(size="small" @click="avatarImportDialog.errors = ''" style="margin-left:5px") {{ $t('dialog.avatar_import.clear_errors') }} - h2(style="font-weight:bold;margin:0") {{ $t('dialog.avatar_import.errors') }} + el-button(size="small" @click="avatarImportDialog.errors = ''") {{ $t('dialog.avatar_import.clear_errors') }} + h2(style="font-weight:bold;margin:5px 0") {{ $t('dialog.avatar_import.errors') }} pre(v-text="avatarImportDialog.errors" style="white-space:pre-wrap;font-size:12px") data-tables(v-if="avatarImportDialog.visible" v-bind="avatarImportTable" v-loading="avatarImportDialog.loading" style="margin-top:10px") el-table-column(:label="$t('table.import.image')" width="70" prop="thumbnailImageUrl") @@ -177,9 +181,7 @@ mixin favoritesDialog() span.x-link(v-text="scope.row.authorName" @click="showUserDialog(scope.row.authorId)") el-table-column(:label="$t('table.import.status')" width="70" prop="releaseStatus") template(v-once #default="scope") - span(v-text="scope.row.releaseStatus" v-if="scope.row.releaseStatus === 'public'" style="color:#67c23a") - span(v-text="scope.row.releaseStatus" v-else-if="scope.row.releaseStatus === 'private'" style="color:#f56c6c") - span(v-text="scope.row.releaseStatus" v-else) + span(v-text="scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1)" :style="{ color: scope.row.releaseStatus === 'public' ? '#67c23a' : scope.row.releaseStatus === 'private' ? '#f56c6c' : undefined }") el-table-column(:label="$t('table.import.action')" width="90" align="right") template(v-once #default="scope") el-button(type="text" icon="el-icon-close" size="mini" @click="deleteItemAvatarImport(scope.row)") @@ -195,32 +197,35 @@ mixin favoritesDialog() template(v-for="groupAPI in API.favoriteFriendGroups" :key="groupAPI.name") el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectFriendExportGroup(groupAPI)") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }}) br - el-input(type="textarea" v-if="friendExportDialogVisible" v-model="friendExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()") - + el-input(type="textarea" v-if="friendExportDialogVisible" v-model="friendExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="handleCopyFriendExportData") + //- dialog: Friend import dialog el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="friendImportDialog" :visible.sync="friendImportDialog.visible" :title="$t('dialog.friend_import.header')" width="650px") - div(style="font-size:12px") - | {{ $t('dialog.friend_import.description') }} - el-input(type="textarea" v-model="friendImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:15px") - el-button(size="small" @click="processFriendImportList" :disabled="!friendImportDialog.input") {{ $t('dialog.friend_import.process_list') }} - span(v-if="friendImportDialog.progress" style="margin-top:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }}/{{ friendImportDialog.progressTotal }} - br - el-dropdown(@click.native.stop trigger="click" size="small") - el-button(size="mini") - span(v-if="friendImportDialog.friendImportFavoriteGroup") {{ friendImportDialog.friendImportFavoriteGroup.displayName }} ({{ friendImportDialog.friendImportFavoriteGroup.count }}/{{ friendImportDialog.friendImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right] - span(v-else) {{ $t('dialog.friend_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] - el-dropdown-menu(#default="dropdown") - template(v-for="groupAPI in API.favoriteFriendGroups" :key="groupAPI.name") - el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectFriendImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }}) - el-button(size="small" @click="importFriendImportTable" style="margin:5px" :disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup") {{ $t('dialog.friend_import.import') }} - el-button(v-if="friendImportDialog.loading" size="small" @click="cancelFriendImport" style="margin-top:10px") {{ $t('dialog.friend_import.cancel') }} - span(v-if="friendImportDialog.friendImportFavoriteGroup") {{ friendImportTable.data.length }} / {{ friendImportDialog.friendImportFavoriteGroup.capacity - friendImportDialog.friendImportFavoriteGroup.count }} + div(style="display:flex;align-items:center;justify-content:space-between") + div(style="font-size:12px") {{ $t('dialog.friend_import.description') }} + div(style="display:flex;align-items:center;") + div(v-if="friendImportDialog.progress") {{ $t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} / {{ friendImportDialog.progressTotal }} #[i.el-icon-loading(style="margin:0 5px")] + el-button(v-if="friendImportDialog.loading" size="small" @click="cancelFriendImport") {{ $t('dialog.friend_import.cancel') }} + el-button(v-else size="small" @click="processFriendImportList" :disabled="!friendImportDialog.input") {{ $t('dialog.friend_import.process_list') }} + el-input(type="textarea" v-model="friendImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:10px") + div(style="display:flex;align-items:center;justify-content:space-between;margin-top:5px") + div + el-dropdown(@click.native.stop trigger="click" size="small") + el-button(size="mini") + span(v-if="friendImportDialog.friendImportFavoriteGroup") {{ friendImportDialog.friendImportFavoriteGroup.displayName }} ({{ friendImportDialog.friendImportFavoriteGroup.count }}/{{ friendImportDialog.friendImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right] + span(v-else) {{ $t('dialog.friend_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right] + el-dropdown-menu(#default="dropdown") + template(v-for="groupAPI in API.favoriteFriendGroups" :key="groupAPI.name") + el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectFriendImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }}) + span(v-if="friendImportDialog.friendImportFavoriteGroup" style="margin-left:5px") {{ friendImportTable.data.length }} / {{ friendImportDialog.friendImportFavoriteGroup.capacity - friendImportDialog.friendImportFavoriteGroup.count }} + div + el-button(size="small" @click="clearFriendImportTable" :disabled="friendImportTable.data.length === 0") {{ $t('dialog.friend_import.clear_table') }} + el-button(size="small" type="primary" @click="importFriendImportTable" style="margin:5px" :disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup") {{ $t('dialog.friend_import.import') }} span(v-if="friendImportDialog.importProgress" style="margin:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{ friendImportDialog.importProgressTotal }} br - el-button(size="small" @click="clearFriendImportTable") {{ $t('dialog.friend_import.clear_table') }} template(v-if="friendImportDialog.errors") - el-button(size="small" @click="friendImportDialog.errors = ''" style="margin-left:5px") {{ $t('dialog.friend_import.clear_errors') }} - h2(style="font-weight:bold;margin:0") {{ $t('dialog.friend_import.errors') }} + el-button(size="small" @click="friendImportDialog.errors = ''") {{ $t('dialog.friend_import.clear_errors') }} + h2(style="font-weight:bold;margin:5px 0") {{ $t('dialog.friend_import.errors') }} pre(v-text="friendImportDialog.errors" style="white-space:pre-wrap;font-size:12px") data-tables(v-if="friendImportDialog.visible" v-bind="friendImportTable" v-loading="friendImportDialog.loading" style="margin-top:10px") el-table-column(:label="$t('table.import.image')" width="70" prop="currentAvatarThumbnailImageUrl") diff --git a/html/src/mixins/tabs/favorites.pug b/html/src/mixins/tabs/favorites.pug index 69a526d3b..c2911e933 100644 --- a/html/src/mixins/tabs/favorites.pug +++ b/html/src/mixins/tabs/favorites.pug @@ -13,11 +13,15 @@ mixin favoritesTab() el-tabs(ref="favoriteTabRef" type="card" v-loading="API.isFavoriteLoading" style="height:100%") el-tab-pane(:label="$t('view.favorite.friends.header')") el-collapse(v-if="$refs.menu && $refs.menu.activeIndex === 'favorite' && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === '0'" style="border:0") - el-button(size="small" @click="showFriendExportDialog") {{ $t('view.favorite.export') }} - el-button(size="small" @click="showFriendImportDialog" style="margin-left:5px") {{ $t('view.favorite.import') }} - div(style="display:flex;align-items:center;float:right;font-size:13px;margin-right:10px") - span.name(style="margin-right:5px") {{ $t('view.favorite.sort_by') }} - el-switch(v-model="sortFavorites" :inactive-text="$t('view.settings.appearance.appearance.sort_favorite_by_name')" :active-text="$t('view.settings.appearance.appearance.sort_favorite_by_date')" @change="saveSortFavoritesOption") + div(style="display:flex;align-items:center;justify-content:space-between") + div + el-button(size="small" @click="showFriendExportDialog") {{ $t('view.favorite.export') }} + el-button(size="small" @click="showFriendImportDialog" style="margin-left:5px") {{ $t('view.favorite.import') }} + div(style="display:flex;align-items:center;font-size:13px;margin-right:10px") + span.name(style="margin-right:5px;line-height:10px;") {{ $t('view.favorite.sort_by') }} + el-radio-group(v-model="sortFavorites" @change="saveSortFavoritesOption") + el-radio(:label="false") {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }} + el-radio(:label="true") {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }} el-collapse-item(v-for="group in API.favoriteFriendGroups" :key="group.name") template(slot="title") span(v-text="group.displayName ? group.displayName : group.name" style="font-weight:bold;font-size:14px;margin-left:10px") @@ -54,15 +58,20 @@ mixin favoritesTab() .detail span(v-text="favorite.name || favorite.id") el-button(type="text" icon="el-icon-close" size="mini" @click.stop="deleteFavorite(favorite.id)" style="margin-left:5px") + div(v-else style="height:20px;width:100%;display:flex;align-items:center;justify-content:center;color:rgb(144, 147, 153)") + span No Data el-tab-pane(:label="$t('view.favorite.worlds.header')") el-collapse(v-if="$refs.menu && $refs.menu.activeIndex === 'favorite' && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === '1'" style="border:0") - el-button(size="small" @click="showWorldExportDialog") {{ $t('view.favorite.export') }} - el-button(size="small" @click="showWorldImportDialog" style="margin-left:5px") {{ $t('view.favorite.import') }} - div(style="display:flex;align-items:center;float:right;font-size:13px;margin-right:10px") - span.name(style="margin-right:5px") {{ $t('view.favorite.sort_by') }} - el-switch(v-model="sortFavorites" :inactive-text="$t('view.settings.appearance.appearance.sort_favorite_by_name')" :active-text="$t('view.settings.appearance.appearance.sort_favorite_by_date')" @change="saveSortFavoritesOption") - span(style="display:block;margin-top:20px") {{ $t('view.favorite.worlds.search') }} - el-input(v-model="worldFavoriteSearch" @input="searchWorldFavorites" clearable size="mini" :placeholder="$t('view.favorite.worlds.search')" style="width:300px;margin-top:10px") + div(style="display:flex;align-items:center;justify-content:space-between") + div + el-button(size="small" @click="showWorldExportDialog") {{ $t('view.favorite.export') }} + el-button(size="small" @click="showWorldImportDialog" style="margin-left:5px") {{ $t('view.favorite.import') }} + div(style="display:flex;align-items:center;font-size:13px;margin-right:10px") + span.name(style="margin-right:5px;line-height:10px;") {{ $t('view.favorite.sort_by') }} + el-radio-group(v-model="sortFavorites" @change="saveSortFavoritesOption" style="margin-right:12px") + el-radio(:label="false") {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }} + el-radio(:label="true") {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }} + el-input(v-model="worldFavoriteSearch" @input="searchWorldFavorites" clearable size="mini" :placeholder="$t('view.favorite.worlds.search')" style="width:200px;") .x-friend-list(style="margin-top:10px") div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in worldFavoriteSearchResults" :key="favorite.id" @click="showWorldDialog(favorite.id)") .x-friend-item @@ -81,18 +90,19 @@ mixin favoritesTab() span(style="display:block;margin-top:20px") {{ $t('view.favorite.worlds.vrchat_favorites') }} el-collapse-item(v-for="group in API.favoriteWorldGroups" :key="group.name") template(slot="title") - span(v-text="group.displayName ? group.displayName : group.name" style="font-weight:bold;font-size:14px;margin-left:10px") - i.x-status-icon(style="margin-left:5px" :class="userFavoriteWorldsStatus(group.visibility)") - span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }} - el-tooltip(placement="top" :content="$t('view.favorite.visibility_tooltip')" :disabled="hideTooltips") - el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:10px") - el-button(type="default" icon="el-icon-view" size="mini" circle) - el-dropdown-menu(#default="dropdown") - el-dropdown-item(v-if="group.visibility !== visibility" v-for="visibility in worldGroupVisibilityOptions" :key="visibility" style="display:block;margin:10px 0" v-text="visibility" @click.native="changeWorldGroupVisibility(group.name, visibility)") - el-tooltip(placement="top" :content="$t('view.favorite.rename_tooltip')" :disabled="hideTooltips") - el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:5px") - el-tooltip(placement="right" :content="$t('view.favorite.clear_tooltip')" :disabled="hideTooltips") - el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px") + div(style="display:flex;align-items:center;") + span(v-text="group.displayName ? group.displayName : group.name" style="font-weight:bold;font-size:14px;margin-left:10px") + el-tag(style="margin-left:5px" size="mini" :type="userFavoriteWorldsStatusForFavTab(group.visibility)" effect="plain") {{ group.visibility.charAt(0).toUpperCase() + group.visibility.slice(1) }} + span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }} + el-tooltip(placement="top" :content="$t('view.favorite.visibility_tooltip')" :disabled="hideTooltips") + el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:10px") + el-button(type="default" icon="el-icon-view" size="mini" circle) + el-dropdown-menu(#default="dropdown") + el-dropdown-item(v-if="group.visibility !== visibility" v-for="visibility in worldGroupVisibilityOptions" :key="visibility" style="display:block;margin:10px 0" v-text="visibility.charAt(0).toUpperCase() + visibility.slice(1)" @click.native="changeWorldGroupVisibility(group.name, visibility)") + el-tooltip(placement="top" :content="$t('view.favorite.rename_tooltip')" :disabled="hideTooltips") + el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:5px") + el-tooltip(placement="right" :content="$t('view.favorite.clear_tooltip')" :disabled="hideTooltips") + el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px") .x-friend-list(v-if="group.count" style="margin-top:10px") div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in favoriteWorlds" v-if="favorite.groupKey === group.key" :key="favorite.id" @click="showWorldDialog(favorite.id)") .x-friend-item @@ -129,6 +139,8 @@ mixin favoritesTab() el-tooltip(v-if="favorite.deleted" placement="left" :content="$t('view.favorite.unavailable_tooltip')") i.el-icon-warning(style="color:#f56c6c;margin-left:5px") el-button(type="text" icon="el-icon-close" size="mini" @click.stop="deleteFavorite(favorite.id)" style="margin-left:5px") + div(v-else style="height:20px;width:100%;display:flex;align-items:center;justify-content:center;color:rgb(144, 147, 153)") + span No Data span(style="display:block;margin-top:20px") {{ $t('view.favorite.worlds.local_favorites') }} br el-button(size="small" @click="promptNewLocalWorldFavoriteGroup") {{ $t('view.favorite.worlds.new_group') }} @@ -144,7 +156,7 @@ mixin favoritesTab() el-button(@click.stop="promptLocalWorldFavoriteGroupRename(group)" size="mini" icon="el-icon-edit" circle style="margin-left:10px") el-tooltip(placement="right" :content="$t('view.favorite.delete_tooltip')" :disabled="hideTooltips") el-button(@click.stop="promptLocalWorldFavoriteGroupDelete(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px") - .x-friend-list(style="margin-top:10px") + .x-friend-list(style="margin-top:10px" v-if="localWorldFavorites[group].length") div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in localWorldFavorites[group]" :key="favorite.id" @click="showWorldDialog(favorite.id)") .x-friend-item template(v-if="favorite.name") @@ -172,15 +184,20 @@ mixin favoritesTab() .detail span(v-text="favorite.id") el-button(type="text" icon="el-icon-close" size="mini" @click.stop="removeLocalWorldFavorite(favorite.id, group)" style="margin-left:5px") + div(v-else style="height:20px;width:100%;display:flex;align-items:center;justify-content:center;color:rgb(144, 147, 153)") + span No Data el-tab-pane(:label="$t('view.favorite.avatars.header')") el-collapse(v-if="$refs.menu && $refs.menu.activeIndex === 'favorite' && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === '2'" style="border:0") - el-button(size="small" @click="showAvatarExportDialog") {{ $t('view.favorite.export') }} - el-button(size="small" @click="showAvatarImportDialog" style="margin-left:5px") {{ $t('view.favorite.import') }} - div(style="display:flex;align-items:center;float:right;font-size:13px;margin-right:10px") - span.name(style="margin-right:5px") {{ $t('view.favorite.sort_by') }} - el-switch(v-model="sortFavorites" :inactive-text="$t('view.settings.appearance.appearance.sort_favorite_by_name')" :active-text="$t('view.settings.appearance.appearance.sort_favorite_by_date')" @change="saveSortFavoritesOption") - span(style="display:block;margin-top:20px") {{ $t('view.favorite.avatars.search') }} - el-input(v-model="avatarFavoriteSearch" @input="searchAvatarFavorites" clearable size="mini" :placeholder="$t('view.favorite.avatars.search')" style="width:300px;margin-top:10px") + div(style="display:flex;align-items:center;justify-content:space-between") + div + el-button(size="small" @click="showAvatarExportDialog") {{ $t('view.favorite.export') }} + el-button(size="small" @click="showAvatarImportDialog" style="margin-left:5px") {{ $t('view.favorite.import') }} + div(style="display:flex;align-items:center;font-size:13px;margin-right:10px") + span.name(style="margin-right:5px;line-height:10px;") {{ $t('view.favorite.sort_by') }} + el-radio-group(v-model="sortFavorites" @change="saveSortFavoritesOption" style="margin-right:12px") + el-radio(:label="false") {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }} + el-radio(:label="true") {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }} + el-input(v-model="avatarFavoriteSearch" @input="searchAvatarFavorites" clearable size="mini" :placeholder="$t('view.favorite.avatars.search')" style="width:200px;") .x-friend-list(style="margin-top:10px") div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in avatarFavoriteSearchResults" :key="favorite.id" @click="showAvatarDialog(favorite.id)") .x-friend-item @@ -237,6 +254,8 @@ mixin favoritesTab() .detail span.name(v-text="favorite.name || favorite.id") el-button(type="text" icon="el-icon-close" size="mini" @click.stop="deleteFavorite(favorite.id)" style="margin-left:5px") + div(v-else style="height:20px;width:100%;display:flex;align-items:center;justify-content:center;color:rgb(144, 147, 153)") + span No Data el-collapse-item template(slot="title") span(style="font-weight:bold;font-size:14px;margin-left:10px") Local History @@ -259,6 +278,8 @@ mixin favoritesTab() template(v-else) el-tooltip(placement="right" content="Favorite" :disabled="hideTooltips") el-button(@click.stop="showFavoriteDialog('avatar', favorite.id)" type="default" icon="el-icon-star-off" size="mini" circle style="margin-left:5px") + div(v-else style="height:20px;width:100%;display:flex;align-items:center;justify-content:center;color:rgb(144, 147, 153)") + span No Data span(style="display:block;margin-top:20px") {{ $t('view.favorite.avatars.local_favorites') }} br el-button(size="small" :disabled="!isLocalUserVrcplusSupporter()" @click="promptNewLocalAvatarFavoriteGroup") {{ $t('view.favorite.avatars.new_group') }} @@ -274,7 +295,7 @@ mixin favoritesTab() el-button(@click.stop="promptLocalAvatarFavoriteGroupRename(group)" size="mini" icon="el-icon-edit" circle style="margin-left:5px") el-tooltip(placement="right" :content="$t('view.favorite.delete_tooltip')" :disabled="hideTooltips") el-button(@click.stop="promptLocalAvatarFavoriteGroupDelete(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px") - .x-friend-list(style="margin-top:10px") + .x-friend-list(style="margin-top:10px" v-if="localAvatarFavorites[group].length") div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in localAvatarFavorites[group]" :key="favorite.id" @click="showAvatarDialog(favorite.id)") .x-friend-item template(v-if="favorite.name") @@ -301,3 +322,5 @@ mixin favoritesTab() .detail span(v-text="favorite.id") el-button(type="text" icon="el-icon-close" size="mini" @click.stop="removeLocalAvatarFavorite(favorite.id, group)" style="margin-left:5px") + div(v-else style="height:20px;width:100%;display:flex;align-items:center;justify-content:center;color:rgb(144, 147, 153)") + span No Data diff --git a/html/src/theme.dark.scss b/html/src/theme.dark.scss index 8e25398f6..78268c9ba 100644 --- a/html/src/theme.dark.scss +++ b/html/src/theme.dark.scss @@ -127,8 +127,9 @@ button { background-color: #333; } -.el-tag--plain.el-tag--success { +.el-collapse-item .el-tag--mini { background-color: #333; + border: transparent; } .el-button { diff --git a/html/src/theme.darkvanilla.scss b/html/src/theme.darkvanilla.scss index 1e25cc565..06aeeb353 100644 --- a/html/src/theme.darkvanilla.scss +++ b/html/src/theme.darkvanilla.scss @@ -687,3 +687,8 @@ i[class='el-icon-star-off']:not(.el-menu-item div.el-tooltip i) { .x-friend-item:hover .el-input__count { background-color: transparent; } + +.el-collapse-item .el-tag--mini { + border: transparent; + background-color: var(--dv_bg-bot); +} diff --git a/html/src/theme.darkvanillaold.scss b/html/src/theme.darkvanillaold.scss index b3c84f940..ff9a8f255 100644 --- a/html/src/theme.darkvanillaold.scss +++ b/html/src/theme.darkvanillaold.scss @@ -313,3 +313,8 @@ path[stroke='#20a0ff'] { path[stroke='#e5e9f2'] { stroke: var(--farback) !important; } + +.el-collapse-item .el-tag--mini { + border: transparent; + background-color: #333 !important; +} diff --git a/html/src/theme.material3.scss b/html/src/theme.material3.scss index c1569ab9b..9576b2108 100644 --- a/html/src/theme.material3.scss +++ b/html/src/theme.material3.scss @@ -1993,3 +1993,8 @@ i.x-user-status { .el-table_41_column_291 { text-align: center !important; } + +.el-collapse-item .el-tag--mini { + background-color: transparent; + border: transparent; +} diff --git a/html/src/theme.pink.scss b/html/src/theme.pink.scss index b3ababe64..40e6d8d1d 100644 --- a/html/src/theme.pink.scss +++ b/html/src/theme.pink.scss @@ -361,3 +361,8 @@ input[type='checkbox']:checked + .el-switch__core { .x-friend-item:hover .el-input__count { background-color: var(--lighter-lighter-bg); } + +.el-collapse-item .el-tag--mini { + border: transparent; + background-color: #333; +} From 20964f79a9cd9d46dfcbbc7f627fcb3668d4c7d9 Mon Sep 17 00:00:00 2001 From: Map1en_ Date: Thu, 19 Dec 2024 17:36:09 +0900 Subject: [PATCH 5/6] improve(ui): tuning --- html/src/app.js | 4 ++++ html/src/mixins/dialogs/feedFilters.pug | 2 +- html/src/mixins/tabs/favorites.pug | 6 +++--- html/src/mixins/tabs/feed.pug | 2 +- html/src/mixins/tabs/friendsList.pug | 2 +- html/src/mixins/tabs/gameLog.pug | 2 +- html/src/mixins/tabs/profile.pug | 14 +++++++------- html/src/mixins/tabs/settings.pug | 7 +++++-- 8 files changed, 23 insertions(+), 16 deletions(-) diff --git a/html/src/app.js b/html/src/app.js index 9d8c3b7ae..e87868e8f 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -7923,6 +7923,10 @@ speechSynthesis.getVoices(); 'VRCX_notificationTTSNickName', false ); + + // It's not necessary to store it in configRepo because it's rarely used. + $app.data.isTestTTSVisible = false; + $app.data.notificationTTSVoice = await configRepository.getString( 'VRCX_notificationTTSVoice', '0' diff --git a/html/src/mixins/dialogs/feedFilters.pug b/html/src/mixins/dialogs/feedFilters.pug index dd28c08c0..fae0d54c8 100644 --- a/html/src/mixins/dialogs/feedFilters.pug +++ b/html/src/mixins/dialogs/feedFilters.pug @@ -246,7 +246,7 @@ mixin feedFilters() el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }} template(#footer) el-button(type="small" @click="resetSharedFeedFilters") {{ $t('dialog.shared_feed_filters.reset') }} - el-button(size="small" style="margin-left:10px" @click="notyFeedFiltersDialog.visible = false") {{ $t('dialog.shared_feed_filters.close') }} + el-button(size="small" type="primary" style="margin-left:10px" @click="notyFeedFiltersDialog.visible = false") {{ $t('dialog.shared_feed_filters.close') }} //- dialog: wrist feed filters el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="wristFeedFiltersDialog" :visible.sync="wristFeedFiltersDialog.visible" :title="$t('dialog.shared_feed_filters.wrist')" width="550px") diff --git a/html/src/mixins/tabs/favorites.pug b/html/src/mixins/tabs/favorites.pug index c2911e933..362b0756c 100644 --- a/html/src/mixins/tabs/favorites.pug +++ b/html/src/mixins/tabs/favorites.pug @@ -1,11 +1,11 @@ mixin favoritesTab() .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'favorite'") - div(style="font-size:13px;position:absolute;right:0;z-index:1;margin-right:15px") + div(style="font-size:13px;position:absolute;display:flex;right:0;z-index:1;margin-right:15px") div(v-if="editFavoritesMode" style="display:inline-block;margin-right:10px") el-button(size="small" @click="clearBulkFavoriteSelection ") {{ $t('view.favorite.clear') }} el-button(size="small" @click="bulkCopyFavoriteSelection") {{ $t('view.favorite.copy') }} el-button(size="small" @click="showBulkUnfavoriteSelectionConfirm") {{ $t('view.favorite.bulk_unfavorite') }} - div(style="display:inline-block;margin-right:10px") + div(style="display:flex;align-items: center;margin-right:10px") span.name {{ $t('view.favorite.edit_mode') }} el-switch(v-model="editFavoritesMode" style="margin-left:5px") el-tooltip(placement="bottom" :content="$t('view.favorite.refresh_tooltip')" :disabled="hideTooltips") @@ -92,7 +92,7 @@ mixin favoritesTab() template(slot="title") div(style="display:flex;align-items:center;") span(v-text="group.displayName ? group.displayName : group.name" style="font-weight:bold;font-size:14px;margin-left:10px") - el-tag(style="margin-left:5px" size="mini" :type="userFavoriteWorldsStatusForFavTab(group.visibility)" effect="plain") {{ group.visibility.charAt(0).toUpperCase() + group.visibility.slice(1) }} + el-tag(style="margin:1px 0 0 5px" size="mini" :type="userFavoriteWorldsStatusForFavTab(group.visibility)" effect="plain") {{ group.visibility.charAt(0).toUpperCase() + group.visibility.slice(1) }} span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }} el-tooltip(placement="top" :content="$t('view.favorite.visibility_tooltip')" :disabled="hideTooltips") el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:10px") diff --git a/html/src/mixins/tabs/feed.pug b/html/src/mixins/tabs/feed.pug index d67dfae33..c35f5c1d0 100644 --- a/html/src/mixins/tabs/feed.pug +++ b/html/src/mixins/tabs/feed.pug @@ -3,7 +3,7 @@ mixin feedTab() data-tables(v-bind="feedTable" v-loading="feedTable.loading") template(#tool) div(style="margin:0 0 10px;display:flex;align-items:center") - div(style="flex:none;margin-right:10px") + div(style="flex:none;margin-right:10px;display:flex;align-items:center;") el-tooltip(placement="bottom" :content="$t('view.feed.favorites_only_tooltip')" :disabled="hideTooltips") el-switch(v-model="feedTable.vip" @change="feedTableLookup" active-color="#13ce66") el-select(v-model="feedTable.filter" @change="feedTableLookup" multiple clearable style="flex:1;height:40px;" :placeholder="$t('view.feed.filter_placeholder')") diff --git a/html/src/mixins/tabs/friendsList.pug b/html/src/mixins/tabs/friendsList.pug index d2cc470db..0cf1f5775 100644 --- a/html/src/mixins/tabs/friendsList.pug +++ b/html/src/mixins/tabs/friendsList.pug @@ -18,7 +18,7 @@ mixin friendsListTab() el-tooltip(placement="top" :content="$t('view.friend_list.load_tooltip')" :disabled="hideTooltips") el-button(@click="friendsListLoadUsers" size="mini" icon="el-icon-refresh-left" circle style="margin-left:5px") div(style="margin:10px 0 0 10px;display:flex;align-items:center") - div(style="flex:none;margin-right:10px") + div(style="flex:none;margin-right:10px;display:flex;align-items:center;") el-tooltip(placement="bottom" :content="$t('view.friend_list.favorites_only_tooltip')" :disabled="hideTooltips") el-switch(v-model="friendsListSearchFilterVIP" @change="friendsListSearchChange" active-color="#13ce66") el-input(v-model="friendsListSearch" :placeholder="$t('view.friend_list.search_placeholder')" @change="friendsListSearchChange" clearable style="flex:1") diff --git a/html/src/mixins/tabs/gameLog.pug b/html/src/mixins/tabs/gameLog.pug index 6083a3bff..11f43e333 100644 --- a/html/src/mixins/tabs/gameLog.pug +++ b/html/src/mixins/tabs/gameLog.pug @@ -3,7 +3,7 @@ mixin gameLogTab() data-tables(v-bind="gameLogTable" v-loading="gameLogTable.loading") template(#tool) div(style="margin:0 0 10px;display:flex;align-items:center") - div(style="flex:none;margin-right:10px") + div(style="flex:none;margin-right:10px;display:flex;align-items:center;") el-tooltip(placement="bottom" :content="$t('view.feed.favorites_only_tooltip')" :disabled="hideTooltips") el-switch(v-model="gameLogTable.vip" @change="gameLogTableLookup" active-color="#13ce66") el-select(v-model="gameLogTable.filter" @change="gameLogTableLookup" multiple clearable style="flex:1" :placeholder="$t('view.game_log.filter_placeholder')") diff --git a/html/src/mixins/tabs/profile.pug b/html/src/mixins/tabs/profile.pug index 29d088e5a..d49d6891b 100644 --- a/html/src/mixins/tabs/profile.pug +++ b/html/src/mixins/tabs/profile.pug @@ -21,13 +21,13 @@ mixin profileTab() .detail span.name {{ $t('view.profile.profile.v_bucks') }} span.extra {{ API.currentUser.$vbucks ?? $t('view.profile.profile.refresh') }} - div - el-button(size="small" icon="el-icon-switch-button" @click="logout()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.logout') }} - el-button(size="small" icon="el-icon-picture-outline" @click="showGalleryDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.manage_gallery_icon') }} - el-button(size="small" icon="el-icon-printer" @click="showExportFriendsListDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_friend_list') }} - el-button(size="small" icon="el-icon-user" @click="showExportAvatarsListDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_own_avatars') }} - el-button(size="small" icon="el-icon-chat-dot-round" @click="showDiscordNamesDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.discord_names') }} - el-button(size="small" icon="el-icon-document-copy" @click="showNoteExportDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_notes') }} + div(style="margin-top:10px") + el-button(size="small" type="danger" plain icon="el-icon-switch-button" @click="logout()" style="margin-right:5px;background:#fef0f0 !important;border-color:#fbc4c4 !important;") {{ $t('view.profile.profile.logout') }} + el-button(size="small" icon="el-icon-picture-outline" @click="showGalleryDialog()" style="margin-right:5px") {{ $t('view.profile.profile.manage_gallery_icon') }} + el-button(size="small" icon="el-icon-printer" @click="showExportFriendsListDialog()" style="margin-right:5px") {{ $t('view.profile.profile.export_friend_list') }} + el-button(size="small" icon="el-icon-user" @click="showExportAvatarsListDialog()" style="margin-right:5px") {{ $t('view.profile.profile.export_own_avatars') }} + el-button(size="small" icon="el-icon-chat-dot-round" @click="showDiscordNamesDialog()" style="margin-right:5px") {{ $t('view.profile.profile.discord_names') }} + el-button(size="small" icon="el-icon-document-copy" @click="showNoteExportDialog()" style="margin-right:5px") {{ $t('view.profile.profile.export_notes') }} div.options-container span.header {{ $t('view.profile.game_info.header') }} .x-friend-list(style="margin-top:10px") diff --git a/html/src/mixins/tabs/settings.pug b/html/src/mixins/tabs/settings.pug index f4bc51ebe..6460092f7 100644 --- a/html/src/mixins/tabs/settings.pug +++ b/html/src/mixins/tabs/settings.pug @@ -394,8 +394,11 @@ mixin settingsTab() span.name {{ $t('view.settings.notifications.notifications.text_to_speech.use_memo_nicknames') }} el-switch(v-model="notificationTTSNickName" @change="saveOpenVROption" :disabled="notificationTTS === 'Never'") div.options-container-item - el-input(type="textarea" v-model="notificationTTSTest" :placeholder="$t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')" :rows="1" style="width:175px;display:inline-block") - el-button(size="small" icon="el-icon-video-play" @click="testNotificationTTS") {{ $t('view.settings.notifications.notifications.text_to_speech.play') }} + span.name {{ $t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder') }} + el-switch(v-model="isTestTTSVisible") + div(v-if="isTestTTSVisible" style="margin-top:5px") + el-input(type="textarea" v-model="notificationTTSTest" :placeholder="$t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')" :rows="1" style="width:175px;display:inline-block") + el-button(size="small" icon="el-icon-video-play" @click="testNotificationTTS" style="margin-top:5px") {{ $t('view.settings.notifications.notifications.text_to_speech.play') }} //- Wrist Overlay Tab el-tab-pane(:label="$t('view.settings.category.wrist_overlay')") //- Wrist Overlay | SteamVR Wrist Overlay From fb45546c508e44edaa1483f74361ca8d0e341bf7 Mon Sep 17 00:00:00 2001 From: Map1en_ Date: Fri, 20 Dec 2024 18:40:38 +0900 Subject: [PATCH 6/6] improve(style): settings page --- html/src/app.scss | 16 +++- html/src/mixins/tabs/profile.pug | 12 +-- html/src/mixins/tabs/settings.pug | 135 +++++++++++++----------------- 3 files changed, 78 insertions(+), 85 deletions(-) diff --git a/html/src/app.scss b/html/src/app.scss index 3eacd1354..29d1a9dc6 100644 --- a/html/src/app.scss +++ b/html/src/app.scss @@ -730,7 +730,21 @@ i.x-status-icon.red { .options-container-item .name { display: inline-block; - min-width: 175px; + min-width: 225px; +} + +.simple-switch { + font-size: 12px; + margin-top: 5px; + display: flex; +} + +.simple-switch .name { + flex-basis: 225px; +} + +.simple-switch .switch { + flex-shrink: 0; } .toggle-switch { diff --git a/html/src/mixins/tabs/profile.pug b/html/src/mixins/tabs/profile.pug index d49d6891b..659fd11ed 100644 --- a/html/src/mixins/tabs/profile.pug +++ b/html/src/mixins/tabs/profile.pug @@ -22,12 +22,12 @@ mixin profileTab() span.name {{ $t('view.profile.profile.v_bucks') }} span.extra {{ API.currentUser.$vbucks ?? $t('view.profile.profile.refresh') }} div(style="margin-top:10px") - el-button(size="small" type="danger" plain icon="el-icon-switch-button" @click="logout()" style="margin-right:5px;background:#fef0f0 !important;border-color:#fbc4c4 !important;") {{ $t('view.profile.profile.logout') }} - el-button(size="small" icon="el-icon-picture-outline" @click="showGalleryDialog()" style="margin-right:5px") {{ $t('view.profile.profile.manage_gallery_icon') }} - el-button(size="small" icon="el-icon-printer" @click="showExportFriendsListDialog()" style="margin-right:5px") {{ $t('view.profile.profile.export_friend_list') }} - el-button(size="small" icon="el-icon-user" @click="showExportAvatarsListDialog()" style="margin-right:5px") {{ $t('view.profile.profile.export_own_avatars') }} - el-button(size="small" icon="el-icon-chat-dot-round" @click="showDiscordNamesDialog()" style="margin-right:5px") {{ $t('view.profile.profile.discord_names') }} - el-button(size="small" icon="el-icon-document-copy" @click="showNoteExportDialog()" style="margin-right:5px") {{ $t('view.profile.profile.export_notes') }} + el-button(size="small" type="danger" plain icon="el-icon-switch-button" @click="logout()" style="margin-left:0;margin-right:5px;margin-top:10px;background:#fef0f0 !important;border-color:#fbc4c4 !important;") {{ $t('view.profile.profile.logout') }} + el-button(size="small" icon="el-icon-picture-outline" @click="showGalleryDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.manage_gallery_icon') }} + el-button(size="small" icon="el-icon-printer" @click="showExportFriendsListDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_friend_list') }} + el-button(size="small" icon="el-icon-user" @click="showExportAvatarsListDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_own_avatars') }} + el-button(size="small" icon="el-icon-chat-dot-round" @click="showDiscordNamesDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.discord_names') }} + el-button(size="small" icon="el-icon-document-copy" @click="showNoteExportDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_notes') }} div.options-container span.header {{ $t('view.profile.game_info.header') }} .x-friend-list(style="margin-top:10px") diff --git a/html/src/mixins/tabs/settings.pug b/html/src/mixins/tabs/settings.pug index 6460092f7..d0290841c 100644 --- a/html/src/mixins/tabs/settings.pug +++ b/html/src/mixins/tabs/settings.pug @@ -6,13 +6,13 @@ mixin simpleSettingsCategory(headerTrKey) else p No Content -mixin simpleSwitch(nameTrKey, model, onChange="") - div.options-container-item +mixin simpleSwitch(nameTrKey, model, onChange="", tooltipContent) + div.simple-switch //- I fought with getting the right syntax for a translation key, as an argument, in an interpolated block for like 20mins before I realized the answer was staring me in the face in the documentation I passed over like 5 times. Feelsbadman. //- I didn't even know what pug was before working on this; speedrunning learning pug templating. - span.name {{ $t('#{nameTrKey}') }} //- I've also never worked with vue/element and have no idea what I'm doing. pog, as the kids say - el-switch(v-model=model @change=onChange) + span.name {{ $t('#{nameTrKey}') }} + el-switch.switch(v-model=model @change=onChange) mixin simpleTwoLabelSwitch(nameTrKey, model, onChange="") div.options-container-item @@ -31,7 +31,7 @@ mixin simpleRadioGroupWithTooltip(nameTrKey, tooltipContent, model, options, onC div.options-container-item span.name {{ $t('#{nameTrKey}') }} el-tooltip(placement="top" style="margin-left:5px" :content=tooltipContent) - i.el-icon-warning + i.el-icon-info br el-radio-group(v-model=model @change=onChange size="mini" style="margin-top:5px") each option in options @@ -41,7 +41,7 @@ mixin settingsTab() .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'settings'") div.options-container(style="margin-top:0;padding:5px") span.header {{ $t("view.settings.header") }} - el-tabs(type="card" style="height: calc(100% - 51px") + el-tabs(type="card" style="height: calc(100% - 51px)") el-tab-pane(:label="$t('view.settings.category.general')") //- General | General div.options-container(style="margin-top:0") @@ -86,12 +86,12 @@ mixin settingsTab() div.options-container-item span.name {{ $t('view.settings.general.application.disable_gpu_acceleration') }} el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.general.application.disable_gpu_acceleration_tooltip')") - i.el-icon-warning + i.el-icon-info el-switch(v-model="disableGpuAcceleration" @change="saveVRCXWindowOption") div.options-container-item - span.name(style="min-width:225px") {{ $t('view.settings.general.application.disable_vr_overlay_gpu_acceleration') }} + span.name {{ $t('view.settings.general.application.disable_vr_overlay_gpu_acceleration') }} el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.general.application.disable_gpu_acceleration_tooltip')") - i.el-icon-warning + i.el-icon-info el-switch(v-model="disableVrOverlayGpuAcceleration" @change="saveVRCXWindowOption") div.options-container-item el-button(size="small" icon="el-icon-connection" @click="promptProxySettings()") {{ $t("view.settings.general.application.proxy") }} @@ -106,15 +106,9 @@ mixin settingsTab() //- General | Game Log div.options-container span.header {{ $t('view.settings.general.logging.header') }} - div.options-container-item - span.name(style="min-width:225px") {{ $t('view.settings.advanced.advanced.cache_debug.udon_exception_logging') }} - el-switch(v-model="udonExceptionLogging" @change="saveOpenVROption") - div.options-container-item - span.name(style="min-width:225px") {{ $t('view.settings.general.logging.resource_load') }} - el-switch(v-model="logResourceLoad" @change="saveLoggingOptions") - div.options-container-item - span.name(style="min-width:225px") {{ $t('view.settings.general.logging.empty_avatar') }} - el-switch(v-model="logEmptyAvatars" @change="saveLoggingOptions") + +simpleSwitch("view.settings.advanced.advanced.cache_debug.udon_exception_logging", "udonExceptionLogging", "saveOpenVROption") + +simpleSwitch("view.settings.general.logging.resource_load", "logResourceLoad", "saveLoggingOptions") + +simpleSwitch("view.settings.general.logging.empty_avatar", "logEmptyAvatars", "saveLoggingOptions") //- General | Automation div.options-container span.header {{ $t('view.settings.general.automation.header') }} @@ -125,7 +119,7 @@ mixin settingsTab() el-switch(v-model="autoStateChangeEnabled" @change="saveAutomationOptions") div.options-container-item span.name {{ $t('view.settings.general.automation.alone_status') }} - el-select(v-model="autoStateChangeAloneStatus" :disabled="!autoStateChangeEnabled" @change="saveAutomationOptions" style="margin-top:8px") + el-select(v-model="autoStateChangeAloneStatus" :disabled="!autoStateChangeEnabled" @change="saveAutomationOptions" style="margin-top:8px" size="small") el-option(:label="$t('dialog.user.status.join_me')" value="join me"). #[i.x-user-status.joinme] {{ $t('dialog.user.status.join_me') }} el-option(:label="$t('dialog.user.status.online')" value="active"). @@ -136,7 +130,7 @@ mixin settingsTab() #[i.x-user-status.busy] {{ $t('dialog.user.status.busy') }} div.options-container-item span.name {{ $t('view.settings.general.automation.company_status') }} - el-select(v-model="autoStateChangeCompanyStatus" :disabled="!autoStateChangeEnabled" @change="saveAutomationOptions" style="margin-top:8px") + el-select(v-model="autoStateChangeCompanyStatus" :disabled="!autoStateChangeEnabled" @change="saveAutomationOptions" style="margin-top:8px" size="small") el-option(:label="$t('dialog.user.status.join_me')" value="join me"). #[i.x-user-status.joinme] {{ $t('dialog.user.status.join_me') }} el-option(:label="$t('dialog.user.status.online')" value="active"). @@ -147,16 +141,16 @@ mixin settingsTab() #[i.x-user-status.busy] {{ $t('dialog.user.status.busy') }} div.options-container-item span.name {{ $t('view.settings.general.automation.allowed_instance_types') }} - el-select(v-model="autoStateChangeInstanceTypes" :disabled="!autoStateChangeEnabled" multiple clearable :placeholder="$t('view.settings.general.automation.instance_type_placeholder')" @change="saveAutomationOptions" style="margin-top:8px") + el-select(v-model="autoStateChangeInstanceTypes" :disabled="!autoStateChangeEnabled" multiple clearable :placeholder="$t('view.settings.general.automation.instance_type_placeholder')" @change="saveAutomationOptions" style="margin-top:8px" size="small") el-option-group(:label="$t('view.settings.general.automation.allowed_instance_types')") el-option.x-friend-item(v-for="instanceType in instanceTypes" :key="instanceType" :label="instanceType" :value="instanceType") .detail span.name(v-text="instanceType") div.options-container-item span.name {{ $t('view.settings.general.automation.alone_condition') }} - el-switch(v-model="autoStateChangeNoFriends" :disabled="!autoStateChangeEnabled" @change="saveAutomationOptions" :inactive-text="$t('view.settings.general.automation.alone')" :active-text="$t('view.settings.general.automation.no_friends')") - br - br + el-radio-group(v-model="autoStateChangeNoFriends" :disabled="!autoStateChangeEnabled" @change="saveAutomationOptions" ) + el-radio(:label="false") {{ $t('view.settings.general.automation.alone') }} + el-radio(:label="true") {{ $t('view.settings.general.automation.no_friends') }} +simpleRadioGroupWithTooltip("view.settings.general.automation.auto_invite_request_accept", "$t('view.settings.general.automation.auto_invite_request_accept_tooltip')", "autoAcceptInviteRequests", [ { label: "Off", translationKey: "view.settings.general.automation.auto_invite_request_accept_off" }, { label: "All Favorites", translationKey: "view.settings.general.automation.auto_invite_request_accept_favs" }, @@ -205,35 +199,35 @@ mixin settingsTab() div.options-container-item span.name {{ $t('view.settings.appearance.appearance.zoom') }} el-input-number(size="small" v-model="zoomLevel" @change="setZoomLevel" :precision="0" style="width:128px") - div.options-container-item - span.name {{ $t('view.settings.appearance.appearance.vrcplus_profile_icons') }} - el-switch(v-model="displayVRCPlusIconsAsAvatar" @change="saveOpenVROption") - div.options-container-item - span.name {{ $t('view.settings.appearance.appearance.nicknames') }} - el-switch(v-model="hideNicknames" :active-value="false" :inactive-value="true" @change="saveOpenVROption") - div.options-container-item - span.name {{ $t('view.settings.appearance.appearance.tooltips') }} - el-switch(v-model="hideTooltips" :active-value="false" :inactive-value="true" @change="saveOpenVROption") + +simpleSwitch('view.settings.appearance.appearance.vrcplus_profile_icons', "displayVRCPlusIconsAsAvatar", "saveOpenVROption") + +simpleSwitch('view.settings.appearance.appearance.nicknames', "hideNicknames", "saveOpenVROption") + +simpleSwitch('view.settings.appearance.appearance.tooltips', "hideTooltips", "saveOpenVROption") div.options-container-item span.name {{ $t('view.settings.appearance.appearance.sort_favorite_by') }} - el-switch(v-model="sortFavorites" :inactive-text="$t('view.settings.appearance.appearance.sort_favorite_by_name')" :active-text="$t('view.settings.appearance.appearance.sort_favorite_by_date')" @change="saveSortFavoritesOption") + el-radio-group(v-model="sortFavorites" @change="saveSortFavoritesOption") + el-radio(:label="false") {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }} + el-radio(:label="true") {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }} div.options-container-item span.name {{ $t('view.settings.appearance.appearance.sort_instance_users_by') }} - el-switch(v-model="instanceUsersSortAlphabetical" :inactive-text="$t('view.settings.appearance.appearance.sort_instance_users_by_time')" :active-text="$t('view.settings.appearance.appearance.sort_instance_users_by_alphabet')" @change="saveOpenVROption") - div.options-container-item - el-button(size="small" icon="el-icon-notebook-1" @click="promptMaxTableSizeDialog") {{ $t('view.settings.appearance.appearance.table_max_size') }} + el-radio-group(v-model="instanceUsersSortAlphabetical" @change="saveOpenVROption") + el-radio(:label="false") {{ $t('view.settings.appearance.appearance.sort_instance_users_by_time') }} + el-radio(:label="true") {{ $t('view.settings.appearance.appearance.sort_instance_users_by_alphabet') }} div.options-container-item + el-button(size="small" icon="el-icon-notebook-1" @click="promptMaxTableSizeDialog" style="margin-right:10px") {{ $t('view.settings.appearance.appearance.table_max_size') }} el-dropdown(@click.native.stop trigger="click" size="small") - el-button(size="mini") + el-button(size="small") span {{ $t('view.settings.appearance.appearance.page_size') }} {{ tablePageSize }} #[i.el-icon-arrow-down.el-icon--right] el-dropdown-menu(#default="dropdown") el-dropdown-item(v-for="(number) in [10, 15, 25, 50, 100]" v-text="number" @click.native="setTablePageSize(number)") + div.options-container-item //- Appearance | Time/Date div.options-container span.header {{ $t('view.settings.appearance.timedate.header') }} div.options-container-item span.name {{ $t('view.settings.appearance.timedate.time_format') }} - el-switch(v-model="dtHour12" @change="setDatetimeFormat" :inactive-text="$t('view.settings.appearance.timedate.time_format_24')" :active-text="$t('view.settings.appearance.timedate.time_format_12')") + el-radio-group(v-model="dtHour12" @change="setDatetimeFormat") + el-radio(:label="true") {{ $t('view.settings.appearance.timedate.time_format_12') }} + el-radio(:label="false") {{ $t('view.settings.appearance.timedate.time_format_24') }} div.options-container-item span.name {{ $t('view.settings.appearance.timedate.force_iso_date_format') }} el-switch(v-model="dtIsoFormat" @change="setDatetimeFormat") @@ -278,12 +272,8 @@ mixin settingsTab() //- Appearance | User Dialog div.options-container span.header {{ $t('view.settings.appearance.user_dialog.header') }} - div.options-container-item - span.name {{ $t('view.settings.appearance.user_dialog.vrchat_notes') }} - el-switch(v-model="hideUserNotes" :active-value="false" :inactive-value="true" @change="saveUserDialogOption") - div.options-container-item - span.name {{ $t('view.settings.appearance.user_dialog.vrcx_memos') }} - el-switch(v-model="hideUserMemos" :active-value="false" :inactive-value="true" @change="saveUserDialogOption") + +simpleSwitch("view.settings.appearance.user_dialog.vrchat_notes", "hideUserNotes", "saveUserDialogOption") + +simpleSwitch("view.settings.appearance.user_dialog.vrcx_memos", "hideUserMemos", "saveUserDialogOption") div.options-container-item span.name {{ $t('view.settings.appearance.user_dialog.export_vrcx_memos_into_vrchat_notes') }} br @@ -291,9 +281,7 @@ mixin settingsTab() //- Appearance | Friend Log div.options-container span.header {{ $t('view.settings.appearance.friend_log.header') }} - div.options-container-item - span.name {{ $t('view.settings.appearance.friend_log.hide_unfriends') }} - el-switch(v-model="hideUnfriends" @change="saveFriendLogOptions") + +simpleSwitch("view.settings.appearance.friend_log.hide_unfriends", "hideUnfriends", "saveFriendLogOptions") //- Appearance | User Colors div.options-container span.header {{ $t('view.settings.appearance.user_colors.header') }} @@ -333,25 +321,20 @@ mixin settingsTab() div.options-container span.sub-header {{ $t('view.settings.notifications.notifications.steamvr_notifications.header') }} div.options-container-item - span.name {{ $t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay') }} - el-switch(v-model="openVR" @change="saveOpenVROption") + +simpleSwitch("view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay", "openVR", "saveOpenVROption") div.options-container-item span.name {{ $t('view.settings.notifications.notifications.steamvr_notifications.overlay_notifications') }} el-switch(v-model="overlayNotifications" @change="saveOpenVROption" :disabled="!openVR") div.options-container-item el-button(size="small" icon="el-icon-rank" @click="showNotificationPositionDialog" :disabled="!overlayNotifications || !openVR") {{ $t('view.settings.notifications.notifications.steamvr_notifications.notification_position') }} div.options-container-item - span.name {{ $t('view.settings.notifications.notifications.steamvr_notifications.xsoverlay_notifications') }} - el-switch(v-model="xsNotifications" @change="saveOpenVROption") + +simpleSwitch("view.settings.notifications.notifications.steamvr_notifications.xsoverlay_notifications", "xsNotifications", "saveOpenVROption") div.options-container-item - span.name {{ $t('view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_hud_notifications') }} - el-switch(v-model="ovrtHudNotifications" @change="saveOpenVROption") + +simpleSwitch("view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_hud_notifications", "ovrtHudNotifications", "saveOpenVROption") div.options-container-item - span.name {{ $t('view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_wrist_notifications') }} - el-switch(v-model="ovrtWristNotifications" @change="saveOpenVROption") + +simpleSwitch("view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_wrist_notifications", "ovrtWristNotifications", "saveOpenVROption") div.options-container-item - span.name {{ $t('view.settings.notifications.notifications.steamvr_notifications.user_images') }} - el-switch(v-model="imageNotifications" @change="saveOpenVROption") + +simpleSwitch("view.settings.notifications.notifications.steamvr_notifications.user_images", "imageNotifications", "saveOpenVROption") div.options-container-item el-button(size="small" icon="el-icon-time" @click="promptNotificationTimeout" :disabled="(!overlayNotifications || !openVR) && !xsNotifications") {{ $t('view.settings.notifications.notifications.steamvr_notifications.notification_timeout') }} //- Notifications | Notifications | Desktop Notifications @@ -415,20 +398,22 @@ mixin settingsTab() span {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.menu') }} br div.options-container-item - span.name {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.steamvr_overlay') }} - el-switch(v-model="openVR" @change="saveOpenVROption") + +simpleSwitch("view.settings.wrist_overlay.steamvr_wrist_overlay.steamvr_overlay", "openVR", "saveOpenVROption") div.options-container-item span.name {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_overlay') }} el-switch(v-model="overlayWrist" @change="saveOpenVROption" :disabled="!openVR") div.options-container-item - span.name {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.hide_private_worlds') }} - el-switch(v-model="hidePrivateFromFeed" @change="saveOpenVROption") + +simpleSwitch("view.settings.wrist_overlay.steamvr_wrist_overlay.hide_private_worlds", "hidePrivateFromFeed", "saveOpenVROption") div.options-container-item(style="min-width:118px") span.name {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.start_overlay_with') }} - el-switch(v-model="openVRAlways" @change="saveOpenVROption" inactive-text="VRChat" active-text="SteamVR" :disabled="!openVR") + el-radio-group(v-model="openVRAlways" @change="saveOpenVROption" :disabled="!openVR") + el-radio(:label="false") {{ "VRChat" }} + el-radio(:label="true") {{ "SteamVR" }} div.options-container-item span.name {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button') }} - el-switch(v-model="overlaybutton" @change="saveOpenVROption" :inactive-text="$t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip')" :active-text="$t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu')" :disabled="!openVR || !overlayWrist") + el-radio-group(v-model="overlaybutton" @change="saveOpenVROption" :disabled="!openVR || !overlayWrist") + el-radio(:label="false") {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip') }} + el-radio(:label="true") {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu') }} div.options-container-item span.name {{ $t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }} el-radio-group(v-model="overlayHand" @change="saveOpenVROption" size="mini") @@ -460,10 +445,7 @@ mixin settingsTab() div.options-container-item span {{ $t('view.settings.discord_presence.discord_presence.description') }} div.options-container-item - span.name {{ $t('view.settings.discord_presence.discord_presence.enable') }} - el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.discord_presence.discord_presence.enable_tooltip')") - i.el-icon-warning(style="cursor:pointer" @click="showVRChatConfig") - el-switch(v-model="discordActive" @change="saveDiscordOption") + +simpleSwitch("view.settings.discord_presence.discord_presence.enable", "discordActive", "saveDiscordOption", 'view.settings.discord_presence.discord_presence.enable_tooltip') div.options-container-item span.name {{ $t('view.settings.discord_presence.discord_presence.instance_type_player_count') }} el-switch(v-model="discordInstance" @change="saveDiscordOption" :disabled="!discordActive") @@ -538,8 +520,7 @@ mixin settingsTab() div.options-container span.header {{ $t('view.settings.advanced.advanced.remote_database.header') }} div.options-container-item - span.name {{ $t('view.settings.advanced.advanced.remote_database.enable') }} - el-switch(v-model="avatarRemoteDatabase" @change="saveOpenVROption") + +simpleSwitch("view.settings.advanced.advanced.remote_database.enable", "avatarRemoteDatabase", "saveOpenVROption") div.options-container-item el-button(size="small" icon="el-icon-user-solid" @click="showAvatarProviderDialog") {{ $t('view.settings.advanced.advanced.remote_database.avatar_database_provider') }} //- Advanced | Automatic App Launcher @@ -547,7 +528,7 @@ mixin settingsTab() br el-button(size="small" icon="el-icon-folder" @click="openShortcutFolder()" style="margin-top:5px") {{ $t('view.settings.advanced.advanced.app_launcher.folder') }} el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.app_launcher.folder_tooltip')") - i.el-icon-warning + i.el-icon-info +simpleSwitch("view.settings.advanced.advanced.app_launcher.enable", "enableAppLauncher", "updateAppLauncherSettings") +simpleSwitch("view.settings.advanced.advanced.app_launcher.auto_close", "enableAppLauncherAutoClose", "updateAppLauncherSettings") //- Advanced | Screenshot Helper @@ -558,8 +539,7 @@ mixin settingsTab() el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.screenshot_helper.description_tooltip')") i.el-icon-info div.options-container-item - span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.enable') }} - el-switch(v-model="screenshotHelper" @change="saveScreenshotHelper") + +simpleSwitch("view.settings.advanced.advanced.screenshot_helper.enable", "screenshotHelper", "saveScreenshotHelper") div.options-container-item span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.modify_filename') }} el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.screenshot_helper.modify_filename_tooltip')") @@ -584,7 +564,7 @@ mixin settingsTab() div.options-container-item span.name {{ $t('view.settings.advanced.advanced.video_progress_pie.enable') }} el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.video_progress_pie.enable_tooltip')") - i.el-icon-warning + i.el-icon-info el-switch(v-model="progressPie" @change="changeYouTubeApi" :disabled="!openVR") div.options-container-item span.name {{ $t('view.settings.advanced.advanced.video_progress_pie.dance_world_only') }} @@ -597,7 +577,7 @@ mixin settingsTab() div.options-container-item span.name {{ $t('view.settings.advanced.photon.event_hud.enable') }} el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.photon.event_hud.enable_tooltip')") - i.el-icon-warning + i.el-icon-info el-switch(v-model="photonEventOverlay" @change="saveEventOverlay" :disabled="!openVR") div.options-container-item span.name {{ $t('view.settings.advanced.photon.event_hud.filter') }} @@ -615,7 +595,7 @@ mixin settingsTab() div.options-container-item span.name {{ $t('view.settings.advanced.photon.timeout_hud.enable') }} el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.photon.timeout_hud.enable_tooltip')") - i.el-icon-warning + i.el-icon-info el-switch(v-model="timeoutHudOverlay" @change="saveEventOverlay" :disabled="!openVR") div.options-container-item span.name {{ $t('view.settings.advanced.photon.timeout_hud.filter') }} @@ -630,8 +610,7 @@ mixin settingsTab() span.header {{ $t('view.settings.advanced.advanced.cache_debug.header') }} br div.options-container-item - span.name {{ $t('view.settings.advanced.advanced.cache_debug.disable_gamelog') }} - el-switch(v-model="gameLogDisabled" @change="disableGameLogDialog") + +simpleSwitch("view.settings.advanced.advanced.cache_debug.disable_gamelog", "gameLogDisabled", "disableGameLogDialog") span.name(style="margin-left:15px") {{ $t('view.settings.advanced.advanced.cache_debug.disable_gamelog_notice') }} div.options-container-item span.name {{ $t('view.settings.advanced.advanced.cache_debug.user_cache') }} #[span(v-text="API.cachedUsers.size")]