mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 06:43:51 +02:00
Split component, improve UI, fix and refactor (#1162)
This commit is contained in:
pa
GitHub
104
src/views/NavMenu.vue
Normal file
104
src/views/NavMenu.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-menu
|
||||
ref="navRef"
|
||||
collapse
|
||||
@select="$emit('select', $event)"
|
||||
:default-active="menuActiveIndex"
|
||||
:collapse-transition="false">
|
||||
<el-menu-item index="feed">
|
||||
<i class="el-icon-news"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.feed') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="gameLog">
|
||||
<i class="el-icon-s-data"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.game_log') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="playerList">
|
||||
<i class="el-icon-tickets"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.player_list') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="search">
|
||||
<i class="el-icon-search"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.search') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="favorite">
|
||||
<i class="el-icon-star-off"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.favorites') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="friendLog">
|
||||
<i class="el-icon-notebook-2"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.friend_log') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="moderation">
|
||||
<i class="el-icon-finished"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.moderation') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="notification">
|
||||
<i class="el-icon-bell"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.notification') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="friendsList">
|
||||
<i class="el-icon-s-management"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.friend_list') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="charts">
|
||||
<i class="el-icon-data-analysis"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.charts') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="profile">
|
||||
<i class="el-icon-user"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.profile') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="settings">
|
||||
<i class="el-icon-s-tools"></i>
|
||||
<template slot="title">
|
||||
<span>{{ $t('nav_tooltip.settings') }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NavMenu',
|
||||
props: {
|
||||
menuActiveIndex: {
|
||||
type: String,
|
||||
default: 'feed'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
152
src/views/SideBar.vue
Normal file
152
src/views/SideBar.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div id="aside" class="x-aside-container">
|
||||
<div style="display: flex; align-items: baseline">
|
||||
<el-select
|
||||
value=""
|
||||
clearable
|
||||
:placeholder="$t('side_panel.search_placeholder')"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="quickSearchRemoteMethod"
|
||||
popper-class="x-quick-search"
|
||||
style="flex: 1; padding: 10px"
|
||||
@change="$emit('quick-search-change', $event)">
|
||||
<el-option v-for="item in quickSearchItems" :key="item.value" :value="item.value" :label="item.label">
|
||||
<div class="x-friend-item">
|
||||
<template v-if="item.ref">
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: item.ref.$userColour }">{{
|
||||
item.ref.displayName
|
||||
}}</span>
|
||||
<span v-if="!item.ref.isFriend" class="extra"></span>
|
||||
<span v-else-if="item.ref.state === 'offline'" class="extra">{{
|
||||
$t('side_panel.search_result_active')
|
||||
}}</span>
|
||||
<span v-else-if="item.ref.state === 'active'" class="extra">{{
|
||||
$t('side_panel.search_result_offline')
|
||||
}}</span>
|
||||
<location
|
||||
v-else
|
||||
class="extra"
|
||||
:location="item.ref.location"
|
||||
:traveling="item.ref.travelingToLocation"
|
||||
:link="false"></location>
|
||||
</div>
|
||||
<img class="avatar" v-lazy="userImage(item.ref)" />
|
||||
</template>
|
||||
<span v-else>
|
||||
{{ $t('side_panel.search_result_more') }}
|
||||
<span style="font-weight: bold">{{ item.label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-tooltip placement="bottom" :content="$t('side_panel.direct_access_tooltip')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="default"
|
||||
size="mini"
|
||||
icon="el-icon-discover"
|
||||
circle
|
||||
@click="$emit('direct-access-paste')"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="bottom" :content="$t('side_panel.refresh_tooltip')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="default"
|
||||
:loading="API.isRefreshFriendsLoading"
|
||||
size="mini"
|
||||
icon="el-icon-refresh"
|
||||
circle
|
||||
style="margin-right: 10px"
|
||||
@click="$emit('refresh-friends-list')"></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tabs class="zero-margin-tabs" stretch style="height: calc(100% - 60px); margin-top: 5px">
|
||||
<el-tab-pane>
|
||||
<template slot="label">
|
||||
<span>{{ $t('side_panel.friends') }}</span>
|
||||
<span style="color: #909399; font-size: 12px; margin-left: 10px">
|
||||
({{ onlineFriendCount }}/{{ friends.size }})
|
||||
</span>
|
||||
</template>
|
||||
<el-backtop target=".zero-margin-tabs .el-tabs__content" :bottom="20" :right="20"></el-backtop>
|
||||
<friends-sidebar
|
||||
@confirm-delete-friend="$emit('confirm-delete-friend', $event)"
|
||||
:is-game-running="isGameRunning"
|
||||
:is-sidebar-divide-by-friend-group="isSidebarDivideByFriendGroup"
|
||||
:is-sidebar-group-by-instance="isSidebarGroupByInstance"
|
||||
:game-log-disabled="gameLogDisabled"
|
||||
:last-location="lastLocation"
|
||||
:last-location-destination="lastLocationDestination"
|
||||
:hide-nicknames="hideNicknames"
|
||||
:active-friends="activeFriends"
|
||||
:offline-friends="offlineFriends"
|
||||
:online-friends="onlineFriends"
|
||||
:vip-friends="vipFriends"
|
||||
:is-hide-friends-in-same-instance="isHideFriendsInSameInstance"
|
||||
:grouped-by-group-key-favorite-friends="groupedByGroupKeyFavoriteFriends"></friends-sidebar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy>
|
||||
<template slot="label">
|
||||
<span>{{ $t('side_panel.groups') }}</span>
|
||||
<span style="color: #909399; font-size: 12px; margin-left: 10px">
|
||||
({{ groupInstances.length }})
|
||||
</span>
|
||||
</template>
|
||||
<groups-sidebar
|
||||
:group-instances="groupInstances"
|
||||
:group-order="inGameGroupOrder"
|
||||
@show-group-dialog="$emit('show-group-dialog', $event)"></groups-sidebar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FriendsSidebar from '../components/sidebar/FriendsSidebar.vue';
|
||||
import GroupsSidebar from '../components/sidebar/GroupsSidebar.vue';
|
||||
import Location from '../components/common/Location.vue';
|
||||
|
||||
export default {
|
||||
name: 'SideBar',
|
||||
inject: ['API', 'userImage'],
|
||||
components: {
|
||||
FriendsSidebar,
|
||||
GroupsSidebar,
|
||||
Location
|
||||
},
|
||||
props: {
|
||||
// settings
|
||||
// remove these props when have a state manager.
|
||||
hideTooltips: Boolean,
|
||||
isGameRunning: Boolean,
|
||||
isSidebarDivideByFriendGroup: Boolean,
|
||||
isSidebarGroupByInstance: Boolean,
|
||||
gameLogDisabled: Boolean,
|
||||
hideNicknames: Boolean,
|
||||
isHideFriendsInSameInstance: Boolean,
|
||||
|
||||
quickSearchRemoteMethod: Function,
|
||||
quickSearchItems: Array,
|
||||
onlineFriendCount: Number,
|
||||
friends: Map,
|
||||
|
||||
lastLocation: Object,
|
||||
lastLocationDestination: String,
|
||||
|
||||
// friends
|
||||
vipFriends: Array,
|
||||
onlineFriends: Array,
|
||||
|
||||
// no
|
||||
activeFriends: Array,
|
||||
offlineFriends: Array,
|
||||
groupInstances: Array,
|
||||
inGameGroupOrder: Array,
|
||||
groupedByGroupKeyFavoriteFriends: Object
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* your component styles here */
|
||||
</style>
|
||||
@@ -6,16 +6,14 @@
|
||||
width="800px"
|
||||
@close="$emit('update:visible', false)"
|
||||
:fullscreen="fullscreen"
|
||||
destroy-on-close
|
||||
>
|
||||
destroy-on-close>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<location :location="location.tag" style="font-size: 14px"></location>
|
||||
<el-input
|
||||
v-model="dataTable.filters[0].value"
|
||||
:placeholder="$t('dialog.previous_instances.search_placeholder')"
|
||||
style="width: 150px"
|
||||
clearable
|
||||
></el-input>
|
||||
clearable></el-input>
|
||||
</div>
|
||||
<data-tables v-loading="loading" v-bind="dataTable" style="margin-top: 10px">
|
||||
<el-table-column :label="$t('table.previous_instances.date')" prop="created_at" sortable width="110">
|
||||
@@ -63,9 +61,13 @@
|
||||
import utils from '../../classes/utils';
|
||||
import database from '../../repository/database';
|
||||
import dayjs from 'dayjs';
|
||||
import Location from '../../components/common/Location.vue';
|
||||
|
||||
export default {
|
||||
name: 'PreviousInstanceInfo',
|
||||
components: {
|
||||
Location
|
||||
},
|
||||
inject: ['adjustDialogZ'],
|
||||
props: {
|
||||
visible: {
|
||||
|
||||
Reference in New Issue
Block a user