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

Add layout for primary/detail view #233

Merged
merged 54 commits into from
Mar 3, 2020
Merged

Add layout for primary/detail view #233

merged 54 commits into from
Mar 3, 2020

Conversation

mikemurray
Copy link
Member

@mikemurray mikemurray commented Feb 29, 2020 •
edited
Loading

Resolves #223
Impact: major
Type: feature

Issue

A new layout component is needed to satisfy UI requirements for a secondary sidebar with a detail view.

Solution

  • Create the Primary/Detail component
  • Use new layout on Navigation dashboard
  • Add helper hooks
  • Refactor Dashboard
  • Refactor route registration

Screenshots

Mobile with the "more" button

image

Opened menu

image

Breaking changes

Non-breaking name changes when registering operator routes:

  • Old => New
  • layoutComponent => LayoutComponent
  • mainComponent => MainComponent
  • isNavigationLink: true => group: "navigation"
  • isSetting: true => group: "settings"

Warnings will be logged when using the old properties. They'll automatically be transformed into their new values to retain compatibility.

Testing

  1. Run through the app and ensure the views load and look like they should with their layouts.
  2. Pay specific attention to the navigation dashboard
  3. Resize the nav dashboard add to see the "More" button appears
  4. Click to open the menu

Keep in mind the nav editor drag-n-drop doesn't work in the Chrome mobile simulation. Any layout issues not related to the implementation of the Primary/Detail layout can go into another PR.

@mikemurray
feat: add useMediaQuery hook
328c0fe 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: add useOperatorRoutes hook
f5fba42 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: add new primary/detail layout
28f6001 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: remove left border
28ac4d2 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: add component for rendering operator routes
b5ede51 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: add state management callbacks
a5f53d3 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: update prop names and add warnings
24fe37e 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: convert to function component and use hooks
7180729 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: update route registration options
0cb5d2b 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: use primary/detail layout component
987b1d1 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use component for check
d213b0c 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use MainComponent
2b1d905 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
abe137a 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
b89d8f2 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
3a53dd7 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
33638d3 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
105d511 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
b8ce48e 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
64768e8 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
69255d1 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
054a958 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
106043b 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
78a6e1a 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
32d4ae9 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
c094011 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use updated configuration
624016f 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use useOperatorRoutes hook to get routes
eddea2e 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: component resolution
f9cd77b 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use useOperatorRoutes hook
05311e2 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: filtering group routes
18fa21b 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
refactor: use useOperatorRoutes hook
df8c557 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: remove unused operator routes
1a18b26 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: remove unused routes prop
4f96816 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: use a more descriptive name for the main nav group
eb228cb 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use navigation group
6c88064 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use navigation group
94cd6fe 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use navigation group
8f3caff 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use navigation group
55ad242 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use navigation group
e9dc96e 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use navigation group
6363a40 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: force primary nav open on desktop
322c36e 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: allow for null templates and exact matched routes
430bf16 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: make routes exact match
a2f006e 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use navigation group
d888acb 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: use no layout
5ecafa9 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: drawer and layout updates
a6260ed 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
feat: use full width on mobile
68aa4fe 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray mikemurray changed the title [WIP] Add layout for primary/detail view Add layout for primary/detail view Mar 3, 2020
@mikemurray mikemurray requested a review from willopez March 3, 2020 03:20
@mikemurray mikemurray marked this pull request as ready for review March 3, 2020 03:20
@mikemurray
fix: update to smallest breakpoint
fa12120 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: remove prop requirement and use default props
c55cd76 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: remove invalid prop
b4dc83b 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: move disableElevation prop to correct element
3dfb81e 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: remove uiState props. UI state can be found retrieved from the U…
d5c066e 
…IContext

Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
@mikemurray
fix: remove unused prop definition
e144dac 
Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
willopez
willopez approved these changes Mar 3, 2020
View reviewed changes
Copy link
Member

@willopez willopez left a comment

Choose a reason for hiding this comment

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

LGTM

@willopez willopez merged commit cbe7132 into trunk Mar 3, 2020
@willopez willopez deleted the feat-223-mikemurray-primary-detail-view branch March 3, 2020 18:27
@kieckhafer kieckhafer mentioned this pull request Apr 2, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@willopez willopez willopez approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add Primary/Detail layout view
2 participants
@mikemurray @willopez