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

Dashboard UI Implementation for the Rail and Header Navigation #803

Closed
carrenelloyd opened this issue Dec 4, 2019 · 10 comments · Fixed by #1854
Closed

Dashboard UI Implementation for the Rail and Header Navigation #803

carrenelloyd opened this issue Dec 4, 2019 · 10 comments · Fixed by #1854
Assignees
@AlanGreene
Labels
kind/design Categorizes issue or PR as related to design.

Comments

@carrenelloyd
Copy link

carrenelloyd commented Dec 4, 2019 •
edited by AlanGreene
Loading

Expected Behavior

The portion of the Dashboard UI for the Rail and Header Navigation should use design patterns and components for Carbon 10 and from the IDE components Storybook, until Carbon inherits IDE components. It should also reflect the user experience created through the collaboration between Development, Design and User Research

This update should also include removing the blue background from the <body>

Actual Behavior

The actual behavior is found in the current implementation of the Dashboard UI

image

Design Specs

The code for the Rail and Header Navigation can be used from the following Storybook.

Additional information about the Rail and Header can be found here.

and here
Also contact Dev: Matt Chapman and or Kidus Woldeyes

Icons for Rail Navigation:
Icons.zip

image

Header Navigation

image

Additional Info

The Rail has 3 states:

  1. Collapsed
  2. Expanded with Menu item selected
  3. Expanded with Submenu item selected

Clicking on the Hamburger icon
image opens the Rail in full view. The Hamburger icon changes into the Close (x) icon.

The Menu items have icons associated with them, whereas the Submenu items do not.

image

image

image
@AlanGreene
Copy link
Member

@carrenelloyd the @hybrid-cloud/ide-components package that provides these components is not available publicly so this is not something we can currently use in the dashboard. Is there an alternative or a plan for Carbon to adopt these components?

@carrenelloyd
Copy link
Author

Let me reach out to that dev team to see how they can help.

@AlanGreene AlanGreene mentioned this issue Jan 23, 2020
Merged
3 tasks
@kimholmes kimholmes mentioned this issue Jan 27, 2020
Closed
@AlanGreene AlanGreene mentioned this issue Jan 27, 2020
Closed
5 tasks
@AlanGreene AlanGreene added the kind/design Categorizes issue or PR as related to design. label Jan 30, 2020
@AlanGreene AlanGreene mentioned this issue Apr 20, 2020
Closed
@AlanGreene AlanGreene mentioned this issue Jul 27, 2020
Merged
3 tasks
@tekton-robot
Copy link
Contributor

Issues go stale after 90d of inactivity.
Mark the issue as fresh with /remove-lifecycle stale.
Stale issues rot after an additional 30d of inactivity and eventually close.
If this issue is safe to close now please do so with /close.

/lifecycle stale

Send feedback to tektoncd/plumbing.

@tekton-robot
Copy link
Contributor

Rotten issues close after 30d of inactivity.
Reopen the issue with /reopen.
Mark the issue as fresh with /remove-lifecycle rotten.

/close

Send feedback to tektoncd/plumbing.

@tekton-robot
Copy link
Contributor

Stale issues rot after 30d of inactivity.
Mark the issue as fresh with /remove-lifecycle rotten.
Rotten issues close after an additional 30d of inactivity.
If this issue is safe to close now please do so with /close.

/lifecycle rotten

Send feedback to tektoncd/plumbing.

@tekton-robot tekton-robot added the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Aug 13, 2020
@tekton-robot
Copy link
Contributor

@tekton-robot: Closing this issue.

In response to this:

Rotten issues close after 30d of inactivity.
Reopen the issue with /reopen.
Mark the issue as fresh with /remove-lifecycle rotten.

/close

Send feedback to tektoncd/plumbing.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@tekton-robot tekton-robot added lifecycle/rotten Denotes an issue or PR that has aged beyond stale and will be auto-closed. and removed lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. labels Aug 13, 2020
@AlanGreene
Copy link
Member

/remove-lifecycle rotten
/reopen

@tekton-robot tekton-robot reopened this Aug 13, 2020
@tekton-robot
Copy link
Contributor

@AlanGreene: Reopened this issue.

In response to this:

/remove-lifecycle rotten
/reopen

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@tekton-robot tekton-robot removed the lifecycle/rotten Denotes an issue or PR that has aged beyond stale and will be auto-closed. label Aug 13, 2020
@AlanGreene
Copy link
Member

We've since added our own custom styles following Carbon guidelines overriding the SideNav colours to use a dark theme while using Carbon's gray 10 theme for the rest of the content on the page.

The SideNav component does provide an isRail prop but its behaviour doesn't match the design above. We should revisit the @hybrid-cloud/ide-components to see if it's available yet or whether the Carbon component can be modified to suit our needs. Failing either of these options, we could create our own rail component and wire it up to the Carbon header.

We should also define the side nav behaviour at the different breakpoints, most likely should collapse to rail by default at small screen sizes, open by default at large or above, and always present the option to toggle.

@AlanGreene AlanGreene self-assigned this Dec 2, 2020
@AlanGreene
Copy link
Member

AlanGreene commented Dec 2, 2020 •
edited
Loading

We can achieve something close to this by switching between the isFixedNav and isRail props depending on whether the SideNav is expanded or collapsed. PR incoming. It's not an exact match for the design spec above, but it's pretty close.

@AlanGreene AlanGreene mentioned this issue Dec 2, 2020
Merged
3 tasks
@AlanGreene AlanGreene mentioned this issue Dec 3, 2020
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@AlanGreene AlanGreene

Labels
kind/design Categorizes issue or PR as related to design.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Make main nav collapsible AlanGreene/dashboard
3 participants
@AlanGreene @tekton-robot @carrenelloyd