refs #1046 Allow resize sidebar using drag

src/renderer/components/TimelineSpace.vue

@@ -129,8 +129,9 @@ export default {
       return false
     },
     onDragEnter(e) {
-      this.dropTarget = e.target
-      this.droppableVisible = true
+      console.log(e)
+      // this.dropTarget = e.target
+      // this.droppableVisible = true
     },
     onDragLeave(e) {
       if (e.target === this.dropTarget) {

src/renderer/components/TimelineSpace/Contents.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="contents">
+  <div id="contents" :style="customWidth">
     <div
       id="scrollable"
       :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
@@ -10,7 +10,10 @@
     >
       <router-view></router-view>
     </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>
 </template>
 
@@ -20,6 +23,11 @@ import SideBar from './Contents/SideBar'
 
 export default {
   name: 'contents',
+  data() {
+    return {
+      sidebarWidth: 360
+    }
+  },
   components: {
     SideBar
   },
@@ -30,13 +38,27 @@ export default {
     ...mapState('TimelineSpace/Contents/SideBar', {
       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>
 
 <style lang="scss" scoped>
 #contents {
+  --current-sidebar-width: 360px;
+
   padding-top: 48px;
   height: 100%;
   box-sizing: border-box;
@@ -51,10 +73,31 @@ export default {
 
   .timeline-wrapper-with-side-bar {
     height: 100%;
-    width: calc(100% - 360px);
+    width: calc(100% - var(--current-sidebar-width));
     overflow: auto;
     transition: all 0.5s;
     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>

src/renderer/components/TimelineSpace/Contents/SideBar.vue

@@ -1,6 +1,6 @@
 <template>
   <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">
         <i class="el-icon-loading" v-show="loading"></i>
         <i class="el-icon-refresh" @click="reload"></i>
@@ -79,14 +79,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#side_bar {
-  position: fixed;
-  top: 48px;
-  right: 0;
-  width: 360px;
-  height: calc(100% - 48px);
-  border-left: solid 1px var(--theme-border-color);
-
+.side-bar {
   .header {
     background-color: var(--theme-selected-background-color);
     padding: 4px 8px;