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.

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

ui: Sidebar navigation / redesign cont. #9582

Merged
merged 5 commits into from
Jan 21, 2021

Conversation

johncowen
Copy link
Contributor

@johncowen johncowen commented Jan 18, 2021

This PR is a continuation of #9553. The previous PR concentrated on CSS changes in order to implement the new redesign.

This PR is mainly HTML/component changes in order to re-org slightly and add a few new features.

  1. <HashicorpConsul /> now uses an <App /> component. HashicorpConsul now should only deal with things that are relevant to the ConsulUI. This is purely for the sake of organisation and making things easy to think about/find. Need to change the Consul logo or add a new Consul section (say Auth Methods), look in the HashicorpConsul component as its consul specific. Need to change how the overall navigation works at a general level, that'll be in the App component.
  2. After chatting through the ins and outs of theming, I reverted the color-tone thing, and pulled out the CSS related to global theming. But, we still include component level theming. We currently need to support two themes for our menu-panels, dark when it is in the side nav, light when it is in the top nav. The popover-menus themselves are made up of different components that take a mix of dark and light theming depending on where they are e.g.
  • Sidenav: dark trigger, dark panel, light info box.
  • Topnav: dark trigger, light panel.

       All theming is currently controlled in a top level 'themes.scss' file. If it makes sense to split this up at a later date we can.
3. ACLs no longer has a sub navigation so this was removed, the links are no in the SideNav underneath the Access Controls section. We also changed the titles of each of these pages from 'Access Controls' to the name of the section (say Tokens or Roles)

There is potentially a tiny bit of work left to do ontop of this, but I'd really like to get this PR and #9553 merged down to help other ongoing Auth Method work. So if another PR comes it will be post merge based off of master.

sidebar

John Cowen added 4 commits January 18, 2021 12:24
1. HashicorpConsul now uses <App />
2. <App /> is now translated and adds 'skip to main content' functionality
3. Adds ember-in-viewport addon in order to visibly hide main navigation
items in order to take them out of focus/tabbing
4. Slight amends to the dom service while I was there
1. We use dark popover-menus in the side nav
2. Main header is slightly bigger now
3. Undo global themeing but keep component based theming
@johncowen johncowen added the theme/ui Anything related to the UI label Jan 18, 2021
@vercel
Copy link

vercel bot commented Jan 18, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hashicorp/consul/prfejvlxd
✅ Preview: Canceled

[Deployment for bd059cd canceled]

Copy link
Contributor

@kaxcode kaxcode left a comment

Choose a reason for hiding this comment

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

LGTM ✨

@johncowen johncowen merged commit 76b01b2 into ui/feature/sidebar-nav Jan 21, 2021
@johncowen johncowen deleted the ui/feature/sidebar-nav-2 branch January 21, 2021 08:59
johncowen added a commit that referenced this pull request Jan 22, 2021
* Add <App /> Component and rearrange <HashcorpConsul /> to use it

1. HashicorpConsul now uses <App />
2. <App /> is now translated and adds 'skip to main content' functionality
3. Adds ember-in-viewport addon in order to visibly hide main navigation
items in order to take them out of focus/tabbing
4. Slight amends to the dom service while I was there

* Additional CSS amends for side menus, increased header etc

1. We use dark popover-menus in the side nav
2. Main header is slightly bigger now
3. Undo global themeing but keep component based theming

* Remove old ACLs subnav and 're-title-ize'

* Fix up pageobjects

* Apparently scrolling is a thing, whoops!
johncowen added a commit that referenced this pull request Jan 26, 2021
* Add <App /> Component and rearrange <HashcorpConsul /> to use it

1. HashicorpConsul now uses <App />
2. <App /> is now translated and adds 'skip to main content' functionality
3. Adds ember-in-viewport addon in order to visibly hide main navigation
items in order to take them out of focus/tabbing
4. Slight amends to the dom service while I was there

* Additional CSS amends for side menus, increased header etc

1. We use dark popover-menus in the side nav
2. Main header is slightly bigger now
3. Undo global themeing but keep component based theming

* Remove old ACLs subnav and 're-title-ize'

* Fix up pageobjects

* Apparently scrolling is a thing, whoops!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
theme/ui Anything related to the UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants