UI: Enhancement (#1033)

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'
@@ -17188,6 +17192,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',
@@ -19659,6 +19675,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) {
@@ -19924,6 +19957,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
      */
@@ -20165,6 +20215,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) {

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);
 }
@@ -731,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 {
@@ -749,7 +762,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 +927,27 @@ 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;
+}
+
+// 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;
+}
+
+// Align the left page with the right friend bar
+.x-app > .x-container {
+    padding-top: 15px;
+}
+
+.el-collapse-item .el-tag--mini {
+    line-height: 17px;
+}

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,

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