question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[User Settings] Implement Settings Menu Selectors

See original GitHub issue

If 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, and Payments 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.
  • 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

Screen Shot 2021-02-17 at 2 40 40 PM

Upwork link: https://www.upwork.com/jobs/~012cafc87f424d3535

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
shawnbortoncommented, Feb 17, 2021

Here are the icons:

UI_Icons.zip

1reaction
NikkiWinescommented, Mar 3, 2021

Hey Matt,

This is indeed still available. A couple of notes on your proposal

or rewriting to use react-navigation which is cross-platform and supports drawers pretty well.

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.

If you don’t need the close modal -> open modal animation you can conditionally render the settings page based on the state/param. for example /settings would render the normal settings page but clicking one of the buttons renders a different component within that same RightDockedModal. video below shows this process:

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found