refactor(scrollbar): fixed slimbar issues

Satellite-im · Jun 14, 2022 · 68cbcf4 · 68cbcf4
1 parent ae550fc
commit 68cbcf4
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 37 deletions.
diff --git a/components/interactables/Close/Close.less b/components/interactables/Close/Close.less
@@ -15,9 +15,18 @@
   cursor: pointer;
 }
 
+.wrapper .close-button {
+  right: 0;
+  top: 0;
+}
+
 @media only screen and (max-width: @mobile-breakpoint) {
   .close-button {
     right: @normal-spacing;
     top: @normal-spacing;
   }
+
+  .wrapper .close-button {
+    top: @large-spacing;
+  }
 }
diff --git a/components/ui/SimpleScroll/SimpleScroll.less b/components/ui/SimpleScroll/SimpleScroll.less
@@ -6,6 +6,7 @@
     pointer-events: auto;
     width: @full;
     height: fit-content;
+    height: -moz-fit-content;
     margin: auto;
     position: relative;
     white-space: normal;

diff --git a/components/views/navigation/slimbar/Slimbar.html b/components/views/navigation/slimbar/Slimbar.html
@@ -9,16 +9,28 @@
     </UiCircle>
   </div>
 
-  <div v-on:click="$router.push('/chat/direct')" class="circle-group">
+  <div
+    v-on:click="$router.push('/chat/direct')"
+    class="circle-group"
+    v-if="horizontal"
+  >
     <UiCircle type="icon" :size="40">
       <satellite-icon size="0.75x" />
     </UiCircle>
   </div>
-  <div id="list-container-vertical" v-if="!horizontal">
+
+  <div id="list-container-vertical" v-else>
+    <div v-on:click="$router.push('/chat/direct')" class="circle-group">
+      <UiCircle type="icon" :size="40">
+        <satellite-icon size="0.75x" />
+      </UiCircle>
+    </div>
+
     <UiHorizontalRule
       class="horizontal-rule-padding"
       v-if="friendsWithUnreadMessages.length && friendsDS !== DataStateType.Loading"
     />
+
     <div class="slimbar-spinner" v-if="friendsDS === DataStateType.Loading">
       <UiLoadersSpinner :spinning="true" />
     </div>
@@ -49,6 +61,25 @@
         </div>
       </UiComingSoon>
     </UiSimpleScroll>
+    <div
+      class="circle-group"
+      v-tooltip.right="$t('servers.new_server')"
+      @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
+    >
+      <UiCircle type="icon" :size="40">
+        <plus-icon size="0.75x" />
+      </UiCircle>
+    </div>
+    <div
+      class="circle-group"
+      data-cy="settings"
+      v-tooltip.right="$t('pages.settings.settings')"
+      v-on:click="$store.commit('ui/toggleSettings', { show: true })"
+    >
+      <UiCircle type="icon" :size="40">
+        <settings-icon size="0.75x" />
+      </UiCircle>
+    </div>
   </div>
   <div id="list-container" v-else>
     <div class="unreads" v-for="user in friendsWithUnreadMessages">
@@ -80,24 +111,4 @@
       </div>
     </UiComingSoon>
   </div>
-  <div
-    v-if="!horizontal"
-    class="circle-group"
-    v-tooltip.right="$t('servers.new_server')"
-    @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
-  >
-    <UiCircle type="icon" :size="40">
-      <plus-icon size="0.75x" />
-    </UiCircle>
-  </div>
-  <div
-    class="circle-group"
-    data-cy="settings"
-    v-tooltip.right="$t('pages.settings.settings')"
-    v-on:click="$store.commit('ui/toggleSettings', { show: true })"
-  >
-    <UiCircle type="icon" :size="40">
-      <settings-icon size="0.75x" />
-    </UiCircle>
-  </div>
 </div>
diff --git a/components/views/navigation/slimbar/Slimbar.less b/components/views/navigation/slimbar/Slimbar.less
@@ -6,8 +6,7 @@
   flex-direction: column;
   justify-content: flex-start;
   pointer-events: none;
-  padding-left: 0.5rem;
-  padding-top: @normal-spacing;
+  box-sizing: border-box;
 
   .circle-group {
     margin: @normal-spacing 0;
@@ -27,14 +26,14 @@
   }
 
   .circle {
-    margin: 0.25rem 0;
+    margin: @xlight-spacing 0;
     &:extend(.first-layer);
   }
 
   .unreads {
     position: relative;
     .unread {
-      padding: 0.25rem 0;
+      padding: @xlight-spacing 0;
     }
   }
 
@@ -45,26 +44,21 @@
     &:extend(.first-layer);
   }
 
-  .scroll-area {
-    height: auto;
-    max-height: calc(@full - 10rem);
-    width: 200px;
-    overflow: hidden;
-    display: flex;
-  }
   #list-container-vertical {
-    height: fit-content;
-    max-height: calc(@full - 11rem);
+    display: flex;
+    flex-direction: column;
+    height: @full;
     pointer-events: auto;
     box-sizing: border-box;
+    padding-left: @light-spacing;
+    padding-top: @normal-spacing;
 
     #simple-scrollbar {
-      max-height: calc(@full - 3rem);
+      height: auto;
     }
   }
   #list-container {
     height: fit-content;
-    max-height: calc(@full - 10rem);
     position: relative;
     pointer-events: auto;
   }