improve: UI (#1152)

* improve: UI (#1033)

* fix: instance activity chart not displaying properly

* fix
This commit is contained in:
pa
2025-02-24 22:57:43 +09:00
committed by GitHub
parent 870c1a9c5e
commit d5e789ef0e
25 changed files with 476 additions and 392 deletions

View File

@@ -52,10 +52,8 @@ mixin currentUser
:title='$t("dialog.language.header")'
width='400px')
div(v-loading='languageDialog.loading')
div(style='margin: 5px 0')
div(style='margin: 6px 0' v-for='item in API.currentUser.$languages' :key='item.key')
el-tag(
v-for='item in API.currentUser.$languages'
:key='item.key'
size='small'
type='info'
effect='plain'
@@ -63,26 +61,20 @@ mixin currentUser
@close='removeUserLanguage(item.key)'
style='margin-right: 5px')
span.flags(:class='languageClass(item.key)' style='display: inline-block; margin-right: 5px')
| {{ item.value }} ({{ item.key }})
div(v-if='languageDialog.languageChoice === true')
el-select(
v-model='languageDialog.languageValue'
:placeholder='$t("dialog.language.select_language")'
size='mini')
el-option(
v-for='item in languageDialog.languages'
:key='item.key'
:value='item.key'
:label='item.value')
span.flags(:class='languageClass(item.key)' style='display: inline-block; margin-right: 5px')
| {{ item.value }} ({{ item.key }})
el-button(
@click='languageDialog.languageChoice = false; addUserLanguage(languageDialog.languageValue)'
size='mini') {{ $t('dialog.language.ok') }}
el-button(@click='languageDialog.languageChoice = false' size='mini' style='margin-left: 0') {{ $t('dialog.language.cancel') }}
div(v-else)
el-button(@click='languageDialog.languageValue = ""; languageDialog.languageChoice = true' size='mini') {{ $t('dialog.language.add_language') }}
| {{ item.value }} ({{ item.key.toUpperCase() }})
el-select(
value=''
:disabled='languageDialog.loading || (API.currentUser.$languages && API.currentUser.$languages.length === 3)'
:placeholder='$t("dialog.language.select_language")'
@change='addUserLanguage'
style='margin-top: 14px')
el-option(
v-for='item in languageDialog.languages'
:key='item.key'
:value='item.key'
:label='item.value')
span.flags(:class='languageClass(item.key)' style='display: inline-block; margin-right: 5px')
| {{ item.value }} ({{ item.key.toUpperCase() }})
//- dialog: bio
el-dialog.x-dialog(
:before-close='beforeDialogClose'
@@ -311,7 +303,7 @@ mixin currentUser
.vrcplus-icon(
v-if='image.versions[image.versions.length - 1].file.url'
style='overflow: hidden'
@click='showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url, getEmojiFileName(image))')
@click='showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url, getEmojiFileName(image))')
template(v-if='image.frames')
.avatar(
:style='generateEmojiStyle(image.versions[image.versions.length - 1].file.url, image.framesOverTime, image.frames, image.loopStyle)')
@@ -365,7 +357,7 @@ mixin currentUser
.vrcplus-icon(
v-if='image.versions[image.versions.length - 1].file.url'
style='overflow: hidden'
@click='showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)')
@click='showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)')
img.avatar(v-lazy='image.versions[image.versions.length - 1].file.url')
div(style='float: right; margin-top: 5px')
el-button(
@@ -413,7 +405,7 @@ mixin currentUser
style='display: inline-block; margin-top: 10px; width: unset; cursor: default')
.vrcplus-icon(
style='overflow: hidden'
@click='showFullscreenImageDialog(image.files.image, getPrintFileName(image))')
@click='showFullscreenImageDialog(image.files.image, getPrintFileName(image))')
img.avatar(v-lazy='image.files.image')
div(style='margin-top: 5px; width: 208px')
span.x-ellipsis(v-if='image.note' v-text='image.note' style='display: block')

View File

