Skip to content

Instantly share code, notes, and snippets.

@mmcgraw73

mmcgraw73/.DS_Store

Last active June 14, 2019 18:50
Show Gist options
  • Save mmcgraw73/be3a748d43d03a75594f6a8c07b7d252 to your computer and use it in GitHub Desktop.
Save mmcgraw73/be3a748d43d03a75594f6a8c07b7d252 to your computer and use it in GitHub Desktop.
Download ZIP
Environment / Location Picker Views + Functionality Overview
Raw
L360_ENV_LOCl.md

Views

click view to link to functionality description

UI Image References

image1) Selected Environment

image2) Environment List w/ Selected Environment

image3) Search Bar

image4) Location List

image5) Single Environment w/ Single Location

Functionality for Mobile Devices

Single Environment / Single Location

see image5 ---> note: the toggler will not be present in the view

  • there should be no dropdown toggler on the selected environment
  • there should be no 'x' icon to clear the selected environment
  • there should be no search bar
  • the single environment name will be displayed in the selected environment grey box
  • the single location name will be displayed under the selected environment

Single Environment / Multi-Location

see image4

  • there will be a dropdown toggler that will open the location picker list
  • the search bar will be there and will filter the list of locations
  • the 'x' icon will be there if a location has been selected and will clear the location on click
  • the only environment name will be in the gray box on load
  • ----> what does the pencil icon do?
  • ----> what does the first item in the list do -- site map icon?
  • ----> what does the underlined location represent?

Multi-Environment / Single Location

  • there will be a dropdown toggler that will open the environment picker list
  • the search bar will be there and will filter the list of environments
  • the 'x' icon will be there if an env has been selected and will clear the env on click
  • ----> will the 1 location be visible on load?
  • ----> if the 'x' icon is clicked will the single location remain in view? what should that look like?

Multi-Environment / Multi-Location

  • there will be a dropdown toggler that will initially open the environment picker list
  • the search bar will be there and will initailly filter the list of environments
  • the 'x' icon will be there once an environment has been selected and will clear the environment on click
  • once an environment has been selected that environment will be displayed in the gray rounded box inside selected environment section see image1
  • once an environment has been selected, the location list will appear in the place of the environment list
  • the search bar will remain in view and will filter the location list
  • if a location has been selected the 'x' will clear both environment + location on click
  • ----> what will the view look like once environment and location have been cleared? whats the default load screen look like?

Other Notes

there would be two scenarios where we would want the ability to clear the input. If a Listen360 rep is logged in we will display a Filterable List of both Environments as well as Locations. For non Listen360 Reps we would want to have a clear option for those Customers who have +1 locations as that list would be filterable as well. We could put a limit on when to display the clear button, say when we see +10 Locations.

there will need to be a parent component that will wrap:

  • Menu Component
  • SearchDropdown Component
  • ListEnvironment Component
  • ListLocation Component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment