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

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
>>>>>>
>>>>> 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