MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 14:53:50 +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

5
src/app.js
View File

@@ -9811,6 +9811,7 @@ console.log(`isLinux: ${LINUX}`);
privacy: '', privacy: '',
shortCode: '' shortCode: ''
}, },
isRepresentedGroupLoading: false,
joinCount: 0, joinCount: 0,
timeSpent: 0, timeSpent: 0,
lastSeen: '', lastSeen: '',
@@ -10074,6 +10075,7 @@ console.log(`isLinux: ${LINUX}`);
shortName: '', shortName: '',
ref: {} ref: {}
}; };
D.isRepresentedGroupLoading = true;
D.representedGroup = { D.representedGroup = {
bannerUrl: '', bannerUrl: '',
description: '', description: '',
@@ -10298,6 +10300,9 @@ console.log(`isLinux: ${LINUX}`);
} }
API.getRepresentedGroup({ userId }).then((args1) => { API.getRepresentedGroup({ userId }).then((args1) => {
D.representedGroup = args1.json; D.representedGroup = args1.json;
if (!args1.json || !args1.json.isRepresenting) {
D.isRepresentedGroupLoading = false;
}
}); });
D.loading = false; D.loading = false;
}); });

4
src/classes/uiComponents.js
View File

@@ -566,7 +566,7 @@ export default class extends baseClass {
props: { props: {
userid: String, userid: String,
location: String, location: String,
key: Number, forceUpdateKey: Number,
hint: { hint: {
type: String, type: String,
default: '' default: ''
@@ -603,7 +603,7 @@ export default class extends baseClass {
location() { location() {
this.parse(); this.parse();
}, },
key() { forceUpdateKey() {
this.parse(); this.parse();
}, },
userid() { userid() {

17
src/components/sidebar/GroupsSidebar.vue
View File

@@ -3,13 +3,16 @@
<template v-for="(group, index) in groupedGroupInstances"> <template v-for="(group, index) in groupedGroupInstances">
<div <div
:key="getGroupId(group)" :key="getGroupId(group)"
class="x-friend-group x-link sidebar-group-title" class="x-friend-group x-link"
:style="{ paddingTop: index === 0 ? '0px' : '10px' }" :style="{ paddingTop: index === 0 ? '0px' : '10px' }"
> >
<div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center"> <div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
<i <i
class="el-icon-arrow-right" class="el-icon-arrow-right"
:class="{ rotate: !groupInstancesCfg[getGroupId(group)].isCollapsed }" :style="{
transform: groupInstancesCfg[getGroupId(group)].isCollapsed ? '' : 'rotate(90deg)',
transition: 'transform 0.3s'
}"
></i> ></i>
<span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span> <span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span>
</div> </div>
@@ -79,7 +82,6 @@
}; };
} }
}); });
return Array.from(groupMap.values()).sort(this.sortGroupInstancesByInGame); return Array.from(groupMap.values()).sort(this.sortGroupInstancesByInGame);
} }
}, },
@@ -110,3 +112,12 @@
} }
}; };
</script> </script>
<style scoped>
.x-link:hover {
text-decoration: none;
}
.x-link:hover span {
text-decoration: underline;
}
</style>

2
src/index.pug
View File

@@ -36,7 +36,7 @@ html
circle circle
style='font-size: 14px; height: 50px; width: 50px') 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) mixin menuitem(index, name, icon)
el-menu-item(index=index) el-menu-item(index=index)
i(class=icon) i(class=icon)

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

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

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

@@ -158,7 +158,8 @@ mixin favoritesDialog
ref='worldImportDialog' ref='worldImportDialog'
:visible.sync='worldImportDialog.visible' :visible.sync='worldImportDialog.visible'
:title='$t("dialog.world_import.header")' :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='display: flex; align-items: center; justify-content: space-between')
div(style='font-size: 12px') {{ $t('dialog.world_import.description') }} div(style='font-size: 12px') {{ $t('dialog.world_import.description') }}
div(style='display: flex; align-items: center') div(style='display: flex; align-items: center')

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