@@ -470,7 +470,7 @@ mixin groupDialog
span(:key='pIndex') {{ permission }}
br
span {{ role.name }}{{ rIndex < groupDialog.memberRoles.length - 1 ? ', ' : '' }}
el-tab-pane(:label='$t("dialog.group.posts.header")')
el-tab-pane(:label='$t("dialog.group.posts.header")' lazy)
template(v-if='groupDialog.visible')
span(style='margin-right: 10px') {{ $t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}
el-input(
@@ -544,7 +544,7 @@ mixin groupDialog
size='mini'
style='margin-left: 5px'
@click='confirmDeleteGroupPost(post)')
el-tab-pane(:label='$t("dialog.group.members.header")')
el-tab-pane(:label='$t("dialog.group.members.header")' lazy)
template(v-if='groupDialog.visible')
span(
v-if='hasGroupPermission(groupDialog.ref, "group-members-viewall")'
@@ -704,7 +704,7 @@ mixin groupDialog
@click='loadMoreGroupMembers')
.detail(v-if='!isGroupMembersLoading')
span.name {{ $t('dialog.group.members.load_more') }}
el-tab-pane(:label='$t("dialog.group.gallery.header")')
el-tab-pane(:label='$t("dialog.group.gallery.header")' lazy)
el-button(
type='default'
size='mini'
@@ -737,7 +737,7 @@ mixin groupDialog
v-lazy='image.imageUrl'
style='height: 700px'
@click='showFullscreenImageDialog(image.imageUrl)')
el-tab-pane(:label='$t("dialog.group.json.header")')
el-tab-pane(:label='$t("dialog.group.json.header")' lazy)
el-button(
type='default'
@click='refreshGroupDialogTreeData()'

View File

@@ -8,11 +8,12 @@ mixin previousInstances
:visible.sync='previousInstancesUserDialog.visible'
:title='$t("dialog.previous_instances.header")'
width='1000px')
span(v-text='previousInstancesUserDialog.userRef.displayName' style='font-size: 14px')
el-input(
v-model='previousInstancesUserDialogTable.filters[0].value'
:placeholder='$t("dialog.previous_instances.search_placeholder")'
style='display: block; width: 150px; margin-top: 15px')
div(style='display: flex; align-items: center; justify-content: space-between')
span(v-text='previousInstancesUserDialog.userRef.displayName' style='font-size: 14px')
el-input(
v-model='previousInstancesUserDialogTable.filters[0].value'
:placeholder='$t("dialog.previous_instances.search_placeholder")'
style='display: block; width: 150px')
data-tables(
v-if='previousInstancesUserDialog.visible'
v-bind='previousInstancesUserDialogTable'
@@ -40,12 +41,12 @@ mixin previousInstances
template(#default='scope')
el-button(
type='text'
icon='el-icon-info'
icon='el-icon-switch-button'
size='mini'
@click='showLaunchDialog(scope.row.location)')
el-button(
type='text'
icon='el-icon-tickets'
icon='el-icon-s-data'
size='mini'
@click='showPreviousInstanceInfoDialog(scope.row.location)')
el-button(
@@ -71,11 +72,12 @@ mixin previousInstances
:visible.sync='previousInstancesWorldDialog.visible'
:title='$t("dialog.previous_instances.header")'
width='1000px')
span(v-text='previousInstancesWorldDialog.worldRef.name' style='font-size: 14px')
el-input(
v-model='previousInstancesWorldDialogTable.filters[0].value'
:placeholder='$t("dialog.previous_instances.search_placeholder")'
style='display: block; width: 150px; margin-top: 15px')
div(style='display: flex; align-items: center; justify-content: space-between')
span(v-text='previousInstancesWorldDialog.worldRef.name' style='font-size: 14px')
el-input(
v-model='previousInstancesWorldDialogTable.filters[0].value'
:placeholder='$t("dialog.previous_instances.search_placeholder")'
style='display: block; width: 150px')
data-tables(
v-if='previousInstancesWorldDialog.visible'
v-bind='previousInstancesWorldDialogTable'
@@ -89,7 +91,8 @@ mixin previousInstances
location-world(
:locationobject='scope.row.$location'
:grouphint='scope.row.groupName'
:currentuserid='API.currentUser.id')
:currentuserid='API.currentUser.id'
@show-launch-dialog='showLaunchDialog')
el-table-column(:label='$t("table.previous_instances.instance_creator")' prop='location')
template(#default='scope')
display-name(
@@ -103,7 +106,7 @@ mixin previousInstances
template(#default='scope')
el-button(
type='text'
icon='el-icon-tickets'
icon='el-icon-s-data'
size='mini'
@click='showPreviousInstanceInfoDialog(scope.row.location)')
el-button(
@@ -120,46 +123,10 @@ mixin previousInstances
size='mini'
@click='deleteGameLogWorldInstancePrompt(scope.row)')
//- dialog Table: Previous Instance Info
el-dialog.x-dialog(
:before-close='beforeDialogClose'
@mousedown.native='dialogMouseDown'
@mouseup.native='dialogMouseUp'
ref='previousInstanceInfoDialog'
:visible.sync='previousInstanceInfoDialog.visible'
:title='$t("dialog.previous_instances.info")'
width='800px')
div(style='display: flex; align-items: center; justify-content: space-between')
location(:location='previousInstanceInfoDialog.$location.tag' style='font-size: 14px')
el-input(
v-model='previousInstanceInfoDialogTable.filters[0].value'
:placeholder='$t("dialog.previous_instances.search_placeholder")'
style='width: 150px'
clearable)
data-tables(
v-if='previousInstanceInfoDialog.visible'
v-bind='previousInstanceInfoDialogTable'
v-loading='previousInstanceInfoDialog.loading'
style='margin-top: 10px')
el-table-column(:label='$t("table.previous_instances.date")' prop='created_at' sortable width='110')
template(v-once #default='scope')
el-tooltip(placement='left')
template(#content)
span {{ scope.row.created_at | formatDate('long') }}
span {{ scope.row.created_at | formatDate('short') }}
el-table-column(:label='$t("table.gameLog.icon")' prop='isFriend' width='70' align='center')
template(#default='scope')
template(v-if='gameLogIsFriend(scope.row)')
el-tooltip(v-if='gameLogIsFavorite(scope.row)' placement='top' content='Favorite')
span ⭐
el-tooltip(v-else placement='top' content='Friend')
span 💚
el-table-column(:label='$t("table.previous_instances.display_name")' prop='displayName' sortable)
template(#default='scope')
span.x-link(v-text='scope.row.displayName' @click='lookupUser(scope.row)')
el-table-column(:label='$t("table.previous_instances.time")' prop='time' width='100' sortable)
template(#default='scope')
span(v-text='scope.row.timer')
el-table-column(:label='$t("table.previous_instances.count")' prop='count' width='100' sortable)
template(#default='scope')
span(v-text='scope.row.count')
previous-instance-info(
:visible.sync='previousInstanceInfoDialogVisible'
:instance-id='previousInstanceInfoDialogInstanceId'
:game-log-is-friend='gameLogIsFriend'
:game-log-is-favorite='gameLogIsFavorite'
:lookup-user='lookupUser'
:is-dark-mode='isDarkMode')

View File

@@ -87,7 +87,7 @@ mixin screenshotMetadata
el-carousel(
ref='screenshotMetadataCarousel'
:interval='0'
initial-index='1'
:initial-index='1'
indicator-position='none'
arrow='always'
height='600px'

View File

@@ -331,11 +331,7 @@ mixin userDialog
style='display: flex; flex-direction: column; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e4e7ed14')
div(style='flex: none')
template(v-if='isRealInstance(userDialog.$location.tag)')
el-tooltip(
placement='top'
:content='$t("dialog.user.info.launch_invite_tooltip")'
:disabled='hideTooltips')
launch(:location='userDialog.$location.tag')
launch(:location='userDialog.$location.tag' @show-launch-dialog='showLaunchDialog')
el-tooltip(
placement='top'
:content='$t("dialog.user.info.self_invite_tooltip")'
@@ -509,17 +505,21 @@ mixin userDialog
:content='$t("dialog.user.info.accuracy_notice")')
i.el-icon-warning
span.extra {{ userDialog.lastSeen | formatDate('long') }}
.x-friend-item(@click='showPreviousInstancesUserDialog(userDialog.ref)')
.detail
span.name {{ $t('dialog.user.info.join_count') }}
el-tooltip(
v-if='!hideTooltips'
placement='top'
style='margin-left: 5px'
:content='$t("dialog.user.info.accuracy_notice")')
i.el-icon-warning
span.extra(v-if='userDialog.joinCount === 0') -
span.extra(v-else v-text='userDialog.joinCount')
el-tooltip(
:disabled='hideTooltips'
placement='top'
:content='$t("dialog.user.info.open_previouse_instance")')
.x-friend-item(@click='showPreviousInstancesUserDialog(userDialog.ref)')
.detail
span.name {{ $t('dialog.user.info.join_count') }}
el-tooltip(
v-if='!hideTooltips'
placement='top'
style='margin-left: 5px'
:content='$t("dialog.user.info.accuracy_notice")')
i.el-icon-warning
span.extra(v-if='userDialog.joinCount === 0') -
span.extra(v-else v-text='userDialog.joinCount')
.x-friend-item(style='cursor: default')
.detail
span.name {{ $t('dialog.user.info.time_together') }}
@@ -532,6 +532,10 @@ mixin userDialog
span.extra(v-if='userDialog.timeSpent === 0') -
span.extra(v-else) {{ timeToText(userDialog.timeSpent) }}
template(v-else)
el-tooltip(
:disabled='hideTooltips || API.currentUser.id !== userDialog.id'
placement='top'
:content='$t("dialog.user.info.open_previouse_instance")')
.x-friend-item(@click='showPreviousInstancesUserDialog(userDialog.ref)')
.detail
span.name {{ $t('dialog.user.info.play_time') }}
@@ -544,7 +548,7 @@ mixin userDialog
span.extra(v-if='userDialog.timeSpent === 0') -
span.extra(v-else) {{ timeToText(userDialog.timeSpent) }}
.x-friend-item(style='cursor: default')
el-tooltip(placement='top')
el-tooltip(:placement='API.currentUser.id !== userDialog.id ? "bottom" : "top"')
template(#content)
span {{ userOnlineForTimestamp(userDialog) | formatDate('short') }}
.detail
@@ -564,7 +568,7 @@ mixin userDialog
i.el-icon-warning
span.extra {{ userOnlineFor(userDialog) }}
.x-friend-item(style='cursor: default')
el-tooltip(placement='top')
el-tooltip(:placement='API.currentUser.id !== userDialog.id ? "bottom" : "top"')
template(#content)
span {{ $t('dialog.user.info.last_login') }} {{ userDialog.ref.last_login | formatDate('short') }}
.detail
@@ -575,13 +579,11 @@ mixin userDialog
span.name {{ $t('dialog.user.info.date_joined') }}
span.extra(v-text='userDialog.ref.date_joined')
.x-friend-item(v-if='API.currentUser.id !== userDialog.id' style='cursor: default')
el-tooltip(placement='top')
el-tooltip(placement='top' :disabled='!userDialog.dateFriendedInfo.length')
template(#content v-if='userDialog.dateFriendedInfo.length')
template(v-for='ref in userDialog.dateFriendedInfo')
span {{ ref.type }}: {{ ref.created_at | formatDate('long') }}
br
template(#content v-else)
span -
.detail
span.name(v-if='userDialog.unFriended') {{ $t('dialog.user.info.unfriended') }}
el-tooltip(
@@ -912,26 +914,30 @@ mixin userDialog
span.extra(v-if='world.occupants') ({{ world.occupants }})
el-tab-pane(:label='$t("dialog.user.favorite_worlds.header")' lazy)
el-button(
v-if='userFavoriteWorlds && userFavoriteWorlds.length > 0'
type='default'
:loading='userDialog.isFavoriteWorldsLoading'
@click='getUserFavoriteWorlds(userDialog.id)'
size='mini'
size='small'
icon='el-icon-refresh'
circle)
circle
style='position: absolute; right: 15px; bottom: 15px; z-index: 99')
el-tabs.zero-margin-tabs(
type='card'
stretch
ref='favoriteWorlds'
v-loading='userDialog.isFavoriteWorldsLoading'
style='margin-top: 10px')
template(v-for='(list, index) in userFavoriteWorlds')
el-tab-pane(:key='index' lazy)
style='margin-top: 10px; height: 50vh')
template(v-if='userFavoriteWorlds && userFavoriteWorlds.length > 0')
el-tab-pane(v-for='(list, index) in userFavoriteWorlds' :key='index' lazy)
span(slot='label')
span(v-text='list[0]' style='font-weight: bold; font-size: 16px')
i.x-status-icon(
style='margin-left: 5px'
style='margin-right: 6px'
:class='userFavoriteWorldsStatus(list[1])')
span(style='color: #909399; font-size: 12px; margin-left: 5px') {{ list[2].length }}/{{ API.favoriteLimits.maxFavoritesPerGroup.world }}
.x-friend-list(style='margin-top: 10px; margin-bottom: 15px; min-height: 60px')
span(v-text='list[0]' style='font-weight: bold; font-size: 14px')
span(style='color: #909399; font-size: 10px; margin-left: 5px') {{ list[2].length }}/{{ API.favoriteLimits.maxFavoritesPerGroup.world }}
.x-friend-list(
style='margin-top: 10px; margin-bottom: 15px; min-height: 60px; max-height: none')
.x-friend-item.x-friend-item-border(
v-for='world in list[2]'
:key='world.favoriteId'
@@ -941,6 +947,9 @@ mixin userDialog
.detail
span.name(v-text='world.name')
span.extra(v-if='world.occupants') ({{ world.occupants }})
template(v-else-if='!userDialog.isFavoriteWorldsLoading')
div(style='display: flex; justify-content: center; align-items: center; height: 100%')
span(style='font-size: 16px') No favorite worlds found.
el-tab-pane(:label='$t("dialog.user.avatars.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between')
div(style='display: flex; align-items: center')
@@ -962,22 +971,43 @@ mixin userDialog
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')
template(v-if='userDialog.ref.id === API.currentUser.id')
span(style='margin-right: 5px') {{ $t('dialog.user.avatars.sort_by') }}
el-dropdown(
@click.native.stop
trigger='click'
size='small'
style='margin-right: 5px'
:disabled='userDialog.isWorldsLoading')
el-button(size='mini')
span {{ $t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }} #[i.el-icon-arrow-down.el-icon--right]
el-dropdown-menu(#default='dropdown')
el-dropdown-item(
v-text='$t("dialog.user.avatars.sort_by_name")'
@click.native='changeUserDialogAvatarSorting("name")')
el-dropdown-item(
v-text='$t("dialog.user.avatars.sort_by_update")'
@click.native='changeUserDialogAvatarSorting("update")')
span(style='margin-right: 5px; margin-left: 10px') {{ $t('dialog.user.avatars.group_by') }}
el-dropdown(
@click.native.stop
trigger='click'
size='small'
style='margin-right: 5px'
:disabled='userDialog.isWorldsLoading')
el-button(size='mini')
span {{ $t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }} #[i.el-icon-arrow-down.el-icon--right]
el-dropdown-menu(#default='dropdown')
el-dropdown-item(
v-text='$t("dialog.user.avatars.all")'
@click.native='userDialog.avatarReleaseStatus = "all"')
el-dropdown-item(
v-text='$t("dialog.user.avatars.public")'
@click.native='userDialog.avatarReleaseStatus = "public"')
el-dropdown-item(
v-text='$t("dialog.user.avatars.private")'
@click.native='userDialog.avatarReleaseStatus = "private"')
.x-friend-list(style='margin-top: 10px; min-height: 60px; max-height: 50vh')
.x-friend-item.x-friend-item-border(
v-for='avatar in userDialogAvatars'
:key='avatar.id'
@@ -1009,7 +1039,7 @@ mixin userDialog
icon='el-icon-download'
circle
style='margin-left: 5px')
el-tree(:data='userDialog.treeData' style='margin-top: 5px; font-size: 12px')
el-tree(:data='userDialog.treeData' style='margin-top: 5px; font-size: 12px; height: 50vh')
template(#default='scope')
span
span(v-text='scope.data.key' style='font-weight: bold; margin-right: 5px')

View File

@@ -220,7 +220,12 @@ mixin worldDialog
location-world(
:locationobject='room.$location'
:currentuserid='API.currentUser.id'
:worlddialogshortname='worldDialog.$location.shortName')
:worlddialogshortname='worldDialog.$location.shortName'
@show-launch-dialog='showLaunchDialog')
launch(
:location='room.tag'
@show-launch-dialog='showLaunchDialog'
style='margin-left: 5px')
el-tooltip(
placement='top'
:content='$t("dialog.world.instances.self_invite_tooltip")'
@@ -239,6 +244,18 @@ mixin worldDialog
icon='el-icon-refresh'
style='margin-left: 5px'
circle)
el-tooltip(
v-if='instanceJoinHistory.get(room.$location.tag)'
placement='top'
:content='$t("dialog.previous_instances.info")'
:disabled='hideTooltips')
el-button(
@click='showPreviousInstanceInfoDialog(room.location)'
size='mini'
icon='el-icon-s-data'
style='margin-left: 5px'
plain
circle)
last-join(:location='room.$location.tag' :currentlocation='lastLocation.location')
instance-info(
:location='room.tag'
@@ -273,7 +290,7 @@ mixin worldDialog
timer(:epoch='user.$travelingToTime')
span.extra(v-else)
timer(:epoch='user.$location_at')
el-tab-pane(:label='$t("dialog.world.info.header")')
el-tab-pane(:label='$t("dialog.world.info.header")' lazy)
.x-friend-list(style='max-height: none')
.x-friend-item(style='width: 100%; cursor: default')
.detail
@@ -387,16 +404,20 @@ mixin worldDialog
:content='$t("dialog.world.info.accuracy_notice")')
i.el-icon-warning
span.extra {{ worldDialog.lastVisit | formatDate('long') }}
.x-friend-item(@click='showPreviousInstancesWorldDialog(worldDialog.ref)')
.detail
span.name {{ $t('dialog.world.info.visit_count') }}
el-tooltip(
v-if='!hideTooltips'
placement='top'
style='margin-left: 5px'
:content='$t("dialog.world.info.accuracy_notice")')
i.el-icon-warning
span.extra(v-text='worldDialog.visitCount')
el-tooltip(
:disabled='hideTooltips'
placement='top'
:content='$t("dialog.user.info.open_previouse_instance")')
.x-friend-item(@click='showPreviousInstancesWorldDialog(worldDialog.ref)')
.detail
span.name {{ $t('dialog.world.info.visit_count') }}
el-tooltip(
v-if='!hideTooltips'
placement='top'
style='margin-left: 5px'
:content='$t("dialog.world.info.accuracy_notice")')
i.el-icon-warning
span.extra(v-text='worldDialog.visitCount')
.x-friend-item(style='cursor: default')
.detail
span.name {{ $t('dialog.world.info.time_spent') }}
@@ -408,7 +429,7 @@ mixin worldDialog
i.el-icon-warning
span.extra(v-if='worldDialog.timeSpent === 0') -
span.extra(v-else) {{ timeToText(worldDialog.timeSpent) }}
el-tab-pane(:label='$t("dialog.world.json.header")')
el-tab-pane(:label='$t("dialog.world.json.header")' lazy)
el-button(
type='default'
@click='refreshWorldDialogTreeData()'