ParaTime picker #426

buberdds · 2023-05-23T21:02:25Z

PR covers only desktop version

~~Need to go through this with Don tomorrow + there are some missing descriptions in lang files.~~ This is done

github-actions · 2023-05-23T21:02:39Z

Deployed to Cloudflare Pages

Latest commit:	`8241cb32ccb9c57cc72ea3b4e5711a3d343d2faf`
Status:	✅ Deploy successful!
Preview URL:	https://ee1643bc.oasis-explorer.pages.dev

src/app/components/ParaTimePicker/ParaTimeMenu.tsx

lukaw3d · 2023-05-24T21:38:48Z

src/app/components/ParaTimePicker/ParaTimeMenu.tsx

+        onMouseEnter={() => {
+          if (layer !== selectedLayer) {
+            setSelectedLayer(undefined)
+          }
+          setHoveredLayer(layer)
+        }}


I get annoyed with this UX:

src/app/components/ParaTimePicker/index.tsx

buberdds · 2023-05-25T12:12:24Z

Ok, I've finished working on design feedback with Don. Some issues added by @lukaw3d are resolved. In terms of small screen I guess we will switch to mobile version once it's ready.

csillag · 2023-05-25T16:34:48Z

I checked this out, and have a few difficulties with with, and suggestions.

By default, we only see the level where we can select Paratimes within the network. There is no indication whatsoever that it should be possible to switch between networks. (Even when I am running in TestNet mode!) There is only this little arrow at the top, which is nor clear at all. I think at least a work of explanation would be very useful there.
When I click that semi-hidden button, the network selector is revealed, but it only shows the Mainnet, even if I am currently at TestNet! I understand that we don't want to promote TestNet too much, but when we are already on TestNet, what is the point of hiding it's existence? I think it's confusing that the opening state is not synced to the current setting. I think if we are at TestNet, it should shot TestNet selected by default.
Why is the currently selected state not highlighted by a different bg color? (Both network and Paratime.)

@donouwens I'm sorry to bring the feedback so late in the game, but I think it's better late then never.

donouwens · 2023-05-25T17:47:30Z

Thanks for the input @csillag

