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

Change KV inputs to textareas, also JSON > CODE 

As the input field was used for KV's it looked like you couldn't save
multiline KV's. Changed to textarea so you can see the multilines.

Also, JSON is slightly misleading as clicking the toggle doesn't
necessarily mean 'I'm going to edit some JSON' it means I want the code
editor with syntax highlighting, so renamed the toggle to say 'Code'
This commit is contained in:
John Cowen 2018-05-24 13:08:08 +01:00
parent b9c23dee69
commit fddc36f02f
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-v2/app/styles/components/form-elements.scss
View File

@ -14,8 +14,10 @@
display: block; display: block;
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;
padding: 0.625em; min-height: 70px;
padding: 0.625em 15px;
resize: vertical; resize: vertical;
line-height: 1.5;
} }
%form-element [type='text'], %form-element [type='text'],
%form-element [type='password'] { %form-element [type='password'] {
@ -37,14 +39,16 @@
box-shadow: none; box-shadow: none;
border-radius: $radius-small; border-radius: $radius-small;
} }
.has-error > input { .has-error > input,
.has-error > textarea {
border: 1px solid; border: 1px solid;
} }
%form-element > span { %form-element > span {
color: $text-gray; color: $text-gray;
} }
%form-element [type='text'], %form-element [type='text'],
%form-element [type='password'] { %form-element [type='password'],
%form-element textarea {
color: $user-text-gray; color: $user-text-gray;
} }
%form-element [type='text'], %form-element [type='text'],

1
ui-v2/app/styles/core/typography.scss
View File

@ -63,6 +63,7 @@ h2,
body, body,
pre code, pre code,
input, input,
textarea,
td { td {
font-size: $size-6; font-size: $size-6;
} }

4
ui-v2/app/templates/dc/kv/-form.hbs
View File

@ -11,14 +11,14 @@
<div> <div>
<label class="type-toggle"> <label class="type-toggle">
<input type="checkbox" name="json" checked={{if json 'checked' }} onchange={{action 'change'}} /> <input type="checkbox" name="json" checked={{if json 'checked' }} onchange={{action 'change'}} />
<span>JSON</span> <span>Code</span>
</label> </label>
<label class="type-text{{if item.error.Value ' has-error'}}"> <label class="type-text{{if item.error.Value ' has-error'}}">
<span>Value</span> <span>Value</span>
{{#if json}} {{#if json}}
{{ code-editor value=(atob item.Value) onkeyup=(action 'change') }} {{ code-editor value=(atob item.Value) onkeyup=(action 'change') }}
{{else}} {{else}}
<input autofocus={{not create}} type="text" name="value" value={{atob item.Value}} onkeyup={{action 'change'}} /> <textarea autofocus={{not create}} name="value" onkeyup={{action 'change'}}>{{atob item.Value}}</textarea>
{{/if}} {{/if}}
</label> </label>
</div> </div>