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

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.postgr
>>>>>>>>> esql.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-backg
>>>>>>>>>> round?
>>>>>>>>>>
>>>>>>>>> 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"