Re: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme
Aditya Toshniwal <[email protected]> Tue, 12 Nov 2019 19:16:53 +0530
| Newsgroups | gmane.comp.db.postgresql.pgadmin.devel |
|---|---|
| Message-ID | <CAM9w-_=tKBBMaJmKSaRnhrdCWjk-D+SWd=BxwxYuHJwCv8nrmw@mail.gmail.com> |
Hi Hackers, Attached is the patch to customize the scrollbar styling. A new SASS variable added - $scrollbar-base-color is added to change the color as per theme. Please note, customization of scrollbar works only in webkit browsers like Chrome, Safari. Mozilla does not have any way to customize. Kindly review. On Tue, Nov 12, 2019 at 5:55 PM Akshay Joshi <[email protected]> wrote: > Thanks, patch applied. > > On Tue, Nov 12, 2019 at 3:41 PM Aditya Toshniwal < > [email protected]> wrote: > >> >> >> On Tue, Nov 12, 2019 at 3:25 PM Dave Page <[email protected]> wrote: >> >>> Hi >>> >>> On Tue, Nov 12, 2019 at 9:50 AM Aditya Toshniwal < >>> [email protected]> wrote: >>> >>>> >>>>> Attached. It may just be that it looks a little sharp because it's a >>>>> long line. Maybe we should just make it a darker shade entirely. >>>>> >>>>> [image: Screenshot 2019-11-12 at 09.09.42.png] >>>>> >>>> >>>> Why can't I see it :/ >>>> Maybe it got fixed along with the dark drop down for no limit. Could >>>> you please check again. >>>> [image: image.png] >>>> >>> >>> Nope, it's definitely still there: >>> >> I checked on 2-3 systems. It looks fine. May be the permanent enabled >> scrollbar causing it look like that. >> >>> >>> [image: Screenshot 2019-11-12 at 09.53.02.png] >>> >>> >>> >>>> BTW, what was the reason for removing the styling from the scroll bars? >>>>> >>>> We had given gray shades to scrollbar which were not clearly visible >>>> for some tables. Plus, for systems were scrollbar is not always enabled was >>>> showing scrollbar. It should appear only on scroll on those systems. >>>> >>> >>> And you're working on that? We can't keep the ugly grey scroll bars! >>> >> OK. I'll take it as priority. >> >>> >>> Thanks! >>> >>> -- >>> Dave Page >>> Blog: http://pgsnake.blogspot.com >>> Twitter: @pgsnake >>> >>> EnterpriseDB UK: http://www.enterprisedb.com >>> The Enterprise PostgreSQL Company >>> >> >> >> -- >> Thanks and Regards, >> Aditya Toshniwal >> Sr. Software Engineer | EnterpriseDB India | Pune >> "Don't Complain about Heat, Plant a TREE" >> > > > -- > *Thanks & Regards* > *Akshay Joshi* > > *Sr. Software Architect* > *EnterpriseDB Software India Private Limited* > *Mobile: +91 976-788-8246* > -- Thanks and Regards, Aditya Toshniwal Sr. Software Engineer | EnterpriseDB India | Pune "Don't Complain about Heat, Plant a TREE"
Screenshot 2019-11-12 at 09.09.42.png
(image/png, 23.5 KB) - not displayed
image.png
(image/png, 60.7 KB) - not displayed
Screenshot 2019-11-12 at 09.53.02.png
(image/png, 36.7 KB) - not displayed
RM4348.part4.patch
(application/octet-stream, 4.8 KB)
diff --git a/web/pgadmin/static/scss/_codemirror.overrides.scss b/web/pgadmin/static/scss/_codemirror.overrides.scss
index 2857455be..d7c0ceda1 100644
--- a/web/pgadmin/static/scss/_codemirror.overrides.scss
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -179,3 +179,29 @@
.CodeMirror-activeline-background {
background: $color-danger-lighter !important;
}
+
+.CodeMirror-simplescroll-horizontal {
+ height: $scrollbar-width;
+}
+
+.CodeMirror-simplescroll-vertical {
+ width: $scrollbar-width;
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
+ background: rgba($scrollbar-base-color, 0.2);
+}
+
+.CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
+
+ & div {
+ border: 0.25rem solid transparent;
+ border-radius: $border-radius*2;
+ background-clip: content-box;
+ background-color: rgba($scrollbar-base-color, 0.7);
+
+ &:hover {
+ background-color: $scrollbar-base-color;
+ }
+ }
+}
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 5d51c107e..2bdb77132 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -1034,3 +1034,20 @@ textarea {
color: $input-color;
background-color: $input-bg;
}
+
+::-webkit-scrollbar, ::-webkit-scrollbar-corner {
+ width: $scrollbar-width;
+ height: $scrollbar-width;
+ background-color: rgba($scrollbar-base-color, 0.2);
+}
+
+::-webkit-scrollbar-thumb {
+ border: 0.25rem solid transparent;
+ border-radius: $border-radius*2;
+ background-clip: content-box;
+ background-color: rgba($scrollbar-base-color, 0.7);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: $scrollbar-base-color;
+}
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 29387ddf8..2e1c72899 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -246,8 +246,8 @@ $no-border-radius: 0px !important;
$btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;
-$scrollbar-color: $color-gray !default;
-$scrollbar-hover-color: $color-gray-dark !default;
+$scrollbar-base-color: #bac1cd !default;
+$scrollbar-width: 1rem;
$security-text-color: $white;
$security-btn-color: #038bba;
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
index d3cb45238..2d1441dbc 100644
--- a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
@@ -70,8 +70,7 @@ $explain-sev-4-color: $color-fg;
$negative-bg: $color-bg;
-$scrollbar-color: $color-gray-lighter!default;
-$scrollbar-hover-color: #666666 !default;
+$scrollbar-base-color: #616161;
$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%2340617d;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%2340617d;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;