luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Extract and organize popover-menu and related from main-nav (#8272)

This commit is contained in:
John Cowen 2020-07-09 14:26:52 +01:00 committed by GitHub
parent 5b4c3057a5
commit 84dc2954bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 197 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-v2/app/components/popover-menu/index.hbs
View File

@ -1,4 +1,5 @@
{{yield}}
<div class="popover-menu" ...attributes>
<AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress ariaLabelledBy ariaControls ariaExpanded keypressClick|>
<ToggleButton
@checked={{if keyboardAccess ariaExpanded expanded}}
@ -39,4 +40,5 @@
</YieldSlot>
</BlockSlot>
</MenuPanel>
</AriaMenu>
</AriaMenu>
</div>

9
ui-v2/app/components/popover-select/pageobject.js Normal file
View File

@ -0,0 +1,9 @@
export default (clickable, collection) => (scope = '.popover-select') => {
return {
scope: scope,
selected: clickable('button'),
options: collection('li[role="none"]', {
button: clickable('button'),
}),
};
};

8
ui-v2/app/components/popover-sort/pageobject.js
View File

@ -1,8 +0,0 @@
import { clickable, collection } from 'ember-cli-page-object';
export default {
scope: '[data-popover-select]',
selected: clickable('button'),
options: collection('li[role="none"]', {
button: clickable('button'),
}),
};

13
ui-v2/app/styles/base/components/popover-menu/index.scss
View File

@ -1,15 +1,18 @@
@import './skin';
@import './layout';
%with-popover-menu > [type='checkbox'] {
.popover-menu {
@extend %popover-menu;
}
%popover-menu {
%popover-menu > [type='checkbox'] {
@extend %popover-menu-toggle;
}
%popover-menu-toggle {
@extend %display-toggle-siblings;
}
%popover-menu + label > * {
@extend %toggle-button;
%popover-menu-toggle + label {
@extend %popover-menu-trigger;
}
%popover-menu + label + div {
%popover-menu-trigger + div {
@extend %popover-menu-panel;
}
%popover-menu-panel {

5
ui-v2/app/styles/base/components/popover-menu/layout.scss
View File

@ -1,6 +1,9 @@
%with-popover-menu {
%popover-menu {
position: relative;
}
%popover-menu-trigger {
display: block;
}
%popover-menu-panel {
width: 192px;
}

13
ui-v2/app/styles/base/components/popover-menu/skin.scss
View File

@ -1,6 +1,13 @@
%popover-menu + label > *::after {
@extend %with-chevron-down-icon, %as-pseudo;
%popover-menu-trigger > * {
cursor: pointer;
}
%popover-menu-trigger > *::after {
@extend %with-chevron-down-mask, %as-pseudo;
width: 16px;
height: 16px;
margin-left: 16px;
position: relative;
top: 2px;
}
%popover-menu-toggle:checked + label > *::after {
@extend %with-chevron-up-mask;
}

3
ui-v2/app/styles/base/reset/system.scss
View File

@ -21,6 +21,9 @@ html {
hr {
background-color: $gray-500;
}
button {
background-color: $transparent;
}
html {
font-size: $typo-size-000;
}

3
ui-v2/app/styles/components/empty-state/index.scss
View File

@ -13,9 +13,6 @@
%empty-state > ul > li > label > button {
@extend %empty-state-anchor;
}
%empty-state > ul > li {
@extend %with-popover-menu;
}
%empty-state label {
@extend %primary-button;
}

23
ui-v2/app/styles/components/main-header-horizontal.scss
View File

@ -2,29 +2,6 @@
[role='banner'] {
@extend %main-header-horizontal;
}
%main-nav-horizontal .docs-link a::after {
@extend %with-docs-icon, %as-pseudo;
}
%main-nav-horizontal .learn-link a::after {
@extend %with-learn-icon, %as-pseudo;
}
%main-nav-horizontal .feedback-link a::after {
@extend %with-logo-github-monochrome-mask, %as-pseudo;
}
%main-header-horizontal::before {
background-color: var(--swatch-brand-600, $black);
}
%main-nav-horizontal-action,
%main-nav-horizontal-toggle-button {
color: var(--typo-brand-050, $black);
}
@media #{$--lt-horizontal-nav} {
%main-nav-horizontal-panel {
background-color: var(--swatch-brand-600, $black);
}
}
@media #{$--horizontal-nav} {
%main-nav-horizontal-action-active {
background-color: var(--swatch-brand-800, $black);
}
}

25
ui-v2/app/styles/components/main-nav-horizontal.scss
View File

@ -1,5 +1,20 @@
@import './main-nav-horizontal/index';
%main-nav-horizontal-action,
%main-nav-horizontal-toggle-button {
color: var(--typo-brand-050, $black);
}
%main-nav-horizontal .docs-link a::after {
@extend %with-docs-icon, %as-pseudo;
}
%main-nav-horizontal .learn-link a::after {
@extend %with-learn-icon, %as-pseudo;
}
%main-nav-horizontal .feedback-link a::after {
@extend %with-logo-github-monochrome-mask, %as-pseudo;
}
%main-header-horizontal nav:first-of-type {
@extend %primary-nav;
}
@ -10,6 +25,7 @@
%secondary-nav {
@extend %main-nav-horizontal;
}
%primary-nav .nspaces .menu-panel > div {
background-color: $gray-050;
padding-left: 36px;
@ -17,6 +33,7 @@
%primary-nav .nspaces .menu-panel > div::before {
@extend %with-info-circle-fill-mask, %as-pseudo;
color: $blue-500;
/* sizes the icon not the text */
font-size: 1.1em;
}
@ -30,6 +47,9 @@
@extend %main-nav-horizontal-toggle;
}
@media #{$--lt-horizontal-nav} {
%main-nav-horizontal-panel {
background-color: var(--swatch-brand-600, $black);
}
%primary-nav {
margin-top: 65px;
}
@ -40,3 +60,8 @@
font-weight: $typo-weight-bold;
}
}
@media #{$--horizontal-nav} {
%main-nav-horizontal-action-active {
background-color: var(--swatch-brand-800, $black);
}
}

38
ui-v2/app/styles/components/main-nav-horizontal/index.scss
View File

@ -1,33 +1,31 @@
@import './skin';
@import './layout';
/* things that should look like nav buttons */
%main-nav-horizontal > ul > li > a,
%main-nav-horizontal > ul > li > span,
%main-nav-horizontal > ul > li > label > * {
%main-nav-horizontal > ul > li > label,
%main-nav-horizontal > ul > li > .popover-menu > label > button {
@extend %main-nav-horizontal-action;
}
%main-nav-horizontal-action:not(span):hover,
%main-nav-horizontal-action:not(span):focus {
@extend %main-nav-horizontal-action-intent;
}
/* Whilst we want spans to look the same as actions */
/* we don't want them to act the same */
%main-nav-horizontal > ul > li > span {
cursor: default;
}
%main-nav-horizontal > ul > li > label {
display: block;
}
/* ^ why not in layout? because we want these */
/* overwrites to be close to where we extend? */
%main-nav-horizontal [type='checkbox']:checked + label > *,
%main-nav-horizontal .popover-menu [type='checkbox']:checked + label > *,
%main-nav-horizontal > ul > li > a:active,
%main-nav-horizontal > ul > li.is-active > a,
%main-nav-horizontal > ul > li.is-active > label > * {
@extend %main-nav-horizontal-action-active;
}
/* Whilst we want spans to look the same as actions */
/* we don't want them to act the same */
%main-nav-horizontal-action:not(span):hover,
%main-nav-horizontal-action:not(span):focus {
@extend %main-nav-horizontal-action-intent;
}
%main-nav-horizontal > ul > li > span {
cursor: default;
}
/**/
/* menu-panels in the main navigation are treated slightly differently */
%main-nav-horizontal label + div {
@extend %main-nav-horizontal-drop-nav;
}
%main-nav-horizontal-drop-nav {
@extend %menu-panel;
@extend %main-nav-horizontal-menu-panel;
}

148
ui-v2/app/styles/components/main-nav-horizontal/layout.scss
View File

@ -1,50 +1,73 @@
%main-nav-horizontal > ul > li > [type='checkbox'] ~ div {
display: none;
}
%main-nav-horizontal > ul > li > [type='checkbox']:checked ~ div {
display: block;
}
%main-nav-horizontal [type='checkbox'] + label > * {
%main-nav-horizontal .popover-menu > label > * {
/* less space as the chevron adds space */
padding-right: 4px !important;
}
%main-nav-horizontal > ul > li {
position: relative;
}
%main-nav-horizontal-action {
display: block;
padding: 5px 12px;
white-space: nowrap;
}
%main-nav-horizontal-drop-nav {
%main-nav-horizontal-menu-panel {
z-index: 400;
/* TODO: We should probably make menu-panel default to left hand side*/
left: 0;
right: auto;
top: 28px !important;
}
@media #{$--horizontal-nav} {
%main-nav-horizontal > ul,
%main-nav-horizontal-panel {
display: flex;
}
%main-nav-horizontal-panel {
justify-content: space-between;
flex-grow: 1;
}
%main-nav-horizontal-menu-panel {
min-width: 266px;
}
%main-nav-horizontal-toggle-button {
display: none;
}
%main-nav-horizontal .popover-menu > label {
/* Usually there is no space between buttons which is */
/* fine as the button only highlights when its selected */
/* therefore no two siblings are highlighted at the same time */
/* which means you don't notice there is no space between the */
/* buttons. popover-menu triggers on the other hand can be */
/* at the same time as a sibling, therefore they need a little */
/* space between it and its sibling - this is a poroperty of */
/* the main nav not the popover-menu */
padding-right: 5px;
}
}
@media #{$--lt-horizontal-nav} {
%main-nav-horizontal-panel label span {
visibility: visible !important;
display: inline-block;
padding-right: 47px;
padding-top: 13px;
}
%main-nav-horizontal button {
width: 100%;
}
%main-nav-horizontal-panel {
transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
transition-duration: 0.2s;
transition-property: width right;
}
%main-nav-horizontal-panel {
box-sizing: border-box;
padding: 15px 35px;
z-index: 499;
}
%main-nav-horizontal-action {
padding-top: 15px;
padding-bottom: 15px;
text-align: right;
}
%main-nav-horizontal .popover-menu > label {
display: flex;
flex-direction: row-reverse;
}
%main-nav-horizontal-menu-panel {
width: 180px;
top: 38px !important;
}
%main-nav-horizontal-toggle:checked ~ div {
width: 250px;
right: 0;
padding: 15px 35px;
padding-top: 0;
}
%main-nav-horizontal-toggle:checked + label {
width: 100vw;
height: 100%;
left: 0;
top: 0;
}
%main-nav-horizontal-toggle-button {
position: absolute;
z-index: 200;
@ -59,67 +82,26 @@
margin-top: -0.6em;
}
%main-nav-horizontal-panel {
box-sizing: border-box;
overflow: auto;
position: absolute;
z-index: 300;
width: 0;
height: 100%;
top: 0;
right: -100%;
width: 0;
height: 100%;
padding: 0;
padding-top: 15px;
}
%main-nav-horizontal-toggle:checked ~ div {
width: 250px;
right: 0;
padding: 15px 35px;
padding-top: 0;
%main-nav-horizontal-panel {
transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
transition-duration: 0.2s;
transition-property: width right;
}
%main-nav-horizontal-toggle:checked + label {
width: 100vw;
height: 100%;
left: 0;
top: 0;
}
%main-nav-horizontal-drop-nav {
width: 180px;
top: 38px !important;
}
%main-nav-horizontal input + label > * {
right: -15px;
position: relative;
}
%main-nav-horizontal-action {
padding-top: 15px;
padding-bottom: 15px;
}
}
@media #{$--horizontal-nav} {
%main-nav-horizontal-panel {
display: flex;
}
%main-nav-horizontal-panel {
justify-content: space-between;
flex-grow: 1;
}
%main-nav-horizontal-toggle-button {
display: none;
}
%main-nav-horizontal > ul {
display: flex;
}
%main-nav-horizontal-drop-nav {
min-width: 266px;
}
%main-nav-horizontal input + label {
/* Usually there is no space between buttons which is */
/* fine as the button only highlights when its selected */
/* therefore no two siblings are highlighted at the same time */
/* which means you don't notice there is no space between the */
/* buttons. popover-menu triggers on the other hand can be */
/* at the same time as a sibling, therefore they need a little */
/* space between it and its sibling - this is a poroperty of */
/* the main nav not the popover-menu */
padding-right: 5px;
%main-nav-horizontal-panel label span {
visibility: visible !important;
display: inline-block;
padding-right: 47px;
padding-top: 13px;
}
}

38
ui-v2/app/styles/components/main-nav-horizontal/skin.scss
View File

@ -1,23 +1,6 @@
%main-nav-horizontal-toggle-button {
text-indent: -9000px;
}
%main-nav-horizontal-toggle-button::before {
@extend %with-more-vertical-mask, %as-pseudo;
background-color: $white;
font-size: 1.2em;
}
%main-nav-horizontal label > button {
font-size: inherit;
font-weight: inherit;
color: inherit;
background-color: transparent;
}
/* nav buttons */
%main-nav-horizontal-action {
border-radius: $decor-radius-200;
}
%main-nav-horizontal-action {
cursor: pointer;
}
%main-nav-horizontal-action,
@ -28,19 +11,18 @@
%main-nav-horizontal-action > a {
color: inherit;
}
%main-nav-horizontal-toggle,
%main-nav-horizontal input[type='checkbox'] {
/**/
/* reduced size hamburger menu */
%main-nav-horizontal-toggle {
display: none;
}
%main-nav-horizontal [type='checkbox'] + label > *::after {
@extend %as-pseudo;
@extend %with-chevron-down-mask;
position: relative;
top: 2px;
background-color: $white;
%main-nav-horizontal-toggle-button {
text-indent: -9000px;
}
%main-nav-horizontal [type='checkbox']:checked + label > *::after {
@extend %with-chevron-up-mask;
%main-nav-horizontal-toggle-button::before {
@extend %with-more-vertical-mask, %as-pseudo;
background-color: $white;
font-size: 1.2em;
}
%main-nav-horizontal-toggle-button span {
visibility: hidden;

28
ui-v2/app/styles/components/more-popover-menu.scss
View File

@ -2,23 +2,39 @@
@extend %more-popover-menu;
}
%more-popover-menu {
@extend %with-popover-menu;
@extend %popover-menu;
}
%more-popover-menu > [type='checkbox'] + label {
/* using the inut in the selector here means it won't */
/* take on the default :checked chevron icon */
%more-popover-menu .popover-menu > [type='checkbox'] + label {
@extend %more-popover-menu-trigger;
}
/* This gives the trigger a slightly larger invisible hit area */
%more-popover-menu-trigger {
padding: 7px;
display: block;
}
%more-popover-menu-trigger > * {
font-size: 0;
background-color: $transparent;
padding: 0;
border-radius: $decor-radius-100;
width: 30px;
height: 30px;
font-size: 0;
}
%more-popover-menu-trigger > *::after {
@extend %with-more-horizontal-mask, %as-pseudo;
background-color: $gray-900;
margin: 0;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
}
%more-popover-menu-trigger > *:active {
background-color: $gray-100;
}
%more-popover-menu-trigger > *:hover,
%more-popover-menu-trigger > *:focus {
background-color: $gray-050;
}

7
ui-v2/app/styles/components/popover-select.scss
View File

@ -2,10 +2,15 @@
@extend %popover-select;
}
%popover-select {
@extend %with-popover-menu;
@extend %popover-menu;
}
%popover-select label > * {
@extend %split-button, %sort-button;
height: 35px;
}
%popover-select label > *::after {
top: 0 !important;
margin-left: 16px;
}
%popover-select {
z-index: 3;

14
ui-v2/tests/pages.js
View File

@ -23,7 +23,6 @@ import pageFactory from 'consul-ui/components/hashicorp-consul/pageobject';
import radiogroup from 'consul-ui/components/radio-group/pageobject';
import tabgroup from 'consul-ui/components/tab-nav/pageobject';
import popoverSort from 'consul-ui/components/popover-sort/pageobject';
import authFormFactory from 'consul-ui/components/auth-form/pageobject';
import freetextFilterFactory from 'consul-ui/components/freetext-filter/pageobject';
@ -34,6 +33,7 @@ import policySelectorFactory from 'consul-ui/components/policy-selector/pageobje
import roleFormFactory from 'consul-ui/components/role-form/pageobject';
import roleSelectorFactory from 'consul-ui/components/role-selector/pageobject';
import popoverSelectFactory from 'consul-ui/components/popover-select/pageobject';
import morePopoverMenuFactory from 'consul-ui/components/more-popover-menu/pageobject';
import tokenListFactory from 'consul-ui/components/token-list/pageobject';
@ -93,6 +93,7 @@ const roleForm = roleFormFactory(submitable, cancelable, policySelector);
const roleSelector = roleSelectorFactory(clickable, deletable, collection, alias, roleForm);
const morePopoverMenu = morePopoverMenuFactory(clickable);
const popoverSelect = popoverSelectFactory(clickable, collection);
const consulIntentionList = consulIntentionListFactory(collection, clickable, attribute, deletable);
const consulTokenList = consulTokenListFactory(
@ -131,7 +132,16 @@ export default {
index: create(index(visitable, collection)),
dcs: create(dcs(visitable, clickable, attribute, collection)),
services: create(
services(visitable, clickable, text, attribute, isPresent, collection, popoverSort, radiogroup)
services(
visitable,
clickable,
text,
attribute,
isPresent,
collection,
popoverSelect,
radiogroup
)
),
service: create(
service(visitable, attribute, collection, text, consulIntentionList, catalogToolbar, tabgroup)

4
ui-v2/tests/pages/dc/services/index.js
View File

@ -1,4 +1,4 @@
export default function(visitable, clickable, text, attribute, present, collection, popoverSort) {
export default function(visitable, clickable, text, attribute, present, collection, popoverSelect) {
const service = {
name: text('[data-test-service-name]'),
service: clickable('a'),
@ -13,6 +13,6 @@ export default function(visitable, clickable, text, attribute, present, collecti
name: clickable('a'),
}),
home: clickable('[data-test-home]'),
sort: popoverSort,
sort: popoverSelect(),
};
}