Thread: [pgAdmin4][RM2927] Move all CSS into SCSS files for consistency andease of colour maintenance etc.

Hi

On Tue, Aug 14, 2018 at 10:12 AM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:

Hi Hacker,

Attached is the patch to replace CSS with SCSS wherever needed. Highlights of patch:

1) Use of globally defined colors and styles across the complete application using SCSS. 

2) Modularity in CSS - All the SCSS and CSS files in different modules will be pulled for bundling automatically.

3) Remove hard coded hash codes in different JS files and use CSS class instead.

4) Replace different out of the theme colors with colors defined in global SCSS variables.

5) Removed '~bootstrap/dist/css/bootstrap-theme.css'. We dont need it actually. This will bring default bootstrap design with less gradient use (gradient kills performance)

Please note, there will be slight color differences from the original. I have tried to cover most of the app but may have missed few, please point out.

Also, it is mandatory for wcDocker to provide a theme. To stop it, we need to change wcDocker code. So for now I have provided empty css file.

I'm seeing the following failure:

(pgadmin4) dpage@hal:~/git/pgadmin4$ make bundle

cd web && yarn run bundle

yarn run v1.9.2

$ cross-env NODE_ENV=production yarn run bundle:dev

$ yarn run linter && yarn run webpacker

$ yarn eslint --no-eslintrc -c .eslintrc.js --ext .js --ext .jsx .

$ /Users/dpage/git/pgadmin4/web/node_modules/.bin/eslint --no-eslintrc -c .eslintrc.js --ext .js --ext .jsx .

/Users/dpage/git/pgadmin4/web/webpack.config.js

  123:2   error  Missing semicolon                              semi

  279:11  error  Expected indentation of 8 spaces but found 10  indent

  280:11  error  Expected indentation of 8 spaces but found 10  indent

  283:24  error  Missing trailing comma                         comma-dangle

  284:12  error  Missing trailing comma                         comma-dangle

  285:9   error  Expected indentation of 6 spaces but found 8   indent

  312:25  error  Missing trailing comma                         comma-dangle

  313:10  error  Missing trailing comma                         comma-dangle

  334:71  error  Missing trailing comma                         comma-dangle

✖ 9 problems (9 errors, 0 warnings)

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

make: *** [bundle] Error 1

Also, the changes to preferences.js seems to add a duplicate line to a comment.

Thanks.

 

--

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

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

Hi Dave/Hackers,

Please find attached the updated patch.

On Thu, Aug 16, 2018 at 1:45 PM, Dave Page <dpage@pgadmin.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@pgadmin.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

Yes. Will start working on this.

Thanks.

On Wed, Aug 15, 2018 at 1:17 PM, Dave Page <dpage@pgadmin.org> wrote:

Hi

On Tue, Aug 14, 2018 at 6:41 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.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 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"

On Thu, Aug 16, 2018 at 1:33 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:

Hi,

On Thu, Aug 16, 2018 at 6:01 PM, Dave Page <dpage@pgadmin.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.toshniwal@enterprisedb.com> wrote:

Hi Dave/Hackers,

Please find attached the updated patch.

On Thu, Aug 16, 2018 at 1:45 PM, Dave Page <dpage@pgadmin.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@pgadmin.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

Yes. Will start working on this.

Thanks.

On Wed, Aug 15, 2018 at 1:17 PM, Dave Page <dpage@pgadmin.org> wrote:

Hi

On Tue, Aug 14, 2018 at 6:41 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.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 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

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@pgadmin.org> wrote:

On Thu, Aug 16, 2018 at 1:33 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:

Hi,

On Thu, Aug 16, 2018 at 6:01 PM, Dave Page <dpage@pgadmin.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.toshniwal@enterprisedb.com> wrote:

Hi Dave/Hackers,

Please find attached the updated patch.

On Thu, Aug 16, 2018 at 1:45 PM, Dave Page <dpage@pgadmin.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@pgadmin.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@pgadmin.org> wrote:

Hi

On Tue, Aug 14, 2018 at 6:41 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.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 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"

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@pgadmin.org> wrote:

On Thu, Aug 16, 2018 at 1:33 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:

Hi,

On Thu, Aug 16, 2018 at 6:01 PM, Dave Page <dpage@pgadmin.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.toshniwal@enterprisedb.com> wrote:

Hi Dave/Hackers,

Please find attached the updated patch.

On Thu, Aug 16, 2018 at 1:45 PM, Dave Page <dpage@pgadmin.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@pgadmin.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@pgadmin.org> wrote:

Hi

On Tue, Aug 14, 2018 at 6:41 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.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 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"

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@pgadmin.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@pgadmin.org> wrote:

On Thu, Aug 16, 2018 at 1:33 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:

Hi,

On Thu, Aug 16, 2018 at 6:01 PM, Dave Page <dpage@pgadmin.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.toshniwal@enterprisedb.com> wrote:

Hi Dave/Hackers,

Please find attached the updated patch.

On Thu, Aug 16, 2018 at 1:45 PM, Dave Page <dpage@pgadmin.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@pgadmin.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@pgadmin.org> wrote:

Hi

On Tue, Aug 14, 2018 at 6:41 PM, Aditya Toshniwal <aditya.toshniwal@enterprisedb.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 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"