LBRYCommunity/lbry-desktop

Fork 0

Settings Page layout changes #6821

Merged

infinite-persistence merged 36 commits from ip/settings.page into master

2021-08-23 17:46:44 +02:00

infinite-persistence commented

2021-08-09 08:04:39 +02:00

(Migrated from github.com)

Test

https://kp.odysee.com

Issue

Closes #6363 split settings into separate subareas with navigation
Closes #6395 Advanced settings not persisting
- "Advanced settings" page no longer exists.

Comments

I left the individual commits unsquashed to hopefully help the review. Probably easiest to go through each commit one-by-one.
For medium and small screen layout, the navigation is hidden for now. I think this is fine since we are now showing all settings (scroll) and the total settings is quite small. If needed, we can probably display the navigation as a Tab at the top for these layouts.

Debt

~~"Creator Settings" remained in the old style. Will update the style together in an upcoming PR for "min tips".~~

Notes

https://www.notion.so/lbry/Settings-Page-Debt-d07a232a03fa469e8bae47ce2bf9e307

## Test - https://kp.odysee.com ## Issue - Closes [#6363 split settings into separate subareas with navigation](https://github.com/lbryio/lbry-desktop/issues/6363) - Closes [#6395 Advanced settings not persisting ](https://github.com/lbryio/lbry-desktop/issues/6395) - "Advanced settings" page no longer exists. ## Comments - I left the individual commits unsquashed to hopefully help the review. Probably easiest to go through each commit one-by-one. - For medium and small screen layout, the navigation is hidden for now. I think this is fine since we are now showing all settings (scroll) and the total settings is quite small. If needed, we can probably display the navigation as a Tab at the top for these layouts. ## Debt - <strike>"Creator Settings" remained in the old style. Will update the style together in an upcoming PR for "min tips". </strike> ## Notes https://www.notion.so/lbry/Settings-Page-Debt-d07a232a03fa469e8bae47ce2bf9e307

❤️ 1

jessopb (Migrated from github.com) reviewed 2021-08-09 08:04:39 +02:00

infinite-persistence commented

2021-08-19 17:04:29 +02:00

(Migrated from github.com)

2cd691d to 2b53c74 (ready for review)

Notes: https://www.notion.so/lbry/Settings-Page-Debt-d07a232a03fa469e8bae47ce2bf9e307

### 2cd691d to 2b53c74 (ready for review) Notes: https://www.notion.so/lbry/Settings-Page-Debt-d07a232a03fa469e8bae47ce2bf9e307

tzarebczan commented

2021-08-19 22:57:35 +02:00

(Migrated from github.com)

~~the drop-down carrot seems too close to the right side of the box~~
- KP: Moved this to #6927 Drop-down caret too close to the edge. The icon in <select> is browser-dependent, and I recall it was troublesome getting it to work in all browsers, or at all. Might consider rolling our own <select> or use a 3rd-party one like Reach. Or maybe btzr has a solution.
This page looks a bit strange to me with some of the grouped settings (tip) and dual pane (Similar to the other dual pane on system settings). Maybe if we added help test under each category and made the Tip heading > "Tipping with Comments" to fill in the heading (+ some simple help text).
Bank accounts listed twice
Center all pages? This should also say "Add a card" - the heading changes.
navigation steps count when switching settings pages, so the Back behavior is strange - goes back through each. Back should always go back to the previous non settings page right?

- [X] <strike>the drop-down carrot seems too close to the right side of the box</strike> - _KP: Moved this to `#6927 Drop-down caret too close to the edge`. The icon in `<select>` is browser-dependent, and I recall it was troublesome getting it to work in all browsers, or at all. Might consider rolling our own `<select>` or use a 3rd-party one like Reach. Or maybe btzr has a solution._ - [x] This page looks a bit strange to me with some of the grouped settings (tip) and dual pane (Similar to the other dual pane on system settings). Maybe if we added help test under each category and made the Tip heading > "Tipping with Comments" to fill in the heading (+ some simple help text). - <img src="https://user-images.githubusercontent.com/8120721/130142150-da835b63-f34d-41d0-967d-ec462116df3e.png" width="300"> - [x] Bank accounts listed twice - [x] Center all pages? This should also say "Add a card" - the heading changes. - <img src="https://user-images.githubusercontent.com/8120721/130142405-195c190c-dc30-49e3-a9ae-b7102588f53c.png" width="300"> - <img src="https://user-images.githubusercontent.com/8120721/130142427-030274fe-84e6-4c16-9814-32ebde8a5b67.png" width="300"> - [x] navigation steps count when switching settings pages, so the Back behavior is strange - goes back through each. Back should always go back to the previous non settings page right?

jessopb (Migrated from github.com) reviewed 2021-08-20 15:51:49 +02:00

static/app-strings.json

jessopb (Migrated from github.com) commented

2021-08-19 22:15:55 +02:00

\n in i18n?

ui/component/settingAppearance/view.jsx

jessopb (Migrated from github.com) commented

2021-08-19 22:18:18 +02:00

i18n

infinite-persistence (Migrated from github.com) reviewed 2021-08-21 02:35:48 +02:00

static/app-strings.json

infinite-persistence (Migrated from github.com) commented

2021-08-21 02:35:48 +02:00

Technically supported in Transifex, where a visual indicator will be there to remind the user to break. They can chose whether to break or not based on their language style.

Technically supported in Transifex, where a visual indicator will be there to remind the user to break. They can chose whether to break or not based on their language style. <img src="https://user-images.githubusercontent.com/64950861/130304961-fbc8f949-2c0c-4a1d-ba04-97b48f94e1cc.png" width="200">

infinite-persistence commented

2021-08-22 13:13:07 +02:00

(Migrated from github.com)

2b53c74 to fc4de99

Changed the "Back" button behavior from link-style (ala Chrome) to stack style.
Removed double "Bank Accounts" (merge error).
Moved "Homepages" to the top in [Appearance].
Switched from multi-pane to mult-row style per Tom's feedback.
- The multi-pane version aimed to provide visual separation between label and value (left is always label, right is always value), but agree that it could be too clamped for radio buttons.
Added extra top-margin when navigating to a sub-section.

### 2b53c74 to fc4de99 - Changed the "Back" button behavior from link-style (ala Chrome) to stack style. - Removed double "Bank Accounts" (merge error). - Moved "Homepages" to the top in [Appearance]. - Switched from multi-pane to mult-row style per Tom's feedback. - The multi-pane version aimed to provide visual separation between label and value (left is always label, right is always value), but agree that it could be too clamped for radio buttons. - <img src="https://user-images.githubusercontent.com/64950861/130352866-e82b0830-2285-4243-8bb4-f62d39caa8b6.png" width="600"> - Added extra top-margin when navigating to a sub-section.