From e919f00287fc4a97ded706a6b30ab5ba20c0f128 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 15 Jun 2020 14:48:30 -0500 Subject: [PATCH 01/24] Add inert search components --- ui/app/components/global-search/control.js | 23 ++++++++++++ ui/app/styles/components.scss | 2 + .../components/global-search-control.scss | 37 +++++++++++++++++++ .../components/global-search-dropdown.scss | 32 ++++++++++++++++ ui/app/styles/core/navbar.scss | 8 ++-- ui/app/templates/components/global-header.hbs | 1 + .../components/global-search/control.hbs | 13 +++++++ .../components/global-search/message.hbs | 0 .../components/global-search/trigger.hbs | 4 ++ 9 files changed, 117 insertions(+), 3 deletions(-) create mode 100644 ui/app/components/global-search/control.js create mode 100644 ui/app/styles/components/global-search-control.scss create mode 100644 ui/app/styles/components/global-search-dropdown.scss create mode 100644 ui/app/templates/components/global-search/control.hbs create mode 100644 ui/app/templates/components/global-search/message.hbs create mode 100644 ui/app/templates/components/global-search/trigger.hbs diff --git a/ui/app/components/global-search/control.js b/ui/app/components/global-search/control.js new file mode 100644 index 00000000000..a37efbcf99a --- /dev/null +++ b/ui/app/components/global-search/control.js @@ -0,0 +1,23 @@ +import Component from '@ember/component'; +import { tagName } from '@ember-decorators/component'; +import { task } from 'ember-concurrency'; +import { action } from '@ember/object'; + +@tagName('') +export default class GlobalSearchControl extends Component { + @task(function*() {}) + search; + + @action select() {} + + calculatePosition(trigger) { + const { top, left, width } = trigger.getBoundingClientRect(); + return { + style: { + left, + width, + top, + }, + }; + } +} diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss index 1bfd76d9b42..c0f81710ec7 100644 --- a/ui/app/styles/components.scss +++ b/ui/app/styles/components.scss @@ -11,6 +11,8 @@ @import './components/exec-button'; @import './components/exec-window'; @import './components/fs-explorer'; +@import './components/global-search-control'; +@import './components/global-search-dropdown'; @import './components/gutter'; @import './components/gutter-toggle'; @import './components/image-file.scss'; diff --git a/ui/app/styles/components/global-search-control.scss b/ui/app/styles/components/global-search-control.scss new file mode 100644 index 00000000000..e42243b5021 --- /dev/null +++ b/ui/app/styles/components/global-search-control.scss @@ -0,0 +1,37 @@ +.global-search { + width: 30em; + + .ember-power-select-trigger { + background: $nomad-green-darker; + + .icon { + margin-top: 1px; + margin-left: 2px; + + fill: white; + opacity: 0.7; + } + + .placeholder { + opacity: 0.7; + display: inline-block; + padding-left: 2px; + transform: translateY(-1px); + } + + &.ember-power-select-trigger--active { + background: white; + + .icon { + fill: black; + opacity: 1; + } + } + } + + .ember-basic-dropdown-content-wormhole-origin { + position: absolute; + top: 0; + width: 100%; + } +} diff --git a/ui/app/styles/components/global-search-dropdown.scss b/ui/app/styles/components/global-search-dropdown.scss new file mode 100644 index 00000000000..adbeaec857f --- /dev/null +++ b/ui/app/styles/components/global-search-dropdown.scss @@ -0,0 +1,32 @@ +.global-search-dropdown { + background: transparent; + border: 0; + position: fixed; + + input, + input:focus { + background: transparent; + border: 0; + outline: 0; + } + + .ember-power-select-options { + background: white; + padding: 0.35rem; + + &[role='listbox'] { + border: 1px solid $grey-blue; + box-shadow: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1); + } + + .ember-power-select-option { + padding: 0.2rem 0.4rem; + border-radius: $radius; + + &[aria-current='true'] { + background: transparentize($blue, 0.8); + color: $blue; + } + } + } +} diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 48a2a065d76..1ef5197921a 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -8,6 +8,8 @@ padding-left: 20px; padding-right: 20px; overflow: hidden; + align-items: center; + justify-content: space-between; .navbar-item { color: rgba($primary-invert, 0.8); @@ -35,7 +37,7 @@ display: block; position: absolute; left: 0px; - top: 1.25em; + top: 1.25em; // FIXME positioning is off with .is-primary align-items: center } } } @@ -44,7 +46,7 @@ display: flex; align-items: stretch; justify-content: flex-end; - margin-left: auto; + margin-left: inherit; } .navbar-end > a.navbar-item { @@ -100,7 +102,7 @@ display: flex; align-items: center; justify-content: flex-end; - margin-left: auto; + margin-left: inherit; } .navbar-end > a.navbar-item { diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs index 23c5aa05ccf..4fe743ba46e 100644 --- a/ui/app/templates/components/global-header.hbs +++ b/ui/app/templates/components/global-header.hbs @@ -7,6 +7,7 @@ {{partial "partials/nomad-logo"}} + {{global-search/control}} - {{global-search/control}} + - + {{#unless (media "isMobile")}} + + {{/unless}}