qt: Generalized css files, simple design changes, added scripts to keep track of color usage #3508

xdustinface · 2020-06-03T18:28:37Z

Prior to this PR dark.css and light.css contained a lot shared layout/style changes which were required to kept synced in both files when a design change happened. This PR generalises those shared layout/style changes and puts them into general.css which is loaded before the actual theme css file.

~~This is currently based on #3500 so the actual first commit of this PR is 5530541. Will rebase on develop as soon as the other PR is merged.~~

Generalizations and some redesigns

e47ef8c to 2d5610b are the ones putting all shared changes into general.css. They also contain some simple redesigns for that see the individual commit or below the before/after images.

Cleanup

06482d9 to cadfd7f are cleaning up the css files, giving them the same structure and fix color issues happened due to the generalizations.

First part of the css file contains general Qt standard class changes sorted by the alphabet.
Second part of the file contains custom classes also sorted by the alphabet.

e64e046 adds copyright and a file description to all css files

Script

84cbfad adds the python script update_colors.py which parses all the css files, generates a list of used colors and puts them into the appropriate css file's description section between <colors></colors> tags. It also generates the files in src/qt/res/css/colors/. They contain some expandable "analyses" of the color usage in the css files. Currently those files contain:

List of used colors
List of attribute/color combination with a list of selectors they are used by.
List of colors with a list of attributes they are used by.

0d680abfab4649c2539f37d5ebe7c8fc77cc9ed2 just adds the results of running update_colors.py

Before/After

Here are some before/after images with the most significant changes highlighted in the light theme (they apply the same to the dark) compared to #3500.

Light

ModalOverlay Before	ModalOverlay Now

Overview Before	Overview Now

Send Before	Send Now

Receive Before	Receive Now

CoinControl Before	CoinControl Now

Dark

ModalOverlay Before	ModalOverlay Now

Overview Before	Overview Now

Send Before	Send Now

Receive Before	Receive Now

CoinControl Before	CoinControl Now

UdjinM6 · 2020-06-04T11:45:56Z

Just merged #3500 , needs rebase now.

xdustinface · 2020-06-04T12:01:24Z

Done! Also updated the initial description.

UdjinM6

Pls see inline comments +

update_colors.py should be in contrib/devtools IMO (will require corresponding changes in code);
is there a reason to add src/qt/res/css/colors/ (and files inside of it) to the repo and not have it as a local only one? These files are kind of temporary ones and not used in any way in the build process, only as a helper to find some potential weirdness in css files if I get it correctly. If that's true, should also add src/qt/res/css/colors/ to CLEAN_QT in Makefile.qt.include to make sure they are wiped out on make clean.

src/qt/res/css/update_colors.py

xdustinface · 2020-06-04T16:00:28Z

Good points 👍 Changed, and yeah you got it right, those files are just helpers 🙂 Removed them from the repo and added them to .gitignore

UdjinM6

A couple more potential script fixes, pls see https://github.com/UdjinM6/dash/commits/pr3508.

Design changes looks mostly ok to me, noticed one issue in Traditional theme, see below.

src/qt/res/css/trad.css

xdustinface · 2020-06-04T20:19:06Z

Thanks for the updates to the script, picked them all 👍

UdjinM6 · 2020-06-05T19:28:19Z

Looks mostly good. One issue I noticed is that there are two red colors in UI now - red and #ff4500. The simple red one is too bright for the Dark theme and the lighter #ff4500 one looks ok in all themes imo. Let's use the later only maybe? See 400058e686

xdustinface · 2020-06-05T19:36:10Z

I have another pull requesting coming up soon which fixes your issue with the red and brings overall more consistency to layouts and coloring. Is it good enough to see this as accepted issue in this PR? 😄 I will be ready with the other PR probably today or tomorrow!

PastaPastaPasta · 2020-06-05T19:39:41Z

This is a massive PR, imo it probably makes sense to split it out into smaller PRs or in future smaller PRs to make review easier

