From 6414fc32bf25de8db48802308d96e5b31993b07a Mon Sep 17 00:00:00 2001 From: Matthew Irish Date: Fri, 7 Dec 2018 14:00:52 -0600 Subject: [PATCH] UI - web cli layout (#5909) * move console/ui-panel into nav-header component * notch-specific CSS * add layout test in the application for the console --- ui/app/components/console/ui-panel.js | 1 + ui/app/components/nav-header.js | 2 ++ ui/app/index.html | 2 +- .../styles/components/console-ui-panel.scss | 21 +++----------- ui/app/styles/components/ui-wizard.scss | 3 ++ ui/app/styles/core/navbar.scss | 1 + ui/app/templates/components/nav-header.hbs | 11 +++---- ui/app/templates/vault/cluster.hbs | 3 +- ui/tests/acceptance/console-test.js | 29 +++++++++++++++++-- 9 files changed, 45 insertions(+), 28 deletions(-) diff --git a/ui/app/components/console/ui-panel.js b/ui/app/components/console/ui-panel.js index ee011ac1c4d2..9d68704bfd94 100644 --- a/ui/app/components/console/ui-panel.js +++ b/ui/app/components/console/ui-panel.js @@ -19,6 +19,7 @@ export default Component.extend({ router: service(), controlGroup: service(), store: service(), + 'data-test-component': 'console/ui-panel', classNames: 'console-ui-panel', classNameBindings: ['isFullscreen:fullscreen'], diff --git a/ui/app/components/nav-header.js b/ui/app/components/nav-header.js index 79378b3f3495..d295eb60a02a 100644 --- a/ui/app/components/nav-header.js +++ b/ui/app/components/nav-header.js @@ -2,8 +2,10 @@ import Component from '@ember/component'; export default Component.extend({ 'data-test-navheader': true, + classNameBindings: 'consoleFullscreen:panel-fullscreen', tagName: 'header', navDrawerOpen: false, + consoleFullscreen: false, actions: { toggleNavDrawer(isOpen) { if (isOpen !== undefined) { diff --git a/ui/app/index.html b/ui/app/index.html index b6ac17cc0940..f8c1aefd9194 100644 --- a/ui/app/index.html +++ b/ui/app/index.html @@ -7,7 +7,7 @@ Vault - + {{content-for "head"}} diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss index de3a10fcead9..26523f76c115 100644 --- a/ui/app/styles/components/console-ui-panel.scss +++ b/ui/app/styles/components/console-ui-panel.scss @@ -7,7 +7,6 @@ overflow: scroll; right: 0; top: $header-height; - transform: translate3d(0, -100%, -1); transition: min-height $speed ease-out, transform $speed ease-in; will-change: transform, min-height; -webkit-overflow-scrolling: touch; @@ -116,25 +115,13 @@ .panel-open .console-ui-panel { box-shadow: $box-shadow-highest; - transform: translate3d($drawer-width, 0, 0); min-height: 400px; - - @include from($mobile) { - transform: translate3d(0, 0, 0); - } } .panel-open .console-ui-panel.fullscreen { bottom: 0; - min-height: 100%; -} - -.navbar-drawer .console-ui-panel { - transform: translate3d($drawer-width, 0, 0); - - @include from($mobile) { - transform: translate3d(0, 0, 0); - } + top: 0; + min-height: 100vh; } .panel-open { @@ -148,7 +135,7 @@ .navbar, .navbar-sections { @include from($mobile) { - transform: translate3d(0, -100px, 0); + transform: translateY(-100px); } } } @@ -156,7 +143,7 @@ header .navbar, header .navbar-sections { z-index: 200; - transform: translate3d(0, 0, 0); + transform: translateY(0); will-change: transform; } diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 52cb4dc2a094..dbc2a659fb87 100644 --- a/ui/app/styles/components/ui-wizard.scss +++ b/ui/app/styles/components/ui-wizard.scss @@ -10,10 +10,13 @@ flex-grow: 1; transition: padding $speed; will-change: padding; + padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) + env(safe-area-inset-left); } .ui-wizard-container .app-content.wizard-open { padding-right: 324px; + padding-right: calc(324px + env(safe-area-inset-right)); @include until($tablet) { padding-right: 0; diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index a536f42b6c3a..7f6f79e86a83 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -30,6 +30,7 @@ } .navbar-drawer-toggle { + font-size: $size-6; color: $vault-gray; cursor: pointer; font-weight: $font-weight-semibold; diff --git a/ui/app/templates/components/nav-header.hbs b/ui/app/templates/components/nav-header.hbs index cef1e9122077..3e94991c67ae 100644 --- a/ui/app/templates/components/nav-header.hbs +++ b/ui/app/templates/components/nav-header.hbs @@ -4,22 +4,22 @@ {{#unless navDrawerOpen}} -
+
+ {{/unless}}
- {{yield (hash + {{yield (hash main=(component 'nav-header/main') closeDrawer=(action "toggleNavDrawer" false) ) }}
- {{yield (hash + {{yield (hash items=(component 'nav-header/items') closeDrawer=(action "toggleNavDrawer" false) ) @@ -34,5 +34,6 @@ {{/if}}
-
+
+{{console/ui-panel isFullscreen=consoleFullscreen}} diff --git a/ui/app/templates/vault/cluster.hbs b/ui/app/templates/vault/cluster.hbs index 32ebca80e21c..a0ad8b8ba0f2 100644 --- a/ui/app/templates/vault/cluster.hbs +++ b/ui/app/templates/vault/cluster.hbs @@ -1,5 +1,5 @@ {{#if showNav}} - @@ -77,7 +77,6 @@
- {{console/ui-panel isFullscreen=consoleFullscreen}} {{/if}} diff --git a/ui/tests/acceptance/console-test.js b/ui/tests/acceptance/console-test.js index 4c8db0a24d18..ddced02b7744 100644 --- a/ui/tests/acceptance/console-test.js +++ b/ui/tests/acceptance/console-test.js @@ -1,7 +1,12 @@ import { module, test } from 'qunit'; +import { create } from 'ember-cli-page-object'; +import { later } from '@ember/runloop'; import { setupApplicationTest } from 'ember-qunit'; import enginesPage from 'vault/tests/pages/secrets/backends'; import authPage from 'vault/tests/pages/auth'; +import consoleClass from 'vault/tests/pages/components/console/ui-panel'; + +const consoleComponent = create(consoleClass); module('Acceptance | console', function(hooks) { setupApplicationTest(hooks); @@ -13,13 +18,31 @@ module('Acceptance | console', function(hooks) { test("refresh reloads the current route's data", async function(assert) { await enginesPage.visit(); let numEngines = enginesPage.rows.length; - await enginesPage.consoleToggle(); + await consoleComponent.toggle(); let now = Date.now(); for (let num of [1, 2, 3]) { let inputString = `write sys/mounts/${now + num} type=kv`; - await enginesPage.console.runCommands(inputString); + await consoleComponent.runCommands(inputString); } - await enginesPage.console.runCommands('refresh'); + await consoleComponent.runCommands('refresh'); assert.equal(enginesPage.rows.length, numEngines + 3, 'new engines were added to the page'); }); + + test('fullscreen command expands the cli panel', async function(assert) { + await consoleComponent.toggle(); + await consoleComponent.runCommands('fullscreen'); + + // have to wrap in a later so that we can wait for the CSS transition to finish + await later(() => { + let consoleEle = document.querySelector('[data-test-component="console/ui-panel"]'); + + assert.equal( + consoleEle.offsetHeight, + window.innerHeight, + 'fullscreen is the same height as the window' + ); + + assert.equal(consoleEle.offsetTop, 0, 'fullscreen is aligned to the top of window'); + }, 300); + }); });