Merge pull request #889 from h3poteto/scroll

closes #888 Change scrollbar design

src/constants/themeColor/index.d.ts

@@ -8,7 +8,8 @@ export type ThemeColorType = {
   secondary_color: string,
   border_color: string,
   header_menu_color: string,
-  wrapper_mask_color: string
+  wrapper_mask_color: string,
+  scrollbar_color: string
 }
 
 declare var LightTheme: ThemeColorType

src/constants/themeColor/index.js

@@ -8,7 +8,8 @@ export const LightTheme = {
   secondary_color: '#909399',
   border_color: '#ebeef5',
   header_menu_color: '#ffffff',
-  wrapper_mask_color: 'rgba(255, 255, 255, 0.7)'
+  wrapper_mask_color: 'rgba(255, 255, 255, 0.7)',
+  scrollbar_color: 'rgba(0, 0, 0, 0.4)'
 }
 
 export const DarkTheme = {
@@ -21,7 +22,8 @@ export const DarkTheme = {
   secondary_color: '#e4e7ed',
   border_color: '#606266',
   header_menu_color: '#444b5d',
-  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
+  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)',
+  scrollbar_color: 'rgba(255, 255, 255, 0.4)'
 }
 
 export const SolarizedLightTheme = {
@@ -34,7 +36,8 @@ export const SolarizedLightTheme = {
   secondary_color: '#839496',
   border_color: '#93a1a1',
   header_menu_color: '#fdf6e3',
-  wrapper_mask_color: 'rgba(255, 255, 255, 0.7)'
+  wrapper_mask_color: 'rgba(255, 255, 255, 0.7)',
+  scrollbar_color: 'rgba(0, 0, 0, 0.4)'
 }
 
 export const SolarizedDarkTheme = {
@@ -47,7 +50,8 @@ export const SolarizedDarkTheme = {
   secondary_color: '#839496',
   border_color: '#93a1a1',
   header_menu_color: '#393f4f',
-  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
+  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)',
+  scrollbar_color: 'rgba(255, 255, 255, 0.4)'
 }
 
 export const KimbieDarkTheme = {
@@ -60,5 +64,6 @@ export const KimbieDarkTheme = {
   secondary_color: '#d3af86',
   border_color: '#d6baad',
   header_menu_color: '#a57a4c',
-  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
+  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)',
+  scrollbar_color: 'rgba(255, 255, 255, 0.4)'
 }

src/renderer/App.vue

@@ -23,6 +23,7 @@ export default {
           '--theme-border-color': state.App.theme.border_color,
           '--theme-header-menu-color': state.App.theme.header_menu_color,
           '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
+          '--theme-scrollbar-color': state.App.theme.scrollbar_color,
           '--base-font-size': `${state.App.fontSize}px`,
           '--specified-fonts': state.App.defaultFonts.join(', ')
         }
@@ -43,7 +44,9 @@ export default {
 </script>
 
 <style lang="scss">
-html, body, #app {
+html,
+body,
+#app {
   --theme-background-color: #ffffff;
   --theme-selected-background-color: #f2f6fc;
   --theme-global-header-color: #4a5664;
@@ -54,6 +57,7 @@ html, body, #app {
   --theme-border-color: #ebeef5;
   --theme-header-menu-color: #ffffff;
   --theme-wrapper-mask-color: rgba(255, 255, 255, 0.7);
+  --theme-scrollbar-color: rgba(0, 0, 0, 0.4);
 
   background-color: var(--theme-background-color);
   color: var(--theme-primary-color);
@@ -94,6 +98,21 @@ html, body, #app, #global_header {
   margin: 0;
 }
 
+#app {
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--theme-scrollbar-color);
+    border-radius: 10px;
+  }
+}
+
 p {
   margin: 8px 0;
 }

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -282,7 +282,7 @@ export default {
     height: calc(100% - 82px);
     width: 180px;
     border: none;
-    overflow-y: auto;
+    overflow-y: hidden;
 
     .el-badge__content {
       background-color: #409eff;
@@ -307,6 +307,10 @@ export default {
     }
   }
 
+  .timeline-menu:hover /deep/ {
+    overflow-y: auto;
+  }
+
   .narrow-menu /deep/ {
     width: 64px;
 
@@ -330,5 +334,18 @@ export default {
     border-radius: 0 4px 4px 0;
     background-color: var(--theme-global-header-color);
   }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.4);
+    border-radius: 10px;
+  }
 }
 </style>