Re: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme - Mailing list pgadmin-hackers

From Dave Page
Subject Re: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme
Date
Msg-id CA+OCxozmGJmLvH1g0vCn09OOTiUTnZbZ_nPHU0dNU1pRXYjQnA@mail.gmail.com
Whole thread Raw
In response to Re: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme  (Akshay Joshi <akshay.joshi@enterprisedb.com>)
Responses Re: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme
List pgadmin-hackers

On Thu, Nov 7, 2019 at 1:25 PM Akshay Joshi <akshay.joshi@enterprisedb.com> wrote:
Thanks, patch applied.

On Thu, Nov 7, 2019 at 6:39 PM Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:
Hi Hackers,

Attached is the updated patch with few more changes and corrections.
Kindly review.

I've committed a couple of minor tweaks - one to remove a space, e.g.
gettext('A page refresh is required to apply the theme. Do you wish to refresh the page now ?'),
is now:
gettext('A page refresh is required to apply the theme. Do you wish to refresh the page now?'),
And another change to fix the word wrapping in the README which was totally different from the rest of the file.

Thanks!


On Wed, Nov 6, 2019 at 12:32 PM Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:
Hi Hackers,

Attached is the patch to introduce theme options in pgAdmin.
Changes include:
1) New theme option in preferences - Miscellaneous -> Themes. You can select the theme from the dropdown. It also has a preview of the theme just below the dropdown. Note that, a page refresh is needed to apply changes. On saving, a dialog appears to ask for refresh.
2) You can create your own theme and submit to hackers. README is updated to help you create a theme. Theme will be available only after bundle.
3) Correction of SASS variables at few places and few other CSS corrections.
4) Added iconfont-webpack-plugin, which will convert all the svg files(monochrome) used as icons for buttons to font icons. This will allow us to change the color of icon by using CSS color property.
5) All the .css files will bundle into a separate file now- pgadmin.style.css. This will help reduce the size of theme css files as CSS in .css files will not change with the change of SASS variables.
6) "Dark Beta" theme added as a new theme option.

How theme is built ?
Webpack config is changed to achieve it. On running yarn run bundle, code will read all the directories in web/pgadmin/static/scss/resources which will be considered as theme dirs, build a separate css for every theme and then create a file named pgadmin.themes.json which will have all the information required.

The patch also fixes RM4173, where there some issue with arrow icons in browser tree.

Kindly review.

--
Thanks and Regards,
Aditya Toshniwal
Sr. Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"


--
Thanks and Regards,
Aditya Toshniwal
Sr. Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"


--
Thanks & Regards
Akshay Joshi
Sr. Software Architect
EnterpriseDB Software India Private Limited
Mobile: +91 976-788-8246


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

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

pgadmin-hackers by date:

Previous
From: Dave Page
Date:
Subject: pgAdmin 4 commit: Remove extra space.
Next
From: Dave Page
Date:
Subject: pgAdmin 4 commit: Tone down the primary FG colour in dark mode a touch.