From 7dfbc6e5168bec688c85edf0df95fabffbebf7f4 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 2 Nov 2021 13:26:34 +0000 Subject: [PATCH 01/18] WIP: code-editor-styling shame level: HIGH lots of TODOs and also a HACK to be handled. This commit will have to be reworded as well Signed-off-by: Alessandro De Blasis --- .../app/components/code-editor/index.hbs | 27 ++- .../app/components/code-editor/index.js | 1 + .../app/components/code-editor/layout.scss | 147 +++++++++++++ .../app/components/code-editor/skin.scss | 2 +- .../app/components/consul/kv/form/index.hbs | 4 +- .../app/components/policy-form/index.hbs | 7 +- .../app/components/policy-selector/index.hbs | 7 +- .../app/components/toolbar-actions/index.hbs | 3 + .../app/components/toolbar/index.hbs | 5 + .../app/components/toolbar/index.scss | 2 + .../app/components/toolbar/layout.scss | 196 ++++++++++++++++++ .../app/components/toolbar/skin.scss | 68 ++++++ ui/packages/consul-ui/app/styles/layout.scss | 9 +- .../dc/acls/tokens/-fieldsets-legacy.hbs | 8 +- 14 files changed, 467 insertions(+), 19 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/toolbar-actions/index.hbs create mode 100644 ui/packages/consul-ui/app/components/toolbar/index.hbs create mode 100644 ui/packages/consul-ui/app/components/toolbar/index.scss create mode 100644 ui/packages/consul-ui/app/components/toolbar/layout.scss create mode 100644 ui/packages/consul-ui/app/components/toolbar/skin.scss diff --git a/ui/packages/consul-ui/app/components/code-editor/index.hbs b/ui/packages/consul-ui/app/components/code-editor/index.hbs index a3d12d9e366b..4e68c903de18 100644 --- a/ui/packages/consul-ui/app/components/code-editor/index.hbs +++ b/ui/packages/consul-ui/app/components/code-editor/index.hbs @@ -1,11 +1,20 @@ + + + +
+ {{#if (and (not readonly) (not syntax))}} + + {{mode.name}} + + {{/if}} +
+ +
+ + 
{{yield}}
-{{#if (and (not readonly) (not syntax))}} - - {{mode.name}} - -{{/if}} diff --git a/ui/packages/consul-ui/app/components/code-editor/index.js b/ui/packages/consul-ui/app/components/code-editor/index.js index 8fd0aee41c36..a04400fa1972 100644 --- a/ui/packages/consul-ui/app/components/code-editor/index.js +++ b/ui/packages/consul-ui/app/components/code-editor/index.js @@ -16,6 +16,7 @@ export default Component.extend({ classNames: ['code-editor'], readonly: false, syntax: '', + title: '', // TODO: Change this to oninput to be consistent? We'll have to do it throughout the templates onkeyup: function() {}, oninput: function() {}, diff --git a/ui/packages/consul-ui/app/components/code-editor/layout.scss b/ui/packages/consul-ui/app/components/code-editor/layout.scss index 8375d23a5922..b34406a62fd1 100644 --- a/ui/packages/consul-ui/app/components/code-editor/layout.scss +++ b/ui/packages/consul-ui/app/components/code-editor/layout.scss @@ -3,6 +3,7 @@ border: 10px; overflow: hidden; position: relative; + clear: both; } %code-editor .ember-power-select-trigger { @extend %code-editor-syntax-select; @@ -32,3 +33,149 @@ %code-editor > pre { display: none; } + +//HACK: component level styling doesn't work, I must be doing something wrong, placing this here temporarily before refactoring +//variables/styles "stolen" from Vault, needs refactoring too +//ideally styles go at component level and separated in scope between layout and skin +//////////////// +$ui-gray-010: #fbfbfc; +$ui-gray-100: #ebeef2; +$ui-gray-200: #dce0e6; +$ui-gray-300: #bac1cc; +$ui-gray-500: #6f7682; +$black: #000; +$grey: $ui-gray-500; +$light-border: 1px solid $ui-gray-200; + +$blue-500: #1563ff; +$blue: $blue-500; + +$size-8: (12/14) + 0rem; // ~.857rem +$size-10: 0.5rem; + +$speed: 150ms; + +$spacing-xxs: 4px; +$spacing-xs: 8px; + +$base-border: 1px solid $ui-gray-300; + +.toolbar { + background-color: $ui-gray-010; + border: 1px solid $ui-gray-100; + border-bottom-color: $ui-gray-300; + border-top-color: $ui-gray-300; + position: relative; + + &::after { + background: linear-gradient(to right, $ui-gray-010, rgba($ui-gray-010, 0)); + bottom: 0; + content: ''; + position: absolute; + right: 0; + top: 0; + width: $spacing-xxs; + z-index: 2; + } + + .input, + .select { + min-width: 190px; + } +} + +.toolbar-label { + padding: $spacing-xs; + color: $grey; +} + +.toolbar-scroller { + align-items: center; + display: flex; + height: 44px; + justify-content: space-between; + overflow-x: auto; + width: 100%; + + // @include from($mobile) { + // padding: 0 $spacing-xxs; + // } + + &::-webkit-scrollbar { + border-bottom: $base-border; + height: $spacing-xxs; + } + + &::-webkit-scrollbar-thumb { + background: $ui-gray-300; + border-radius: $spacing-xxs; + } +} + +.toolbar-filters, +.toolbar-actions { + align-items: center; + display: flex; + flex: 1; + white-space: nowrap; + justify-content: space-between; + + .title { + color: #1f2124; + display: inline-block; + font-size: 14px; + font-weight: 700; + padding: 0 4px; + } + .actions { + display: flex; + flex-direction: row; + margin: 0 10px; + align-items: center; + } +} + +.toolbar-filters + .toolbar-actions { + // @include until($mobile) { + // border-left: $base-border; + // margin-left: $spacing-xs; + // padding-left: $spacing-xs; + // } +} + +.toolbar-actions { + // @include from($mobile) { + // justify-content: flex-end; + // } +} + +.toolbar-link { + // @extend .button; + // @extend .is-ghost; + // @extend .has-icon-right; + border: 0; + color: $black; + transition: background-color $speed; + + &:hover { + background-color: $ui-gray-100; + border: 0; + color: $blue; + } + + &:active { + box-shadow: none; + } + + &.popup-menu-trigger { + height: 2.5rem; + padding: $size-10 $size-8; + } +} + +.toolbar-separator { + border-right: $light-border; + height: 32px; + margin: 0 $spacing-xs; + width: 0; +} diff --git a/ui/packages/consul-ui/app/components/code-editor/skin.scss b/ui/packages/consul-ui/app/components/code-editor/skin.scss index e52b2bbaf446..5d3983619eab 100644 --- a/ui/packages/consul-ui/app/components/code-editor/skin.scss +++ b/ui/packages/consul-ui/app/components/code-editor/skin.scss @@ -24,7 +24,7 @@ $syntax-dark-gray: #535f73; --syntax-yellow: rgb(var(--tone-yellow-500)); } .CodeMirror { - max-width: 1150px; + //max-width: 1150px; //TODO: examining if this is what we want in review phase min-height: 300px; height: auto; /* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */ diff --git a/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs b/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs index 40d3ce3d8a40..7cc8528268e0 100644 --- a/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs @@ -38,16 +38,18 @@ Code +