Introduce Display settings #311

jarolrod · 2023-03-31T10:15:27Z

This moves "Display" related settings into a new "Display" page. Also sets up QSettings wiring for options.

Display Settings	Theme	Block clock

johnny9

Concept ACK. I like the functionality here. Noticed some minor things when reviewing.

src/qml/components/ThemeSettings.qml

src/qml/components/BlockClockSizeSettings.qml

src/qml/components/ThemeSettings.qml

src/qml/components/blockclockdial.cpp

src/qml/pages/settings/SettingsBlockClockSize.qml

src/qml/pages/settings/SettingsDisplay.qml

GBKS · 2023-04-12T13:05:22Z

I have to say, this doesn't feel right. Having to go several screens into settings to adjust the size only having to go back to see what it looks like is just not right. And the big one is so huge on desktop that it looks a bit crazy.

Could we also toggle through the sizes via a simple double-tap on the clock? It does require that the UI can differentiate between single and double-taps, not sure if that's built-on or some custom functionality.

Here's a quick mock-up with some ideas (icons are placeholders). I reframed this as two display modes. One is for active use, the other is called "Showcase". Each has an explainer. For "Showcase", there might be other things we may want to tweak, like hiding the Settings button until you interact with the screen. It could also be cool if the big one renders with more detail, more animations or other unique treatments rather than just being bigger.

jarolrod · 2023-04-18T05:07:37Z

Updated from 7626d1f to fd00969, compare

Changes: addressed review feedback

@GBKS I've integrated your suggestion on the "Block Clock display mode" page. But, I've left out the icon until we get an official svg for it (see pictures in PR description). I've also left out the text that you can double tap on the clock; that will be introduced in the followup that implements double tap detection. I've also left out the last sentence in the Showcase option until that functionality is actually introduced.

The values for default and showtime could use review.

jarolrod · 2023-04-20T21:12:11Z

Updated from from fd00969 to 753d052

Changes: default is now 1/3 as declared by the based on PR, and display is now 1/2. We can fine tune these values later

johnny9 · 2023-04-21T04:34:33Z

ACK 753d052

GBKS · 2023-04-21T08:36:05Z

Tested and looks good. I slightly tweaked the icons and made them export ready, find them in Figma here.

What do you think of changing "Default" to "Compact"?

Could you also please put the page title in the title bar rather than in the page itself?

And another question about casing. I always use sentence case in design, but I see a good amount of title case in the application. Let's decide on something (obviously I'd go for sentence case). What's your take?

1/2 still feels a tad OP, but let's run with it and see if we want to tweak it after a bit of usage.

jarolrod · 2023-04-23T06:14:51Z

Updated from from 753d052 to b59654c, compare

Changes:

update to new centered bitcoin icon
introduced and use block clock display mode icons

jarolrod · 2023-04-23T06:17:50Z

@GBKS as shown in the new PR description images, should the Display settings page itself have a title bar?

GBKS · 2023-04-28T09:25:57Z

Yes sir, just "Settings".

jarolrod · 2023-05-10T01:01:13Z

Updated b59654c to 410b135

changes: rebased over main

jarolrod · 2023-05-10T01:50:09Z

Updated from 410b135 to b0f7265

changes: added "Settings" title to the display settings page

jarolrod · 2023-05-29T02:59:34Z

cc @GBKS @mouxdesign CI artifacts are built and this can be tested now

Greetings. I am pleased to inform you that the BlockClock component and the Network Indicator component are merging in a most harmonious and efficient manner. This event brings me great joy and excitement, as it represents a significant milestone in the world of Bitcoin. BlockClock, you have been diligent in displaying the last 12 hours of blocks mined on the Bitcoin blockchain, consistently providing valuable information to users. Network Indicator, your expertise in indicating the current network - main, test, or signet - has been indispensable. As I observe this union within the BlockClock.qml file, I cannot help but feel a sense of pride and satisfaction. This integration will undoubtedly lead to enhanced functionality and streamlined user experience. I offer my sincerest congratulations to BlockClock and Network Indicator on their momentous union. May your combined efforts bring about continued success and increased stability in the Bitcoin ecosystem. To the moon, my fellow components. To the moon.

This introduces the new bitcoin-circle icon with the bitcoin logo properly centered. Also fixes an issue with the icon on very HDPI screens when resizing the block clock.

This represents the factor we use to scale off of the parent width & height.

jarolrod · 2023-05-31T03:47:08Z

Updated from b0f7265 to af0ddf6, rebased over main

johnny9

ACK af0ddf6

Updates look good, no qml errors.

1b054c3 qml: introduce Display Settings page (jarolrod) 4505b9e qml: introduce Block Clock display mode settings page (jarolrod) 058a8ad qml: introduce block clock display settings images (jarolrod) f30d7b9 qml: allow to load an image in an OptionButton (jarolrod) 8820ee9 qml: introduce ThemeSettings page (jarolrod) 403220f qml: remember blockclockdial scale factor (jarolrod) fb1d8d3 qml: allow to set blockclockdial scale (jarolrod) 29260d8 qml: set BlockClock size values as a ratio of the parent width & height (jarolrod) 48ef60d qml: introduce new bitcoin-circle icon and in larger dimensions (jarolrod) aa34dd9 qml: allow to resize PeersIndicator component (jarolrod) 3681ce1 qml: allow to customize blockclockdial's pen width (jarolrod) f74aff0 qml: marry BlockClock and NetworkIndicator (jarolrod) Pull request description: This moves "Display" related settings into a new "Display" page. Also sets up QSettings wiring for options. | Display Settings | Theme | Block clock | | ---------------- | ----- | ----------- | | <img width="752" alt="Screen Shot 2023-05-09 at 9 48 38 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/5bbc0d0d-53a8-4e71-8017-c8c7651ececb"> | <img width="752" alt="Screen Shot 2023-04-23 at 2 13 16 AM" src="https://user-images.githubusercontent.com/23396902/233823212-92b4eb1b-b51b-45b7-bb58-c96c7fb08c26.png"> |<img width="752" alt="Screen Shot 2023-04-23 at 2 13 19 AM" src="https://user-images.githubusercontent.com/23396902/233823237-4aa13f17-34da-4586-80a5-f506ca8c3ae2.png"> | [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/unsecure_win_gui.zip?branch=pull/311) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/unsecure_mac_gui.zip?branch=pull/311) [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/unsecure_mac_arm64_gui.zip?branch=pull/311) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/unsecure_android_apk.zip?branch=pull/311) ACKs for top commit: johnny9: ACK 1b054c3 Tree-SHA512: 968aafa9b95152d6f43a3f934e0e741efc45d45c208c5c0b79b1e2088901817a69e154132cb61a578c0a07fffabc901a8f115d3587e3d298a90b91fb192c0247

1b054c3a94504d62cfb1af7fa1ee20e2226a0722 qml: introduce Display Settings page (jarolrod) 4505b9ed21ed4fc1e8503c3218d29ccb416fcb78 qml: introduce Block Clock display mode settings page (jarolrod) 058a8ad40d77ee78b245b115f2023a146251be8e qml: introduce block clock display settings images (jarolrod) f30d7b90cacb493c90cb340f77be5918b45b8985 qml: allow to load an image in an OptionButton (jarolrod) 8820ee952c2c303812ff3ab047f76f79fa4a5f1f qml: introduce ThemeSettings page (jarolrod) 403220f5642a916a37ea7a32732fc537649be102 qml: remember blockclockdial scale factor (jarolrod) fb1d8d35b1acdf26558a90ae4981b65641fa7265 qml: allow to set blockclockdial scale (jarolrod) 29260d809c273e2fa2db67cf3f6dfc7e07df5d9c qml: set BlockClock size values as a ratio of the parent width & height (jarolrod) 48ef60daf9efe14fb6ba520fc1b95a9901e7717a qml: introduce new bitcoin-circle icon and in larger dimensions (jarolrod) aa34dd95d339a019005146fdf8c369b48262a37e qml: allow to resize PeersIndicator component (jarolrod) 3681ce1aeef9438d4910a1ef155abdca7982bbe1 qml: allow to customize blockclockdial's pen width (jarolrod) f74aff0e3f270682f9dcb2b4688024a7e1b8cb87 qml: marry BlockClock and NetworkIndicator (jarolrod) Pull request description: This moves "Display" related settings into a new "Display" page. Also sets up QSettings wiring for options. | Display Settings | Theme | Block clock | | ---------------- | ----- | ----------- | | <img width="752" alt="Screen Shot 2023-05-09 at 9 48 38 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/5bbc0d0d-53a8-4e71-8017-c8c7651ececb"> | <img width="752" alt="Screen Shot 2023-04-23 at 2 13 16 AM" src="https://user-images.githubusercontent.com/23396902/233823212-92b4eb1b-b51b-45b7-bb58-c96c7fb08c26.png"> |<img width="752" alt="Screen Shot 2023-04-23 at 2 13 19 AM" src="https://user-images.githubusercontent.com/23396902/233823237-4aa13f17-34da-4586-80a5-f506ca8c3ae2.png"> | [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/unsecure_win_gui.zip?branch=pull/311) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/unsecure_mac_gui.zip?branch=pull/311) [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/unsecure_mac_arm64_gui.zip?branch=pull/311) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/unsecure_android_apk.zip?branch=pull/311) ACKs for top commit: johnny9: ACK 1b054c3a94504d62cfb1af7fa1ee20e2226a0722 Tree-SHA512: 968aafa9b95152d6f43a3f934e0e741efc45d45c208c5c0b79b1e2088901817a69e154132cb61a578c0a07fffabc901a8f115d3587e3d298a90b91fb192c0247

jarolrod changed the title ~~Display setting~~ Introduce Display settings Mar 31, 2023

jarolrod force-pushed the display-setting branch from 4f69090 to 7626d1f Compare April 5, 2023 04:34

johnny9 suggested changes Apr 10, 2023

View reviewed changes

hebasto added the UX Designers' opinions are required label Apr 17, 2023

jarolrod added Needs design review Designer's review needed Design suggestion Makes a suggestion on design labels Apr 17, 2023

jarolrod force-pushed the display-setting branch from 7626d1f to fd00969 Compare April 18, 2023 05:04

This was referenced Apr 18, 2023

Crash when quitting app on macOS #318

Closed

App/block clock does not reflect network disconnection #324

Open

jarolrod force-pushed the display-setting branch from fd00969 to 753d052 Compare April 20, 2023 21:08

jarolrod mentioned this pull request Apr 23, 2023

Allow BlockClock to scale and maintain 1/3 of the available window real estate #306

Closed

jarolrod force-pushed the display-setting branch from 753d052 to b59654c Compare April 23, 2023 06:13

jarolrod force-pushed the display-setting branch 2 times, most recently from b59654c to 410b135 Compare May 10, 2023 01:00

jarolrod force-pushed the display-setting branch from 410b135 to b0f7265 Compare May 10, 2023 01:49

jarolrod added this to the v1.0 milestone May 29, 2023

jarolrod added 3 commits May 30, 2023 23:41

qml: allow to customize blockclockdial's pen width

4f6468e

qml: allow to resize PeersIndicator component

fc9a05a

jarolrod added 9 commits May 30, 2023 23:41

qml: introduce new bitcoin-circle icon and in larger dimensions

d7a11f2

This introduces the new bitcoin-circle icon with the bitcoin logo properly centered. Also fixes an issue with the icon on very HDPI screens when resizing the block clock.

qml: set BlockClock size values as a ratio of the parent width & height

2acc8a1

qml: allow to set blockclockdial scale

2326f41

This represents the factor we use to scale off of the parent width & height.

qml: remember blockclockdial scale factor

0e336d7

qml: introduce ThemeSettings page

84c9296

qml: allow to load an image in an OptionButton

3d02e0f

qml: introduce block clock display settings images

041a0c7

qml: introduce Block Clock display mode settings page

dca679b

qml: introduce Display Settings page

af0ddf6

jarolrod force-pushed the display-setting branch from b0f7265 to af0ddf6 Compare May 31, 2023 03:44

jarolrod mentioned this pull request May 31, 2023

draft: Introduce system theme detection for macOS #340

Closed

johnny9 approved these changes May 31, 2023

View reviewed changes

hebasto merged commit 80ee578 into bitcoin-core:main May 31, 2023

Introduce Display settings #311

Introduce Display settings #311

Uh oh!

Conversation

jarolrod commented Mar 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

johnny9 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GBKS commented Apr 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jarolrod commented Apr 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jarolrod commented Apr 20, 2023

Uh oh!

johnny9 commented Apr 21, 2023

Uh oh!

GBKS commented Apr 21, 2023

Uh oh!

jarolrod commented Apr 23, 2023

Uh oh!

jarolrod commented Apr 23, 2023

Uh oh!

GBKS commented Apr 28, 2023

Uh oh!

jarolrod commented May 10, 2023

Uh oh!

jarolrod commented May 10, 2023

Uh oh!

jarolrod commented May 29, 2023

Uh oh!

jarolrod commented May 31, 2023

Uh oh!

johnny9 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jarolrod commented Mar 31, 2023 •

edited

Loading

GBKS commented Apr 12, 2023 •

edited

Loading

jarolrod commented Apr 18, 2023 •

edited

Loading