Re: [pgAdmin4][RM2927] Move all CSS into SCSS files for consistency and ease of colour maintenance etc.

Hi Hackers,

Please hold on with the patch. I have to rebase the patch again as the
patch is old and will fail to apply. Will send the rebased patch.

On Mon, Aug 20, 2018 at 10:35 AM Aditya Toshniwal <
aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:

> Hi Hackers,
>
> Just to mention, with the previous patch I have used the new SASS
> variables $color-bg-inverse for background colors where #000 (black) was
> used and $color-fg-inverse for foreground colors where #fff (white) was
> used in few more places. I think I have covered most of the places but
> please let me know if I missed anything.
>
> On Mon, Aug 20, 2018 at 10:23 AM, Aditya Toshniwal <
> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>
>> Hi Hackers,
>>
>> Attached is an updated patch (one more css change included). Please
>> ignore the previous patch.
>>
>> On Fri, Aug 17, 2018 at 2:20 PM, Aditya Toshniwal <
>> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>>
>>> Hi Hackers,
>>>
>>> Attached is the updated patch with some corrections in grey shades.
>>> I will send the patch for pgadmin.org -> style guide changes.
>>>
>>> On Thu, Aug 16, 2018 at 6:17 PM, Dave Page <dpage(at)pgadmin(dot)org> wrote:
>>>
>>>>
>>>>
>>>> On Thu, Aug 16, 2018 at 1:33 PM, Aditya Toshniwal <
>>>> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>>>>
>>>>> Hi,
>>>>>
>>>>> On Thu, Aug 16, 2018 at 6:01 PM, Dave Page <dpage(at)pgadmin(dot)org> wrote:
>>>>>
>>>>>> Hi
>>>>>>
>>>>>> That looks much better... but, did you get the right shades of grey?
>>>>>> They seem to have a slight green hint to them.
>>>>>>
>>>>> I tried to get the correct ones. And we can always change them, its
>>>>> SASS. :-D
>>>>>
>>>>>
>>>>
>>>> Sure, but I'm assigning that task to you :-p
>>>>
>>>> Can you please look at v3.2, and check if the button background,
>>>> toolbar background and code mirror gutters all have the same resulting
>>>> colours in your patch?
>>>>
>>>> Thanks :-)
>>>>
>>>>
>>>>
>>>>>
>>>>>> On Thu, Aug 16, 2018 at 10:42 AM, Aditya Toshniwal <
>>>>>> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>>>>>>
>>>>>>> Hi Dave/Hackers,
>>>>>>>
>>>>>>> Please find attached the updated patch.
>>>>>>>
>>>>>>> On Thu, Aug 16, 2018 at 1:45 PM, Dave Page <dpage(at)pgadmin(dot)org>
>>>>>>> wrote:
>>>>>>>
>>>>>>>> Hi
>>>>>>>>
>>>>>>>> On Thu, Aug 16, 2018 at 6:14 AM, Aditya Toshniwal <
>>>>>>>> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>>>>>>>>
>>>>>>>>> Hi Dave,
>>>>>>>>>
>>>>>>>>> On Wed, Aug 15, 2018 at 9:31 PM, Dave Page <dpage(at)pgadmin(dot)org>
>>>>>>>>> wrote:
>>>>>>>>>
>>>>>>>>>> One more thought - can you please look at updating the style
>>>>>>>>>> guide on the website to be consistent?
>>>>>>>>>> https://git.postgresql.org/gitweb/?p=pgadmin-www.git;a=summary
>>>>>>>>>>
>>>>>>>>> Dave, is this the current repo ? I configured it on my local and
>> looks like old one.
>>
>>
>>
>> Yes. Will start working on this.
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Thanks.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Wed, Aug 15, 2018 at 1:17 PM, Dave Page <dpage(at)pgadmin(dot)org>
>>>>>>>>>> wrote:
>>>>>>>>>>
>>>>>>>>>>> Hi
>>>>>>>>>>>
>>>>>>>>>>> On Tue, Aug 14, 2018 at 6:41 PM, Aditya Toshniwal <
>>>>>>>>>>> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>>>>>>>>>>>
>>>>>>>>>>>> Hi Hackers,
>>>>>>>>>>>>
>>>>>>>>>>>> Attached is the updated patch fixing the errors. I missed the
>>>>>>>>>>>> linter in webpack.config.js :(
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> That's better - thanks.
>>>>>>>>>>>
>>>>>>>>>>> A few thoughts:
>>>>>>>>>>>
>>>>>>>>>>> - The button bars now have the flat style, however disabled
>>>>>>>>>>> buttons are almost indistinguishable from enabled ones. If we're going to
>>>>>>>>>>> have a flatter style, then we need to make the foreground colour of the
>>>>>>>>>>> buttons much lighter when they're disabled.
>>>>>>>>>>>
>>>>>>>>>> I guess they are distinguishable :/ (below screenshots). Plus you
>>>>>>>>> will get a disabled mouse pointer on button hover (after I send the updated
>>>>>>>>> patch). If we need to change the colors of the button then we need to
>>>>>>>>> override bootstrap variables and compile the less files.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>> I mean the button bar on the Query Tool or Debugger (though I only
>>>>>>>> looked at the former).
>>>>>>>>
>>>>>>>> BTW, you should grab the Sim Daltonism app from the app store on
>>>>>>>> your Mac. It shows you what the colours would look like to people with
>>>>>>>> different types of colour-blindness. It's very useful.
>>>>>>>>
>>>>>>> I have over-riden bootstrap class
>>>>>>>
>>>>>>> for such buttons to make foreground more lighter. The app helped,
>>>>>>> thanks.
>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>> - I'm not keen on using $color-white/$color-black. That
>>>>>>>>>>> pre-supposes what the colours are, in which case we might as well just
>>>>>>>>>>> hard-code the values. How about $color-foreground/$color-background?
>>>>>>>>>>>
>>>>>>>>>> foreground/background is a good idea. It will be helpful in
>>>>>>>>> theming if we want a dark theme. All need to use these variables in places
>>>>>>>>> where no backgroud/foreground color is set in CSS classes. Will work on
>>>>>>>>> this.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>> - One thing we may want to do in the future is to have the
>>>>>>>>>>> option for alternate themes (or at least just a dark one). Do you know (no
>>>>>>>>>>> need to do it now - I'm just asking) if we've got enough of the colours in
>>>>>>>>>>> _default_variables.scss (and overridden elsewhere) to be able to do that?
>>>>>>>>>>>
>>>>>>>>>> I have added few more variables and should be enough. pgAdmin4
>>>>>>> has limited number of colors
>>>>>>>
>>>>>>> and the current variables should be enough.
>>>>>>>
>>>>>>>> I have covered all the hash codes used in pgAdmin4 defined CSS/SCSS
>>>>>>>>> files. But, if we want the complete theme then we need to override the
>>>>>>>>> external CSS or override the variables and compile the less/sass files
>>>>>>>>> (bootstrap). This is part is still not done.
>>>>>>>>>
>>>>>>>>
>>>>>>>> Ack. Personally, I'd love a dark theme. Or even pluggable themes.
>>>>>>>> That would be awesome - but we have more important work first.
>>>>>>>>
>>>>>>> Moving to Bootstrap 4 will make it more easier :P
>>>>>>>
>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>> I have noticed one more thing, templated CSS. We should remove
>>>>>>>>>>>> it. For now I have skipped template css from webpack bundling.
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> +1
>>>>>>>>>>>
>>>>>>>>>> Should this be done as part of this RM, or we need to create a
>>>>>>>>> separate one ?
>>>>>>>>>
>>>>>>>>
>>>>>>>> A separate one I think.
>>>>>>>>
>>>>>>> RM3574 <https://redmine.postgresql.org/issues/3574> created.
>>>>>>>
>>>>>>>
>>>>>>>>
>>>>>>>> Thanks!
>>>>>>>>
>>>>>>>>
>>>>>>>>>
>>>>>>>>>>> --
>>>>>>>>>>> Dave Page
>>>>>>>>>>> Blog: http://pgsnake.blogspot.com
>>>>>>>>>>> Twitter: @pgsnake
>>>>>>>>>>>
>>>>>>>>>>> EnterpriseDB UK: http://www.enterprisedb.com
>>>>>>>>>>> The Enterprise PostgreSQL Company
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> Dave Page
>>>>>>>>>> Blog: http://pgsnake.blogspot.com
>>>>>>>>>> Twitter: @pgsnake
>>>>>>>>>>
>>>>>>>>>> EnterpriseDB UK: http://www.enterprisedb.com
>>>>>>>>>> The Enterprise PostgreSQL Company
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> Thanks and Regards,
>>>>>>>>> Aditya Toshniwal
>>>>>>>>> Software Engineer | EnterpriseDB Software Solutions | Pune
>>>>>>>>> "Don't Complain about Heat, Plant a tree"
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>>> Dave Page
>>>>>>>> Blog: http://pgsnake.blogspot.com
>>>>>>>> Twitter: @pgsnake
>>>>>>>>
>>>>>>>> EnterpriseDB UK: http://www.enterprisedb.com
>>>>>>>> The Enterprise PostgreSQL Company
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> Thanks and Regards,
>>>>>>> Aditya Toshniwal
>>>>>>> Software Engineer | EnterpriseDB Software Solutions | Pune
>>>>>>> "Don't Complain about Heat, Plant a tree"
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Dave Page
>>>>>> Blog: http://pgsnake.blogspot.com
>>>>>> Twitter: @pgsnake
>>>>>>
>>>>>> EnterpriseDB UK: http://www.enterprisedb.com
>>>>>> The Enterprise PostgreSQL Company
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Thanks and Regards,
>>>>> Aditya Toshniwal
>>>>> Software Engineer | EnterpriseDB Software Solutions | Pune
>>>>> "Don't Complain about Heat, Plant a tree"
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Dave Page
>>>> Blog: http://pgsnake.blogspot.com
>>>> Twitter: @pgsnake
>>>>
>>>> EnterpriseDB UK: http://www.enterprisedb.com
>>>> The Enterprise PostgreSQL Company
>>>>
>>>
>>>
>>>
>>> --
>>> Thanks and Regards,
>>> Aditya Toshniwal
>>> Software Engineer | EnterpriseDB Software Solutions | Pune
>>> "Don't Complain about Heat, Plant a tree"
>>>
>>
>>
>>
>> --
>> Thanks and Regards,
>> Aditya Toshniwal
>> Software Engineer | EnterpriseDB Software Solutions | Pune
>> "Don't Complain about Heat, Plant a tree"
>>
>
>
>
> --
> Thanks and Regards,
> Aditya Toshniwal
> Software Engineer | EnterpriseDB Software Solutions | Pune
> "Don't Complain about Heat, Plant a tree"
>

--
Thanks and Regards,
Aditya Toshniwal
Software Engineer | EnterpriseDB Software Solutions | Pune
"Don't Complain about Heat, Plant a tree"