qt: Some UI fixes and improvements#3500
Merged
Merged
Conversation
- Introduced new images for QCheckBox and QRadioButton - Make use of Hover/Pressed/Disabled/Indeterminate states - Use customized Checkboxes and Radio-Buttons in CoinControlWidget
This looks weird in the dark theme. Will introduce new arrows here.
- Added new arrow images - Make use of Hover/Pressed/Disabled states for QAbstractSpinBox and QComboBox - Use custom arrows in QHeaderView - Use custom arrows in QTreeWidget branch selectors
This way all windows will have the same scrollbars and not only the main window.
Use of margin here lead to a 2px vertical line at the left edge cause of the background below.
background-image lead to not showing the arrows here because it obviously was scaled incorrect with the higher resolution of the image files.
UdjinM6
reviewed
May 26, 2020
UdjinM6
left a comment
UdjinM6
left a comment
There was a problem hiding this comment.
Nice! 👍
Looks good on mac and windows. There is one (potential) issue though.
PastaPastaPasta
requested changes
May 28, 2020
Member
PastaPastaPasta
left a comment
PastaPastaPasta
left a comment
There was a problem hiding this comment.
one nit. Will actually test soon
PastaPastaPasta
approved these changes
Jun 3, 2020
gades
pushed a commit
to cosanta/cosanta-core
that referenced
this pull request
Feb 22, 2022
* qt: Updated loadStylesheet and added general.css for shared styles * qt: Customized QRadioButton and QCheckBox - Introduced new images for QCheckBox and QRadioButton - Make use of Hover/Pressed/Disabled/Indeterminate states - Use customized Checkboxes and Radio-Buttons in CoinControlWidget * qt: Removed qtreeview_selected image This looks weird in the dark theme. Will introduce new arrows here. * qt: Redesigned arrows and their usage - Added new arrow images - Make use of Hover/Pressed/Disabled states for QAbstractSpinBox and QComboBox - Use custom arrows in QHeaderView - Use custom arrows in QTreeWidget branch selectors * qt: Slightly increased checkboxes and radio buttons * qt: Move the scrollbars css loading into loadStyleSheet This way all windows will have the same scrollbars and not only the main window. * qt: Use padding instead of margin for QTreeWidget::branch styles Use of margin here lead to a 2px vertical line at the left edge cause of the background below. * qt: Use border-image for the scrollbar arrows and adjust the size. background-image lead to not showing the arrows here because it obviously was scaled incorrect with the higher resolution of the image files. * qt: Add missing grey arrows and make use of disabled states of scrollbar arrows * qt: Adjust dashThemeActive and also use it in BitcoinGUI::createToolBars * qt: Fixed copyright year in general.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request includes some updates to the UI.
I noticed there are some places where default OS elements are used. Overall i guess we intend to have exactly the same look and feel for our Light/Dark theme no matter what OS you are using? At least thats how i would prefer to have it.. other opinions? 😄
And also some places where we just have bugs.. I decided to start fixing this stuff and thats the first PR for that. If this ends up being accepted i will work on more UI changes i have in mind in the spare time 🙂
Note: I only tested this changes on macOS so far. Will do tests for windows and linux once gitlab-ci presents me the binaries. But i also want to ask for more windows/linux testing from others here!
3fb6da7 introduces a
general.cssfile which should be used to put in layout/style changes shared by light and dark mode. Therefor i modified theGUIUtil::loadStyleSheetto first load thegeneral.cssif eitherDarkorLighttheme is selected. The goal is thatlight.cssanddark.csswill later only contain color changes. This will come in a later pull request.51ac6ac moves the loading of the
scrollbars.cssintoGUIUtil::loadStyleSheetto have all css loading in the same place. Also before thescrollbars.csswas only applied to main window's stylesheet..means we had non-customised scrollbars in other windows. If that was by any purpose i will revert this one.. so please cry here if so 😅9d68ce7 Adds new images for checkboxes and radio-buttons with differentiation between the states: Normal, Hover, Pressed, Indeterminate and Disabled. Also it brings custom radio-buttons and checkboxes to the coincontrol dialog where we had OS defaults before, see images below.
c3fc37f Adds new images for arrows for the states Normal, Hover, Pressed. Also there are two grey ones used for QHeaderView and one of them for the disabled state. It also (together with
6e3b2ea) fixes the issue with the branch arrows in the CoinControl which you can find in the images below.
Examples
Here you can see the CoinControl in the worst case i could force before and after. The "worst case" was just opened the CoinControl with not clicking the radio button in the top. This lead it to having the system accent color (green in my case). Selecting some inputs and select a child entry. To be fair the checkboxes look only that weird if the window has no focus but even if it has focus they are OS defaults.
And here as another example the send screen where you can see that the disabled elements are not greyed out, that the arrows are partly blurry or that there are OS default radio-buttons.