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

Thanks, applied.

On Tue, Sep 4, 2018 at 11:58 AM, Aditya Toshniwal <
aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:

> 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.toshniwal@
>> enterprisedb.com> wrote:
>>
>>> Hi Hackers,
>>>
>>> Attached is the rebased patch.
>>> Kindly review.
>>>
>>> On Wed, Aug 29, 2018 at 11:13 AM Aditya Toshniwal <aditya.toshniwal@
>>> enterprisedb.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.toshniwal@
>>>> enterprisedb.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.toshniwal@
>>>>> enterprisedb.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.toshniwal@
>>>>>> enterprisedb.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"
>

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company