diff --git a/ui-v2/app/components/popover-menu.js b/ui-v2/app/components/popover-menu.js index 55c1ba526200..3079f9eb309d 100644 --- a/ui-v2/app/components/popover-menu.js +++ b/ui-v2/app/components/popover-menu.js @@ -9,6 +9,9 @@ export default Component.extend(Slotted, { expanded: false, keyboardAccess: true, onchange: function() {}, + // TODO: this needs to be made dynamic/auto detect + // for now use this to set left/right explicitly + position: '', init: function() { this._super(...arguments); this.guid = this.dom.guid(this); diff --git a/ui-v2/app/styles/base/components/menu-panel/layout.scss b/ui-v2/app/styles/base/components/menu-panel/layout.scss index 44823cd12894..c40289c4e0b5 100644 --- a/ui-v2/app/styles/base/components/menu-panel/layout.scss +++ b/ui-v2/app/styles/base/components/menu-panel/layout.scss @@ -15,6 +15,9 @@ /* or be hardcoded */ /* min-height: 143px; */ } +%menu-panel [role='menuitem']::after { + float: right; +} %menu-panel-sub-panel { position: absolute; top: 0; @@ -28,6 +31,7 @@ } %menu-panel:not(.left) { right: 0px; + left: auto; } %menu-panel.left { left: 0px; diff --git a/ui-v2/app/styles/components/main-nav-horizontal/index.scss b/ui-v2/app/styles/components/main-nav-horizontal/index.scss index ae5d8bd33747..333e6885766a 100644 --- a/ui-v2/app/styles/components/main-nav-horizontal/index.scss +++ b/ui-v2/app/styles/components/main-nav-horizontal/index.scss @@ -18,6 +18,9 @@ %main-nav-horizontal > ul > li.is-active > label > * { @extend %main-nav-horizontal-action-active; } +%main-nav-horizontal label + div { + @extend %main-nav-horizontal-drop-nav; +} %main-nav-horizontal-drop-nav { @extend %menu-panel; } diff --git a/ui-v2/app/styles/components/main-nav-horizontal/skin.scss b/ui-v2/app/styles/components/main-nav-horizontal/skin.scss index d0ea088e0489..a4f6e35df853 100644 --- a/ui-v2/app/styles/components/main-nav-horizontal/skin.scss +++ b/ui-v2/app/styles/components/main-nav-horizontal/skin.scss @@ -32,7 +32,7 @@ color: inherit; } %main-nav-horizontal-toggle, -%main-nav-horizontal input { +%main-nav-horizontal input[type='checkbox'] { display: none; } %main-nav-horizontal [type='checkbox'] + label > *::after { diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss index 1787d34eb0bf..f047be48d7a5 100644 --- a/ui-v2/app/styles/components/product.scss +++ b/ui-v2/app/styles/components/product.scss @@ -3,6 +3,16 @@ html body > svg { display: none; } +%main-nav-horizontal .docs-link a::after { + @extend %with-learn-icon, %as-pseudo; +} + +%main-nav-horizontal .learn-link a::after { + @extend %with-docs-icon, %as-pseudo; +} +%main-nav-horizontal .feedback-link a::after { + @extend %with-logo-github-monochrome-icon, %as-pseudo; +} html.ember-loading body > svg { @extend %brand-loader; } diff --git a/ui-v2/app/styles/components/product/index.scss b/ui-v2/app/styles/components/product/index.scss index 0cfc8c3de4d7..ae9742d37bd1 100644 --- a/ui-v2/app/styles/components/product/index.scss +++ b/ui-v2/app/styles/components/product/index.scss @@ -24,9 +24,6 @@ %secondary-nav { @extend %main-nav-horizontal; } -%primary-nav label + div { - @extend %main-nav-horizontal-drop-nav; -} @media #{$--lt-horizontal-nav} { %primary-nav { margin-top: 65px; diff --git a/ui-v2/app/templates/components/hashicorp-consul.hbs b/ui-v2/app/templates/components/hashicorp-consul.hbs index f6f844b71778..c68b77e7b85c 100644 --- a/ui-v2/app/templates/components/hashicorp-consul.hbs +++ b/ui-v2/app/templates/components/hashicorp-consul.hbs @@ -16,7 +16,7 @@ {{#if (and (eq nspaces.length 1) (not canManageNspaces)) }} {{nspace.Name}} {{ else }} - {{#popover-menu}} + {{#popover-menu position='left'}} {{#block-slot name='trigger'}} {{nspace.Name}} {{/block-slot}} @@ -51,7 +51,7 @@ {{#if (or (not dcs) (eq dcs.length 1)) }} {{dc.Name}} {{ else }} - {{#popover-menu}} + {{#popover-menu position='left'}} {{#block-slot name='trigger'}} {{dc.Name}} {{/block-slot}} @@ -90,7 +90,23 @@