refs #1046 Allow resize sidebar using drag
This commit is contained in:
parent
6e1456b48d
commit
ad3f4ff706
|
@ -129,8 +129,9 @@ export default {
|
||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
onDragEnter(e) {
|
onDragEnter(e) {
|
||||||
this.dropTarget = e.target
|
console.log(e)
|
||||||
this.droppableVisible = true
|
// this.dropTarget = e.target
|
||||||
|
// this.droppableVisible = true
|
||||||
},
|
},
|
||||||
onDragLeave(e) {
|
onDragLeave(e) {
|
||||||
if (e.target === this.dropTarget) {
|
if (e.target === this.dropTarget) {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="contents">
|
<div id="contents" :style="customWidth">
|
||||||
<div
|
<div
|
||||||
id="scrollable"
|
id="scrollable"
|
||||||
:class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
|
:class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
|
||||||
|
@ -10,7 +10,10 @@
|
||||||
>
|
>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
<side-bar :overlaid="modalOpened"></side-bar>
|
<template v-if="openSideBar">
|
||||||
|
<div id="resizer" ref="sidebarResizer" draggable="true" @drag="resize"></div>
|
||||||
|
<side-bar id="side_bar" :overlaid="modalOpened"></side-bar>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -20,6 +23,11 @@ import SideBar from './Contents/SideBar'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'contents',
|
name: 'contents',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sidebarWidth: 360
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
SideBar
|
SideBar
|
||||||
},
|
},
|
||||||
|
@ -30,13 +38,27 @@ export default {
|
||||||
...mapState('TimelineSpace/Contents/SideBar', {
|
...mapState('TimelineSpace/Contents/SideBar', {
|
||||||
openSideBar: state => state.openSideBar
|
openSideBar: state => state.openSideBar
|
||||||
}),
|
}),
|
||||||
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
|
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||||
|
customWidth: function() {
|
||||||
|
return {
|
||||||
|
'--current-sidebar-width': `${this.sidebarWidth}px`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resize(event) {
|
||||||
|
if (event.clientX) {
|
||||||
|
this.sidebarWidth = window.innerWidth - event.clientX
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#contents {
|
#contents {
|
||||||
|
--current-sidebar-width: 360px;
|
||||||
|
|
||||||
padding-top: 48px;
|
padding-top: 48px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -51,10 +73,31 @@ export default {
|
||||||
|
|
||||||
.timeline-wrapper-with-side-bar {
|
.timeline-wrapper-with-side-bar {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: calc(100% - 360px);
|
width: calc(100% - var(--current-sidebar-width));
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
scroll-behavior: auto;
|
scroll-behavior: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side_bar {
|
||||||
|
position: fixed;
|
||||||
|
top: 48px;
|
||||||
|
right: 0;
|
||||||
|
width: var(--current-sidebar-width);
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
border-left: solid 1px var(--theme-border-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="slide-detail">
|
<transition name="slide-detail">
|
||||||
<div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
|
<div class="side-bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<i class="el-icon-loading" v-show="loading"></i>
|
<i class="el-icon-loading" v-show="loading"></i>
|
||||||
<i class="el-icon-refresh" @click="reload"></i>
|
<i class="el-icon-refresh" @click="reload"></i>
|
||||||
|
@ -79,14 +79,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#side_bar {
|
.side-bar {
|
||||||
position: fixed;
|
|
||||||
top: 48px;
|
|
||||||
right: 0;
|
|
||||||
width: 360px;
|
|
||||||
height: calc(100% - 48px);
|
|
||||||
border-left: solid 1px var(--theme-border-color);
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-color: var(--theme-selected-background-color);
|
background-color: var(--theme-selected-background-color);
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
|
|
Loading…
Reference in New Issue