mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-06 22:46:06 +02:00
feat: groups sidebar collapsible (#1094)
* wip * wip * add prettier formatter config for pug files * feat: groups sidebar collapsible (#1079) * rm old code
This commit is contained in:
pa
GitHub
+21
-2
@@ -8,5 +8,24 @@
|
|||||||
"bracketSpacing": true,
|
"bracketSpacing": true,
|
||||||
"arrowParens": "always",
|
"arrowParens": "always",
|
||||||
"vueIndentScriptAndStyle": true,
|
"vueIndentScriptAndStyle": true,
|
||||||
"endOfLine": "auto"
|
"endOfLine": "auto",
|
||||||
}
|
"plugins": [
|
||||||
|
"@prettier/plugin-pug"
|
||||||
|
],
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": "*.pug",
|
||||||
|
"options": {
|
||||||
|
"pugPrintWidth": 120,
|
||||||
|
"pugAttributeSeparator": "none",
|
||||||
|
"pugBracketSameLine": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": "*.vue",
|
||||||
|
"options": {
|
||||||
|
"printWidth": 120
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Generated
+33
-4
@@ -20,6 +20,7 @@
|
|||||||
"@fontsource/noto-sans-sc": "^5.1.0",
|
"@fontsource/noto-sans-sc": "^5.1.0",
|
||||||
"@fontsource/noto-sans-tc": "^5.1.0",
|
"@fontsource/noto-sans-tc": "^5.1.0",
|
||||||
"@infolektuell/noto-color-emoji": "^0.2.0",
|
"@infolektuell/noto-color-emoji": "^0.2.0",
|
||||||
|
"@prettier/plugin-pug": "^3.2.0",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"copy-webpack-plugin": "^12.0.2",
|
"copy-webpack-plugin": "^12.0.2",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
@@ -34,7 +35,7 @@
|
|||||||
"mini-css-extract-plugin": "^2.9.2",
|
"mini-css-extract-plugin": "^2.9.2",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"noty": "^3.2.0-beta-deprecated",
|
"noty": "^3.2.0-beta-deprecated",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.4.2",
|
||||||
"pug": "^3.0.3",
|
"pug": "^3.0.3",
|
||||||
"pug-plain-loader": "^1.1.0",
|
"pug-plain-loader": "^1.1.0",
|
||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
@@ -2715,6 +2716,33 @@
|
|||||||
"node": ">=14"
|
"node": ">=14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@prettier/plugin-pug": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@prettier/plugin-pug/-/plugin-pug-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-SJEDgNjLpgZ2utQJGAFG96yho1hxX/tXflL24HztHYxzkPlDus2/XcvaW7WKQgMej1I+Pk6hLKp2FWv/zgzvkA==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/Shinigami92"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "paypal",
|
||||||
|
"url": "https://www.paypal.com/donate/?hosted_button_id=L7GY729FBKTZY"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"pug-lexer": "^5.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.0.0",
|
||||||
|
"npm": ">=9.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"prettier": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@sindresorhus/is": {
|
"node_modules/@sindresorhus/is": {
|
||||||
"version": "4.6.0",
|
"version": "4.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
|
||||||
@@ -8535,10 +8563,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/prettier": {
|
"node_modules/prettier": {
|
||||||
"version": "3.3.3",
|
"version": "3.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
|
||||||
"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
|
"integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
"bin": {
|
"bin": {
|
||||||
"prettier": "bin/prettier.cjs"
|
"prettier": "bin/prettier.cjs"
|
||||||
},
|
},
|
||||||
|
|||||||
+2
-1
@@ -35,6 +35,7 @@
|
|||||||
"@fontsource/noto-sans-sc": "^5.1.0",
|
"@fontsource/noto-sans-sc": "^5.1.0",
|
||||||
"@fontsource/noto-sans-tc": "^5.1.0",
|
"@fontsource/noto-sans-tc": "^5.1.0",
|
||||||
"@infolektuell/noto-color-emoji": "^0.2.0",
|
"@infolektuell/noto-color-emoji": "^0.2.0",
|
||||||
|
"@prettier/plugin-pug": "^3.2.0",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"copy-webpack-plugin": "^12.0.2",
|
"copy-webpack-plugin": "^12.0.2",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
@@ -49,7 +50,7 @@
|
|||||||
"mini-css-extract-plugin": "^2.9.2",
|
"mini-css-extract-plugin": "^2.9.2",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"noty": "^3.2.0-beta-deprecated",
|
"noty": "^3.2.0-beta-deprecated",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.4.2",
|
||||||
"pug": "^3.0.3",
|
"pug": "^3.0.3",
|
||||||
"pug-plain-loader": "^1.1.0",
|
"pug-plain-loader": "^1.1.0",
|
||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
|
|||||||
+9
-5
@@ -36,6 +36,7 @@ import ModerationTab from './views/tabs/Moderation.vue';
|
|||||||
|
|
||||||
// components
|
// components
|
||||||
import SimpleSwitch from './components/settings/SimpleSwitch.vue';
|
import SimpleSwitch from './components/settings/SimpleSwitch.vue';
|
||||||
|
import GroupsSidebar from './components/sidebar/GroupsSidebar.vue';
|
||||||
|
|
||||||
// main app classes
|
// main app classes
|
||||||
import _sharedFeed from './classes/sharedFeed.js';
|
import _sharedFeed from './classes/sharedFeed.js';
|
||||||
@@ -166,7 +167,11 @@ console.log(`isLinux: ${LINUX}`);
|
|||||||
|
|
||||||
// components
|
// components
|
||||||
// - settings
|
// - settings
|
||||||
SimpleSwitch
|
SimpleSwitch,
|
||||||
|
|
||||||
|
// components
|
||||||
|
// - sidebar(friendsListSidebar)
|
||||||
|
GroupsSidebar
|
||||||
},
|
},
|
||||||
el: '#x-app',
|
el: '#x-app',
|
||||||
async mounted() {
|
async mounted() {
|
||||||
@@ -23120,7 +23125,9 @@ console.log(`isLinux: ${LINUX}`);
|
|||||||
return LINUX;
|
return LINUX;
|
||||||
};
|
};
|
||||||
|
|
||||||
// friendsListSiderBar
|
// friendsListSidebar
|
||||||
|
// - SidebarGroupByInstance
|
||||||
|
|
||||||
$app.methods.handleSwitchGroupByInstance = async function () {
|
$app.methods.handleSwitchGroupByInstance = async function () {
|
||||||
this.isSidebarGroupByInstance = !this.isSidebarGroupByInstance;
|
this.isSidebarGroupByInstance = !this.isSidebarGroupByInstance;
|
||||||
await configRepository.setBool(
|
await configRepository.setBool(
|
||||||
@@ -23129,9 +23136,6 @@ console.log(`isLinux: ${LINUX}`);
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// friendsListSidebar
|
|
||||||
// - SidebarGroupByInstance
|
|
||||||
|
|
||||||
$app.data.isSidebarGroupByInstance = await configRepository.getBool(
|
$app.data.isSidebarGroupByInstance = await configRepository.getBool(
|
||||||
'VRCX_sidebarGroupByInstance',
|
'VRCX_sidebarGroupByInstance',
|
||||||
true
|
true
|
||||||
|
|||||||
@@ -1216,7 +1216,7 @@ export default class extends baseClass {
|
|||||||
|
|
||||||
API.$on('GROUP:USER:INSTANCES', function (args) {
|
API.$on('GROUP:USER:INSTANCES', function (args) {
|
||||||
$app.groupInstances = [];
|
$app.groupInstances = [];
|
||||||
for (var json of args.json.instances) {
|
for (const json of args.json.instances) {
|
||||||
if (args.json.fetchedAt) {
|
if (args.json.fetchedAt) {
|
||||||
// tack on fetchedAt
|
// tack on fetchedAt
|
||||||
json.$fetchedAt = args.json.fetchedAt;
|
json.$fetchedAt = args.json.fetchedAt;
|
||||||
@@ -1227,7 +1227,7 @@ export default class extends baseClass {
|
|||||||
fetchedAt: args.json.fetchedAt
|
fetchedAt: args.json.fetchedAt
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
var ref = this.cachedGroups.get(json.ownerId);
|
const ref = this.cachedGroups.get(json.ownerId);
|
||||||
if (typeof ref === 'undefined') {
|
if (typeof ref === 'undefined') {
|
||||||
if ($app.friendLogInitStatus) {
|
if ($app.friendLogInitStatus) {
|
||||||
this.getGroup({ groupId: json.ownerId });
|
this.getGroup({ groupId: json.ownerId });
|
||||||
|
|||||||
@@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<div class="x-friend-list" style="padding: 10px 5px">
|
||||||
|
<template v-for="(group, index) in groupedGroupInstances">
|
||||||
|
<div
|
||||||
|
:key="getGroupId(group)"
|
||||||
|
class="x-friend-group x-link sidebar-group-title"
|
||||||
|
: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 }"
|
||||||
|
></i>
|
||||||
|
<span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!groupInstancesCfg[getGroupId(group)].isCollapsed"
|
||||||
|
v-for="ref in group"
|
||||||
|
:key="ref.instance.id"
|
||||||
|
class="x-friend-item"
|
||||||
|
@click="showGroupDialog(ref.instance.ownerId)"
|
||||||
|
>
|
||||||
|
<div class="avatar">
|
||||||
|
<img v-lazy="ref.group.iconUrl" />
|
||||||
|
</div>
|
||||||
|
<div class="detail">
|
||||||
|
<span class="name">
|
||||||
|
<span v-text="ref.group.name"></span>
|
||||||
|
<span style="font-weight: normal; margin-left: 5px"
|
||||||
|
>({{ ref.instance.userCount }}/{{ ref.instance.capacity }})</span
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<location class="extra" :location="ref.instance.location" :link="false" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'GroupsSidebar',
|
||||||
|
props: {
|
||||||
|
groupInstances: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// temporary, sort feat not yet done
|
||||||
|
// may be the data structure to be changed
|
||||||
|
groupInstancesCfg: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
groupedGroupInstances() {
|
||||||
|
const groupMap = new Map();
|
||||||
|
|
||||||
|
this.groupInstances.forEach((ref) => {
|
||||||
|
const groupId = ref.group.groupId;
|
||||||
|
if (!groupMap.has(groupId)) {
|
||||||
|
groupMap.set(groupId, []);
|
||||||
|
}
|
||||||
|
groupMap.get(groupId).push(ref);
|
||||||
|
|
||||||
|
if (!this.groupInstancesCfg[ref.group?.groupId]) {
|
||||||
|
this.groupInstancesCfg = {
|
||||||
|
[ref.group.groupId]: {
|
||||||
|
isCollapsed: false
|
||||||
|
},
|
||||||
|
...this.groupInstancesCfg
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Array.from(groupMap.values());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleGroupSidebarCollapse(groupId) {
|
||||||
|
this.groupInstancesCfg[groupId].isCollapsed = !this.groupInstancesCfg[groupId].isCollapsed;
|
||||||
|
},
|
||||||
|
showGroupDialog(ownerId) {
|
||||||
|
this.$emit('show-group-dialog', ownerId);
|
||||||
|
},
|
||||||
|
getGroupId(group) {
|
||||||
|
return group[0]?.group?.groupId || '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
+311
-149
@@ -1,181 +1,343 @@
|
|||||||
|
mixin friendsListSidebar
|
||||||
mixin friendsListSidebar()
|
#aside.x-aside-container(v-show='$refs.menu && $refs.menu.activeIndex !== \'friendsList\'')
|
||||||
.x-aside-container(v-show="$refs.menu && $refs.menu.activeIndex !== 'friendsList'" id="aside")
|
div(style='display: flex; align-items: baseline')
|
||||||
div(style="display:flex;align-items:baseline")
|
el-select(
|
||||||
el-select(v-model="quickSearch" clearable :placeholder="$t('side_panel.search_placeholder')" filterable remote :remote-method="quickSearchRemoteMethod" popper-class="x-quick-search" @change="quickSearchChange" @visible-change="quickSearchVisibleChange" style="flex:1;padding:10px")
|
v-model='quickSearch'
|
||||||
el-option(v-for="item in quickSearchItems" :key="item.value" :value="item.value" :label="item.label")
|
clearable
|
||||||
|
:placeholder='$t("side_panel.search_placeholder")'
|
||||||
|
filterable
|
||||||
|
remote
|
||||||
|
:remote-method='quickSearchRemoteMethod'
|
||||||
|
popper-class='x-quick-search'
|
||||||
|
@change='quickSearchChange'
|
||||||
|
@visible-change='quickSearchVisibleChange'
|
||||||
|
style='flex: 1; padding: 10px')
|
||||||
|
el-option(v-for='item in quickSearchItems' :key='item.value' :value='item.value' :label='item.label')
|
||||||
.x-friend-item
|
.x-friend-item
|
||||||
template(v-if="item.ref")
|
template(v-if='item.ref')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-text="item.ref.displayName" :style="{'color':item.ref.$userColour}")
|
span.name(v-text='item.ref.displayName' :style='{ color: item.ref.$userColour }')
|
||||||
span.extra(v-if="!item.ref.isFriend")
|
span.extra(v-if='!item.ref.isFriend')
|
||||||
span.extra(v-else-if="item.ref.state === 'offline'") {{ $t('side_panel.search_result_active') }}
|
span.extra(v-else-if='item.ref.state === "offline"') {{ $t('side_panel.search_result_active') }}
|
||||||
span.extra(v-else-if="item.ref.state === 'active'") {{ $t('side_panel.search_result_offline') }}
|
span.extra(v-else-if='item.ref.state === "active"') {{ $t('side_panel.search_result_offline') }}
|
||||||
location.extra(v-else :location="item.ref.location" :traveling="item.ref.travelingToLocation" :link="false")
|
location.extra(
|
||||||
img.avatar(v-lazy="userImage(item.ref)")
|
v-else
|
||||||
span(v-else) {{ $t('side_panel.search_result_more') }} #[span(v-text="item.label" style="font-weight:bold")]
|
:location='item.ref.location'
|
||||||
el-tooltip(placement="bottom" :content="$t('side_panel.direct_access_tooltip')" :disabled="hideTooltips")
|
:traveling='item.ref.travelingToLocation'
|
||||||
el-button(type="default" @click="directAccessPaste" size="mini" icon="el-icon-discover" circle)
|
:link='false')
|
||||||
el-tooltip(placement="bottom" :content="$t('side_panel.refresh_tooltip')" :disabled="hideTooltips")
|
img.avatar(v-lazy='userImage(item.ref)')
|
||||||
el-button(type="default" @click="refreshFriendsList" :loading="API.isRefreshFriendsLoading" size="mini" icon="el-icon-refresh" circle style="margin-right:10px")
|
span(v-else) {{ $t('side_panel.search_result_more') }} #[span(v-text='item.label' style='font-weight: bold')]
|
||||||
el-tabs.zero-margin-tabs(stretch="true" style="height:calc(100% - 60px;margin-top:5px")
|
el-tooltip(placement='bottom' :content='$t("side_panel.direct_access_tooltip")' :disabled='hideTooltips')
|
||||||
|
el-button(type='default' @click='directAccessPaste' size='mini' icon='el-icon-discover' circle)
|
||||||
|
el-tooltip(placement='bottom' :content='$t("side_panel.refresh_tooltip")' :disabled='hideTooltips')
|
||||||
|
el-button(
|
||||||
|
type='default'
|
||||||
|
@click='refreshFriendsList'
|
||||||
|
:loading='API.isRefreshFriendsLoading'
|
||||||
|
size='mini'
|
||||||
|
icon='el-icon-refresh'
|
||||||
|
circle
|
||||||
|
style='margin-right: 10px')
|
||||||
|
el-tabs.zero-margin-tabs(stretch='true' style='height: calc(100% - 60px); margin-top: 5px')
|
||||||
el-tab-pane
|
el-tab-pane
|
||||||
template(#label)
|
template(#label)
|
||||||
span {{ $t('side_panel.friends') }}
|
span {{ $t('side_panel.friends') }}
|
||||||
span(style="color:#909399;font-size:12px;margin-left:10px") ({{ onlineFriendCount }}/{{ friends.size }})
|
span(style='color: #909399; font-size: 12px; margin-left: 10px') ({{ onlineFriendCount }}/{{ friends.size }})
|
||||||
.x-friend-list(style="padding:10px 5px")
|
.x-friend-list(style='padding: 10px 5px')
|
||||||
.x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe; saveFriendsGroupStates()" style="padding:0px 0px 5px")
|
.x-friend-group.x-link(
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroupMe }")
|
@click='isFriendsGroupMe = !isFriendsGroupMe; saveFriendsGroupStates()'
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.me') }}
|
style='padding: 0px 0px 5px')
|
||||||
div(v-show="isFriendsGroupMe")
|
i.el-icon-arrow-right(:class='{ rotate: isFriendsGroupMe }')
|
||||||
.x-friend-item(:key="API.currentUser.id" @click="showUserDialog(API.currentUser.id)")
|
span(style='margin-left: 5px') {{ $t('side_panel.me') }}
|
||||||
.avatar(:class="userStatusClass(API.currentUser)")
|
div(v-show='isFriendsGroupMe')
|
||||||
img(v-lazy="userImage(API.currentUser)")
|
.x-friend-item(:key='API.currentUser.id' @click='showUserDialog(API.currentUser.id)')
|
||||||
|
.avatar(:class='userStatusClass(API.currentUser)')
|
||||||
|
img(v-lazy='userImage(API.currentUser)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-text="API.currentUser.displayName" :style="{'color':API.currentUser.$userColour}")
|
span.name(
|
||||||
location.extra(v-if="isGameRunning && !gameLogDisabled" :location="lastLocation.location" :traveling="lastLocationDestination" :link="false")
|
v-text='API.currentUser.displayName'
|
||||||
location.extra(v-else-if="isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)" :location="API.currentUser.$locationTag" :traveling="API.currentUser.$travelingToLocation" :link="false")
|
:style='{ color: API.currentUser.$userColour }')
|
||||||
span.extra(v-else v-text="API.currentUser.statusDescription")
|
location.extra(
|
||||||
.x-friend-group.x-link(@click="isVIPFriends = !isVIPFriends; saveFriendsGroupStates()" v-show="vipFriends.length")
|
v-if='isGameRunning && !gameLogDisabled'
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isVIPFriends }")
|
:location='lastLocation.location'
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.favorite') }} ― {{ vipFriends.length }}
|
:traveling='lastLocationDestination'
|
||||||
div(v-show="isVIPFriends")
|
:link='false')
|
||||||
|
location.extra(
|
||||||
|
v-else-if='isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)'
|
||||||
|
:location='API.currentUser.$locationTag'
|
||||||
|
:traveling='API.currentUser.$travelingToLocation'
|
||||||
|
:link='false')
|
||||||
|
span.extra(v-else v-text='API.currentUser.statusDescription')
|
||||||
|
.x-friend-group.x-link(
|
||||||
|
@click='isVIPFriends = !isVIPFriends; saveFriendsGroupStates()'
|
||||||
|
v-show='vipFriends.length')
|
||||||
|
i.el-icon-arrow-right(:class='{ rotate: isVIPFriends }')
|
||||||
|
span(style='margin-left: 5px') {{ $t('side_panel.favorite') }} ― {{ vipFriends.length }}
|
||||||
|
div(v-show='isVIPFriends')
|
||||||
template(v-if='isSidebarGroupByInstance')
|
template(v-if='isSidebarGroupByInstance')
|
||||||
div(v-for="(friendArr, idx) in vipFriendsInSameInstance" :key="friendArr[0].ref?.location.tag")
|
div(
|
||||||
div(style="margin-bottom: 3px")
|
v-for='(friendArr, idx) in vipFriendsInSameInstance'
|
||||||
location.extra(:location="friendArr[0].ref?.location" style="color:#c7c7c7")
|
:key='friendArr[0].ref?.location.tag')
|
||||||
span(style="margin-left: 5px") {{ `(${friendArr.length})` }}
|
div(style='margin-bottom: 3px')
|
||||||
div(style="margin-bottom: 10px")
|
location.extra(:location='friendArr[0].ref?.location' style='color: #c7c7c7')
|
||||||
div.x-friend-item(v-if="friendArr && friendArr.length" v-for="friend in friendArr" :key="friend.id" @click="showUserDialog(friend.id)")
|
span(style='margin-left: 5px') {{ `(${friendArr.length})` }}
|
||||||
template(v-if="friend.ref")
|
div(style='margin-bottom: 10px')
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
.x-friend-item(
|
||||||
img(v-lazy="userImage(friend.ref)")
|
v-if='friendArr && friendArr.length'
|
||||||
|
v-for='friend in friendArr'
|
||||||
|
:key='friend.id'
|
||||||
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
|
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||||
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
template(v-else)
|
template(v-else)
|
||||||
i(v-if="friend.ref.travelingToLocation" class="el-icon el-icon-loading" style="display:inline-block;margin-right:5px")
|
i.el-icon.el-icon-loading(
|
||||||
timer(:epoch="friend.ref?.$location_at" style="color:#c7c7c7")
|
v-if='friend.ref.travelingToLocation'
|
||||||
|
style='display: inline-block; margin-right: 5px')
|
||||||
|
timer(:epoch='friend.ref?.$location_at' style='color: #c7c7c7')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
div(v-if="idx === vipFriendsInSameInstance.length - 1" style="color:#c7c7c7") {{ "Others" }}
|
type='text'
|
||||||
.x-friend-item(v-for="friend in vipFriendsNotInSameInstance" :key="friend.id" @click="showUserDialog(friend.id)")
|
icon='el-icon-close'
|
||||||
template(v-if="friend.ref")
|
size='mini'
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
img(v-lazy="userImage(friend.ref)")
|
style='margin-left: 5px')
|
||||||
|
div(v-if='idx === vipFriendsInSameInstance.length - 1' style='color: #c7c7c7') {{ 'Others' }}
|
||||||
|
.x-friend-item(
|
||||||
|
v-for='friend in vipFriendsNotInSameInstance'
|
||||||
|
:key='friend.id'
|
||||||
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
|
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||||
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
|
location.extra(
|
||||||
|
v-else
|
||||||
|
:location='friend.ref.location'
|
||||||
|
:traveling='friend.ref.travelingToLocation'
|
||||||
|
:link='false')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
|
type='text'
|
||||||
|
icon='el-icon-close'
|
||||||
|
size='mini'
|
||||||
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
|
style='margin-left: 5px')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
.x-friend-item(v-for="friend in vipFriends" :key="friend.id" @click="showUserDialog(friend.id)")
|
.x-friend-item(
|
||||||
template(v-if="friend.ref")
|
v-for='friend in vipFriends'
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
:key='friend.id'
|
||||||
img(v-lazy="userImage(friend.ref)")
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
|
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||||
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
|
location.extra(
|
||||||
|
v-else
|
||||||
|
:location='friend.ref.location'
|
||||||
|
:traveling='friend.ref.travelingToLocation'
|
||||||
|
:link='false')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
.x-friend-group.x-link(@click="isOnlineFriends = !isOnlineFriends; saveFriendsGroupStates()" v-show="onlineFriends.length")
|
type='text'
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isOnlineFriends }")
|
icon='el-icon-close'
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.online') }} ― {{ onlineFriends.length }}
|
size='mini'
|
||||||
div(v-show="isOnlineFriends")
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
|
style='margin-left: 5px')
|
||||||
|
.x-friend-group.x-link(
|
||||||
|
@click='isOnlineFriends = !isOnlineFriends; saveFriendsGroupStates()'
|
||||||
|
v-show='onlineFriends.length')
|
||||||
|
i.el-icon-arrow-right(:class='{ rotate: isOnlineFriends }')
|
||||||
|
span(style='margin-left: 5px') {{ $t('side_panel.online') }} ― {{ onlineFriends.length }}
|
||||||
|
div(v-show='isOnlineFriends')
|
||||||
template(v-if='isSidebarGroupByInstance')
|
template(v-if='isSidebarGroupByInstance')
|
||||||
div(v-for="(friendArr, idx) in onlineFriendsInSameInstance" :key="friendArr[0].ref?.location.tag")
|
div(
|
||||||
div(style="margin-bottom: 3px")
|
v-for='(friendArr, idx) in onlineFriendsInSameInstance'
|
||||||
location.extra(:location="friendArr[0].ref?.location" style="color:#c7c7c7")
|
:key='friendArr[0].ref?.location.tag')
|
||||||
span(style="margin-left: 5px") {{ `(${friendArr.length})` }}
|
div(style='margin-bottom: 3px')
|
||||||
div(style="margin-bottom: 10px")
|
location.extra(:location='friendArr[0].ref?.location' style='color: #c7c7c7')
|
||||||
div.x-friend-item(v-if="friendArr && friendArr.length" v-for="friend in friendArr" :key="friend.id" @click="showUserDialog(friend.id)")
|
span(style='margin-left: 5px') {{ `(${friendArr.length})` }}
|
||||||
template(v-if="friend.ref")
|
div(style='margin-bottom: 10px')
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
.x-friend-item(
|
||||||
img(v-lazy="userImage(friend.ref)")
|
v-if='friendArr && friendArr.length'
|
||||||
|
v-for='friend in friendArr'
|
||||||
|
:key='friend.id'
|
||||||
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
|
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||||
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
template(v-else)
|
template(v-else)
|
||||||
i(v-if="friend.ref.travelingToLocation" class="el-icon el-icon-loading" style="display:inline-block;margin-right:5px")
|
i.el-icon.el-icon-loading(
|
||||||
timer(:epoch="friend.ref?.$location_at" style="color:#c7c7c7")
|
v-if='friend.ref.travelingToLocation'
|
||||||
|
style='display: inline-block; margin-right: 5px')
|
||||||
|
timer(:epoch='friend.ref?.$location_at' style='color: #c7c7c7')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
div(v-if="idx === onlineFriendsInSameInstance.length - 1" style="color:#c7c7c7") {{ "Others" }}
|
type='text'
|
||||||
.x-friend-item(v-for="friend in onlineFriendsNotInSameInstance" :key="friend.id" @click="showUserDialog(friend.id)")
|
icon='el-icon-close'
|
||||||
template(v-if="friend.ref")
|
size='mini'
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
img(v-lazy="userImage(friend.ref)")
|
style='margin-left: 5px')
|
||||||
|
div(v-if='idx === onlineFriendsInSameInstance.length - 1' style='color: #c7c7c7') {{ 'Others' }}
|
||||||
|
.x-friend-item(
|
||||||
|
v-for='friend in onlineFriendsNotInSameInstance'
|
||||||
|
:key='friend.id'
|
||||||
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
|
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||||
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
|
location.extra(
|
||||||
|
v-else
|
||||||
|
:location='friend.ref.location'
|
||||||
|
:traveling='friend.ref.travelingToLocation'
|
||||||
|
:link='false')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
|
type='text'
|
||||||
|
icon='el-icon-close'
|
||||||
|
size='mini'
|
||||||
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
|
style='margin-left: 5px')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
.x-friend-item(v-for="friend in onlineFriends" :key="friend.id" @click="showUserDialog(friend.id)")
|
.x-friend-item(
|
||||||
template(v-if="friend.ref")
|
v-for='friend in onlineFriends'
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
:key='friend.id'
|
||||||
img(v-lazy="userImage(friend.ref)")
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
|
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||||
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
|
location.extra(
|
||||||
|
v-else
|
||||||
|
:location='friend.ref.location'
|
||||||
|
:traveling='friend.ref.travelingToLocation'
|
||||||
|
:link='false')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
.x-friend-group.x-link(@click="isActiveFriends = !isActiveFriends; saveFriendsGroupStates()" v-show="activeFriends.length")
|
type='text'
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isActiveFriends }")
|
icon='el-icon-close'
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.active') }} ― {{ activeFriends.length }}
|
size='mini'
|
||||||
div(v-show="isActiveFriends")
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
.x-friend-item(v-for="friend in activeFriends" :key="friend.id" @click="showUserDialog(friend.id)")
|
style='margin-left: 5px')
|
||||||
template(v-if="friend.ref")
|
.x-friend-group.x-link(
|
||||||
|
@click='isActiveFriends = !isActiveFriends; saveFriendsGroupStates()'
|
||||||
|
v-show='activeFriends.length')
|
||||||
|
i.el-icon-arrow-right(:class='{ rotate: isActiveFriends }')
|
||||||
|
span(style='margin-left: 5px') {{ $t('side_panel.active') }} ― {{ activeFriends.length }}
|
||||||
|
div(v-show='isActiveFriends')
|
||||||
|
.x-friend-item(
|
||||||
|
v-for='friend in activeFriends'
|
||||||
|
:key='friend.id'
|
||||||
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
.avatar
|
.avatar
|
||||||
img(v-lazy="userImage(friend.ref)")
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-text="friend.ref.statusDescription" :link="false")
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-text='friend.ref.statusDescription' :link='false')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
.x-friend-group.x-link(@click="isOfflineFriends = !isOfflineFriends; saveFriendsGroupStates()" v-show="offlineFriends.length")
|
type='text'
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isOfflineFriends }")
|
icon='el-icon-close'
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.offline') }} ― {{ offlineFriends.length }}
|
size='mini'
|
||||||
div(v-show="isOfflineFriends")
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
.x-friend-item(v-for="friend in offlineFriends" :key="friend.id" @click="showUserDialog(friend.id)")
|
style='margin-left: 5px')
|
||||||
template(v-if="friend.ref")
|
.x-friend-group.x-link(
|
||||||
|
@click='isOfflineFriends = !isOfflineFriends; saveFriendsGroupStates()'
|
||||||
|
v-show='offlineFriends.length')
|
||||||
|
i.el-icon-arrow-right(:class='{ rotate: isOfflineFriends }')
|
||||||
|
span(style='margin-left: 5px') {{ $t('side_panel.offline') }} ― {{ offlineFriends.length }}
|
||||||
|
div(v-show='isOfflineFriends')
|
||||||
|
.x-friend-item(
|
||||||
|
v-for='friend in offlineFriends'
|
||||||
|
:key='friend.id'
|
||||||
|
@click='showUserDialog(friend.id)')
|
||||||
|
template(v-if='friend.ref')
|
||||||
.avatar
|
.avatar
|
||||||
img(v-lazy="userImage(friend.ref)")
|
img(v-lazy='userImage(friend.ref)')
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideNicknames && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
span.name(
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
v-if='!hideNicknames && friend.$nickName'
|
||||||
span.extra(v-text="friend.ref.statusDescription")
|
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
|
span.name(
|
||||||
|
v-else
|
||||||
|
v-text='friend.ref.displayName'
|
||||||
|
:style='{ color: friend.ref.$userColour }')
|
||||||
|
span.extra(v-text='friend.ref.statusDescription')
|
||||||
template(v-else)
|
template(v-else)
|
||||||
span(v-text="friend.name || friend.id")
|
span(v-text='friend.name || friend.id')
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
el-button(
|
||||||
el-tab-pane
|
type='text'
|
||||||
|
icon='el-icon-close'
|
||||||
|
size='mini'
|
||||||
|
@click.stop='confirmDeleteFriend(friend.id)'
|
||||||
|
style='margin-left: 5px')
|
||||||
|
el-tab-pane(lazy)
|
||||||
template(#label)
|
template(#label)
|
||||||
span {{ $t('side_panel.groups') }}
|
span {{ $t('side_panel.groups') }}
|
||||||
span(style="color:#909399;font-size:12px;margin-left:10px") ({{ groupInstances.length }})
|
span(style='color: #909399; font-size: 12px; margin-left: 10px') ({{ groupInstances.length }})
|
||||||
.x-friend-list(style="padding:10px 5px")
|
groups-sidebar(:group-instances='groupInstances' @show-group-dialog='showGroupDialog')
|
||||||
.x-friend-item(v-for="ref in groupInstances" :key="ref.instance.id" @click="showGroupDialog(ref.instance.ownerId)")
|
|
||||||
.avatar
|
|
||||||
img(v-lazy="ref.group.iconUrl")
|
|
||||||
.detail
|
|
||||||
span.name
|
|
||||||
span(v-text="ref.group.name")
|
|
||||||
span(style="font-weight:normal;margin-left:5px") ({{ ref.instance.userCount }}/{{ ref.instance.capacity }})
|
|
||||||
location.extra(:location="ref.instance.location" :link="false")
|
|
||||||
|
|||||||
Reference in New Issue
Block a user