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

Hi Dave,

I can see the javascript test cases failing. :(
Attached is the patch to fix the test cases.

On Tue, Sep 4, 2018 at 3:55 PM Dave Page <dpage(at)pgadmin(dot)org> wrote:

> Thanks - patch applied.
>
> On Mon, Sep 3, 2018 at 10:41 AM, Aditya Toshniwal <
> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>
>> Hi Hackers,
>>
>> Attached is the rebased patch.
>> Kindly review.
>>
>> On Wed, Aug 29, 2018 at 11:13 AM Aditya Toshniwal <
>> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>>
>>> 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"
>>>
>>
>>
>> --
>> 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"