feat(scroll): show scrollbar on hover only option (#3957)

* feat(scroll): show scrollbar on hover only * fix(scroll): switch to class option and apply to friends sidebar
Satellite-im · Jul 15, 2022 · d04609e · d04609e
1 parent 851c99a
commit d04609e
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 59 deletions.
diff --git a/assets/styles/base.less b/assets/styles/base.less
@@ -30,19 +30,54 @@ body {
 *:active {
   outline: none;
 }
+// Scrollbars
 * {
   &::-webkit-scrollbar {
     width: @scroll-bar-size;
+    height: @scroll-bar-size;
   }
   &::-webkit-scrollbar-track {
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
-    background: @flair-color;
+    background-color: @flair-color;
     &:extend(.round-corners);
+    &:hover {
+      background: @semitransparent-white-gradient;
+    }
   }
-  scrollbar-width: thin;
   scrollbar-color: @flair-color transparent;
+  scrollbar-width: thin;
+}
+
+// only show scroll on hover
+.hover-scroll {
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+  scrollbar-color: transparent transparent;
+
+  &:hover,
+  &:focus-within {
+    &::-webkit-scrollbar-thumb {
+      background-color: @flair-color;
+      &:extend(.round-corners);
+      &:hover {
+        background: @semitransparent-white-gradient;
+        background-color: @flair-color;
+      }
+    }
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    scrollbar-color: @flair-color transparent;
+  }
+}
+
+.hidden-scroll {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 code {
@@ -501,18 +536,6 @@ button {
   scrollbar-color: @flair-color transparent;
 }
 
-.hidden-scroll {
-  overflow-y: auto;
-  position: relative;
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-    scrollbar-width: none;
-  }
-}
-
 //Media
 #media-heading {
   .tag {

diff --git a/assets/styles/framework/colors.less b/assets/styles/framework/colors.less
@@ -122,13 +122,11 @@
   rgba(231, 76, 60, 0.5) 0%,
   rgba(192, 57, 43, 0.5) 100%
 );
-
-@semitransparent-red-gradient: linear-gradient(
+@semitransparent-white-gradient: linear-gradient(
   0deg,
-  rgba(231, 76, 60, 0.5) 0%,
-  rgba(192, 57, 43, 0.5) 100%
+  rgba(255, 255, 255, 0.1) 0%,
+  rgba(255, 255, 255, 0.05) 100%
 );
-
 @semitransparent-green-gradient: linear-gradient(
   0deg,
   rgba(0, 184, 148, 0.5) 0%,

diff --git a/components/views/navigation/sidebar/Sidebar.html b/components/views/navigation/sidebar/Sidebar.html
@@ -62,54 +62,52 @@
         v-click-outside="()=>toggleModal('quickchat')"
       />
     </div>
-    <div class="scrolling hidden-scroll users" v-scroll-lock="true">
-      <UiSimpleScroll scrollMode="vertical" scrollShow="scroll">
-        <UiLoadersAddress
-          v-if="dataState.friends === DataStateType.Loading"
-          :count="4"
-          inverted
+    <div class="list-container hover-scroll">
+      <UiLoadersAddress
+        v-if="dataState.friends === DataStateType.Loading"
+        :count="4"
+        inverted
+      />
+      <template
+        v-else-if="friends && Object.values(friends.details || {}).length"
+      >
+        <UiInlineNotification
+          v-if="ui.unreadMessage.length"
+          :text="$t('messaging.new_messages')"
         />
-        <template
-          v-else-if="friends && Object.values(friends.details || {}).length"
-        >
-          <UiInlineNotification
-            v-if="ui.unreadMessage.length"
-            :text="$t('messaging.new_messages')"
+        <div v-for="friend in friends.details">
+          <User
+            v-if="friend"
+            :key="friend.did"
+            :user="friend"
+            :isTyping="ui.isTyping.address === friend.did"
+            :isSelected="friend.did === $route.params.did"
           />
-          <div v-for="friend in friends.details">
-            <User
-              v-if="friend"
-              :key="friend.did"
-              :user="friend"
-              :isTyping="ui.isTyping.address === friend.did"
-              :isSelected="friend.did === $route.params.did"
-            />
-            <!-- <GroupClickable
+          <!-- <GroupClickable
               v-else
               :group="thing"
               :key="thing.id"
               :isSelected="thing.id === $route.params.id"
             /> -->
-          </div>
-        </template>
-        <div
-          v-else-if="friends && friends.list && !friends.list.length"
-          class="mascot-container"
-        >
-          <TypographyTitle :text="$t('pages.chat.no_friends_yet')" :size="6" />
-          <TypographyText :text="$t('pages.chat.no_friends_yet_text')" />
-          <img src="~/assets/svg/mascot/sad_curious.svg" class="mascot" />
-          <InteractablesButton
-            :text="$t('friends.add') + 's'"
-            size="small"
-            type="primary"
-            :action="gotoAddFriends"
-          >
-            <user-plus-icon size="1.2x" />
-          </InteractablesButton>
         </div>
-        <UiLoadersAddress v-else :count="4" inverted />
-      </UiSimpleScroll>
+      </template>
+      <div
+        v-else-if="friends && friends.list && !friends.list.length"
+        class="mascot-container"
+      >
+        <TypographyTitle :text="$t('pages.chat.no_friends_yet')" :size="6" />
+        <TypographyText :text="$t('pages.chat.no_friends_yet_text')" />
+        <img src="~/assets/svg/mascot/sad_curious.svg" class="mascot" />
+        <InteractablesButton
+          :text="$t('friends.add') + 's'"
+          size="small"
+          type="primary"
+          :action="gotoAddFriends"
+        >
+          <user-plus-icon size="1.2x" />
+        </InteractablesButton>
+      </div>
+      <UiLoadersAddress v-else :count="4" inverted />
     </div>
   </div>
   <div class="controls">

diff --git a/components/views/navigation/sidebar/Sidebar.less b/components/views/navigation/sidebar/Sidebar.less
@@ -50,6 +50,10 @@
       }
     }
 
+    .list-container {
+      overflow-y: scroll;
+    }
+
     .users {
       flex: 1;
       position: relative;