Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 33 commits into
base: master
Choose a base branch
from

Conversation

Rock-N-Troll
Copy link

@Rock-N-Troll Rock-N-Troll commented Apr 12, 2021

In an attempt to make the styling more uniform and manageable, I'm going to break-out all the in-line css from the .ui files and bring them into the main.css (and eventually main-dark.css for dark mode). Also relating to styling approach established in the thread of this pull request: #907

  • This will help with future development of screens and styling.
  • This will keep everything consistent and uniform and easier to maintain.
  • This will help lockdown which stylings affect which screens.

To-Do:

  • migrate css in src/qt/forms .ui files to main.css
  • migrate css in src/qt/veil/forms .ui files to main.css
  • refactor css where shared, should be separated, ordering of stylings, etc.
  • once everything is migrated, building dark mode should be a breeze

Next Issue:
Fix small gap above Transactions List

@Rock-N-Troll Rock-N-Troll mentioned this pull request Apr 12, 2021
11 tasks
@Rock-N-Troll
Copy link
Author

For fun, here's how the wallet looks with only the first set of .ui files complete. Certainly not right yet. Need to migrate the other .ui files first and then figure out where the duplicates and overridden values are.

image

@Rock-N-Troll
Copy link
Author

Rock-N-Troll commented Apr 13, 2021

src/qt/veil/forms remaining:
addressesmenu.ui
addresseswidget.ui
addressnewcontact.ui
addressreceive.ui
balance.ui
createpassword.ui
mainwindow.ui
receivewidget.ui
sendconfirmation.ui
settingsadvance.ui
settingsadvanceconsole.ui
settingsadvanceinformation.ui
settingsadvancenetwork.ui
settingsadvancepeers.ui
settingsbackup.ui
settingschangepassword.ui
settingsfaq.ui
settingsfaq01.ui
settingsfaq03.ui
settingsfaq04.ui
settingsfaq05.ui
settingsfaq06.ui
settingsfaq07.ui
settingsfaq08.ui
settingsfaq09.ui
settingsfaq10.ui
settingsfaq12.ui
settingsminting.ui
settingsmintingauto.ui
settingsmintingmanual.ui
settingsnetwork.ui
settingspreferences.ui
settingsrestore.ui
settingsrestorefile.ui
settingsrestoreseed.ui
settingswidget.ui
toast.ui
tooltipbalance.ui
transactiondetaildialog.ui
tutorialcreatewalletwidget.ui
tutoriallanguageswidget.ui
tutorialmnemoniccode.ui
tutorialmnemonicrevealed.ui
tutorialwidget.ui
unlockpassworddialog.ui
updateaddress.ui
veilstatusbar.ui

@Rock-N-Troll
Copy link
Author

Rock-N-Troll commented Apr 13, 2021

If my latest change to the css selectors by .ui file works, the massive headache of removing duplicates will not be necessary.

(It didn't work, but will only know after all .ui styling is applied to main.css and ordered BEFORE the pre-existing main.css styling)

After which, moving any of the previously existing styling in main.css to the bottom of the file below the migrated .ui stylings should account for the overriding functionality the .css file was performing for any of the existing styling.

@Rock-N-Troll
Copy link
Author

Rock-N-Troll commented Apr 14, 2021

It's evolving...ordering or syntax might be the issue here in the css.
Once I have all the styling out, I can see how best to get the correct stylings to be applied correctly

image

@Rock-N-Troll
Copy link
Author

Rock-N-Troll commented Apr 14, 2021

I've figured out the proper way to make the styling applied. Currently maybe correctly applied less than half of the stylings and will need to adjust as I pull some of the stylesheet applications out of the code and into the css file

image
image

@Rock-N-Troll
Copy link
Author

Rock-N-Troll commented Apr 15, 2021

image

image

image

Still WIP. Some stylings either misconfigured or not correctly ordered. Will investigate

@Rock-N-Troll
Copy link
Author

Almost there..

image

image

image

@Rock-N-Troll
Copy link
Author

Rock-N-Troll commented Apr 16, 2021

Latest commit fixes the settings display issue.

Issue was related to how scrollarea and it's parent frame need to be styled.

image

1issue down

@Rock-N-Troll
Copy link
Author

image

Transactions text no longer blue leaking from top pre-release build label

@Rock-N-Troll
Copy link
Author

Actual:
image

misaligned buttons and stealth address (will fix):
image

@Rock-N-Troll
Copy link
Author

Fixed. The issue is a blank address label takes up space
image
Committing...

@Rock-N-Troll
Copy link
Author

Rock-N-Troll commented Apr 18, 2021

Fixed a qt setting misconfiguration where the send coins selection model pop-up wasnt properly applying a transparent background.

@Rock-N-Troll
Copy link
Author

Now settings on hover are blue text which was overridden for some strange reason (which is better UX anyway)

image

@Rock-N-Troll
Copy link
Author

Ready for testing after latest commit 1a320bb
The tutorial windows/screens have not been fully tested.

@seanPhill
Copy link
Collaborator

All is looking good. Light mode.
Testing done.

@CaveSpectre11 CaveSpectre11 requested review from 4x13 and removed request for 4x13 April 20, 2021 23:40
@CaveSpectre11 CaveSpectre11 added Component: GUI Primarily related to the display of the user interface Dev Status: In Progress Someone is actively working on this issue. labels Apr 20, 2021
@Rock-N-Troll
Copy link
Author

Base work for refactoring is in this pull request, but additional dark mode is built into PR #933

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: GUI Primarily related to the display of the user interface Dev Status: In Progress Someone is actively working on this issue.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants