qt: Backport UI redesign to v0.16.x#3684
Merged
Merged
Conversation
…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 <UdjinM6@users.noreply.github.com> * 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 <UdjinM6@users.noreply.github.com>
* qt: Replaced QAction with QToolButton for BitcoinGUI toolbar buttons. This allows setting a size policy for the toolbar buttons so that they are stretched over the toolbar and resize on window size changes. * qt: Give the BitcoinGUI's toolbar more style * qt: Give the toolbar logo a higher resolution This also removes the blue logo because its not longer used. * qt: Restore the traditional themes toolbar previous styles and logo
qt: Implement application wide font management
* qt: Disable macOS system focus rectangles for dash themes The focus rects drawn by macOS are in the color the user selected in the OS settings as selection color. This just doesn't always fit into the coloring of the dash specific themes. * Apply review suggestion Co-authored-by: UdjinM6 <UdjinM6@users.noreply.github.com> Co-authored-by: UdjinM6 <UdjinM6@users.noreply.github.com>
* qt: Change themes path from ":themes" to ":css" Required for the introduction of a custom css directory which will happen with the follow-up commits. * qt: Renamed trad.css to traditional.css * qt: Add -custom-css-dir startup parameter This allows to load a custom directory as css directory. The custom directory currently needs to have the files: - general.css - dark.css - light.css - traditional.css - scrollbars.css
* qt: Set parents properly to inherit css and remove redundant loading The stylesheet is inherited from the parent so its enough to set it for the main window and use this as parent for all other windows. Except for the ShutdownDialog. This needs to have its own stylesheet set because we can't have the main window as parent of the ShutdownDialog. * qt: Adding Qt::Window flag to the constructor of RPCConsole This is required now as RPCConsole does not longer show as extra window with a parent set (For stylesheet inheritance). * qt: Add UI debug mode (-debug-ui) If this mode is enabled the content of the css files will become pushed to the UI if there were any changes made to the stylesheet files in the custom css directory. It also forces some UI elements to show up which are actually only shown under special conditions (e.g. watch balance labels). Its required to set a custom css directory with -custom-css-dir to enable this. * qt: Adjust the description of -debug-ui
* qt: Call GUIUtil::loadFonts earlier. Before there is any usage of the font helpers. * Apply review suggestion Co-authored-by: PastaPastaPasta <6443210+PastaPastaPasta@users.noreply.github.com> Co-authored-by: PastaPastaPasta <6443210+PastaPastaPasta@users.noreply.github.com>
* qt: OptionsDialog - Replaced QTabBar with QStackedWidget This allows to stretch the buttons in the dialog window. * qt: RPCConsole - Replaced QTabBar with QStackedWidget This allows to stretch the buttons in the dialog window. * qt: SignVerifyMessageDialog - Replaced QTabBar with QStackedWidget This allows to stretch the buttons in the dialog window. * qt: Add styles for tabbar replacement buttons
* qt: Update theme colors in GUIUtil - Adds ThemedColor::GREEN - Changes ThemedColor::NEGATIVE to ThemedColor::RED - Color adjustments to align with css colors * qt: Give links a more eye friendly blue * qt: Use themed colors in net traffic graph * qt: Use themed styles/color in overview page * qt: Use themed stylesheets in Intro * qt: Modified QR code image painting to match the theme colors
* qt: User border-image in place of image For some reason image produced weird outputs on some resolution screens. * qt: Fix layout issues in TransactionView * qt: Fix layout issues in OverviewPage * qt: Replace transparent with #00000000 in stylesheets * qt: Use #a84832 as red where possible. This includes css files and any color usage in code. * qt: Finetune QPushButton style * qt: Customized QSlider (used in the Debug window -> NetworkTraffic) * qt: Finetune QToolbar style * qt: Customized QProgressBar * qt: Customized QCalendarWidget * qt: Finetune QStatusBar style - Give the progress label a name as css reference - Set min height and margins * qt: Finetune QMenu style - Set a light rounded border - Color for disabled items - Color/Style for seperator - Give the items padding * qt: Customized QGroupBox * qt: Customized QToolTip * qt: Give inputs widgets a proper hover/focus/selected/disabled style * qt: Finetune SendCoinsDialog - Add light line below the coincontrol frame - Add light line above fee frame - Increase header font size - Remove button layout changes of CoinControl button - Fix Layout/Alignment of balance labels * qt: Customized RPC console's autocompletition popup * qt: Add stylesheets to Intro This is the datadir selection dialog. * qt: OptionsDialog - Give the reset button the "light button" style * qt: Finetune shared styles in general.css * qt: Finetune coloring in dark.css * qt: Finetune coloring in light.css * More fixes for traditional.css No text colors, s/transparent/#00000000/ * qt: Run update-css-files.py Co-authored-by: UdjinM6 <UdjinM6@users.noreply.github.com>
* qt: Set the default theme properly * qt: Keep track of disabled rects for macOS This allows enabling them again on theme changes * qt: Introduce runtime theme changes Runtime theme changes means no more client restart required if the theme gets changed in the options dialog. In the RPCConsole's StyleChange event make sure following things are still correct after a runtime theme change: - Hide prompt icon for dash themes in rpc console if dash theme gets activated. - Clear rpc console on theme changes to make sure fonts/sizes/colors are correct.
* qt: Remove min-width of BitcoinAmountField in ReceiveCoinsDialog * qt: Add BitcoinUnits::data(const int &row, int role) Make its data also accessible int, not only by QModelIndex. * qt: Adjust BitcoinAmountField - AmountSpinBox (QAbstractBox) is now called AmountLineEdit (QLineEdit) - Replaced the AmountSpinBox and the QValueComboBox with just an AmountLineEdit - Adjusted min-size hint calculation - Increased maximum width - Right-Align text - Removed obsolete code * qt: Removed leftover from legacy BitcoinAmountField * qt: Move amount field into a Hlayout with a spacer (ReveiveCoinsDialog) Make sure it does not get stretched above the in AmountLineEdit::minimumSizeHint() calculated size. * qt: Removed obsolete workaround related to BitcoinAmountField Its fixed now with the change to a normal line edit.
* qt: Add platform specific css loading to GUIUtil::loadStyleSheet This commit leads to GUIUtil::loadStyleSheet treating css code between <os="<os_list>"> and </os> different. It will only become added for operating systems provided in the list of the sections start tag. There may be multiple entries per section. Possible entries: - macosx - windows - other <os_list> must be a combination of the three options above separated by comma like in "windows,macosx". Its ok to have multiple <os="...">...</os> sections in a file with arbitrary OS combinations. They will all become added to the end of the file though. Means even putting an <os> section in the top of the file would become appended to the end of the file during loading which should be kept in mind when adding sections to avoid unexpected overwriting. Example ------------------------------------------------------------------------ <os="macosx, windows, other"> /* Example section to add styles for all operating systems Remove any to exclude it. */ </os> * Respect `-uiplatform` when matching for os-specific styles * Format osStyleExp to make it a bit easier to see groups Co-authored-by: UdjinM6 <UdjinM6@users.noreply.github.com>
* qt: Draw a border around net traffic graph * qt: ReceiveRequestDialog - Improve QR code image - Fix issue with bluriness - Refine sizing/layout of QR code and address - Adjust coloring to match the themes * qt: Give the TransactionView's instantsendWidget a name Required to access it in css * qt: Rename conflicting label in SendCoinsDialog - Was named the same as the the label in EditAddressDialog so it couldn't be accessed properly in css * qt: Give the TransactionView's search field the first focus on startup * qt: Some updates to the PrivateSend widget on the OverviewPage - Hide denom labels if inactive - Enable wordwrap for denom label - Add some spacer - Make sure it gets its basic initialization on startup * qt: Fix some layout issues in SendCoinsDialog's UI file. - Added some margins for fee selection radio buttons to align them centered to their options - Removed a weird placed spacer * qt: Fix vertical alignment of the two balance labels in SendCoinsDialog * qt: Add newline in textedit of receiverequest * qt: OptionsDialog - Hide override hint if there is nothing overridden * qt: Allow stylesheet modifications for auto completition popup - Inheritance doesn't work here obviously because of QCompleter is parent of the popup - QStyledItemDelegate delegate is required. Without its not possible to access `::item` selectors from css. * qt: Make the progress label in the status bar accessible in css * qt: Update weekend colors of QCalendarWidget on style changes Its obviously not possible to do this in stylesheets thats why i added this as workaround. * qt: Load stylesheets for Intro This is the datadir selection dialog. * Drop labelPrivateSendLastMessage * Add a space Co-authored-by: PastaPastaPasta <6443210+PastaPastaPasta@users.noreply.github.com> Co-authored-by: UdjinM6 <UdjinM6@users.noreply.github.com> Co-authored-by: PastaPastaPasta <6443210+PastaPastaPasta@users.noreply.github.com>
* qt: Add "Appearance Tab" to OptionsDialog and move "Theme" into it * qt: Add "Font scale" settings to Appearance Tab of OptionsDialog Allows to scale the font in the same way like with -font-scale. * qt: Add font weight settings to Appearance tab of OptionsDialog Allows to set the weight for normal and bold text * qt: Add font family setting to Appearance tab of OptionsDialog Allows to choose between system default font or montserrat * qt: GUIUtil - Maintain a map with supported weights for all fonts. * qt: Introduce AppearanceWidget A widget which just wraps all appearance related settings. Also replaces Appearance settings in OptionsDialog with the introduced widget. * qt: Introduce initial appearance setup dialog This will pop up the first time the user starts the DashCore version with the new UI changes. * qt: Load font related settings in GUIUtil::loadFonts * qt: Make osDefaultFont global in GUIUtil to fix getFont() Before getFont(FontFamily, ...) wasn't always able to return the correct font without the requested font family beeing set as application font upfront. * qt: Improve supported weight helpers Add conversion helpers. and let all of them depend on the currently selected font. * qt: Default weights based on supported if not all weights are supported For SystemDefault only because Montserrat has all supported weights. * qt/test: Fix GUI tests * Store normal/bold font GUI settings as "pure" (not "supported") values * Rename supportedWeighti(To/From)Arg to supportedWeight(To/From)Index to better match the logic and avoid confusion with weight(To/From)Arg functions Co-authored-by: UdjinM6 <UdjinM6@users.noreply.github.com>
* qt: Add platform specific css style for scrollbars This disabled scrollbars.css loading and adds a "windows,other" section in general.css, dark.css and light.css where it adds customizations for scrollbars in each theme. * qt: Remove scrollbar.css and all its remaining mentions * qt: Run update-css-files.py
* qt: Add PlatformStyle::Icon + only show icons on menu if enabled Now icons are disabled everywhere if imagesOnButtons is disabled. There were still buttons on each menu item. * qt: Disable all PlatformStyle related changes * qt: Drop PlatformStyle
UdjinM6
requested changes
Sep 3, 2020
UdjinM6
left a comment
UdjinM6
left a comment
There was a problem hiding this comment.
Found 2 minor issues so far, see below
xdustinface
force-pushed
the
backport-ui-redesign
branch
from
e619812 to
f4ea4ec
Compare
* qt: Add more placeholder in ReceiveCoinsDialog * qt: Add placeholder for filter line edit in MasternodeList * qt: Add more placerholder in SignVerifyMessageDialog * qt: Removes a dot * qt: Adjust placeholder phrasing in ReceiveCoinsDialog * Apply suggestions from code review * qt: Align wording of placeholders with the corresponding tooltip
…3623) This reverses force logic of `GUIUtil::loadTheme` to not force by default and instead forces it explicit in appearance widgets call. Due to `fForce` beeing default the ui debug timer wasn't started properly because there was no call of `GUIUtil::loadStylesheet` without `fForce=true` which is a requirement to start the debug timer.
* qt: Splashscreen redesign - Make it theme related dark or light - Fixes bluriness issues - Fixes issues with overlapping init messages at the bottom of the splashscreen - Give it a cleaner look -> Removed copyrights and prefix `Version v` of the version string * Do not rotate colors of the splash image * Adjust logo color based on the current theme for all networks * Draw network-specific text as a "badge" with a network-specific color * Introduce `NetworkStyle::rotateColor()` helper * Introduce badge color in NetworkStyle and use it in SplashScreen's ctor Replaces the getTrayAndWindowIcon hack * refactor loops Co-authored-by: UdjinM6 <UdjinM6@users.noreply.github.com>
xdustinface
force-pushed
the
backport-ui-redesign
branch
from
f4ea4ec to
0969c2d
Compare
PastaPastaPasta
approved these changes
Sep 4, 2020
Member
PastaPastaPasta
left a comment
PastaPastaPasta
left a comment
There was a problem hiding this comment.
utACK, did a quick review over each commit making sure they changed the expected files
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.
Still missing #3574 but thats just asset updates and you can already give the rest a review until thats ready and merged.