public inbox for [email protected]
help / color / mirror / Atom feedFrom: Aditya Toshniwal <[email protected]>
To: Akshay Joshi <[email protected]>
Cc: Dave Page <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Cc: Ashesh Vashi <[email protected]>
Subject: Re: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme
Date: Tue, 12 Nov 2019 19:16:53 +0530
Message-ID: <CAM9w-_=tKBBMaJmKSaRnhrdCWjk-D+SWd=BxwxYuHJwCv8nrmw@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDfx5rgaoPSPhn1EyvZcT-gpBqvJvNN+GwGnmRiSFQKRmw@mail.gmail.com>
References: <CAM9w-_m5mfGiu1mUH28Hngi1riYTmTurNoxz-qWOH7g+zRFOhA@mail.gmail.com>
<CAM9w-_nNp1BAy9usd1j9xP+gKSrR-_BLMwoCUzngx0-8HcbRmw@mail.gmail.com>
<CANxoLDcAnDBA-a5577wo0QcXVq0bmk+DPKv=K7nekRiejcPXzA@mail.gmail.com>
<CA+OCxozmGJmLvH1g0vCn09OOTiUTnZbZ_nPHU0dNU1pRXYjQnA@mail.gmail.com>
<CA+OCxow-ZLN8sKETj5Bf7Y4gTWm+q7NtugfpG3_zt-KHzpvbJA@mail.gmail.com>
<CAM9w-_=fuDGpPmFLg=w--LCF1jACMuWcqGb5BFX57AhE-Vm4xQ@mail.gmail.com>
<CA+OCxoxKgZFwtqhc89Pu3T_aPWkTmt4_rO32WuewaDLqoLM7wg@mail.gmail.com>
<CAM9w-_=OHmdrWRJWnwN5_cfNPfak+34=MwbiHpez9HBUtk2ZzQ@mail.gmail.com>
<CAM9w-_kma2zGbk-3dr68z2O4ZvfJEmt5i8y9tgQwcMOvshWtaw@mail.gmail.com>
<CAM9w-_=M1G-m-vb_7j1G1LtEis6aT8KakHmWGxJmRfUV-oZ5ug@mail.gmail.com>
<CAM9w-_ntcD1bJkm3h3n3S9TO+GxGxmJPY17Qi079Z87x9b_W4g@mail.gmail.com>
<CANxoLDfgiKoaZyHuDAMier0yjrmnYCc9Diht+yvhWQau1Xr05Q@mail.gmail.com>
<CA+OCxowQ_qPmaLoCwq6ca0KzojaO7U49yJna3_rNJqUp-wTYJA@mail.gmail.com>
<CAM9w-_=18dvyzS4wB=8es_dMTr9O0bnVq7VD0OC1JgxVsXJqXA@mail.gmail.com>
<CA+OCxowN-7O=LoKoDjfEUp8J_cij7zd+=rn99n4=rYbEJXbuvw@mail.gmail.com>
<CAM9w-_=iOUWtvLJ3vq=McZZYyWRkjoF_HcpDdHE8=fUE-jGMyw@mail.gmail.com>
<CA+OCxoz=TRA8UHjaQycqPcdsRmHwLz72gwBPitY2nQMuvBw3-g@mail.gmail.com>
<CAM9w-_mfFq2wKZwTvzRaEPre+Shz-ESSEhy3CA-SuFmcvNCAzQ@mail.gmail.com>
<CA+OCxoxf0maw2s1cCfdNDzDfazP_13de0AS1g3dixOZMTmBudw@mail.gmail.com>
<CAM9w-_=B-DE2F2rAZLr1uhiedLS2Fxe0v85YsPm7fKtZgVYKDg@mail.gmail.com>
<CANxoLDfx5rgaoPSPhn1EyvZcT-gpBqvJvNN+GwGnmRiSFQKRmw@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"
Attachments:
[image/png] Screenshot 2019-11-12 at 09.09.42.png (23.5K, 3-Screenshot%202019-11-12%20at%2009.09.42.png)
download | view image
[image/png] image.png (60.7K, 4-image.png)
download | view image
[image/png] Screenshot 2019-11-12 at 09.53.02.png (36.7K, 5-Screenshot%202019-11-12%20at%2009.53.02.png)
download | view image
[application/octet-stream] RM4348.part4.patch (4.8K, 6-RM4348.part4.patch)
download | inline diff:
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;
view thread (31+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected], [email protected], [email protected]
Subject: Re: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme
In-Reply-To: <CAM9w-_=tKBBMaJmKSaRnhrdCWjk-D+SWd=BxwxYuHJwCv8nrmw@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox