Merge pull request #1053 from h3poteto/iss-1046

closes #1046 Allow resize sidebar using drag

src/renderer/components/TimelineSpace.vue

@@ -129,8 +129,10 @@ export default {
       return false
     },
     onDragEnter(e) {
-      this.dropTarget = e.target
-      this.droppableVisible = true
+      if (e.dataTransfer.types.indexOf('Files') >= 0) {
+        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" ref="contents" :style="customWidth" @mouseup="dragEnd" @mousemove="resize">
     <div
       id="scrollable"
       :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
@@ -10,7 +10,19 @@
     >
       <router-view></router-view>
     </div>
-    <side-bar :overlaid="modalOpened"></side-bar>
+    <template v-if="openSideBar">
+      <transition name="slide-detail">
+        <div>
+          <div id="resizer">
+            <div class="border"></div>
+            <div class="knob" @mousedown="dragStart">
+              <icon name="ellipsis-v" class="icon"></icon>
+            </div>
+          </div>
+          <side-bar id="side_bar" :overlaid="modalOpened"></side-bar>
+        </div>
+      </transition>
+    </template>
   </div>
 </template>
 
@@ -20,6 +32,12 @@ import SideBar from './Contents/SideBar'
 
 export default {
   name: 'contents',
+  data() {
+    return {
+      sidebarWidth: 360,
+      dragging: false
+    }
+  },
   components: {
     SideBar
   },
@@ -30,16 +48,39 @@ 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 (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')
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 #contents {
+  --current-sidebar-width: 360px;
+
   padding-top: 48px;
   height: 100%;
   box-sizing: border-box;
+  user-select: text;
 
   .timeline-wrapper {
     height: 100%;
@@ -51,10 +92,61 @@ 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 {
+    .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;
+      text-align: center;
+      vertical-align: middle;
+      line-height: 72px;
+
+      .icon {
+        display: inline-block;
+        color: var(--theme-secondary-color);
+      }
+    }
+  }
+
+  #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);
+  }
+}
+
+.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/DirectMessages.vue

@@ -248,7 +248,7 @@ export default {
   .upper-with-side-bar {
     position: fixed;
     bottom: 20px;
-    right: calc(20px + 360px);
+    right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
 }

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

@@ -203,6 +203,7 @@ export default {
 .upper-with-side-bar {
   position: fixed;
   bottom: 20px;
-  right: calc(20px + 360px);
+  right: calc(20px + var(--current-sidebar-width));
+  transition: all 0.5s;
 }
 </style>

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -253,7 +253,8 @@ export default {
 .upper-with-side-bar {
   position: fixed;
   bottom: 20px;
-  right: calc(20px + 360px);
+  right: calc(20px + var(--current-sidebar-width));
+  transition: all 0.5s;
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

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

@@ -229,7 +229,7 @@ export default {
   .upper-with-side-bar {
     position: fixed;
     bottom: 20px;
-    right: calc(20px + 360px);
+    right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
 }

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -253,7 +253,8 @@ export default {
 .upper-with-side-bar {
   position: fixed;
   bottom: 20px;
-  right: calc(20px + 360px);
+  right: calc(20px + var(--current-sidebar-width));
+  transition: all 0.5s;
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

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

@@ -241,7 +241,8 @@ export default {
   .upper-with-side-bar {
     position: fixed;
     bottom: 20px;
-    right: calc(20px + 360px);
+    right: calc(20px + var(--current-sidebar-width));
+    transition: all 0.5s;
   }
 }
 </style>

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

@@ -1,31 +1,28 @@
 <template>
-<div id="mentions" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
-  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
-  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-  </div>
-  <transition-group name="timeline" tag="div">
-    <div class="mentions" v-for="message in mentions" :key="message.id">
-      <notification
-        :message="message"
-        :filter="filter"
-        :focused="message.id === focusedId"
-        :overlaid="modalOpened"
-        v-on:update="updateToot"
-        @focusNext="focusNext"
-        @focusPrev="focusPrev"
-        @focusRight="focusSidebar"
-        @selectNotification="focusNotification(message)"
+  <div id="mentions" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
+    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+    <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
+    <transition-group name="timeline" tag="div">
+      <div class="mentions" v-for="message in mentions" :key="message.id">
+        <notification
+          :message="message"
+          :filter="filter"
+          :focused="message.id === focusedId"
+          :overlaid="modalOpened"
+          v-on:update="updateToot"
+          @focusNext="focusNext"
+          @focusPrev="focusPrev"
+          @focusRight="focusSidebar"
+          @selectNotification="focusNotification(message)"
         >
-      </notification>
+        </notification>
+      </div>
+    </transition-group>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
+    <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
+      <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
     </div>
-  </transition-group>
-  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
-    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
-    </el-button>
-  </div>
-</div>
 </template>
 
 <script>
@@ -39,7 +36,7 @@ export default {
   name: 'mentions',
   components: { Notification },
   mixins: [reloadable],
-  data () {
+  data() {
     return {
       focusedId: null
     }
@@ -60,13 +57,9 @@ export default {
       unread: state => state.unreadMentions,
       filter: state => state.filter
     }),
-    ...mapGetters('TimelineSpace/Modals', [
-      'modalOpened'
-    ]),
-    ...mapGetters('TimelineSpace/Contents/Mentions', [
-      'mentions'
-    ]),
-    shortcutEnabled: function () {
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    ...mapGetters('TimelineSpace/Contents/Mentions', ['mentions']),
+    shortcutEnabled: function() {
       if (this.modalOpened) {
         return false
       }
@@ -78,27 +71,27 @@ export default {
       return currentIndex === -1
     }
   },
-  mounted () {
+  mounted() {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
     document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
     Event.$on('focus-timeline', () => {
       // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
       const previousFocusedId = this.focusedId
       this.focusedId = 0
-      this.$nextTick(function () {
+      this.$nextTick(function() {
         this.focusedId = previousFocusedId
       })
     })
   },
-  beforeUpdate () {
+  beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
     }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     Event.$off('focus-timeline')
   },
-  destroyed () {
+  destroyed() {
     this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
     this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
     this.$store.commit('TimelineSpace/Contents/Mentions/archiveMentions')
@@ -108,15 +101,14 @@ export default {
     }
   },
   watch: {
-    startReload: function (newState, oldState) {
+    startReload: function(newState, oldState) {
       if (!oldState && newState) {
-        this.reload()
-          .finally(() => {
-            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
-          })
+        this.reload().finally(() => {
+          this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+        })
       }
     },
-    focusedId: function (newState, _oldState) {
+    focusedId: function(newState, _oldState) {
       if (newState && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
       } else if (newState === null && !this.heading) {
@@ -126,26 +118,28 @@ export default {
     }
   },
   methods: {
-    onScroll (event) {
+    onScroll(event) {
       // for lazyLoading
-      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('mentions').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1])
-          .catch(() => {
-            this.$message({
-              message: this.$t('message.timeline_fetch_error'),
-              type: 'error'
-            })
+      if (
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('mentions').clientHeight - 10 &&
+        !this.lazyloading
+      ) {
+        this.$store.dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1]).catch(() => {
+          this.$message({
+            message: this.$t('message.timeline_fetch_error'),
+            type: 'error'
           })
+        })
       }
       // for unread control
-      if ((event.target.scrollTop > 10) && this.heading) {
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
-      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
         this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
       }
     },
-    async reload () {
+    async reload() {
       this.$store.commit('TimelineSpace/changeLoading', true)
       try {
         await this.reloadable()
@@ -153,17 +147,14 @@ export default {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
     },
-    updateToot (message) {
+    updateToot(message) {
       this.$store.commit('TimelineSpace/Contents/Mentions/updateToot', message)
     },
-    upper () {
-      scrollTop(
-        document.getElementById('scrollable'),
-        0
-      )
+    upper() {
+      scrollTop(document.getElementById('scrollable'), 0)
       this.focusedId = null
     },
-    focusNext () {
+    focusNext() {
       const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
       if (currentIndex === -1) {
         this.focusedId = this.mentions[0].id
@@ -171,7 +162,7 @@ export default {
         this.focusedId = this.mentions[currentIndex + 1].id
       }
     },
-    focusPrev () {
+    focusPrev() {
       const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
       if (currentIndex === 0) {
         this.focusedId = null
@@ -179,13 +170,13 @@ export default {
         this.focusedId = this.mentions[currentIndex - 1].id
       }
     },
-    focusNotification (message) {
+    focusNotification(message) {
       this.focusedId = message.id
     },
-    focusSidebar () {
+    focusSidebar() {
       Event.$emit('focus-sidebar')
     },
-    handleKey (event) {
+    handleKey(event) {
       switch (event.srcKey) {
         case 'next':
           this.focusedId = this.mentions[0].id
@@ -229,7 +220,8 @@ export default {
   .upper-with-side-bar {
     position: fixed;
     bottom: 20px;
-    right: calc(20px + 360px);
+    right: calc(20px + var(--current-sidebar-width));
+    transition: all 0.5s;
   }
 }
 </style>

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

@@ -1,31 +1,28 @@
 <template>
-<div id="notifications" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
-  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
-  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-  </div>
-  <transition-group name="timeline" tag="div">
-    <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
-      <notification
-        :message="message"
-        :filter="filter"
-        :focused="message.id === focusedId"
-        :overlaid="modalOpened"
-        v-on:update="updateToot"
-        @focusNext="focusNext"
-        @focusPrev="focusPrev"
-        @focusRight="focusSidebar"
-        @selectNotification="focusNotification(message)"
+  <div id="notifications" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
+    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+    <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
+    <transition-group name="timeline" tag="div">
+      <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
+        <notification
+          :message="message"
+          :filter="filter"
+          :focused="message.id === focusedId"
+          :overlaid="modalOpened"
+          v-on:update="updateToot"
+          @focusNext="focusNext"
+          @focusPrev="focusPrev"
+          @focusRight="focusSidebar"
+          @selectNotification="focusNotification(message)"
         >
-      </notification>
+        </notification>
+      </div>
+    </transition-group>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
+    <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
+      <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
     </div>
-  </transition-group>
-  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
-    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
-    </el-button>
-  </div>
-</div>
 </template>
 
 <script>
@@ -39,7 +36,7 @@ export default {
   name: 'notifications',
   components: { Notification },
   mixins: [reloadable],
-  data () {
+  data() {
     return {
       focusedId: null
     }
@@ -55,10 +52,8 @@ export default {
       unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
       filter: state => state.TimelineSpace.Contents.Notifications.filter
     }),
-    ...mapGetters('TimelineSpace/Modals', [
-      'modalOpened'
-    ]),
-    shortcutEnabled: function () {
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    shortcutEnabled: function() {
       if (this.modalOpened) {
         return false
       }
@@ -70,7 +65,7 @@ export default {
       return currentIndex === -1
     }
   },
-  mounted () {
+  mounted() {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
     this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
     document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
@@ -79,20 +74,20 @@ export default {
       // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
       const previousFocusedId = this.focusedId
       this.focusedId = 0
-      this.$nextTick(function () {
+      this.$nextTick(function() {
         this.focusedId = previousFocusedId
       })
     })
   },
-  beforeUpdate () {
+  beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
     }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     Event.$off('focus-timeline')
   },
-  destroyed () {
+  destroyed() {
     this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
     this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
     this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications')
@@ -102,15 +97,14 @@ export default {
     }
   },
   watch: {
-    startReload: function (newState, oldState) {
+    startReload: function(newState, oldState) {
       if (!oldState && newState) {
-        this.reload()
-          .finally(() => {
-            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
-          })
+        this.reload().finally(() => {
+          this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+        })
       }
     },
-    focusedId: function (newState, _oldState) {
+    focusedId: function(newState, _oldState) {
       if (newState >= 0 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
       } else if (newState === null && !this.heading) {
@@ -121,9 +115,13 @@ export default {
     }
   },
   methods: {
-    onScroll (event) {
-      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
+    onScroll(event) {
+      if (
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('notifications').clientHeight - 10 &&
+        !this.lazyloading
+      ) {
+        this.$store
+          .dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
           .catch(() => {
             this.$message({
               message: this.$t('message.notification_fetch_error'),
@@ -132,15 +130,15 @@ export default {
           })
       }
       // for unread control
-      if ((event.target.scrollTop > 10) && this.heading) {
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
-      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
         this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
         this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
       }
     },
-    async reload () {
+    async reload() {
       this.$store.commit('TimelineSpace/changeLoading', true)
       try {
         await this.reloadable()
@@ -149,17 +147,14 @@ export default {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
     },
-    updateToot (message) {
+    updateToot(message) {
       this.$store.commit('TimelineSpace/Contents/Notifications/updateToot', message)
     },
-    upper () {
-      scrollTop(
-        document.getElementById('scrollable'),
-        0
-      )
+    upper() {
+      scrollTop(document.getElementById('scrollable'), 0)
       this.focusedId = null
     },
-    focusNext () {
+    focusNext() {
       const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
       if (currentIndex === -1) {
         this.focusedId = this.notifications[0].id
@@ -167,7 +162,7 @@ export default {
         this.focusedId = this.notifications[currentIndex + 1].id
       }
     },
-    focusPrev () {
+    focusPrev() {
       const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
       if (currentIndex === 0) {
         this.focusedId = null
@@ -175,13 +170,13 @@ export default {
         this.focusedId = this.notifications[currentIndex - 1].id
       }
     },
-    focusNotification (notification) {
+    focusNotification(notification) {
       this.focusedId = notification.id
     },
-    focusSidebar () {
+    focusSidebar() {
       Event.$emit('focus-sidebar')
     },
-    handleKey (event) {
+    handleKey(event) {
       switch (event.srcKey) {
         case 'next':
           this.focusedId = this.notifications[0].id
@@ -225,7 +220,8 @@ export default {
   .upper-with-side-bar {
     position: fixed;
     bottom: 20px;
-    right: calc(20px + 360px);
+    right: calc(20px + var(--current-sidebar-width));
+    transition: all 0.5s;
   }
 }
 </style>

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

@@ -241,7 +241,8 @@ export default {
   .upper-with-side-bar {
     position: fixed;
     bottom: 20px;
-    right: calc(20px + 360px);
+    right: calc(20px + var(--current-sidebar-width));
+    transition: all 0.5s;
   }
 }
 </style>

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

@@ -1,25 +1,23 @@
 <template>
-  <transition name="slide-detail">
-    <div id="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>
@@ -79,14 +77,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;
@@ -115,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>

src/renderer/components/organisms/Toot.vue

@@ -576,6 +576,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.status {
+  background-color: var(--theme-background-color);
+}
+
 .toot {
   padding: 8px 0 0 16px;