Merge pull request #687 from amyspark/amyspark/fix-up-button

Do not position the ⬆️ button behind the sidebar

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

@@ -18,7 +18,7 @@
   </div>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div class="upper" v-show="!heading">
+  <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>
@@ -41,6 +41,7 @@ export default {
   },
   computed: {
     ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       account: state => state.TimelineSpace.account,
@@ -200,4 +201,10 @@ export default {
   bottom: 20px;
   right: 20px;
 }
+
+.upper-with-side-bar {
+  position: fixed;
+  bottom: 20px;
+  right: -webkit-calc(20px + 320px);
+}
 </style>

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

@@ -20,7 +20,7 @@
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
-  <div class="upper" v-show="!heading">
+  <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>
@@ -43,6 +43,7 @@ export default {
   },
   computed: {
     ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
@@ -257,5 +258,11 @@ export default {
   bottom: 20px;
   right: 20px;
 }
+
+.upper-with-side-bar {
+  position: fixed;
+  bottom: 20px;
+  right: -webkit-calc(20px + 320px);
+}
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

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

@@ -21,7 +21,7 @@
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div class="upper" v-show="!heading">
+  <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>
@@ -43,6 +43,7 @@ export default {
   },
   computed: {
     ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       timeline: state => state.TimelineSpace.Contents.Home.timeline,
@@ -227,6 +228,14 @@ export default {
     position: fixed;
     bottom: 20px;
     right: 20px;
+    transition: all 0.5s;
+  }
+
+  .upper-with-side-bar {
+    position: fixed;
+    bottom: 20px;
+    right: -webkit-calc(20px + 320px);
+    transition: all 0.5s;
   }
 }
 </style>

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

@@ -20,7 +20,7 @@
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
-  <div class="upper" v-show="!heading">
+  <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>
@@ -43,6 +43,7 @@ export default {
   },
   computed: {
     ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       timeline: state => state.TimelineSpace.Contents.Lists.Show.timeline,
@@ -256,5 +257,11 @@ export default {
   bottom: 20px;
   right: 20px;
 }
+
+.upper-with-side-bar {
+  position: fixed;
+  bottom: 20px;
+  right: -webkit-calc(20px + 320px);
+}
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

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

@@ -21,7 +21,7 @@
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div class="upper" v-show="!heading">
+  <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>
@@ -43,6 +43,7 @@ export default {
   },
   computed: {
     ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       timeline: state => state.TimelineSpace.Contents.Local.timeline,
@@ -227,6 +228,12 @@ export default {
     bottom: 20px;
     right: 20px;
   }
+
+  .upper-with-side-bar {
+    position: fixed;
+    bottom: 20px;
+    right: -webkit-calc(20px + 320px);
+  }
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

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

@@ -19,7 +19,7 @@
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div class="upper" v-show="!heading">
+  <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>
@@ -41,6 +41,7 @@ export default {
   },
   computed: {
     ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       backgroundColor: state => state.App.theme.background_color,
       notifications: state => state.TimelineSpace.Contents.Notifications.notifications,
@@ -218,6 +219,12 @@ export default {
     bottom: 20px;
     right: 20px;
   }
+
+  .upper-with-side-bar {
+    position: fixed;
+    bottom: 20px;
+    right: -webkit-calc(20px + 320px);
+  }
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

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

@@ -21,7 +21,7 @@
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
-  <div class="upper" v-show="!heading">
+  <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>
@@ -43,6 +43,7 @@ export default {
   },
   computed: {
     ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       timeline: state => state.TimelineSpace.Contents.Public.timeline,
@@ -250,6 +251,12 @@ export default {
     bottom: 20px;
     right: 20px;
   }
+
+  .upper-with-side-bar {
+    position: fixed;
+    bottom: 20px;
+    right: -webkit-calc(20px + 320px);
+  }
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>