ui: Enhancement (vrcx-team#1033)

Map1en · Dec 16, 2024 · 0570716 · 0570716
1 parent 109753b
commit 0570716
Show file tree

Hide file tree

Showing 16 changed files with 130 additions and 95 deletions.
diff --git 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
@@ -73,7 +73,7 @@ export default class extends baseClass {
                 '<i v-if="isTraveling" class="el-icon el-icon-loading" style="display:inline-block;margin-right:5px"></i>' +
                 '<span>{{ text }}</span></span>' +
                 '<span v-if="groupName" @click="showGroupDialog" :class="{ \'x-link\': link}">({{ groupName }})</span>' +
-                '<span class="flags" :class="region" style="display:inline-block;margin-left:5px"></span>' +
+                '<span v-if="region" class="flags" :class="region" style="display:inline-block;margin-left:5px"></span>' +
                 '<i v-if="strict" class="el-icon el-icon-lock" style="display:inline-block;margin-left:5px"></i></span>',
             props: {
                 location: String,

diff --git 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
@@ -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
@@ -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
@@ -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(