[GUI][CSS] Refactored Dark Mode #933

Rock-N-Troll · 2021-04-20T13:51:56Z

Still applying stylings
Checkbox in Preferences to enable or disable Dark mode (requires wallet shutdown/restart)

New Text color change (will require icon to be copied and recolored):

Previous Text color unchanged:

….git into css_refactor_local

Rock-N-Troll · 2021-04-26T02:20:01Z

Wallet is ready for testing. I expect there to be some potential styling/formatting changes requested but otherwise the first working version of dark theme is here (FAQ tab pop-up has some issues)

seanPhill · 2021-04-29T21:58:26Z

Dark mode colours are very nice!
Screens remaining to do dark mode?
• Debug Window tabs.

• Coin Control
• "Signatures - Sign / Verify a Message" window

seanPhill · 2021-04-29T22:19:05Z

Anomalies in Light Mode: (Note: My Mac is set to Dark Mode, while the wallet is set to Light Mode.)

Grey shaded box around "Select an option below" at Create or Restore wallet screen
Grey shaded box around the number 1 in the seed phrase screens (for new wallet or for restore wallet)

seanPhill · 2021-04-29T23:28:27Z

Anomaly in Dark Mode:
Send window, Address selection window in dark mode some explanatory text cannot be read.

Compare the light mode equivalent.

seanPhill · 2021-04-29T23:44:54Z

Other anomaly in Dark Mode (only experienced at wallet creation or restore).
The same grey rectangle anomaly shown earlier in Light Mode exists in the equivalent in Dark Mode. (I expect the same fix will fix both.)

CaveSpectre11 · 2021-05-02T13:30:36Z

I'm okay with multiple commits given the scale of this, but there is going to be some definite rebasing to squash the placeholder commits. e.g.

Rock-N-Troll · 2021-05-02T15:02:46Z

I will definitely be squashing most if not all of the commits. This is a wallet-wide change that touches just about every gui page.

seanPhill · 2022-06-25T18:02:09Z

I'd be interested in having another look at this one some time, to not waste the work, and because I have appreciated the results of this Dark Mode style. So, when you're ready, just say the word.

Zannick · 2022-07-01T19:28:19Z

src/qt/guiutil.cpp

    }
-    return QString();
+
+    if(fileDark.open(QFile::ReadOnly) && isDarkModeSet){


nit: please use consistent style for spacing and indentation here. I prefer space after if and before { and 4-space indents (Github seems to round tabs to 4 or 8 spaces depending on space before them).

I will likely not be getting to this PR anytime soon but commenting as noted.

Zannick · 2022-07-01T19:36:20Z

src/qt/overviewpage.cpp

@@ -550,6 +550,7 @@ void OverviewPage::showEvent(QShowEvent *event){
    if (fHide != filter->orphansHidden())
        hideOrphans(fHide);

+    /*
    QGraphicsOpacityEffect *eff = new QGraphicsOpacityEffect(this);


This and several other (animation?) effects have been remarked out in this PR. Was this a debugging change, or is there a reason to remove these?

If i remember correctly, this was because the animation is clashing with the styling (causes flicker or just looks bad and is unnecessary). If you add it back in, would just need an eyeball check as it is all cosmetic changes.

Zannick · 2022-07-01T19:36:44Z

src/qt/splashscreenveil.cpp

@@ -49,7 +49,7 @@ SplashScreenVeil::SplashScreenVeil(interfaces::Node& node, Qt::WindowFlags f, co
    this->setStyleSheet(GUIUtil::loadStyleSheet());

    this->resize(800, 514);
-    ui->frame->setStyleSheet("#frame{border-image: url(\":/icons/splash_background\") 0 0 0 0 stretch stretch;padding: 0;margin: 0;}");
+    //ui->frame->setStyleSheet("#frame{border-image: url(\":/icons/splash_background\") 0 0 0 0 stretch stretch;padding: 0;margin: 0;}");


Because we are setting the stylesheet here and the whole purpose is the stylings are now in css instead of being handled in the code. It should have a matching styling in the css files.

Zannick · 2022-07-01T19:37:16Z

src/qt/veil/addresseswidget.cpp

+
+    QPoint pos = mainWindow->getGUI()->mapFromGlobal(QCursor::pos());
+
+	if(pos.x()+menu->width()>mainWindow->getGUI()->width()){


nit: spacing

I will likely not be getting to this PR anytime soon but commenting as noted.

Zannick · 2022-07-01T19:37:53Z

src/qt/veil/addresseswidget.cpp

    const QString constType = type;
-    if(!this->menu) this->menu = new AddressesMenu(constType , updatedIndex, this, this->mainWindow, this->model);
+    if(!this->menu) this->menu = new AddressesMenu(constType , updatedIndex, mainWindow->getGUI(), this->mainWindow, this->model);


Suggested change

if(!this->menu) this->menu = new AddressesMenu(constType , updatedIndex, mainWindow->getGUI(), this->mainWindow, this->model);

if (!this->menu)

this->menu = new AddressesMenu(constType, updatedIndex, mainWindow->getGUI(), this->mainWindow, this->model);

I will likely not be getting to this PR anytime soon but commenting as noted.

Zannick

utACK d28da77

We can address nits in a followup; I was going to do them myself but it seems inappropriate for me to then review my own commit.

seanPhill · 2022-12-21T15:45:21Z

I'll have to retest this PR. I'd like to see it released, and the other @Rock-N-Troll PRs need to be considered, including #926.

Rock-N-Troll and others added 30 commits April 11, 2021 21:01

no more in-line css in all .ui files in src/qt/forms

a8e9290

placeholder for .ui files to break out

41f725b

slow and steady wins the race... 334 to go

9c8db18

https://doc.qt.io/qt-5/stylesheet-syntax.html descendant/id selector

43e291b

Merge branch 'master' into css_refactor

85097c9

ongoing work 291 left

2c40854

Merge branch 'css_refactor' of https://github.com/Rock-N-Troll/veil-1…

e70f1e4

….git into css_refactor_local

move pre-existing css to bottom of main.css

336a981

235 left

8a324c8

179 remaining. replaced " with double quotes

958abbc

126 to go. Still not working

a3b5279

build fix

db67cd0

67 left

5843273

32 to go. my eyes

f3e20f9

build fix again

b10d5d3

0 left. Now for testing/fixing

b7afcd9

Use QT Object name first in css. Move default stylings to top of css

633160b

80% modified

c44f517

more fixes and updates

31f673f

bad css fix

d7bb580

add back quotes for url

b314230

fix for settings page gray background and border

5592166

adjustment to fix the centering issue

f39ff3b

Missed Fix -> Transactions header blue to now white background

f8e492a

receive widget page css fix

4d1fa9a

empty labels take up space. css fix.

f0302bf

show() after being hidden case

7020bca

send coins entry fix. Some css left in-line due to UI entry cloning

550e770

zerocoin minting pop-up fix

8cdce7c

fix for settings faq styling

861e42f

Rock-N-Troll mentioned this pull request Apr 26, 2021

[WIP][GUI][CSS] Wallet Styling Refactoring (*.ui) (*.css) #926

Open

4 tasks

Rock-N-Troll changed the title ~~[WIP][GUI][CSS] Refactored Dark Mode~~ [GUI][CSS] Refactored Dark Mode Apr 26, 2021

Rock-N-Troll added 6 commits April 26, 2021 23:28

refactor and fix for additional transaction list dark mode styling

35e8ed1

adjustment to not override css styling darkmode

0684717

ignore primary text color styling in dark mode

ac3d984

settings faq styling fixed

c14b17a

update address pop-up dark mode styling

f1165fd

balance tooltip now dark-mode modified

8516700

Rock-N-Troll marked this pull request as draft April 27, 2021 21:40

Rock-N-Troll marked this pull request as ready for review April 27, 2021 21:40

Rock-N-Troll added 2 commits April 27, 2021 21:12

pop-up modal borders were too bright. darken them

e5e1ed5

new main dark theme text color for better legibility. Icons need change

d28da77

CaveSpectre11 requested review from codeofalltrades, seanPhill and WetOne May 2, 2021 13:27

seanPhill requested review from Zannick and removed request for codeofalltrades and WetOne June 25, 2022 18:00

Zannick reviewed Jul 1, 2022

View reviewed changes

Zannick approved these changes Jul 3, 2022

View reviewed changes

seanPhill added the QA: Pending QA is waiting a response/confirmation from developers label Dec 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[GUI][CSS] Refactored Dark Mode #933

[GUI][CSS] Refactored Dark Mode #933

Rock-N-Troll commented Apr 20, 2021 •

edited

Loading

Rock-N-Troll commented Apr 26, 2021 •

edited

Loading

seanPhill commented Apr 29, 2021

seanPhill commented Apr 29, 2021 •

edited

Loading

seanPhill commented Apr 29, 2021

seanPhill commented Apr 29, 2021

CaveSpectre11 commented May 2, 2021

Rock-N-Troll commented May 2, 2021

seanPhill commented Jun 25, 2022

Zannick Jul 1, 2022

Rock-N-Troll Jul 1, 2022

Zannick Jul 1, 2022

Rock-N-Troll Jul 1, 2022

Zannick Jul 1, 2022

Rock-N-Troll Jul 1, 2022 •

edited

Loading

Zannick Jul 1, 2022

Rock-N-Troll Jul 1, 2022

Zannick Jul 1, 2022

Rock-N-Troll Jul 1, 2022

Zannick left a comment

seanPhill commented Dec 21, 2022


		QPoint pos = mainWindow->getGUI()->mapFromGlobal(QCursor::pos());

		if(pos.x()+menu->width()>mainWindow->getGUI()->width()){

	if(!this->menu) this->menu = new AddressesMenu(constType , updatedIndex, mainWindow->getGUI(), this->mainWindow, this->model);
	if (!this->menu)
	this->menu = new AddressesMenu(constType, updatedIndex, mainWindow->getGUI(), this->mainWindow, this->model);

[GUI][CSS] Refactored Dark Mode #933

Are you sure you want to change the base?

[GUI][CSS] Refactored Dark Mode #933

Conversation

Rock-N-Troll commented Apr 20, 2021 • edited Loading

Rock-N-Troll commented Apr 26, 2021 • edited Loading

seanPhill commented Apr 29, 2021

seanPhill commented Apr 29, 2021 • edited Loading

seanPhill commented Apr 29, 2021

seanPhill commented Apr 29, 2021

CaveSpectre11 commented May 2, 2021

Rock-N-Troll commented May 2, 2021

seanPhill commented Jun 25, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Rock-N-Troll Jul 1, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Zannick left a comment

Choose a reason for hiding this comment

seanPhill commented Dec 21, 2022

Rock-N-Troll commented Apr 20, 2021 •

edited

Loading

Rock-N-Troll commented Apr 26, 2021 •

edited

Loading

seanPhill commented Apr 29, 2021 •

edited

Loading

Rock-N-Troll Jul 1, 2022 •

edited

Loading