xdustinface · 2020-06-05T20:13:49Z

Isn't it splitting the PR the same (at least for reviewing) as if you just make use of the commit selection feature? Tell me for the future, how would you have split this to make it more appropriate?

To give you my reason why i chose to push this all into this PR: Just to have an as much as possible clean transition for from "layout changes in dark.css and light.css and general.css" to "layout changes only in general.css" and to have all css files in the same order in one commit later on the main branches.

PastaPastaPasta · 2020-06-05T20:20:08Z

It's hard for me to get the motivation to review 33 commits, so splitting it up makes it a bit easier emotionally 😂

To me most of the commits seem atomic, so you probably could have split it a number of ways. The update colors script and associated stuff probably could've been in a separate PR.

xdustinface · 2020-06-05T23:12:13Z

haha there were only 23 commits when i submitted! 😅 And wouldn't you still have all 33 pop up in the last PR because they all are based on each other if i would split this up now? 🤔

Please don't get me wrong, in general i totally get the idea of small pull requests though in this case i somehow just felt like i need to push this all into one "cleanup-commit" which contains all css restructuring i had in mind, sorry 🙈

Anyway.. if you still reeaallly want me to split this one, let me know i will do it for sure!

PastaPastaPasta · 2020-06-06T04:37:26Z

Nah, this PR is probably fine. I gave it a code review, will test tomorrow or next day

PastaPastaPasta · 2020-06-12T23:14:35Z

Some things I noticed,
the back/white doesn't look as clean
(see below, second comment)

It starts out smaller

text on send/receive pages are too large

"automatically selected" on send page is black instead of grey

selected amount text looks worse

PastaPastaPasta · 2020-06-12T23:17:04Z

Had to use phone to take picture because for whatever reason screenshot shows it as basically the same color, but to my eye/on my monitor it's clearly not

PastaPastaPasta

see above

xdustinface · 2020-06-13T18:19:25Z

text on send/receive pages are too large

don't you like the increase? That was intentional because i rather thought they were too small before at least without those boxes around it.. 😅

I have changes to all this already coming in other PRs very soon. Im currently still testing and fixing for windows/linux will push all that once its sorted. IMO it would make sense to leave this one here as it is if there are no more changes to the python script required.

PastaPastaPasta · 2020-06-13T18:23:17Z

I think they look too big now... Idk... Maybe it's fine

What about the other issues?

- Removed grey boxes around labels of SendCoinEntry - Changed button styles for add/clear button - Removed padding for send button

- Removed grey boxes around balance labels

…sign - Removed grey boxes around "Label", "Amount", "Message" and "Requested payment history" labels and increased their textsize - Changed the color of the "Requested payment history" label - Adjusted the style of the "Clear", "Remove" and "Show" buttons

- Increased size of selected sum labels

- Increased the size of the "Filter list" and "Node count" labels

- Removed alternated coloring

- Adjusted colors - Added rounded border

- update_colors.py is a python script which parses the css files and prints some details about their color usage into appropriate files in the css/colors directory. It also updates the <colors></colors> section for each css file. - Added <colors></colors> section to css files for automated color updates by update_colors.py

This also moves the file from src/qt/res/css to contrib/devtools

…om the repo

Its #AARRGGBB not #RRGGBBAA! Co-authored-by: UdjinM6 <[email protected]>

codablock

limited utACK from my side. I can't really review any of the CSS changes in a meaningful way as I don't understand anything of it however ;) But I can verify that this doesn't break anything obvious as it doesn't touch critical stuff.

UdjinM6

ACK

PastaPastaPasta

Light ACK, utACK for 0.17 at this point. If we finish all the UI stuff before 16 is out we can maybe backport it

