From 05707163833d55b387b07f88c0895811101fa468 Mon Sep 17 00:00:00 2001 From: Map1en_ Date: Mon, 16 Dec 2024 18:52:08 +0900 Subject: [PATCH] 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 43e2c61d..5926b9bc 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 c6a6d6ef..14353ede 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 157a47c8..13d34904 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 23a967be..dd28c08c 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 414b347f..77a54ba3 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 6c49ada0..40a222b6 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 84471217..14b9bbf7 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 c0b74d46..3da51eb6 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 9788834d..297d473e 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 d06989db..8158707c 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 6a724e60..6083a3bf 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 a2af8b52..674f82ba 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 1fd10ffc..3b15a569 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 c0ca6e8c..39e55055 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 3d2e6583..29d088e5 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 2baedc6e..9a29fcd6 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)