True, but we don't want to promote the Testnet (and Devnet) to prominently at this stage, which is why we've decided to have it collapsed. Once/if we get to the point where we do want users to note the networks easier we'd simply not have the collapsed state anymore.
This is true - if the user is one Testnet we should show the Testnet icon or Testnet icon with 'Testnet' title.
The selected state should show the content in our dark brand (#3333C4) along with the chevron pointing to the right. The reason for not having a different background color is to avoid confusion with the hover state.

csillag · 2023-05-25T18:08:32Z

For point 1: Having it collapsed is OK. All I am advocating for is having a single word of explanation besides the arrow.
For point 3: For me, on my monitor, the difference between the selected and not selected states is undetectable. About confusion with the hover state: the hover state has both the moving arrow and the background color change. I think we could take one of the two to indicate the selected state. (Or something else, but the current way I just can not see.)

donouwens · 2023-05-25T18:30:27Z

For point 1: Having it collapsed is OK. All I am advocating for is having a single word of explanation besides the arrow.

Having a word next to it will make it look like part of the Paratimes rather than the arrow due to the juxtaposition. I'm confident our users are curious enough to toggle that arrow, but it's something we can keep an eye on in future user testing.

For point 3: For me, on my monitor, the difference between the selected and not selected states is undetectable. About confusion with the hover state: the hover state has both the moving arrow and the background color change. I think we could take one of the two to indicate the selected state. (Or something else, but the current way I just can not see.)

My bad I replied without double checking - the active state does have a background in the designs. Has it not been implemented correctly? I feel there are significant color differences and visual indicators between default/selected/hover/disabled (which also has the tooltip) - see screenshot.

src/app/components/ParaTimePicker/LayerMenu.tsx

src/app/utils/layout.tsx

src/locales/en/translation.json

csillag · 2023-05-25T22:45:25Z

the active state does have a background in the designs. Has it not been implemented correctly? I feel there are significant color differences and visual indicators between default/selected/hover/disabled (which also has the tooltip) - see screenshot.

No, it doesn't look that way. This is the current implementation:

So,

In the design, the lighter shade of highlight signifies the current selection, and the hover is a stronger shade of highlight.
However, in the implementation, there is only one shade of highlight, and it is used by hover, and the selection only has the small "(currently active)" flag.

Should be easy to fix, though.

csillag

Please make it so that the selected state is highlighted, like it is in the design. Maybe my eyes 👀 are not what they used to be, but I can hardly see which one is selected..

csillag · 2023-05-25T22:55:53Z

When I click that semi-hidden button, the network selector is revealed, but it only shows the Mainnet, even if I am currently at TestNet! I understand that we don't want to promote TestNet too much, but when we are already on TestNet, what is the point of hiding it's existence? I think it's confusing that the opening state is not synced to the current setting. I think if we are at TestNet, it should shot TestNet selected by default.

This is true - if the user is one Testnet we should show the Testnet icon or Testnet icon with 'Testnet' title.

That part works, we can see the Testnet icon and title, that's not what I'm talking about.
My issue is that when I bring out the network selector, it only shows Mainnet, and hides Testnet, which is the current selection.

So, to summarize: we are on Testnet, why is testnet not listed as one of the options, and marked as selected?

csillag · 2023-05-26T11:44:56Z

OK, can clear up the dictionary? I am suspecting that we might assing different meaning to some of the terms here.
The state I'm talking about (selection type 2) is definitely not a split second state; it starts when the users clicks on the list item, and exists indefinitely, at least until the user clicks the "select" button at the other side of the dialog, hence closing the dialog.

buberdds · 2023-05-26T12:02:06Z

imo it doesn't make sense to discuss such design changes via code review process. It's better to discuss this during Sync meeting. I will keep PR open until then.

csillag · 2023-05-26T12:44:33Z

Nah, lets just merge it. it has already improvr
ed a lot.

csillag

LGTM

buberdds force-pushed the mz/picker branch 8 times, most recently from 0f7eb7f to 2919f0f Compare May 24, 2023 15:40

lukaw3d reviewed May 24, 2023

View reviewed changes

buberdds force-pushed the mz/picker branch 6 times, most recently from 97009b9 to 45f4daf Compare May 25, 2023 12:10

buberdds requested review from csillag, lukaw3d and lubej May 25, 2023 12:12

lukaw3d approved these changes May 25, 2023

View reviewed changes

src/app/components/ParaTimePicker/LayerMenu.tsx Outdated Show resolved Hide resolved

src/app/utils/layout.tsx Outdated Show resolved Hide resolved

src/locales/en/translation.json Outdated Show resolved Hide resolved

csillag requested changes May 25, 2023

View reviewed changes

buberdds force-pushed the mz/picker branch 2 times, most recently from d1ee717 to 3ee730d Compare May 26, 2023 10:16

buberdds added 20 commits May 26, 2023 15:17

Create TextList component

803c7d3

Allow Circle to inherit a color from parent

8e9c338

Allow to pass custom color to Logotype

e364272

Update default theme menu items styles

10038df

Add NetworkMenuIcon component

7f7cfa5

Create ParaTime picker layout

6f11f39

Create NetworkMenu component

5c2a17c

Create ParaTime selection menu

a21fb20

Create ParaTime selection menu

94e3b9b

Pass onClick to NetworkButton

f823aaf

Enable ParaTime drawer

deaddca

Extract common content helpers

6b6fc82

Update MUI Buttons theme

ed9b08c

Validate layer status using route helpers

e93b693

Fix showing active layer badge logic

dd540f9

Prevent height change on layer switch

1cf8ac7

Tweak layout scaling

e9d8682

Open network menu for testnet by default

e726cff

Align hover and selected state with mockups

1160dcd

Update selected meun item background

8241cb3

buberdds force-pushed the mz/picker branch from d1238b4 to 8241cb3 Compare May 26, 2023 13:17

csillag self-requested a review May 26, 2023 13:32

csillag approved these changes May 26, 2023

View reviewed changes

buberdds merged commit 8db597a into master May 26, 2023
4 checks passed

buberdds deleted the mz/picker branch May 26, 2023 13:34

This was referenced Jun 8, 2023

Adjust global search #478

Merged

[Bug]: Something in #426 broke hot-reload #485

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ParaTime picker #426

ParaTime picker #426

buberdds commented May 23, 2023 •

edited

github-actions bot commented May 23, 2023 •

edited

lukaw3d May 24, 2023

buberdds commented May 25, 2023

csillag commented May 25, 2023

donouwens commented May 25, 2023

csillag commented May 25, 2023 •

edited

donouwens commented May 25, 2023

csillag commented May 25, 2023 •

edited

csillag left a comment •

edited

csillag commented May 25, 2023

csillag commented May 26, 2023

buberdds commented May 26, 2023

csillag commented May 26, 2023

csillag left a comment

ParaTime picker #426

ParaTime picker #426

Conversation

buberdds commented May 23, 2023 • edited

github-actions bot commented May 23, 2023 • edited

Deployed to Cloudflare Pages

lukaw3d May 24, 2023

Choose a reason for hiding this comment

buberdds commented May 25, 2023

csillag commented May 25, 2023

donouwens commented May 25, 2023

csillag commented May 25, 2023 • edited

donouwens commented May 25, 2023

csillag commented May 25, 2023 • edited

csillag left a comment • edited

Choose a reason for hiding this comment

csillag commented May 25, 2023

csillag commented May 26, 2023

buberdds commented May 26, 2023

csillag commented May 26, 2023

csillag left a comment

Choose a reason for hiding this comment

buberdds commented May 23, 2023 •

edited

github-actions bot commented May 23, 2023 •

edited

csillag commented May 25, 2023 •

edited

csillag commented May 25, 2023 •

edited

csillag left a comment •

edited