@@ -136,7 +136,7 @@ mixin images
@mousedown.native='dialogMouseDown' @mousedown.native='dialogMouseDown'
@mouseup.native='dialogMouseUp' @mouseup.native='dialogMouseUp'
:visible.sync='fullscreenImageDialog.visible' :visible.sync='fullscreenImageDialog.visible'
top='3vh' top='1vh'
width='97vw') width='97vw')
div(style='margin: 0 0 5px 5px') div(style='margin: 0 0 5px 5px')
el-button(@click='copyImageUrl(fullscreenImageDialog.imageUrl)' size='mini' icon='el-icon-s-order' circle) el-button(@click='copyImageUrl(fullscreenImageDialog.imageUrl)' size='mini' icon='el-icon-s-order' circle)
@@ -147,4 +147,4 @@ mixin images
circle circle
@click='downloadAndSaveImage(fullscreenImageDialog.imageUrl, fullscreenImageDialog.fileName)' @click='downloadAndSaveImage(fullscreenImageDialog.imageUrl, fullscreenImageDialog.fileName)'
style='margin-left: 5px') 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' :visible.sync='launchDialog.visible'
:title='$t("dialog.launch.header")' :title='$t("dialog.launch.header")'
width='450px') 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-form-item(:label='$t("dialog.launch.url")')
el-input( el-input(
v-model='launchDialog.url' v-model='launchDialog.url'
@@ -20,22 +20,27 @@ mixin launch
@click='copyInstanceMessage(launchDialog.url)' @click='copyInstanceMessage(launchDialog.url)'
size='mini' size='mini'
icon='el-icon-s-order' icon='el-icon-s-order'
style='margin-right: 5px' style='margin-left: 5px'
circle) circle)
el-form-item(v-if='launchDialog.shortUrl' :label='$t("dialog.launch.short_url")') el-form-item(v-if='launchDialog.shortUrl')
el-tooltip(placement='top' style='margin-left: 5px' :content='$t("dialog.launch.short_url_notice")') template(#label)
i.el-icon-warning 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( el-input(
v-model='launchDialog.shortUrl' v-model='launchDialog.shortUrl'
size='mini' size='mini'
@click.native='$event.target.tagName === "INPUT" && $event.target.select()' @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-tooltip(placement='right' :content='$t("dialog.launch.copy_tooltip")' :disabled='hideTooltips')
el-button( el-button(
@click='copyInstanceMessage(launchDialog.shortUrl)' @click='copyInstanceMessage(launchDialog.shortUrl)'
size='mini' size='mini'
icon='el-icon-s-order' icon='el-icon-s-order'
style='margin-right: 5px' style='margin-left: 5px'
circle) circle)
el-form-item(:label='$t("dialog.launch.location")') el-form-item(:label='$t("dialog.launch.location")')
el-input( el-input(
@@ -48,10 +53,10 @@ mixin launch
@click='copyInstanceMessage(launchDialog.location)' @click='copyInstanceMessage(launchDialog.location)'
size='mini' size='mini'
icon='el-icon-s-order' icon='el-icon-s-order'
style='margin-right: 5px' style='margin-left: 5px'
circle) circle)
el-checkbox(v-model='launchDialog.desktop' @change='saveLaunchDialog' style='float: left; margin-top: 5px') {{ $t('dialog.launch.start_as_desktop') }}
template(#footer) 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' @click='showPreviousInstanceInfoDialog(launchDialog.location)') {{ $t('dialog.launch.info') }}
el-button( el-button(
size='small' size='small'

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

@@ -32,7 +32,7 @@ mixin previousInstances
display-name( display-name(
:userid='scope.row.$location.userId' :userid='scope.row.$location.userId'
:location='scope.row.$location.tag' :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) el-table-column(:label='$t("table.previous_instances.time")' prop='time' width='100' sortable)
template(#default='scope') template(#default='scope')
span(v-text='scope.row.timer') span(v-text='scope.row.timer')
@@ -95,7 +95,7 @@ mixin previousInstances
display-name( display-name(
:userid='scope.row.$location.userId' :userid='scope.row.$location.userId'
:location='scope.row.$location.tag' :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) el-table-column(:label='$t("table.previous_instances.time")' prop='time' width='100' sortable)
template(#default='scope') template(#default='scope')
span(v-text='scope.row.timer') 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') .x-friend-item(style='width: 100%; cursor: default')
.detail .detail
span.name(style='margin-bottom: 5px') {{ $t('dialog.user.info.represented_group') }} 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') div(style='display: inline-block; flex: none; margin-right: 5px')
el-popover(placement='right' width='500px' trigger='click') el-popover(placement='right' width='500px' trigger='click')
img.x-link( el-image.x-link(
slot='reference' slot='reference'
v-loading='userDialog.isRepresentedGroupLoading'
:src='userDialog.representedGroup.iconUrl' :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( img.x-link(
:src='userDialog.representedGroup.iconUrl' v-lazy='userDialog.representedGroup.iconUrl'
style='height: 500px' style='height: 500px'
@click='showFullscreenImageDialog(userDialog.representedGroup.iconUrl)') @click='showFullscreenImageDialog(userDialog.representedGroup.iconUrl)')
span( span(
v-if='userDialog.representedGroup.isRepresenting'
style='vertical-align: top; cursor: pointer' style='vertical-align: top; cursor: pointer'
@click='showGroupDialog(userDialog.representedGroup.groupId)') @click='showGroupDialog(userDialog.representedGroup.groupId)')
span( span(
@@ -691,12 +696,12 @@ mixin userDialog
el-button( el-button(
@click='moveGroupUp(group.id)' @click='moveGroupUp(group.id)'
size='mini' size='mini'
icon='el-icon-arrow-up' icon='el-icon-download'
style='display: block; padding: 7px; font-size: 9px; margin-left: 0') style='display: block; padding: 7px; font-size: 9px; margin-left: 0; rotate: 180deg')
el-button( el-button(
@click='moveGroupDown(group.id)' @click='moveGroupDown(group.id)'
size='mini' size='mini'
icon='el-icon-arrow-down' icon='el-icon-download'
style='display: block; padding: 7px; font-size: 9px; margin-left: 0') style='display: block; padding: 7px; font-size: 9px; margin-left: 0')
div(@click.stop style='margin-right: 10px') div(@click.stop style='margin-right: 10px')
el-button( el-button(

4
src/mixins/friendsListSidebar.pug
View File

@@ -169,9 +169,7 @@ mixin friendsListSidebar
v-else v-else
v-text='friend.ref.displayName' v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }') :style='{ color: friend.ref.$userColour }')
i.el-icon-star-on( span(v-if='friend.isVIP' style='margin-left: 2px') ⭐
v-if='friend.isVIP'
style='color: #ffd700; margin: 1px 0 0 2px')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }} span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
template(v-else) template(v-else)
template(v-if='friend.ref.travelingToLocation') template(v-if='friend.ref.travelingToLocation')

63
src/mixins/tabs/feed.pug
View File

@@ -1,33 +1,32 @@
mixin feedTab mixin feedTab
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === \'feed\'') .x-container(v-show='$refs.menu && $refs.menu.activeIndex === \'feed\'')
data-tables(v-bind='feedTable' v-loading='feedTable.loading') div(style='margin: 0 0 10px; display: flex; align-items: center')
template(#tool) div(style='flex: none; margin-right: 10px; display: flex; align-items: center')
div(style='margin: 0 0 10px; display: flex; align-items: center') el-tooltip(
div(style='flex: none; margin-right: 10px; display: flex; align-items: center') placement='bottom'
el-tooltip( :content='$t("view.feed.favorites_only_tooltip")'
placement='bottom' :disabled='hideTooltips')
:content='$t("view.feed.favorites_only_tooltip")' el-switch(v-model='feedTable.vip' @change='feedTableLookup' active-color='#13ce66')
:disabled='hideTooltips') el-select(
el-switch(v-model='feedTable.vip' @change='feedTableLookup' active-color='#13ce66') v-model='feedTable.filter'
el-select( @change='feedTableLookup'
v-model='feedTable.filter' multiple
@change='feedTableLookup' clearable
multiple style='flex: 1; height: 40px'
clearable :placeholder='$t("view.feed.filter_placeholder")')
style='flex: 1; height: 40px' el-option(
:placeholder='$t("view.feed.filter_placeholder")') v-for='type in ["GPS", "Online", "Offline", "Status", "Avatar", "Bio"]'
el-option( :key='type'
v-for='type in ["GPS", "Online", "Offline", "Status", "Avatar", "Bio"]' :label='$t("view.feed.filters." + type)'
:key='type' :value='type')
:label='$t("view.feed.filters." + type)' el-input(
:value='type') v-model='feedTable.search'
el-input( :placeholder='$t("view.feed.search_placeholder")'
v-model='feedTable.search' @keyup.native.13='feedTableLookup'
:placeholder='$t("view.feed.search_placeholder")' @change='feedTableLookup'
@keyup.native.13='feedTableLookup' clearable
@change='feedTableLookup' style='flex: none; width: 150px; margin: 0 10px')
clearable data-tables(v-bind='feedTable' v-loading='feedTable.loading' lazy)
style='flex: none; width: 150px; margin: 0 10px')
el-table-column(type='expand' width='20') el-table-column(type='expand' width='20')
template(#default='scope') template(#default='scope')
div(style='position: relative; font-size: 14px') div(style='position: relative; font-size: 14px')
@@ -58,7 +57,9 @@ mixin feedTab
template(v-else-if='scope.row.type === "Avatar"') template(v-else-if='scope.row.type === "Avatar"')
div(style='display: flex; align-items: center') div(style='display: flex; align-items: center')
el-popover(placement='right' width='500px' trigger='click') el-popover(placement='right' width='500px' trigger='click')
div(slot='reference' style='display: inline-block; vertical-align: top; width: 160px') div(
slot='reference'
style='display: inline-block; vertical-align: top; width: 160px')
template(v-if='scope.row.previousCurrentAvatarThumbnailImageUrl') template(v-if='scope.row.previousCurrentAvatarThumbnailImageUrl')
img.x-link( img.x-link(
v-lazy='scope.row.previousCurrentAvatarThumbnailImageUrl' v-lazy='scope.row.previousCurrentAvatarThumbnailImageUrl'
@@ -77,7 +78,9 @@ mixin feedTab
span(style='position: relative; margin: 0 10px') span(style='position: relative; margin: 0 10px')
i.el-icon-right i.el-icon-right
el-popover(placement='right' width='500px' trigger='click') el-popover(placement='right' width='500px' trigger='click')
div(slot='reference' style='display: inline-block; vertical-align: top; width: 160px') div(
slot='reference'
style='display: inline-block; vertical-align: top; width: 160px')
template(v-if='scope.row.currentAvatarThumbnailImageUrl') template(v-if='scope.row.currentAvatarThumbnailImageUrl')
img.x-link( img.x-link(
v-lazy='scope.row.currentAvatarThumbnailImageUrl' v-lazy='scope.row.currentAvatarThumbnailImageUrl'

11
src/mixins/tabs/friendsList.pug
View File

@@ -79,6 +79,7 @@ mixin friendsListTab
data-tables( data-tables(
v-bind='friendsListTable' v-bind='friendsListTable'
@row-click='selectFriendsListRow' @row-click='selectFriendsListRow'
:table-props='{ height: "calc(100vh - 170px)", size: "mini" }'
style='margin-top: 10px; cursor: pointer') style='margin-top: 10px; cursor: pointer')
el-table-column( el-table-column(
width='55' width='55'
@@ -129,8 +130,10 @@ mixin friendsListTab
sortable sortable
:sort-method='(a, b) => sortStatus(a.status, b.status)') :sort-method='(a, b) => sortStatus(a.status, b.status)')
template(#default='scope') template(#default='scope')
i.x-user-status(v-if='scope.row.status !== "offline"' :class='statusClass(scope.row.status)') i.x-user-status(
span ‎ v-if='scope.row.status !== "offline"'
:class='statusClass(scope.row.status)'
style='margin-right: 3px')
span(v-text='scope.row.statusDescription') span(v-text='scope.row.statusDescription')
el-table-column( el-table-column(
:label='$t("table.friendList.language")' :label='$t("table.friendList.language")'
@@ -142,7 +145,9 @@ mixin friendsListTab
el-tooltip(v-for='item in scope.row.$languages' :key='item.key' placement='top') el-tooltip(v-for='item in scope.row.$languages' :key='item.key' placement='top')
template(#content) template(#content)
span {{ item.value }} ({{ item.key }}) span {{ item.value }} ({{ item.key }})
span.flags(:class='languageClass(item.key)' style='display: inline-block; margin-right: 5px') span.flags(
:class='languageClass(item.key)'
style='display: inline-block; margin-right: 5px')
el-table-column(:label='$t("table.friendList.bioLink")' width='100' prop='bioLinks') el-table-column(:label='$t("table.friendList.bioLink")' width='100' prop='bioLinks')
template(#default='scope') template(#default='scope')
el-tooltip(v-if='link' v-for='(link, index) in scope.row.bioLinks' :key='index') el-tooltip(v-if='link' v-for='(link, index) in scope.row.bioLinks' :key='index')

3
src/mixins/tabs/playerList.pug
View File

@@ -448,8 +448,7 @@ mixin playerListTab
el-table-column(:label='$t("table.playerList.status")' min-width='180' prop='ref.status') el-table-column(:label='$t("table.playerList.status")' min-width='180' prop='ref.status')
template(#default='scope') template(#default='scope')
template(v-if='scope.row.ref.status') template(v-if='scope.row.ref.status')
i.x-user-status(:class='statusClass(scope.row.ref.status)') i.x-user-status(:class='statusClass(scope.row.ref.status)' style='margin-right: 3px')
span ‎
span(v-text='scope.row.ref.statusDescription') span(v-text='scope.row.ref.statusDescription')
//- el-table-column(label="Group" min-width="180" prop="groupOnNameplate" sortable) //- el-table-column(label="Group" min-width="180" prop="groupOnNameplate" sortable)
//- template(v-once #default="scope") //- template(v-once #default="scope")