mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-27 10:43:48 +02:00
* feat: Friends Sidebar Group By Instance * fix and improve performance of filter data * rm log
This commit is contained in:
pa
GitHub
@@ -40,34 +40,102 @@ mixin friendsListSidebar()
|
||||
i.el-icon-arrow-right(:class="{ rotate: isVIPFriends }")
|
||||
span(style="margin-left:5px") {{ $t('side_panel.favorite') }} ― {{ vipFriends.length }}
|
||||
div(v-show="isVIPFriends")
|
||||
.x-friend-item(v-for="friend in vipFriends" :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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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') }}
|
||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||
template(v-else)
|
||||
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")
|
||||
template(v-if='isSidebarGroupByInstance')
|
||||
div(v-for="(friendArr, idx) in vipFriendsInSameInstance" :key="friendArr[0].ref?.location.tag")
|
||||
div(style="margin-bottom: 3px")
|
||||
location.extra(:location="friendArr[0].ref?.location" style="color:#c7c7c7")
|
||||
span(style="margin-left: 5px") {{ `(${friendArr.length})` }}
|
||||
div(style="margin-bottom: 10px")
|
||||
div.x-friend-item(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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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)
|
||||
i(v-if="friend.ref.travelingToLocation" class="el-icon el-icon-loading" style="display:inline-block;margin-right:5px")
|
||||
timer(:epoch="friend.ref?.$location_at" style="color:#c7c7c7")
|
||||
template(v-else)
|
||||
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")
|
||||
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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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') }}
|
||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||
template(v-else)
|
||||
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")
|
||||
template(v-else)
|
||||
.x-friend-item(v-for="friend in vipFriends" :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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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') }}
|
||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||
template(v-else)
|
||||
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")
|
||||
.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")
|
||||
.x-friend-item(v-for="friend in onlineFriends" :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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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') }}
|
||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||
template(v-else)
|
||||
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")
|
||||
template(v-if='isSidebarGroupByInstance')
|
||||
div(v-for="(friendArr, idx) in onlineFriendsInSameInstance" :key="friendArr[0].ref?.location.tag")
|
||||
div(style="margin-bottom: 3px")
|
||||
location.extra(:location="friendArr[0].ref?.location" style="color:#c7c7c7")
|
||||
span(style="margin-left: 5px") {{ `(${friendArr.length})` }}
|
||||
div(style="margin-bottom: 10px")
|
||||
div.x-friend-item(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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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)
|
||||
i(v-if="friend.ref.travelingToLocation" class="el-icon el-icon-loading" style="display:inline-block;margin-right:5px")
|
||||
timer(:epoch="friend.ref?.$location_at" style="color:#c7c7c7")
|
||||
template(v-else)
|
||||
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")
|
||||
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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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') }}
|
||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||
template(v-else)
|
||||
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")
|
||||
template(v-else)
|
||||
.x-friend-item(v-for="friend in onlineFriends" :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
|
||||
span.name(v-if="!hideNicknames && friend.$nickName" :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') }}
|
||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||
template(v-else)
|
||||
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")
|
||||
.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 }}
|
||||
|
||||
@@ -231,6 +231,8 @@ mixin settingsTab()
|
||||
div.options-container-item
|
||||
span.name(style="vertical-align:top;padding-top:10px") {{ $t('view.settings.appearance.side_panel.width') }}
|
||||
el-slider(v-model="asideWidth" @input="setAsideWidth" :show-tooltip="false" :marks="{300: ''}" :min="200" :max="500" style="display:inline-block;width:300px")
|
||||
div.options-container-item
|
||||
simple-switch(:label='$t("view.settings.appearance.side_panel.group_by_instance")' :value='isSidebarGroupByInstance' @change='handleSwitchGroupByInstance' :tooltip='$t("view.settings.appearance.side_panel.group_by_instance_tooltip")')
|
||||
//- Appearance | User Dialog
|
||||
div.options-container
|
||||
span.header {{ $t('view.settings.appearance.user_dialog.header') }}
|
||||
|
||||
Reference in New Issue
Block a user