UI/UX and Performance Improvement (vrcx-team#1122)

* wip * wip * ui improve and fix * fix
Natsumi-sama · Feb 9, 2025 · 20050fc · 20050fc
1 parent 9b4a7b7
commit 20050fc
Show file tree

Hide file tree

Showing 14 changed files with 148 additions and 111 deletions.
diff --git a/src/app.js b/src/app.js
@@ -9811,6 +9811,7 @@ console.log(`isLinux: ${LINUX}`);
             privacy: '',
             shortCode: ''
         },
+        isRepresentedGroupLoading: false,
         joinCount: 0,
         timeSpent: 0,
         lastSeen: '',
@@ -10074,6 +10075,7 @@ console.log(`isLinux: ${LINUX}`);
             shortName: '',
             ref: {}
         };
+        D.isRepresentedGroupLoading = true;
         D.representedGroup = {
             bannerUrl: '',
             description: '',
@@ -10298,6 +10300,9 @@ console.log(`isLinux: ${LINUX}`);
                         }
                         API.getRepresentedGroup({ userId }).then((args1) => {
                             D.representedGroup = args1.json;
+                            if (!args1.json || !args1.json.isRepresenting) {
+                                D.isRepresentedGroupLoading = false;
+                            }
                         });
                         D.loading = false;
                     });

diff --git a/src/classes/uiComponents.js b/src/classes/uiComponents.js
@@ -566,7 +566,7 @@ export default class extends baseClass {
             props: {
                 userid: String,
                 location: String,
-                key: Number,
+                forceUpdateKey: Number,
                 hint: {
                     type: String,
                     default: ''
@@ -603,7 +603,7 @@ export default class extends baseClass {
                 location() {
                     this.parse();
                 },
-                key() {
+                forceUpdateKey() {
                     this.parse();
                 },
                 userid() {

diff --git a/src/components/sidebar/GroupsSidebar.vue b/src/components/sidebar/GroupsSidebar.vue
@@ -3,13 +3,16 @@
         <template v-for="(group, index) in groupedGroupInstances">
             <div
                 :key="getGroupId(group)"
-                class="x-friend-group x-link sidebar-group-title"
+                class="x-friend-group x-link"
                 :style="{ paddingTop: index === 0 ? '0px' : '10px' }"
             >
                 <div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
                     <i
                         class="el-icon-arrow-right"
-                        :class="{ rotate: !groupInstancesCfg[getGroupId(group)].isCollapsed }"
+                        :style="{
+                            transform: groupInstancesCfg[getGroupId(group)].isCollapsed ? '' : 'rotate(90deg)',
+                            transition: 'transform 0.3s'
+                        }"
                     ></i>
                     <span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span>
                 </div>
@@ -79,7 +82,6 @@
                         };
                     }
                 });
-
                 return Array.from(groupMap.values()).sort(this.sortGroupInstancesByInGame);
             }
         },
@@ -110,3 +112,12 @@
         }
     };
 </script>
+
+<style scoped>
+    .x-link:hover {
+        text-decoration: none;
+    }
+    .x-link:hover span {
+        text-decoration: underline;
+    }
+</style>
diff --git a/src/index.pug b/src/index.pug
@@ -36,7 +36,7 @@ html
                         circle
                         style='font-size: 14px; height: 50px; width: 50px')
 
-                el-menu(ref='menu' collapse @select='selectMenu')
+                el-menu(ref='menu' collapse @select='selectMenu' default-active='feed')
                     mixin menuitem(index, name, icon)
                         el-menu-item(index=index)
                             i(class=icon)

diff --git a/src/mixins/dialogs/currentUser.pug b/src/mixins/dialogs/currentUser.pug
@@ -99,8 +99,9 @@ mixin currentUser
                 size='mini'
                 maxlength='512'
                 show-word-limit
