-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: Sidebar navigation / redesign cont. (#9582)
* 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!
- Loading branch information
Showing
40 changed files
with
1,285 additions
and
590 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
{{#let (hash | ||
main=(concat guid '-main') | ||
) as |exported|}} | ||
|
||
<div | ||
class="app" | ||
...attributes | ||
> | ||
<ModalLayer /> | ||
|
||
<div | ||
class="skip-links" | ||
{{on "click" this.focus}} | ||
> | ||
<a href={{concat '#' exported.main}}>{{t 'components.app.skip_to_content'}}</a> | ||
{{!-- | ||
In order to add further skip links from within other templates use: | ||
<Portal @target="app-skip-links"> | ||
<a href="#sub-content">Skip to subcontent</a> | ||
</Portal> | ||
from within your template | ||
--}} | ||
<PortalTarget | ||
@name="app-skip-links" | ||
@mutiple={{true}} | ||
></PortalTarget> | ||
</div> | ||
|
||
<input | ||
type="checkbox" | ||
id={{concat guid "-main-nav-toggle"}} | ||
/> | ||
<header | ||
role="banner" | ||
> | ||
<label | ||
tabindex="0" | ||
for={{concat guid "-main-nav-toggle"}} | ||
aria-label={{t 'components.app.toggle_menu'}} | ||
{{on "keypress" this.keypressClick}} | ||
{{on "mouseup" this.unfocus}} | ||
></label> | ||
{{yield exported to="home-nav"}} | ||
<div | ||
data-test-navigation | ||
> | ||
{{!-- | ||
The viewport tolerances here give us a 10 pixel buffer to make sure the menu | ||
is marked as out of the viewport, we use all sides so we don't need to change | ||
this should any CSS change | ||
--}} | ||
<nav | ||
aria-label={{t 'components.app.main'}} | ||
class={{if this.navInViewport 'in-viewport'}} | ||
{{in-viewport | ||
onEnter=(set this 'navInViewport' true) | ||
onExit=(set this 'navInViewport' false) | ||
viewportTolerance=(hash top=-10 bottom =-10 left=-10 right=-10) | ||
}} | ||
> | ||
{{yield exported to="main-nav"}} | ||
</nav> | ||
{{!-- | ||
Whilst this has a role of navigation, it is 'complementary navigation' we | ||
don't want to change the navigation role here, but we do want to label it as | ||
'complementary' to the main content. The phrase 'complementary navigation' as | ||
read by a screenreader should convey the meaning we are after here. | ||
--}} | ||
<nav aria-label={{t 'components.app.complementary'}}> | ||
{{yield exported to="complementary-nav"}} | ||
</nav> | ||
|
||
</div> | ||
</header> | ||
<main id={{concat guid '-main'}}> | ||
{{yield exported to="main"}} | ||
</main> | ||
<footer | ||
role="contentinfo" | ||
data-test-footer | ||
> | ||
{{yield exported to="content-info"}} | ||
</footer> | ||
</div> | ||
|
||
{{/let}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import Component from '@glimmer/component'; | ||
import { inject as service } from '@ember/service'; | ||
import { action } from '@ember/object'; | ||
|
||
export default class AppComponent extends Component { | ||
@service('dom') dom; | ||
|
||
constructor(args, owner) { | ||
super(...arguments); | ||
this.guid = this.dom.guid(this); | ||
} | ||
|
||
@action | ||
keypressClick(e) { | ||
e.target.dispatchEvent(new MouseEvent('click')); | ||
} | ||
|
||
@action | ||
focus(e) { | ||
const href = e.target.getAttribute('href'); | ||
if (href.startsWith('#')) { | ||
e.preventDefault(); | ||
this.dom.focus(href); | ||
} | ||
} | ||
|
||
@action | ||
unfocus(e) { | ||
e.target.blur(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
.app { | ||
--chrome-width: 300px; | ||
--chrome-height: 64px; | ||
} | ||
.app .skip-links { | ||
@extend %skip-links; | ||
} | ||
[role='banner'] { | ||
@extend %main-header-horizontal; | ||
} | ||
[role="banner"] > label { | ||
@extend %main-nav-horizontal-toggle-button; | ||
} | ||
.hashicorp-consul > input[id] { | ||
@extend %main-nav-horizontal-toggle; | ||
} | ||
%main-header-horizontal > div { | ||
@extend %main-nav-horizontal-panel; | ||
} | ||
|
||
%main-header-horizontal nav:first-of-type { | ||
@extend %main-nav-vertical, %main-nav-sidebar; | ||
} | ||
%main-header-horizontal nav:last-of-type { | ||
@extend %main-nav-horizontal; | ||
margin-left: auto; | ||
} | ||
%main-nav-sidebar, | ||
main { | ||
@extend %transition-pushover; | ||
} | ||
%main-nav-sidebar { | ||
transition-property: left; | ||
z-index: 10; | ||
} | ||
main { | ||
top: var(--chrome-height); | ||
transition-property: margin-left; | ||
} | ||
|
||
|
||
@media #{$--sidebar-open} { | ||
%main-nav-horizontal-toggle + header > div > nav:first-of-type { | ||
left: 0; | ||
} | ||
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type { | ||
left: calc(var(--chrome-width) * -1); | ||
} | ||
%main-nav-horizontal-toggle ~ main, | ||
%main-nav-horizontal-toggle ~ footer { | ||
margin-left: var(--chrome-width); | ||
} | ||
%main-nav-horizontal-toggle:checked ~ main, | ||
%main-nav-horizontal-toggle:checked ~ footer { | ||
margin-left: 0; | ||
} | ||
} | ||
@media #{$--lt-sidebar-open} { | ||
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type { | ||
left: 0; | ||
} | ||
%main-nav-horizontal-toggle + header > div > nav:first-of-type { | ||
left: calc(var(--chrome-width) * -1); | ||
} | ||
%main-nav-horizontal-toggle ~ main, | ||
%main-nav-horizontal-toggle ~ footer { | ||
margin-left: 0; | ||
} | ||
} | ||
|
Oops, something went wrong.