mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-07 06:56:04 +02:00
Tabbed side panel
This commit is contained in:
Natsumi
@@ -13655,6 +13655,10 @@ speechSynthesis.getVoices();
|
|||||||
false
|
false
|
||||||
);
|
);
|
||||||
$app.data.asideWidth = configRepository.getInt('VRCX_asidewidth', 350);
|
$app.data.asideWidth = configRepository.getInt('VRCX_asidewidth', 350);
|
||||||
|
if ($app.data.asideWidth === 236) {
|
||||||
|
$app.data.asideWidth = 350;
|
||||||
|
configRepository.setInt('VRCX_asidewidth', $app.data.asideWidth);
|
||||||
|
}
|
||||||
$app.data.autoUpdateVRCX = configRepository.getString(
|
$app.data.autoUpdateVRCX = configRepository.getString(
|
||||||
'VRCX_autoUpdateVRCX',
|
'VRCX_autoUpdateVRCX',
|
||||||
'Auto Download'
|
'Auto Download'
|
||||||
|
|||||||
@@ -705,3 +705,19 @@ i.x-user-status.busy {
|
|||||||
padding: 3px;
|
padding: 3px;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-tab-pane {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs {
|
||||||
|
// height: calc(100vh - 60px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__content {
|
||||||
|
flex: 1;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|||||||
+91
-87
@@ -106,95 +106,99 @@ html
|
|||||||
el-button(type="default" @click="directAccessPaste" size="mini" icon="el-icon-discover" circle)
|
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-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-button(type="default" @click="refreshFriendsList" :loading="API.isRefreshFriendsLoading" size="mini" icon="el-icon-refresh" circle style="margin-right:10px")
|
||||||
.x-friend-list(style="padding-bottom:10px")
|
el-tabs(type="card" stretch="true" style="height: calc(100vh - 60px")
|
||||||
.x-friend-group(style="padding:5px 0 0")
|
el-tab-pane
|
||||||
span {{ $t('side_panel.friends') }} ― {{ onlineFriendCount }}/{{ friends.size }}
|
template(#label)
|
||||||
.x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" style="padding:10px 0 5px")
|
span {{ $t('side_panel.friends') }}: {{ onlineFriendCount }}/{{ friends.size }}
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroupMe }")
|
.x-friend-list(style="padding-bottom:10px")
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.me') }}
|
.x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" 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)")
|
||||||
.detail
|
.avatar(:class="userStatusClass(API.currentUser)")
|
||||||
span.name(v-text="API.currentUser.displayName" :style="{'color':API.currentUser.$userColour}")
|
img(v-lazy="userImage(API.currentUser)")
|
||||||
location.extra(v-if="isGameRunning" :location="lastLocation.location" :traveling="lastLocationDestination" :link="false")
|
.detail
|
||||||
location.extra(v-else-if="isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)" :location="API.currentUser.$locationTag" :traveling="API.currentUser.$travelingToLocation" :link="false")
|
span.name(v-text="API.currentUser.displayName" :style="{'color':API.currentUser.$userColour}")
|
||||||
span.extra(v-else v-text="API.currentUser.statusDescription")
|
location.extra(v-if="isGameRunning" :location="lastLocation.location" :traveling="lastLocationDestination" :link="false")
|
||||||
.x-friend-group.x-link(@click="isGroupInstances = !isGroupInstances")
|
location.extra(v-else-if="isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)" :location="API.currentUser.$locationTag" :traveling="API.currentUser.$travelingToLocation" :link="false")
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isGroupInstances }")
|
span.extra(v-else v-text="API.currentUser.statusDescription")
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.groups') }} ― {{ groupInstances.length }}
|
.x-friend-group.x-link(@click="isFriendsGroup0 = !isFriendsGroup0" v-show="friendsGroup0.length")
|
||||||
div(v-show="isGroupInstances")
|
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup0 }")
|
||||||
.x-friend-item(v-for="instance in groupInstances" :key="instance.id" @click="showGroupDialog(instance.ownerId)")
|
span(style="margin-left:5px") {{ $t('side_panel.favorite') }} ― {{ friendsGroup0.length }}
|
||||||
.avatar
|
div(v-show="isFriendsGroup0")
|
||||||
img(v-lazy="instance.$group.iconUrl")
|
.x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" @click="showUserDialog(friend.id)")
|
||||||
.detail
|
template(v-if="friend.ref")
|
||||||
span.name
|
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
||||||
span(v-text="instance.$group.name")
|
img(v-lazy="userImage(friend.ref)")
|
||||||
span(style="font-weight:normal;margin-left:5px") ({{ instance.userCount }}/{{ instance.capacity }})
|
.detail
|
||||||
location.extra(:location="instance.location" :link="false")
|
span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
.x-friend-group.x-link(@click="isFriendsGroup0 = !isFriendsGroup0" v-show="friendsGroup0.length")
|
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup0 }")
|
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.favorite') }} ― {{ friendsGroup0.length }}
|
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||||
div(v-show="isFriendsGroup0")
|
template(v-else)
|
||||||
.x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" @click="showUserDialog(friend.id)")
|
span(v-text="friend.name || friend.id")
|
||||||
template(v-if="friend.ref")
|
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
.x-friend-group.x-link(@click="isFriendsGroup1 = !isFriendsGroup1" v-show="friendsGroup1.length")
|
||||||
img(v-lazy="userImage(friend.ref)")
|
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup1 }")
|
||||||
.detail
|
span(style="margin-left:5px") {{ $t('side_panel.online') }} ― {{ friendsGroup1.length }}
|
||||||
span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
div(v-show="isFriendsGroup1")
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
.x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" @click="showUserDialog(friend.id)")
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
template(v-if="friend.ref")
|
||||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
||||||
template(v-else)
|
img(v-lazy="userImage(friend.ref)")
|
||||||
span(v-text="friend.name || friend.id")
|
.detail
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
.x-friend-group.x-link(@click="isFriendsGroup1 = !isFriendsGroup1" v-show="friendsGroup1.length")
|
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup1 }")
|
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.online') }} ― {{ friendsGroup1.length }}
|
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
||||||
div(v-show="isFriendsGroup1")
|
template(v-else)
|
||||||
.x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" @click="showUserDialog(friend.id)")
|
span(v-text="friend.name || friend.id")
|
||||||
template(v-if="friend.ref")
|
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
||||||
.avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
|
.x-friend-group.x-link(@click="isFriendsGroup2 = !isFriendsGroup2" v-show="friendsGroup2.length")
|
||||||
img(v-lazy="userImage(friend.ref)")
|
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup2 }")
|
||||||
.detail
|
span(style="margin-left:5px") {{ $t('side_panel.active') }} ― {{ friendsGroup2.length }}
|
||||||
span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
div(v-show="isFriendsGroup2")
|
||||||
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
.x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" @click="showUserDialog(friend.id)")
|
||||||
span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
template(v-if="friend.ref")
|
||||||
location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
|
.avatar
|
||||||
template(v-else)
|
img(v-lazy="userImage(friend.ref)")
|
||||||
span(v-text="friend.name || friend.id")
|
.detail
|
||||||
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||||
.x-friend-group.x-link(@click="isFriendsGroup2 = !isFriendsGroup2" v-show="friendsGroup2.length")
|
span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup2 }")
|
span.extra(v-text="friend.ref.statusDescription" :link="false")
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.active') }} ― {{ friendsGroup2.length }}
|
template(v-else)
|
||||||
div(v-show="isFriendsGroup2")
|
span(v-text="friend.name || friend.id")
|
||||||
.x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" @click="showUserDialog(friend.id)")
|
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
|
||||||
template(v-if="friend.ref")
|
.x-friend-group.x-link(@click="isFriendsGroup3 = !isFriendsGroup3" v-show="friendsGroup3.length")
|
||||||
|
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup3 }")
|
||||||
|
span(style="margin-left:5px") {{ $t('side_panel.offline') }} ― {{ friendsGroup3.length }}
|
||||||
|
div(v-show="isFriendsGroup3")
|
||||||
|
.x-friend-item(v-for="friend in friendsGroup3" :key="friend.id" @click="showUserDialog(friend.id)")
|
||||||
|
template(v-if="friend.ref")
|
||||||
|
.avatar
|
||||||
|
img(v-lazy="userImage(friend.ref)")
|
||||||
|
.detail
|
||||||
|
span.name(v-if="!hideUserMemos && 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-text="friend.ref.statusDescription")
|
||||||
|
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")
|
||||||
|
|
||||||
|
el-tab-pane
|
||||||
|
template(#label)
|
||||||
|
span {{ $t('side_panel.groups') }}: {{ groupInstances.length }}
|
||||||
|
.x-friend-list(style="padding-bottom:10px")
|
||||||
|
.x-friend-item(v-for="instance in groupInstances" :key="instance.id" @click="showGroupDialog(instance.ownerId)")
|
||||||
.avatar
|
.avatar
|
||||||
img(v-lazy="userImage(friend.ref)")
|
img(v-lazy="instance.$group.iconUrl")
|
||||||
.detail
|
.detail
|
||||||
span.name(v-if="!hideUserMemos && 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}")
|
span(v-text="instance.$group.name")
|
||||||
span.extra(v-text="friend.ref.statusDescription" :link="false")
|
span(style="font-weight:normal;margin-left:5px") ({{ instance.userCount }}/{{ instance.capacity }})
|
||||||
template(v-else)
|
location.extra(:location="instance.location" :link="false")
|
||||||
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="isFriendsGroup3 = !isFriendsGroup3" v-show="friendsGroup3.length")
|
|
||||||
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup3 }")
|
|
||||||
span(style="margin-left:5px") {{ $t('side_panel.offline') }} ― {{ friendsGroup3.length }}
|
|
||||||
div(v-show="isFriendsGroup3")
|
|
||||||
.x-friend-item(v-for="friend in friendsGroup3" :key="friend.id" @click="showUserDialog(friend.id)")
|
|
||||||
template(v-if="friend.ref")
|
|
||||||
.avatar
|
|
||||||
img(v-lazy="userImage(friend.ref)")
|
|
||||||
.detail
|
|
||||||
span.name(v-if="!hideUserMemos && 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-text="friend.ref.statusDescription")
|
|
||||||
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")
|
|
||||||
|
|
||||||
//- ## Dialogs ## -\\
|
//- ## Dialogs ## -\\
|
||||||
|
|
||||||
|
|||||||
@@ -477,8 +477,8 @@
|
|||||||
"search_result_more": "Search More:",
|
"search_result_more": "Search More:",
|
||||||
"direct_access_tooltip": "Direct access ID/URL from clipboard",
|
"direct_access_tooltip": "Direct access ID/URL from clipboard",
|
||||||
"refresh_tooltip": "Refresh friends",
|
"refresh_tooltip": "Refresh friends",
|
||||||
"friends": "FRIENDS",
|
"groups": "Group Instances",
|
||||||
"groups": "GROUPS",
|
"friends": "Friends",
|
||||||
"me": "ME",
|
"me": "ME",
|
||||||
"favorite": "FAVORITES",
|
"favorite": "FAVORITES",
|
||||||
"online": "ONLINE",
|
"online": "ONLINE",
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ mixin settingsTab()
|
|||||||
.x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'settings'")
|
.x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'settings'")
|
||||||
div.options-container(style="margin-top:0")
|
div.options-container(style="margin-top:0")
|
||||||
span.header {{ $t("view.settings.header") }}
|
span.header {{ $t("view.settings.header") }}
|
||||||
el-tabs(type="card" style="margin-top:10px")
|
el-tabs(type="card" style="height: calc(100vh - 51px")
|
||||||
el-tab-pane(:label="$t('view.settings.category.general')")
|
el-tab-pane(:label="$t('view.settings.category.general')")
|
||||||
//- General | General
|
//- General | General
|
||||||
div.options-container(style="margin-top:0")
|
div.options-container(style="margin-top:0")
|
||||||
|
|||||||
Reference in New Issue
Block a user