From aeb9cf61077fd85616ba7ab71883a81cbf00fdc8 Mon Sep 17 00:00:00 2001
From: Lawgsy <lawgsy@gmail.com>
Date: Wed, 3 Mar 2021 04:44:29 +0100
Subject: [PATCH] feat: style scrollbars (#422)

* Make scrollbars themeable

* Add styles to default themes

* Resize resultlist upon opening preview (to allow for styled scrollbar)

* Spaces around infix operator (AppVeyor)

* Convert tabs to spaces (seriously?)
---
 app/main/components/Cerebro/styles.css   | 39 ++++++++++++++++++++++++
 app/main/components/ResultsList/index.js |  2 +-
 app/main/css/themes/dark.css             | 13 +++++++-
 app/main/css/themes/light.css            | 11 +++++++
 4 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/app/main/components/Cerebro/styles.css b/app/main/components/Cerebro/styles.css
index b60ea1f0..a371746d 100644
--- a/app/main/components/Cerebro/styles.css
+++ b/app/main/components/Cerebro/styles.css
@@ -24,3 +24,42 @@
   color: var(--secondary-font-color);
   white-space: pre;
 }
+
+::-webkit-scrollbar {
+  height: var(--scroll-height);
+  width: var(--scroll-width);
+  background: var(--scroll-background);
+  -webkit-border-radius: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scroll-track);
+}
+::-webkit-scrollbar-track:active {
+  background: var(--scroll-track-active);
+}
+
+::-webkit-scrollbar-track:hover {
+  background: var(--scroll-track-hover);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+  -webkit-border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-thumb-hover);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--scroll-thumb-active);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  min-height: 10px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  min-width: 10px;
+}
diff --git a/app/main/components/ResultsList/index.js b/app/main/components/ResultsList/index.js
index 022c1003..943e7ecc 100644
--- a/app/main/components/ResultsList/index.js
+++ b/app/main/components/ResultsList/index.js
@@ -68,7 +68,7 @@ class ResultsList extends Component {
           rowCount={results.length}
           rowHeight={RESULT_HEIGHT}
           rowRenderer={this.rowRenderer}
-          width={10000}
+          width={(results[selected] !== undefined && results[selected].getPreview) ? 250 : 10000}
           scrollToIndex={selected}
           // Needed to force update of VirtualScroll
           titles={results.map(result => result.title)}
diff --git a/app/main/css/themes/dark.css b/app/main/css/themes/dark.css
index 5546267c..b27deacc 100644
--- a/app/main/css/themes/dark.css
+++ b/app/main/css/themes/dark.css
@@ -20,11 +20,22 @@
   --selected-result-subtitle-color: var(--result-subtitle-color);
   --selected-result-background: #1972D6;
 
+  /* scrollbar */
+  --scroll-background: var(--main-background-color);
+  --scroll-track: #2E2E2C;
+  --scroll-track-active: var(--scroll-track);
+  --scroll-track-hover: var(--scroll-track);
+  --scroll-thumb: var(--secondary-font-color);
+  --scroll-thumb-hover: var(--scroll-thumb);
+  --scroll-thumb-active: var(--main-font-color);
+  --scroll-width: 5px;
+  --scroll-height: 5px;
+
   /* inputs */
   --preview-input-background: #2E2E2C;
   --preview-input-color: var(--main-font-color);
   --preview-input-border: 0;
 
   /* filter for previews */
-  --preview-filter: invert(100%) hue-rotate(180deg) contrast(80%);;
+  --preview-filter: invert(100%) hue-rotate(180deg) contrast(80%);
 }
diff --git a/app/main/css/themes/light.css b/app/main/css/themes/light.css
index 371427e0..6fa6a9a0 100644
--- a/app/main/css/themes/light.css
+++ b/app/main/css/themes/light.css
@@ -20,6 +20,17 @@
   --selected-result-subtitle-color: var(--result-subtitle-color);
   --selected-result-background: rgba(18, 110, 219, 1);
 
+  /* scrollbar */
+  --scroll-background: var(--main-background-color);
+  --scroll-track: #e0e0e0;
+  --scroll-track-active: var(--scroll-track);
+  --scroll-track-hover: var(--scroll-track);
+  --scroll-thumb: var(--secondary-font-color);
+  --scroll-thumb-hover: var(--scroll-thumb);
+  --scroll-thumb-active: var(--main-font-color);
+  --scroll-width: 5px;
+  --scroll-height: 5px;
+
   /* inputs */
   --preview-input-background: white;
   --preview-input-color: var(--main-font-color);