diff --git a/.changelog/11474.txt b/.changelog/11474.txt new file mode 100644 index 000000000..486db5630 --- /dev/null +++ b/.changelog/11474.txt @@ -0,0 +1,6 @@ +```release-note:bug +ui: code editor styling (layout consistency + wide screen support) +``` +```release-note:improvement +ui: added copy to clipboard button in code editor toolbars +``` diff --git a/ui/packages/consul-ui/app/components/code-editor/README.mdx b/ui/packages/consul-ui/app/components/code-editor/README.mdx index 665b77bf7..cdf13110f 100644 --- a/ui/packages/consul-ui/app/components/code-editor/README.mdx +++ b/ui/packages/consul-ui/app/components/code-editor/README.mdx @@ -6,6 +6,49 @@ state: needs-love # CodeEditor ```hbs preview-template - - + + <:label> + Rules (HCL Format) + + <:content> + + + + ``` + +A code-editor with syntax highlighting supporting multiple languages (JSON, HCL, YAML), validation and simple tools such as "Copy to clipboard" + + +### Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `readonly` | `Boolean` | false | If true, the content (value) of the CodeEditor cannot be changed by the user | +| `name` | `String` | | The name attribute of the form element | +| `syntax` | `String` | | Identifies the language used to validate/syntax highlight the code (possible values: hcl, json, yaml) | +| `oninput` | `Action` | noop | Action/callback that is triggered when the user inputs data | + +### Named Blocks + +| Name | Description | Behaviour if empty | +| --- | --- | --- | +| `:label` | Used to define the title that's displayed on the left inside the toolbar above the CodeEditor | Nothing is displayed | +| `:tools` | Used to define tools, buttons, widgets that will be displayed on the right inside the toolbar above the CodeEditor | By default it renders a `language selector` dropdown (if `readonly`== false and `syntax` is falsy) and a `CopyButton` +| `:content` | Used to display specific content such as code templates inside the CodeEditor | if the block is defined, @value will be displayed instead | + + +### See + +- [Component Source Code](./index.js) +- [Template Source Code](./index.hbs) + +--- 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 a3d12d9e3..d994307bd 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,28 @@ +
+
+ +
+ {{#if (has-block "tools")}} + {{yield to="tools"}} + {{else}} + {{#if (and (not readonly) (not syntax))}} + + {{mode.name}} + +
+ + {{/if}} + {{/if}} +
+
+
-
{{yield}}
-{{#if (and (not readonly) (not syntax))}} - - {{mode.name}} - -{{/if}} +
{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}
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 8375d23a5..8eca313da 100644 --- a/ui/packages/consul-ui/app/components/code-editor/layout.scss +++ b/ui/packages/consul-ui/app/components/code-editor/layout.scss @@ -3,23 +3,9 @@ border: 10px; overflow: hidden; position: relative; + clear: both; } -%code-editor .ember-power-select-trigger { - @extend %code-editor-syntax-select; -} -%code-editor-syntax-select { - width: 200px; - float: right; - z-index: 1; -} -%code-editor-syntax-select { - margin-top: 1px; - border: 0; - background-color: rgb(var(--black)); - color: rgb(var(--white)); - border-left: 1px solid; - border-radius: 0; -} + %code-editor::after { position: absolute; bottom: 0px; @@ -32,3 +18,51 @@ %code-editor > pre { display: none; } + +%code-editor { + .toolbar-container, + .toolbar-container .toolbar { + align-items: center; + justify-content: space-between; + display: flex; + } + + .toolbar-container { + position: relative; + margin-top: 4px; + height: 44px; + + .toolbar { + flex: 1; + white-space: nowrap; + + .title { + padding: 0 8px; + } + + .toolbar-separator { + height: 32px; + margin: 0 4px; + width: 0; + } + + .tools { + display: flex; + flex-direction: row; + margin: 0 10px; + align-items: center; + .copy-button { + margin-left: 10px; + } + } + } + .ember-basic-dropdown-trigger { + margin: 0 8px; + width: 120px; + height: 32px; + display: flex; + align-items: center; + flex-direction: row; + } + } +} 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 e52b2bbaf..fc65b498b 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: 1260px; min-height: 300px; height: auto; /* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */ @@ -186,3 +186,35 @@ $syntax-dark-gray: #535f73; } } } + +%code-editor { + .toolbar-container { + background: rgb(var(--tone-gray-050)); + background: linear-gradient( + 180deg, + rgb(var(--tone-gray-050)) 50%, + rgb(var(--tone-gray-150)) 100% + ); + border: 1px solid rgb(var(--tone-gray-150)); + border-bottom-color: rgb(var(--tone-gray-600)); + border-top-color: rgb(var(--tone-gray-400)); + + .toolbar { + .title { + color: rgb(var(--tone-gray-900)); + font-size: 14px; + font-weight: 700; + } + .toolbar-separator { + border-right: 1px solid rgb(var(--tone-gray-300)); + } + } + .ember-power-select-trigger { + background-color: rgb(var(--tone-gray-000)); + color: rgb(var(--tone-gray-999)); + border-radius: var(--decor-radius-100); + border: var(--decor-border-100); + border-color: rgb(var(--tone-gray-700)); + } + } +} 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 40d3ce3d8..9b8f366e3 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,19 @@ Code +