Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Switch Editors when tab key is pressed #640

Merged
merged 16 commits into from Oct 5, 2021
Merged

Switch Editors when tab key is pressed #640

merged 16 commits into from Oct 5, 2021

Conversation

devchoplife
Copy link
Contributor

@devchoplife devchoplife commented Sep 22, 2021 •
edited

Closed #589
This PR enables ediotrs to be switched when the tab key is pressed on the following pages and modals:

  • Verify message page
  • Sign message page
  • Create password modal
  • Restore wallet modal

@devchoplife devchoplife marked this pull request as draft September 22, 2021 20:22
@devchoplife devchoplife changed the title Add Tab Key event to pages with editors Switch Editors when tab key is pressed Sep 23, 2021
@devchoplife devchoplife marked this pull request as ready for review September 23, 2021 18:54
@dreacot
Copy link
Collaborator

dreacot commented Sep 23, 2021

implement for these pages
Screenshot from 2021-09-24 00-01-27

Screenshot from 2021-09-24 00-01-59

Screenshot from 2021-09-24 00-12-03

@dreacot
Copy link
Collaborator

dreacot commented Sep 23, 2021

the behavior of the tab key isn't consistent across all modals, i.e on some modals pressing the tab key repeatedly recycles back to the first input box, while on some others it ends on the last input box.

The recycling to the first input box behavior should be consistent across all modals

these are modals where i noticed the non recycling behavior

Screenshot from 2021-09-24 00-18-11

Screenshot from 2021-09-24 00-19-00

Screenshot from 2021-09-24 00-19-26

Sirmorrison
Sirmorrison suggested changes Sep 24, 2021
View reviewed changes
ui/modal/create_password_modal.go Outdated Show resolved Hide resolved
ui/page/utils.go Outdated Show resolved Hide resolved
ui/page/create_restore_page.go Outdated Show resolved Hide resolved
ui/modal/create_password_modal.go Outdated Show resolved Hide resolved
ui/modal/create_password_modal.go Outdated Show resolved Hide resolved
ui/page/create_restore_page.go Outdated Show resolved Hide resolved
ui/page/sign_message_page.go Outdated Show resolved Hide resolved
ui/page/sign_message_page.go Outdated Show resolved Hide resolved
ui/page/verify_message_page.go Outdated Show resolved Hide resolved
ui/page/verify_message_page.go Outdated Show resolved Hide resolved
Sirmorrison
Sirmorrison suggested changes Sep 27, 2021
View reviewed changes
ui/page/components/components.go Outdated Show resolved Hide resolved
ui/page/create_restore_page.go Outdated Show resolved Hide resolved
ui/page/send/page.go Outdated Show resolved Hide resolved
ui/page/send/page.go Outdated Show resolved Hide resolved
ui/page/sign_message_page.go Outdated Show resolved Hide resolved
ui/page/components/components.go Outdated Show resolved Hide resolved
ui/modal/create_password_modal.go Outdated Show resolved Hide resolved
ui/modal/create_password_modal.go Outdated Show resolved Hide resolved
ui/modal/create_watch_only_modal.go Outdated Show resolved Hide resolved
ui/page/verify_message_page.go Outdated Show resolved Hide resolved
dreacot
dreacot previously approved these changes Sep 27, 2021
View reviewed changes
Sirmorrison
Sirmorrison suggested changes Sep 28, 2021
View reviewed changes
Copy link
Contributor

@Sirmorrison Sirmorrison left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that on pages where no editor is focused on resume, if the tab button is pressed a couple of times, and then an editor is selected, the behavior below is observed.
This can be seen on the verify message page, modals with multiple editors, seed restore page etc.
ezgif com-gif-maker(9)

To resolved this, you may need to set focus to an editor on page resume.

ui/page/create_restore_page.go Outdated Show resolved Hide resolved
ui/page/create_restore_page.go Outdated Show resolved Hide resolved
@Sirmorrison Sirmorrison added this to In Progress in godcr board via automation Sep 29, 2021
@Sirmorrison Sirmorrison moved this from In Progress to Review in progress in godcr board Sep 29, 2021
Sirmorrison
Sirmorrison suggested changes Oct 4, 2021
View reviewed changes
ui/modal/create_password_modal.go Outdated Show resolved Hide resolved
@Sirmorrison
Copy link
Contributor

image

We almost done as the PR looks ok.
An aspect that was missed on the send page.
When currency is set to USD, the USD quivalent editor is displayed.
The tab button only navigates between only the Address editor and the DCR input editor and not the USD editor.

@devchoplife
Switch editors on Verify message page when tab key is pressed
6e2c3c5
@devchoplife
Move Tab key event handler to utils
b77cff2
@devchoplife
Add tab key event to Sign Message page
38c1d3e
@devchoplife
Switch editors on password modal when tab is pressed
3534db7
@devchoplife
Switch editors when tab is pressed on Restore wallet page
a863f3a
@devchoplife
Make tab event handler cyclic
5f2eb52
@devchoplife
Fix create restore editors not being recyclable
848a48a
@devchoplife
Switch editors on watch only modal when tab is pressed
4cb844b
@devchoplife
Switch seed editors when tab key is pressed
333caf1
@devchoplife
Switch editors on send page when tab is pressed
1cb0786
@devchoplife
Add condition for create password modal without name
216fc9f
@devchoplife
Move tab key event functions to decredmaterial
6b3a42d
@devchoplife
Revert VerifyMessage arguments
7f04ed4
@devchoplife
Focus on first editor on page resume
e4f8d23
@devchoplife
Focus on first editor on Create Restor Page
edc9220
@devchoplife
implement tab key for usd amount editor when currency is set to usd
ea26895
godcr board automation moved this from Review in progress to Approved Oct 5, 2021
@dreacot dreacot merged commit 3ad5a7d into planetdecred:master Oct 5, 2021
godcr board automation moved this from Approved to Done Oct 5, 2021
@devchoplife devchoplife deleted the EditorTabEvent branch October 7, 2021 18:04
song50119 pushed a commit to song50119/godcr that referenced this pull request Apr 24, 2022
@devchoplife
Switch Editors when tab key is pressed (planetdecred#640)
228eeae 
* Switch editors on Verify message page when tab key is pressed

* Move Tab key event handler to utils

* Add tab key event to Sign Message page

* Switch editors on password modal when tab is pressed

* Switch editors when tab is pressed on Restore wallet page

* Make tab event handler cyclic

* Fix create restore editors not being recyclable

* Switch editors on watch only modal when tab is pressed

* Switch seed editors when tab key is pressed

* Switch editors on send page when tab is pressed

* Add condition for create password modal without name

* Move tab key event functions to decredmaterial

* Revert VerifyMessage arguments

* Focus on first editor on page resume

* Focus on first editor on Create Restor Page

* implement tab key for usd amount editor when currency is set to usd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dreacot dreacot dreacot approved these changes

@Sirmorrison Sirmorrison Sirmorrison approved these changes

Assignees
No one assigned
Labels
None yet
Projects
godcr board
  
Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The tab key will switch between forms input
3 participants
@devchoplife @dreacot @Sirmorrison