[User Settings] Implement Settings Menu Selectors
See original GitHub issueIf you haven’t already, check out our contributing guidelines for onboarding!
We need to update the existing Settings page to include four new menu items that will link to new sub-pages. When one of the menu items is selected, a new view should appear with the title of the menu item selected.
In addition to the title, each menu item will have an icon on the left-hand side, as well as a right-facing arrow on the right-hand side (arrow-right.svg
) The icons needed for these menu items are:
- Profile: profile.svg
- Preferences: gear.svg
- Change Password: lock.svg
- Payments: wallet.svg
Icons can be found in the following zip file: UI_Icons.zip
Deliverables:
- Add four clickable menu items
Profile
,Preferences
,Change Password
, andPayments
to SettingsPage.js - When a menu item is clicked, the right-docked modal should hide the existing settings view, and display the new view with the title of the page
- Use
params.match.route
to determine which view to display.
- Use
- When a sub-page is closed, the view should display the Settings page once again
- Add two new routes to ROUTES.js
SUBSETTINGS: '/sttings/:route'
getSettingsRoute: route => `/settings/${route}`
Mobile | Web |
---|---|
Sample Flow for clicking on the Preferences
Menu Item
Upwork link: https://www.upwork.com/jobs/~012cafc87f424d3535
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (10 by maintainers)
Top Results From Across the Web
Build a User Settings Dropdown Menu with jQuery - DesignM.ag
In this tutorial I have actually built two working demo pages. The first runs on jQuery to fade the menu in and out...
Read more >Customizable User Settings - Salesforce Help
The Customizable User Settings component enables your users to customize their site settings. The customizable user site settings include changing languag.
Read more >The Setup Menus (D[USER SETTING])
To access basic camera settings, press [MENU/OK], select the D ([SET UP]) tab, ... Use the selector to choose the time difference between...
Read more >User and Workspace Settings - Visual Studio Code
To open the Settings editor, use the following VS Code menu command: On Windows/Linux - File > Preferences > Settings; On macOS -...
Read more >Selectors—ArcGIS Dashboards | Documentation
A selector describes any dashboard element that supports a selection change event. Since they support events, selectors can trigger actions.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Here are the icons:
UI_Icons.zip
Hey Matt,
This is indeed still available. A couple of notes on your proposal
This is a good thought and one we had ourselves as well. We are considering implementing react-navigation but didn’t want to hold this project on the outcome of that discussion.
This is the implementation we had in mind for this issue. As you said, the idea is the new ‘pages’ are views inside the right-docked Settings modal that get conditionally rendered. You could achieve this by using
match.params.route
.