-                :autosize='{ minRows: 2, maxRows: 5 }'
-                :placeholder='$t("dialog.bio.bio_placeholder")')
+                :autosize='{ minRows: 5, maxRows: 20 }'
+                :placeholder='$t("dialog.bio.bio_placeholder")'
+                style='margin-bottom: 10px')
             el-input(
                 v-for='(link, index) in bioDialog.bioLinks'
                 :key='index'
@@ -147,7 +148,9 @@ mixin currentUser
         ref='galleryDialog'
         :visible.sync='galleryDialogVisible'
         :title='$t("dialog.gallery_icons.header")'
-        width='100%')
+        width='97vw'
+        top='5vh'
+        destroy-on-close)
         el-tabs(type='card' ref='galleryTabs')
             el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogGalleryLoading')
                 span(slot='label') {{ $t('dialog.gallery_icons.gallery') }}
@@ -199,7 +202,7 @@ mixin currentUser
                             icon='el-icon-delete'
                             circle
                             style='margin-left: 5px')
-            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogIconsLoading')
+            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogIconsLoading' lazy)
                 span(slot='label') {{ $t('dialog.gallery_icons.icons') }}
                     span(style='color: #909399; font-size: 12px; margin-left: 5px') {{ VRCPlusIconsTable.length }}/64
                 input#VRCPlusIconUploadButton(
@@ -249,35 +252,36 @@ mixin currentUser
                             icon='el-icon-delete'
                             circle
                             style='margin-left: 5px')
-            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogEmojisLoading')
+            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogEmojisLoading' lazy)
                 span(slot='label') {{ $t('dialog.gallery_icons.emojis') }}
                     span(style='color: #909399; font-size: 12px; margin-left: 5px') {{ emojiTable.length }}/9
                 input#EmojiUploadButton(type='file' accept='image/*' @change='onFileChangeEmoji' style='display: none')
                 span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 1024x1024px (1:1)
                 br
                 br
-                el-button-group(style='margin-right: 10px')
-                    el-button(type='default' size='small' @click='refreshEmojiTable' icon='el-icon-refresh') {{ $t('dialog.gallery_icons.refresh') }}
-                    el-button(
-                        type='default'
-                        size='small'
-                        @click='displayEmojiUpload'
-                        icon='el-icon-upload2'
-                        :disabled='!API.currentUser.$isVRCPlus') {{ $t('dialog.gallery_icons.upload') }}
-                el-select(v-model='emojiAnimationStyle' popper-class='max-height-el-select')
-                    el-option-group {{ $t('dialog.gallery_icons.emoji_animation_styles') }}
-                        el-option.x-friend-item(
-                            v-for='(fileName, styleName) in emojiAnimationStyleList'
-                            :key='fileName'
-                            :label='styleName'
-                            :value='styleName'
-                            style='height: auto')
-                            .avatar(style='width: 200px; height: 200px')
-                                img(v-lazy='`${emojiAnimationStyleUrl}${fileName}`')
-                            .detail
-                                span.name(v-text='styleName' style='margin-right: 100px')
-                el-checkbox(v-model='emojiAnimType' style='margin-left: 10px; margin-right: 10px')
-                    span {{ $t('dialog.gallery_icons.emoji_animation_type') }}
+                div(style='display: flex; align-items: center')
+                    el-button-group(style='margin-right: 10px')
+                        el-button(type='default' size='small' @click='refreshEmojiTable' icon='el-icon-refresh') {{ $t('dialog.gallery_icons.refresh') }}
+                        el-button(
+                            type='default'
+                            size='small'
+                            @click='displayEmojiUpload'
+                            icon='el-icon-upload2'
+                            :disabled='!API.currentUser.$isVRCPlus') {{ $t('dialog.gallery_icons.upload') }}
+                    el-select(v-model='emojiAnimationStyle' popper-class='max-height-el-select')
+                        el-option-group {{ $t('dialog.gallery_icons.emoji_animation_styles') }}
+                            el-option.x-friend-item(
+                                v-for='(fileName, styleName) in emojiAnimationStyleList'
+                                :key='styleName'
+                                :label='styleName'
+                                :value='styleName'
+                                style='height: auto')
+                                .avatar(style='width: 200px; height: 200px')
+                                    img(v-lazy='`${emojiAnimationStyleUrl}${fileName}`')
+                                .detail
+                                    span.name(v-text='styleName' style='margin-right: 100px')
+                    el-checkbox(v-model='emojiAnimType' style='margin-left: 10px; margin-right: 10px')
+                        span {{ $t('dialog.gallery_icons.emoji_animation_type') }}
                 template(v-if='emojiAnimType')
                     span(style='margin-right: 10px') {{ $t('dialog.gallery_icons.emoji_animation_fps') }}
                     el-input-number(
@@ -333,7 +337,7 @@ mixin currentUser
                             icon='el-icon-delete'
                             circle
                             style='margin-left: 5px')
