MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-30 20:23:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

UI/UX and Performance Improvement (#1122)

Browse Source 
* wip

* wip

* ui improve and fix

* fix
This commit is contained in:
pa
2025-02-10 03:23:49 +09:00
committed by GitHub
parent 91bc4d076e
commit d73bcd04c1
14 changed files with 148 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/mixins/dialogs/currentUser.pug
View File

@@ -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'

3
src/mixins/dialogs/favoritesDialog.pug
View File

@@ -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')

4
src/mixins/dialogs/images.pug
View File

@@ -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')

23
src/mixins/dialogs/launch.pug
View File

@@ -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'

4
src/mixins/dialogs/previousInstances.pug
View File

@@ -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')

19
src/mixins/dialogs/userDialog.pug
View File

@@ -445,18 +445,23 @@ mixin userDialog
.x-friend-item(style='width: 100%; cursor: default')
.detail
span.name(style='margin-bottom: 5px') {{ $t('dialog.user.info.represented_group') }}
.extra(v-if='userDialog.representedGroup?.isRepresenting')
.extra(
v-if='userDialog.isRepresentedGroupLoading || (userDialog.representedGroup && userDialog.representedGroup.isRepresenting)')
div(style='display: inline-block; flex: none; margin-right: 5px')
el-popover(placement='right' width='500px' trigger='click')
img.x-link(
el-image.x-link(
slot='reference'
v-loading='userDialog.isRepresentedGroupLoading'
:src='userDialog.representedGroup.iconUrl'
style='flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover')
style='flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover; background: #f5f7fa'
@load='userDialog.isRepresentedGroupLoading = false')
div(slot='error')
img.x-link(
:src='userDialog.representedGroup.iconUrl'
v-lazy='userDialog.representedGroup.iconUrl'
style='height: 500px'
@click='showFullscreenImageDialog(userDialog.representedGroup.iconUrl)')
span(
v-if='userDialog.representedGroup.isRepresenting'
style='vertical-align: top; cursor: pointer'
@click='showGroupDialog(userDialog.representedGroup.groupId)')
span(
@@ -691,12 +696,12 @@ mixin userDialog
el-button(
@click='moveGroupUp(group.id)'
size='mini'
icon='el-icon-arrow-up'
style='display: block; padding: 7px; font-size: 9px; margin-left: 0')
icon='el-icon-download'
style='display: block; padding: 7px; font-size: 9px; margin-left: 0; rotate: 180deg')
el-button(
@click='moveGroupDown(group.id)'
size='mini'
icon='el-icon-arrow-down'
icon='el-icon-download'
style='display: block; padding: 7px; font-size: 9px; margin-left: 0')
div(@click.stop style='margin-right: 10px')
el-button(