…ep track of color usage (dashpay#3508) * qt: Send tab - Generalized related CSS and some redesign - Removed grey boxes around labels of SendCoinEntry - Changed button styles for add/clear button - Removed padding for send button * qt: Overview tab - Generalized related CSS and some redesign - Removed grey boxes around balance labels * qt: Receive tab & QPushButton - Generalized related CSS and some redesign - Removed grey boxes around "Label", "Amount", "Message" and "Requested payment history" labels and increased their textsize - Changed the color of the "Requested payment history" label - Adjusted the style of the "Clear", "Remove" and "Show" buttons * qt: Transaction tab - Generalized related CSS and some redesign - Increased size of selected sum labels * qt: Masternode tab - Generalized related CSS and some redesign - Increased the size of the "Filter list" and "Node count" labels * qt: CoinControl dialog - Generalized related CSS and some redesign - Removed alternated coloring * qt: Sync overlay - Generalized related CSS and some redesign - Adjusted colors - Added rounded border * qt: About dialog - Generalized related CSS * qt: Edit address dialog - Generalized related CSS * qt: Help message dialog - Generalized related CSS * qt: RPC console - Generalized related CSS and some redesign - Changed colors for network activity legend (signal colors TBD in a code change commit) * qt: Options dialog - Generalized related CSS * qt: Ask passphrase dialog - Generalized related CSS * qt: Addressbook page - Generalized related CSS * qt: Sign/Verify dialog - Generalized related CSS * qt: Open URI dialog - Generalized related CSS * qt: Generalized remaining individual Qt classes * qt: Fixed indentation in css files * qt: Use newlines for multiple selector entries * qt: Formal cleanups in all css files * qt: Add copyright and file description to all css files * qt: Add update_colors.py, prepare css files for scripted color updates - update_colors.py is a python script which parses the css files and prints some details about their color usage into appropriate files in the css/colors directory. It also updates the <colors></colors> section for each css file. - Added <colors></colors> section to css files for automated color updates by update_colors.py * qt/contrib: Moved update_colors.py to update-css-files.py This also moves the file from src/qt/res/css to contrib/devtools * build: Remove files in src/qt/res/css/colors when running "make clean" * git: Add src/qt/res/css/colors/* to gitignore and remove the files from the repo * path -> css_folder_path * Resolve path and fail early * Create 'colors/' if it doesn't exist and fail if smth went wrong * Run git after all filesystem preparations are done * qt: Fix background-color of bgWidget in trad.css Its #AARRGGBB not #RRGGBBAA! Co-authored-by: UdjinM6 <[email protected]> * qt: Run update_colors.py * contrib: Use case insensitive regex for color matching * qt: Update colors in css files * contrib: Remove obsolete import in update-css-files.py Co-authored-by: UdjinM6 <[email protected]>

xdustinface force-pushed the pr-ui-css-generalization branch 2 times, most recently from 0f988bb to 0d680ab Compare June 4, 2020 11:56

UdjinM6 requested changes Jun 4, 2020

View reviewed changes

src/qt/res/css/update_colors.py Outdated Show resolved Hide resolved

xdustinface force-pushed the pr-ui-css-generalization branch from 1d95a84 to d6f1d49 Compare June 4, 2020 15:59

UdjinM6 requested changes Jun 4, 2020

View reviewed changes

src/qt/res/css/trad.css Outdated Show resolved Hide resolved

xdustinface force-pushed the pr-ui-css-generalization branch from 80e5ac3 to c5c8ad7 Compare June 4, 2020 20:13

PastaPastaPasta requested changes Jun 13, 2020

View reviewed changes

xdustinface added 8 commits June 25, 2020 16:02

qt: Send tab - Generalized related CSS and some redesign

c81277f

- Removed grey boxes around labels of SendCoinEntry - Changed button styles for add/clear button - Removed padding for send button

qt: Overview tab - Generalized related CSS and some redesign

9ba352c

- Removed grey boxes around balance labels

qt: Transaction tab - Generalized related CSS and some redesign

8373b32

- Increased size of selected sum labels

qt: Masternode tab - Generalized related CSS and some redesign

3d7956d

- Increased the size of the "Filter list" and "Node count" labels

qt: CoinControl dialog - Generalized related CSS and some redesign

fda98c5

- Removed alternated coloring

qt: Sync overlay - Generalized related CSS and some redesign

5ec4753

- Adjusted colors - Added rounded border

qt: About dialog - Generalized related CSS

13df37a

xdustinface and others added 17 commits June 25, 2020 16:02

qt: Fixed indentation in css files

adf2bf1

qt: Use newlines for multiple selector entries

dfce74f

qt: Formal cleanups in all css files

e44ac22

qt: Add copyright and file description to all css files

b2980a3

qt/contrib: Moved update_colors.py to update-css-files.py

ad0b90d

This also moves the file from src/qt/res/css to contrib/devtools

build: Remove files in src/qt/res/css/colors when running "make clean"

bd1e341

git: Add src/qt/res/css/colors/* to gitignore and remove the files fr…

945c350

…om the repo

qt: Fix background-color of bgWidget in trad.css

aea40f0

Its #AARRGGBB not #RRGGBBAA! Co-authored-by: UdjinM6 <[email protected]>

qt: Run update_colors.py

4ad1be2

path -> css_folder_path

bf53bcd

Resolve path and fail early

f379ef6

Create 'colors/' if it doesn't exist and fail if smth went wrong

54843f1

Run git after all filesystem preparations are done

2019349

contrib: Use case insensitive regex for color matching

c0026a4

qt: Update colors in css files

51c96e7

contrib: Remove obsolete import in update-css-files.py

ded2872

xdustinface force-pushed the pr-ui-css-generalization branch from 60112aa to ded2872 Compare June 25, 2020 14:03

xdustinface mentioned this pull request Jun 26, 2020

qt: Redesign of the main toolbar #3554

Merged

codablock approved these changes Jun 26, 2020

View reviewed changes

UdjinM6 approved these changes Jun 26, 2020

View reviewed changes

PastaPastaPasta approved these changes Jun 26, 2020

View reviewed changes

UdjinM6 added this to the 17 milestone Jun 26, 2020

UdjinM6 merged commit f6e14ab into dashpay:develop Jun 26, 2020

UdjinM6 modified the milestones: 17, 16 Sep 4, 2020

qt: Generalized css files, simple design changes, added scripts to keep track of color usage #3508

qt: Generalized css files, simple design changes, added scripts to keep track of color usage #3508

Uh oh!

Conversation

xdustinface commented Jun 3, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Generalizations and some redesigns

Cleanup

Script

Before/After

Light

Dark

Uh oh!

UdjinM6 commented Jun 4, 2020

Uh oh!

xdustinface commented Jun 4, 2020

Uh oh!

UdjinM6 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

xdustinface commented Jun 4, 2020

Uh oh!

UdjinM6 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

xdustinface commented Jun 4, 2020

Uh oh!

UdjinM6 commented Jun 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xdustinface commented Jun 5, 2020

Uh oh!

PastaPastaPasta commented Jun 5, 2020

Uh oh!

xdustinface commented Jun 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PastaPastaPasta commented Jun 5, 2020

Uh oh!

xdustinface commented Jun 5, 2020

Uh oh!

PastaPastaPasta commented Jun 6, 2020

Uh oh!

PastaPastaPasta commented Jun 12, 2020

Uh oh!

PastaPastaPasta commented Jun 12, 2020

Uh oh!

PastaPastaPasta left a comment

Choose a reason for hiding this comment

Uh oh!

xdustinface commented Jun 13, 2020

Uh oh!

PastaPastaPasta commented Jun 13, 2020

Uh oh!

codablock left a comment

Choose a reason for hiding this comment

Uh oh!

UdjinM6 left a comment

Choose a reason for hiding this comment

Uh oh!

PastaPastaPasta left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

xdustinface commented Jun 3, 2020 •

edited

Loading

UdjinM6 commented Jun 5, 2020 •

edited

Loading

xdustinface commented Jun 5, 2020 •

edited

Loading