refs #1046 Fix resize performance for sidebar
This commit is contained in:
AkiraFukushima
parent
bc12bae246
commit
ad7fa371dd
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="contents" :style="customWidth">
|
||||
<div id="contents" ref="contents" :style="customWidth" @mouseup="dragEnd" @mousemove="resize">
|
||||
<div
|
||||
id="scrollable"
|
||||
:class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
|
||||
|
|
@ -11,8 +11,15 @@
|
|||
<router-view></router-view>
|
||||
</div>
|
||||
<template v-if="openSideBar">
|
||||
<div id="resizer" ref="sidebarResizer" draggable="true" @drag="resize"></div>
|
||||
<side-bar id="side_bar" :overlaid="modalOpened"></side-bar>
|
||||
<transition name="slide-detail">
|
||||
<div>
|
||||
<div id="resizer">
|
||||
<div class="border"></div>
|
||||
<div class="knob" @mousedown="dragStart"></div>
|
||||
</div>
|
||||
<side-bar id="side_bar" :overlaid="modalOpened"></side-bar>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -25,7 +32,8 @@ export default {
|
|||
name: 'contents',
|
||||
data() {
|
||||
return {
|
||||
sidebarWidth: 360
|
||||
sidebarWidth: 360,
|
||||
dragging: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -47,9 +55,17 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
resize(event) {
|
||||
if (event.clientX) {
|
||||
if (this.dragging && event.clientX) {
|
||||
this.sidebarWidth = window.innerWidth - event.clientX
|
||||
}
|
||||
},
|
||||
dragStart() {
|
||||
this.dragging = true
|
||||
this.$refs.contents.style.setProperty('user-select', 'none')
|
||||
},
|
||||
dragEnd() {
|
||||
this.dragging = false
|
||||
this.$refs.contents.style.setProperty('user-select', 'text')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,6 +78,7 @@ export default {
|
|||
padding-top: 48px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
user-select: text;
|
||||
|
||||
.timeline-wrapper {
|
||||
height: 100%;
|
||||
|
|
@ -80,15 +97,26 @@ export default {
|
|||
}
|
||||
|
||||
#resizer {
|
||||
width: 8px;
|
||||
background-color: var(--theme-border-color);
|
||||
height: 72px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: calc(var(--current-sidebar-width) - 8px);
|
||||
z-index: 1000;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: col-resize;
|
||||
.border {
|
||||
width: 1px;
|
||||
background-color: var(--theme-border-color);
|
||||
height: calc(100% - 48px);
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
right: var(--current-sidebar-width);
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: 8px;
|
||||
background-color: var(--theme-border-color);
|
||||
height: 72px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: calc(var(--current-sidebar-width) - 8px);
|
||||
z-index: 1000;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: col-resize;
|
||||
}
|
||||
}
|
||||
|
||||
#side_bar {
|
||||
|
|
@ -100,4 +128,15 @@ export default {
|
|||
border-left: solid 1px var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-detail-enter-active,
|
||||
.slide-detail-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.slide-detail-enter,
|
||||
.slide-detail-leave-to {
|
||||
margin-right: -360px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
<template>
|
||||
<transition name="slide-detail">
|
||||
<div class="side-bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
|
||||
<div class="header">
|
||||
<i class="el-icon-loading" v-show="loading"></i>
|
||||
<i class="el-icon-refresh" @click="reload"></i>
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</div>
|
||||
<div id="sidebar_scrollable">
|
||||
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
||||
<toot-detail v-else-if="component === 2"></toot-detail>
|
||||
<div
|
||||
class="loading"
|
||||
v-loading="true"
|
||||
:element-loading-text="$t('message.loading')"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
:element-loading-background="backgroundColor"
|
||||
v-else
|
||||
></div>
|
||||
</div>
|
||||
<div class="side-bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
|
||||
<div class="header">
|
||||
<i class="el-icon-loading" v-show="loading"></i>
|
||||
<i class="el-icon-refresh" @click="reload"></i>
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</div>
|
||||
</transition>
|
||||
<div id="sidebar_scrollable">
|
||||
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
||||
<toot-detail v-else-if="component === 2"></toot-detail>
|
||||
<div
|
||||
class="loading"
|
||||
v-loading="true"
|
||||
:element-loading-text="$t('message.loading')"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
:element-loading-background="backgroundColor"
|
||||
v-else
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -108,15 +106,4 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-detail-enter-active,
|
||||
.slide-detail-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.slide-detail-enter,
|
||||
.slide-detail-leave-to {
|
||||
margin-right: -360px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue