refs #1046 Fix resize performance for sidebar

src/renderer/components/TimelineSpace/Contents.vue

@@ -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>
+      <transition name="slide-detail">
-      <side-bar id="side_bar" :overlaid="modalOpened"></side-bar>
+        <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;
+    .border {
-    background-color: var(--theme-border-color);
+      width: 1px;
-    height: 72px;
+      background-color: var(--theme-border-color);
-    position: fixed;
+      height: calc(100% - 48px);
-    top: 50%;
+      position: fixed;
-    right: calc(var(--current-sidebar-width) - 8px);
+      top: 48px;
-    z-index: 1000;
+      right: var(--current-sidebar-width);
-    border-radius: 0 8px 8px 0;
+    }
-    cursor: col-resize;
+
+    .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>

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

@@ -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="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>
+      <i class="el-icon-close" @click="close"></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>
-  </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>