Add custom decredmaterial button and clickable #630

beansgum · 2021-09-15T06:01:06Z

Closes #592
This pr implements a custom clickable highlight that allows custom color and border radius properties. A custom button layout is also added, it makes use of a custom clickable highlight and allows switching to a disabled state without directly changing the colors.

Sirmorrison · 2021-09-15T09:41:48Z

Does this resolve #592 as well?

KIndly rebase.

Sirmorrison

We will need to open an upstream issue to gio for the clickable widget drawInk(), as the issue with the clickable widget comes from there.

ui/decredmaterial/button.go

ui/page/components/nav_drawer.go

dreacot

The width of the selector on the dropdown should be full width there should be no margin on the selector also

dreacot · 2021-09-16T07:32:20Z

#624 seems to resolve #606 and #608 also

dreacot

The hover effect on the account selector should have a padding

beansgum · 2021-09-16T07:36:04Z

This width of the hover highlight will be solved in another pull request as this one doesn't focus on modifying the layouts.

beansgum · 2021-09-16T07:37:27Z

#624 seems to resolve #606 and #608 also

I think this should be merged first and #624 can focus and the layout width of the hover highlight since #624 is modifying individual layouts.

ui/decredmaterial/dropdown.go

ui/page/components/account_selector.go

Sirmorrison

When the side and top nav buttons are hovered, the hover effect do not display.
Also, on the dropdown, the clickable even behaves unexpectedly as i would have to click twice for the dropdown to be displayed.
The create wallet button at the bottom right on the wallet page does not have the hover or click hightlight effect anymore

When the loader icon is displayed, the cancel button should be hidden.

My recommendation will be to have this PR split into 2 different PRs.

The first to resolve the Action buttons update #595
The second to resolve clickable events Fix Clickable widget effect highlight. #584

This will enable us properly test the custom clickable widget and not block issue #595.

- Remove all direct accesses of ButtonStyle clickable

- add predefined styles for outline button

… style

- apply custom clickable layout to clickable list

ui/decredmaterial/dropdown.go

dreacot · 2021-09-24T00:00:41Z

Remove top and bottom padding on the dropdown

hovering on he wallet icon blends with the background

dreacot · 2021-09-24T00:00:47Z

Remove top and bottom padding on the dropdown

hovering on he wallet icon blends with the background

dreacot · 2021-09-24T00:02:03Z

Hovering on some layouts in darkmode gives a bad contrast like this one

Sirmorrison

Also, lets remove the top and bottom padding.
I understand you mentioned its from the design, however, the design did not implement the hover feature.
The padding is not nice on the UI so lets remove it.

This was what we had.

Sirmorrison · 2021-09-24T10:09:43Z

ui/decredmaterial/dropdown.go

-				if len(c.items[index].Text) > 12 {
-					txt = c.items[index].Text[:12] + "..."
-				}
-				c.items[0].label.Text = txt


This lines of code help truncate the wallet name should incase the wallet name is too long. Currently, we dont have a limit to the length of the wallet name, and to prevent the wallet name dropdown from being too long, it was given a maximum width.

This is the effect of removing the code.

Sirmorrison · 2021-09-24T11:24:24Z

The sync button font on the overview page looks bigger.
When the button is clicked, the reconnect widget looks broken

Master branch.

630

You also missed this comment.
Add custom decredmaterial button and clickable #630 (review)
This is what transaction details page look like on master

630

also, clicking on any of the links once, give an effect that looks like it was clicked twice.

Same behavior can be seen on the receive page copy button.
On the account selector modal
Address and account switch button on the send page

The inactive/disable button color should be Theme.Color.InactiveGray the current color is too dark.

- Reduce tx details copy button text size and remove redundant creation of copy buttons. - Fix clickable highlight bug

beansgum · 2021-09-27T09:36:19Z

@Sirmorrison

The sync button text size was correct to be 14dp from the mockup.
Add custom decredmaterial button and clickable #630 (review) The padding on the menu looks nice and correct to me and it is done as specified by the design. We have the same design on mobile and that design is what a material menu is meant to look like https://material.io/components/menus#specs.

Sirmorrison · 2021-09-27T15:00:28Z

This behavior is still experienced

Same behavior can be seen on the receive page copy button.
On the account selector modal
Address and account switch button on the send page.

also, from rescent review with Raedah, he has requested the the TxHash

should not be truncated, as long as we have enough space to display the full hash.

Sirmorrison · 2021-09-27T15:46:48Z

The create restore button on wallet page does not have the click effect.

Sirmorrison

On the more page there is this extra shadow which is not present on master.

* Add custom button layout - Remove all direct accesses of ButtonStyle clickable * button: disable user interactions if disabled * Add support for custom button highlight color - add predefined styles for outline button * Replace instances with explicit outline buttons style with predefined style * Fix incorrect button background in dropdown & switch button * Add clickable layout that supports custom background & radius - apply custom clickable layout to clickable list * Add Hover to decredmaterial Clickable * Replace usages of Clickable with decredmaterial.Clickable * Correctly handle button disabled states in all pages * Wrap create wallet button in a white background * Fix nav layout * Add clickable hover to account selector modal * Add clickable hover to dropdown widget * Remove unused comments * Add clickable to linear layout - Fix nav drawer clickable layout * Remove clickable parameter from outline button * Remove clickable parameter from all buttons * Fix dropdown layout clickable * Cleanup dropdown widget code * Add padding to account selector rows * Fix highlight colors * Cleanup more page row layout * Truncate wallet name * Fix reconnect button bug - Reduce tx details copy button text size and remove redundant creation of copy buttons. - Fix clickable highlight bug * Fix click highlight color * Fix wallet button highlight

beansgum force-pushed the action_buttons branch 2 times, most recently from 8be6c9f to 68ada8c Compare September 15, 2021 18:56

Sirmorrison reviewed Sep 15, 2021

View reviewed changes

beansgum force-pushed the action_buttons branch from 68ada8c to 516ae02 Compare September 16, 2021 05:14

dreacot requested changes Sep 16, 2021

View reviewed changes

dreacot reviewed Sep 16, 2021

View reviewed changes

ui/decredmaterial/dropdown.go Outdated Show resolved Hide resolved

ui/decredmaterial/dropdown.go Outdated Show resolved Hide resolved

ui/page/components/account_selector.go Outdated Show resolved Hide resolved

dreacot previously approved these changes Sep 16, 2021

View reviewed changes

Sirmorrison suggested changes Sep 16, 2021

View reviewed changes

Sirmorrison mentioned this pull request Sep 21, 2021

Fix Clickable widget effect highlight. #584

Closed

beansgum added 14 commits September 23, 2021 07:09

Add custom button layout

b665bb3

- Remove all direct accesses of ButtonStyle clickable

button: disable user interactions if disabled

211dfed

Add support for custom button highlight color

7fc0819

- add predefined styles for outline button

Replace instances with explicit outline buttons style with predefined…

a6b18d5

… style

Fix incorrect button background in dropdown & switch button

da091e3

Add clickable layout that supports custom background & radius

3923ab0

- apply custom clickable layout to clickable list

Add Hover to decredmaterial Clickable

bcc3a98

Replace usages of Clickable with decredmaterial.Clickable

27d9154

Correctly handle button disabled states in all pages

ec4e4b2

Wrap create wallet button in a white background

198dfdb

Fix nav layout

28f97f4

Add clickable hover to account selector modal

beb570f

Add clickable hover to dropdown widget

e154623

Remove unused comments

c75b71c

beansgum added 3 commits September 23, 2021 12:37

Fix dropdown layout clickable

c0780c5

Cleanup dropdown widget code

2d8cfd6

Add padding to account selector rows

8782851

beansgum dismissed dreacot’s stale review via 8782851 September 23, 2021 13:37

beansgum force-pushed the action_buttons branch from 2822e8b to 8782851 Compare September 23, 2021 13:37

dreacot requested changes Sep 23, 2021

View reviewed changes

ui/decredmaterial/dropdown.go Outdated Show resolved Hide resolved

beansgum added 2 commits September 24, 2021 08:40

Fix highlight colors

4928cc8

Cleanup more page row layout

9fa3eee

Sirmorrison suggested changes Sep 24, 2021

View reviewed changes

Truncate wallet name

95829a1

Fix reconnect button bug

982bf91

- Reduce tx details copy button text size and remove redundant creation of copy buttons. - Fix clickable highlight bug

Fix click highlight color

51a8075

Fix wallet button highlight

19b4b39

Sirmorrison reviewed Sep 28, 2021

View reviewed changes

dreacot previously approved these changes Sep 29, 2021

View reviewed changes

Merge branch 'master' into action_buttons

b1625fd

beansgum dismissed dreacot’s stale review via b1625fd October 4, 2021 07:34

Sirmorrison approved these changes Oct 4, 2021

View reviewed changes

dreacot approved these changes Oct 4, 2021

View reviewed changes

dreacot merged commit 311b70a into planetdecred:master Oct 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add custom decredmaterial button and clickable #630

Add custom decredmaterial button and clickable #630

beansgum commented Sep 15, 2021 •

edited

Loading

Sirmorrison commented Sep 15, 2021

Sirmorrison left a comment

dreacot left a comment •

edited

Loading

dreacot commented Sep 16, 2021

dreacot left a comment

beansgum commented Sep 16, 2021

beansgum commented Sep 16, 2021

Sirmorrison left a comment •

edited

Loading

dreacot commented Sep 24, 2021

dreacot commented Sep 24, 2021

dreacot commented Sep 24, 2021

Sirmorrison left a comment •

edited

Loading

Sirmorrison Sep 24, 2021

Sirmorrison commented Sep 24, 2021 •

edited

Loading

beansgum commented Sep 27, 2021

Sirmorrison commented Sep 27, 2021

Sirmorrison commented Sep 27, 2021 •

edited

Loading

Sirmorrison left a comment

Add custom decredmaterial button and clickable #630

Add custom decredmaterial button and clickable #630

Conversation

beansgum commented Sep 15, 2021 • edited Loading

Sirmorrison commented Sep 15, 2021

Sirmorrison left a comment

Choose a reason for hiding this comment

dreacot left a comment • edited Loading

Choose a reason for hiding this comment

dreacot commented Sep 16, 2021

dreacot left a comment

Choose a reason for hiding this comment

beansgum commented Sep 16, 2021

beansgum commented Sep 16, 2021

Sirmorrison left a comment • edited Loading

Choose a reason for hiding this comment

dreacot commented Sep 24, 2021

dreacot commented Sep 24, 2021

dreacot commented Sep 24, 2021

Sirmorrison left a comment • edited Loading

Choose a reason for hiding this comment

Sirmorrison Sep 24, 2021

Choose a reason for hiding this comment

Sirmorrison commented Sep 24, 2021 • edited Loading

630

beansgum commented Sep 27, 2021

Sirmorrison commented Sep 27, 2021

Sirmorrison commented Sep 27, 2021 • edited Loading

Sirmorrison left a comment

Choose a reason for hiding this comment

beansgum commented Sep 15, 2021 •

edited

Loading

dreacot left a comment •

edited

Loading

Sirmorrison left a comment •

edited

Loading

Sirmorrison left a comment •

edited

Loading

Sirmorrison commented Sep 24, 2021 •

edited

Loading

Sirmorrison commented Sep 27, 2021 •

edited

Loading