-            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogStickersLoading')
+            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogStickersLoading' lazy)
                 span(slot='label') {{ $t('dialog.gallery_icons.stickers') }}
                     span(style='color: #909399; font-size: 12px; margin-left: 5px') {{ stickerTable.length }}/9
                 input#StickerUploadButton(
@@ -377,30 +381,31 @@ mixin currentUser
                             icon='el-icon-delete'
                             circle
                             style='margin-left: 5px')
-            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogPrintsLoading')
+            el-tab-pane(v-if='galleryDialogVisible' v-loading='galleryDialogPrintsLoading' lazy)
                 span(slot='label') {{ $t('dialog.gallery_icons.prints') }}
                     span(style='color: #909399; font-size: 12px; margin-left: 5px') {{ printTable.length }}/64
                 input#PrintUploadButton(type='file' accept='image/*' @change='onFileChangePrint' style='display: none')
                 span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 1920x1080px (16:9)
                 br
                 br
-                el-button-group
-                    el-button(type='default' size='small' @click='refreshPrintTable' icon='el-icon-refresh') {{ $t('dialog.gallery_icons.refresh') }}
-                    el-button(
-                        type='default'
-                        size='small'
-                        @click='displayPrintUpload'
-                        icon='el-icon-upload2'
-                        :disabled='!API.currentUser.$isVRCPlus') {{ $t('dialog.gallery_icons.upload') }}
-                el-input(
-                    type='textarea'
-                    v-model='printUploadNote'
-                    size='mini'
-                    rows='1'
-                    resize='none'
-                    maxlength='32'
-                    style='margin-left: 10px; width: 300px'
-                    :placeholder='$t("dialog.gallery_icons.note")')
+                div(style='display: flex; align-items: center')
+                    el-button-group
+                        el-button(type='default' size='small' @click='refreshPrintTable' icon='el-icon-refresh') {{ $t('dialog.gallery_icons.refresh') }}
+                        el-button(
+                            type='default'
+                            size='small'
+                            @click='displayPrintUpload'
+                            icon='el-icon-upload2'
+                            :disabled='!API.currentUser.$isVRCPlus') {{ $t('dialog.gallery_icons.upload') }}
+                    el-input(
+                        type='textarea'
+                        v-model='printUploadNote'
+                        size='mini'
+                        rows='1'
+                        resize='none'
+                        maxlength='32'
+                        style='margin-left: 10px; width: 300px'
+                        :placeholder='$t("dialog.gallery_icons.note")')
                 br
                 .x-friend-item(
                     v-for='image in printTable'

diff --git a/src/mixins/dialogs/favoritesDialog.pug b/src/mixins/dialogs/favoritesDialog.pug
@@ -158,7 +158,8 @@ mixin favoritesDialog
         ref='worldImportDialog'
         :visible.sync='worldImportDialog.visible'
         :title='$t("dialog.world_import.header")'
-        width='650px')
+        width='650px'
+        top='10vh')
         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')

diff --git a/src/mixins/dialogs/images.pug b/src/mixins/dialogs/images.pug
@@ -136,7 +136,7 @@ mixin images
         @mousedown.native='dialogMouseDown'
         @mouseup.native='dialogMouseUp'
         :visible.sync='fullscreenImageDialog.visible'
-        top='3vh'
+        top='1vh'
         width='97vw')
         div(style='margin: 0 0 5px 5px')
             el-button(@click='copyImageUrl(fullscreenImageDialog.imageUrl)' size='mini' icon='el-icon-s-order' circle)
@@ -147,4 +147,4 @@ mixin images
                 circle
                 @click='downloadAndSaveImage(fullscreenImageDialog.imageUrl, fullscreenImageDialog.fileName)'
                 style='margin-left: 5px')
-        img(v-lazy='fullscreenImageDialog.imageUrl' style='width: 100%; height: 100vh; object-fit: contain')
+        img(v-lazy='fullscreenImageDialog.imageUrl' style='width: 100%; height: 85vh; object-fit: contain')
diff --git a/src/mixins/dialogs/launch.pug b/src/mixins/dialogs/launch.pug
@@ -8,7 +8,7 @@ mixin launch
         :visible.sync='launchDialog.visible'
         :title='$t("dialog.launch.header")'
         width='450px')
-        el-form(:model='launchDialog' label-width='80px')
+        el-form(:model='launchDialog' label-width='100px')
             el-form-item(:label='$t("dialog.launch.url")')
                 el-input(
                     v-model='launchDialog.url'
@@ -20,22 +20,27 @@ mixin launch
                         @click='copyInstanceMessage(launchDialog.url)'
                         size='mini'
                         icon='el-icon-s-order'
-                        style='margin-right: 5px'
+                        style='margin-left: 5px'
                         circle)
-            el-form-item(v-if='launchDialog.shortUrl' :label='$t("dialog.launch.short_url")')
-                el-tooltip(placement='top' style='margin-left: 5px' :content='$t("dialog.launch.short_url_notice")')
-                    i.el-icon-warning
+            el-form-item(v-if='launchDialog.shortUrl')
+                template(#label)
+                    span {{ $t('dialog.launch.short_url') }}
+                    el-tooltip(
+                        placement='top'
+                        style='margin-left: 5px'
+                        :content='$t("dialog.launch.short_url_notice")')
+                        i.el-icon-warning
                 el-input(
                     v-model='launchDialog.shortUrl'
                     size='mini'
                     @click.native='$event.target.tagName === "INPUT" && $event.target.select()'
-                    style='width: 241px')
+                    style='width: 260px')
                 el-tooltip(placement='right' :content='$t("dialog.launch.copy_tooltip")' :disabled='hideTooltips')
                     el-button(
                         @click='copyInstanceMessage(launchDialog.shortUrl)'
                         size='mini'
                         icon='el-icon-s-order'
-                        style='margin-right: 5px'
+                        style='margin-left: 5px'
                         circle)
             el-form-item(:label='$t("dialog.launch.location")')
                 el-input(
@@ -48,10 +53,10 @@ mixin launch
                         @click='copyInstanceMessage(launchDialog.location)'
                         size='mini'
                         icon='el-icon-s-order'
-                        style='margin-right: 5px'
+                        style='margin-left: 5px'
                         circle)
+        el-checkbox(v-model='launchDialog.desktop' @change='saveLaunchDialog' style='float: left; margin-top: 5px') {{ $t('dialog.launch.start_as_desktop') }}
         template(#footer)
-            el-checkbox(v-model='launchDialog.desktop' @change='saveLaunchDialog' style='float: left; margin-top: 5px') {{ $t('dialog.launch.start_as_desktop') }}
             el-button(size='small' @click='showPreviousInstanceInfoDialog(launchDialog.location)') {{ $t('dialog.launch.info') }}
             el-button(
                 size='small'

diff --git a/src/mixins/dialogs/previousInstances.pug b/src/mixins/dialogs/previousInstances.pug
@@ -32,7 +32,7 @@ mixin previousInstances
                     display-name(
                         :userid='scope.row.$location.userId'
                         :location='scope.row.$location.tag'
-                        :key='previousInstancesUserDialog.forceUpdate')
+                        :force-update-key='previousInstancesUserDialog.forceUpdate')
             el-table-column(:label='$t("table.previous_instances.time")' prop='time' width='100' sortable)
                 template(#default='scope')
                     span(v-text='scope.row.timer')
@@ -95,7 +95,7 @@ mixin previousInstances
                     display-name(
                         :userid='scope.row.$location.userId'
                         :location='scope.row.$location.tag'
-                        :key='previousInstancesWorldDialog.forceUpdate')
+                        :force-update-key='previousInstancesWorldDialog.forceUpdate')
             el-table-column(:label='$t("table.previous_instances.time")' prop='time' width='100' sortable)
                 template(#default='scope')
                     span(v-text='scope.row.timer')