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

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.toshniwal@
> enterprisedb.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.postgr
>>> esql.org/gitweb/?p=pgadmin-www.git;a=summary
>>>
>> 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"