POC: Theme Singleton for color definitions and UI toggling #109
Conversation
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
To accomplish a proper demo of these components we first place our forms (ConnectionOptions and ConnectionSettings) into a StackLayout. The ContinueButton is then made to advance/rewind the stack. A PageIndicator is added to highlight the functionality of the demo.
This simplifies the OptionButton control.
To achieve a proper demo, the component is added to our StackLayout. Now that there are several components, introduce a toolbar with a textButton "< Back" that allows for rewinding the stack.
Represents the individual views for the onboarding wizard.
This demonstrates the visual aspect of the onboarding wizard. The stub page is given a StackView with the onboarding wizard as it's initial item. When the oboarding wizard is finished, the StackView is given a node component which starts node initialization and displays the current block count.
Holds color definitions and updates based on if in dark mode.
These icons are to be used in a button that toggles the UI theme.
Toggles the UI between light and dark mode.
promag
reviewed
Jan 10, 2022
|
Concept ACK (others can better evaluate the technical implementation). Can we use a similar Singleton approach for other variables (spacing, text styles, etc)? |
|
@GBKS yes, like |
|
Replaced by #114 |
hebasto
added a commit
that referenced
this pull request
May 25, 2022
9b9d198 qml: update UI elements to use Theme color definitions (jarolrod) e0225a0 qml: introduce Theme singleton (jarolrod) Pull request description: Replaces #109 This introduces a `Theme` singleton which contains color definitions so that colors can be used by name instead of by hex. Additionally, it adjusts color definitions depending on if the gui is in dark or light mode. Color definitions are based on our color palettes as defined in our [design system](https://www.figma.com/file/GaCoOSNHB2yMB9ThiDtred/Bitcoin-Core-App-Main?node-id=2643%3A83514):  A convenient demo of the changes can be found here: [theme singleton demo](https://github.com/jarolrod/gui-qml/tree/theme-singleton-demo) This demo adds a `ThemeToggleButton` so that we can toggle between light and dark. Uses the `moon` and `sun` icon from [BitcoinIcons](https://github.com/BitcoinDesign/Bitcoin-Icons). ACKs for top commit: shaavan: ACK 9b9d198 Tree-SHA512: 9d98d887d3254dbb8066e484a17fa3950a728e15ee8d70d372e5f883e3e0080031f04a66f00c65348ce0b90377d08a9db30a98edfdc40cd06b147d74f77cd8cb
hebasto
added a commit
that referenced
this pull request
Aug 29, 2022
6e0ee80 qml: reduce usage of ternaries in Theme file (Jarol Rodriguez) Pull request description: Reduces usage of ternaries in Theme.qml by abstracting definitions of colors and image urls into "Sets" and using the definitions from the appropriate set for the current dark mode setting. This is a late follow-up to this review by **promag**: #109 (comment) [](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/168) [](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/168) [](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/insecure_mac_arm64_gui.zip?branch=pull/168) [](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/168) ACKs for top commit: hebasto: ACK 6e0ee80, I have reviewed the code and it looks OK, I agree it can be merged. Tree-SHA512: 7ab4e6bd34386da2086aeb40c5520ffb401cbefa7be4510ce9654cf939ef0569661ba4a8a22752f16b8ce053ab07dbdd2a1d01dc62d159f808436ef070e94d02
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
based on #101, #102, #106
This introduces a
Themesingleton which contains color definitions so that colors can be used by name instead of by hex. Additionally, it adjusts color definitions depending on if the gui is in dark or light mode. Adds aThemeToggleButtonso that we can toggle between light and dark. Uses themoonandsunicon from BitcoinIcons.Color definitions are based on our color palettes as defined in our design system:
Current views are:
