Merge pull request #572 from shayanbinary/simple-scrollbar

Simple scrollbar
deriv-com · Nov 20, 2018 · f8dfc9f · f8dfc9f
2 parents 0c69769 + 4182ffe
commit f8dfc9f
Show file tree

Hide file tree

Showing 19 changed files with 229 additions and 1,669 deletions.
diff --git a/package.json b/package.json
@@ -87,7 +87,6 @@
     "node-sass": "^4.7.2",
     "nyc": "^13.0.1",
     "path": "^0.12.7",
-    "perfect-scrollbar": "^1.3.0",
     "po-loader": "^0.4.1",
     "po2json": "^0.4.5",
     "postcss-import": "^12.0.0",
@@ -121,9 +120,9 @@
   "dependencies": {
     "event-emitter-es6": "^1.1.5",
     "lodash.debounce": "^4.0.8",
-    "react-perfect-scrollbar": "^1.1.1",
     "resize-observer-polyfill": "^1.5.0",
     "robust-websocket": "^0.3.0",
+    "simplebar": "^3.1.0-beta.2",
     "url-search-params-polyfill": "^5.0.0",
     "why-did-you-update": "^0.1.1"
   },

diff --git a/sass/_themes.scss b/sass/_themes.scss
@@ -61,6 +61,7 @@ $themes: (
         ChartTitlePriceText: $COLOR_LIGHT_BLACK,
         ChartTitleSymbolText: $COLOR_BLUE,
         ChartTitleActiveArrow: $COLOR_BLUE,
+        ListScroll: $COLOR_BRANDBLUE_40,
         ListLiBg: $COLOR_WHITE,
         ListLiText: $COLOR_LIGHT_BLACK,
         ListLiBorder: $COLOR_GRAY,
@@ -188,6 +189,7 @@ $themes: (
         ChartTitlePriceText: $COLOR_BRANDBLUE_95,
         ChartTitleSymbolText: $COLOR_WHITE,
         ChartTitleActiveArrow: $COLOR_WHITE,
+        ListScroll: $COLOR_BRANDBLUE_40,
         ListLiBg: $COLOR_BLUE,
         ListLiText: $COLOR_BRANDBLUE_40,
         ListLiBorder: $COLOR_BRANDBLUE_85,

diff --git a/sass/components/_categorical-display.scss b/sass/components/_categorical-display.scss
@@ -79,16 +79,17 @@
         }
     }
     .category {
-        padding-top: 34px;
-        padding-bottom: 16px;
+        padding-top: 3em;
+        padding-bottom: 1em;
+        padding-right: 1em;
         position: relative;
 
         &:last-child {
             padding-bottom: 2.5em;
         }
     }
     .category-content {
-        margin: 0.4em 1em 0em;
+        margin: 0.4em 0.3em 0em 1em;
         border-radius: 3px;
         @include themify($themes) {
             background-color: themed('CatDisplayCatContentBg');
@@ -112,23 +113,36 @@
         font-size: 12px;
         font-weight: bold;
         padding: 0 0.7em;
-        line-height: 38px;
+        line-height: 40px;
         position: absolute;
         top: 0;
+        width: 90%;
+        transform: translate3d(0, 0, 0);
         @include themify($themes) {
             color: themed('CatDisplayCatTitleText');
         }
 
-        &.fixed {
-            position: fixed;
-            width: 100%;
-            z-index: 1;
-            top: 0px;
+        &.sticky-top,
+        &.sticky-bottom {
+            z-index: 8;
+            padding-top: 0px;
+            height: 40px;
             @include themify($themes) {
                 background-color: themed('DialogBodyBg');
                 border-bottom: 1px solid themed('CatDisplayCatContentBorder');
             }
         }
+        &.sticky-bottom {
+            position: absolute;
+            top: auto !important;
+            bottom: 0px !important;
+        }
+        &.sticky-top {
+            position: fixed;
+            top: 0px;
+            z-index: 9;
+            padding-right: 25px;
+        }
     }
     .cq-filter {
         padding-left: 1.6em;
@@ -229,6 +243,10 @@
         @include themify($themes) {
             border-left: 1px solid themed('CatDisplayBorder');
         }
+
+        .simplebar-scrollbar {
+            right: 3px;
+        }
     }
     .ciq-item-display {
         display: inline-block;
@@ -316,17 +334,13 @@
         width: 100%;
         height: 100%;
 
-        .category-title {
-            &.fixed {
-                margin-top: -3px;
-            }
-        }
         .cq-lookup-filters {
             width: 100%;
             border-right: none;
             position: relative;
             z-index: 9;
             transition: max-height 0.2s ease-in;
+            margin-bottom: -2px;
             @include themify($themes) {
                 border-bottom: 1px solid themed('CatDisplaySearchBorder');
             }
@@ -339,7 +353,7 @@
             width: 100%;
 
             .category:last-child {
-                padding-bottom: 13em;
+                padding-bottom: 3em;
             }
         }
         .cq-item, .cq-active-item {

diff --git a/sass/components/_chart-types.scss b/sass/components/_chart-types.scss
@@ -4,11 +4,14 @@
         box-sizing: border-box;
 
         .body {
-            padding: 0px 5px 0px 16px;
+            padding: 0px 9px 0px 16px;
         }
     }
     .ciq-list {
         .ciq-list-item {
+            &:first-child {
+                margin-top: 16px;
+            }
             &.active {
                 @include themify($themes) {
                     border-right: 2px solid themed('ChartTypeActiveListBorderRight');
@@ -33,8 +36,5 @@
         .ciq-toggle-asset-information {
             margin: 15px 15px 0;
         }
-        .ciq-list {
-            margin: 0 15px;
-        }
     }
 }
diff --git a/sass/components/_ciq-download.scss b/sass/components/_ciq-download.scss
@@ -13,6 +13,7 @@
 
             .ciq-list-download {
                 width: 100%;
+                overflow: unset;
 
                 .ciq-list-item {
                     width: 100%;

diff --git a/sass/components/_ciq-list.scss b/sass/components/_ciq-list.scss
@@ -1,6 +1,5 @@
 .ciq-list {
-    max-height: 260px;
-    overflow-y: auto;
+    padding-right: 9px;
     position: relative;
 
     &.ps {

diff --git a/sass/components/_draw-tools.scss b/sass/components/_draw-tools.scss
@@ -6,7 +6,8 @@
         overflow: visible !important;
 
         .body {
-            padding: 0px 5px 0px 16px;
+            padding: 0px 7px 0px 16px;
+            overflow: visible;
 
             .cq-draw-buttons {
                 display: flex;
@@ -16,13 +17,16 @@
                 display: flex;
                 justify-content: center;
                 cursor: pointer;
-                margin: 8px 11px 8px 0;
+                margin: 8px 9px 8px 0;
                 border-radius: 3px;
 
                 @include themify($themes) {
                     border: solid themed('DropdownBorder') 1px;
                 }
             }
+            .ciq-list {
+                max-height: 260px;
+            }
             .scrollbar-container {
                 .ciq-list-item {
                     &:first-child {

diff --git a/sass/components/_view.scss b/sass/components/_view.scss
@@ -1,14 +1,14 @@
 .ciq-views {
     .cq-menu-dropdown {
         width: 280px;
-        height: 200px;
+        height: 196px;
 
         .template-name {
             display: flex;
             align-items: center;
             height: 32px;
-            padding: 0 0 0 16px;
-            margin: 16px 11px 0 0;
+            padding: 0 4px 0 16px;
+            margin: 16px 7px 0 0;
             box-sizing: border-box;
             @include themify($themes) {
                 border: 1px solid themed('ListLiBorder');
@@ -46,14 +46,30 @@
         }
         .content {
             display: block;
-            height: 145px;
-            padding: 0px 5px 16px 16px;
+            height: 140px;
+            padding: 0 9px 0 16px;
+            position: relative;
 
             .ciq-list {
-                height: 115px;
-                overflow: auto;
+                max-height: 107px !important;
+                width: 100%;
+                padding: 0px !important;
                 display: block;
 
+                .simplebar-offset {
+                    right: -20px !important;
+
+                    .simplebar-content {
+                        padding-right: 29px !important;
+
+                        .ciq-list-inner {
+                            min-width: 248px;
+                        }
+                    }
+                }
+                .simplebar-track.horizontal {
+                    display: none;
+                }
                 .ciq-list-item {
                     align-items: center;
                     justify-content: flex-start;
@@ -84,15 +100,23 @@
                         border-top: none;
                         margin-top: 0;
                     }
-                    &:nth-last-child(-n+3) {
+                    &:last-child {
                         margin-bottom: 0px !important;
                     }
                 }
             }
         }
     }
     .ovrwrit-alrt {
-        margin: 16px 0 0 -16px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        z-index: 40;
+        @include themify($themes) {
+            background-color: themed('DialogBodyBg');
+        }
 
         .ovrwrit-alrt-title {
             text-align: center;
@@ -139,8 +163,13 @@
                 flex: none;
             }
         }
-        .content .ciq-list .ciq-list-item .ic-icon {
-            opacity: 1;
+        .content .ciq-list {
+            .ciq-list-inner {
+                width: 100%;
+            }
+            .ciq-list-item .ic-icon {
+                opacity: 1;
+            }
         }
     }
 }
diff --git a/sass/main.scss b/sass/main.scss
@@ -24,6 +24,7 @@ for building additional themes.
 @import 'styles/main';
 @import 'components/barrier';
 @import 'components/loader';
-@import 'styles/ciq-perfect-scrollbar';
+@import 'simplebar/dist/simplebar.css';
+@import 'styles/simplebar';
 @import 'ciq-extras'; /* Plugins and other pieces */
 // Add an import for your overrides here and then recompile the SASS