From 187c01e349d3d558d35b8bf935b571a88a5b2b39 Mon Sep 17 00:00:00 2001 From: Jared Tabor Date: Tue, 26 Jan 2016 09:37:28 -0800 Subject: [PATCH 1/2] Restyling of textarea input fields This mostly includes the Code Mirror instances as well as textarea fields on the credentials form. Also includes the styling of radio button for the variables textarea box. --- awx/ui/client/legacy-styles/ansible-ui.less | 10 ++-- awx/ui/client/legacy-styles/forms.less | 48 +++++++++++++++++++ .../lib/AngularCodeMirror.css | 11 ++--- awx/ui/client/src/forms/ActivityDetail.js | 3 +- awx/ui/client/src/forms/Credentials.js | 4 +- awx/ui/client/src/forms/Groups.js | 3 +- awx/ui/client/src/forms/Hosts.js | 4 +- awx/ui/client/src/forms/Inventories.js | 2 +- awx/ui/client/src/forms/JobTemplates.js | 3 +- awx/ui/client/src/forms/Source.js | 3 ++ awx/ui/client/src/helpers/Parse.js | 12 ++++- .../inventory-scripts.form.js | 1 - awx/ui/client/src/partials/inventories.html | 1 - .../src/shared/branding/colors.default.less | 2 + awx/ui/client/src/shared/form-generator.js | 35 +++++++++----- 15 files changed, 107 insertions(+), 35 deletions(-) diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index 9b13c6e926..41076d3dc9 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -519,10 +519,6 @@ td.actions { border-color: #ccc; } -.ssh-key-field, .mono-space { - font-family: Fixed, monospace; -} - /* Make a div or any element behave like pre. Use in conjunction with .mono-space */ .pre { white-space: pre; @@ -1519,6 +1515,12 @@ a.btn-disabled:hover { .parse-select .parse-label { margin-left: 3px; + color: @field-input-text; + } + + .parse-label { + color: @field-input-text; + font-weight: normal; } .external-editor-link { diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index 8994364e87..c5c26b0c95 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -140,11 +140,59 @@ padding-right: 50px; } +.Form-textArea{ + width:100%; +} + +.CodeMirror{ + border-radius: 5px; + font-family: 'Open Sans'; + font-style: normal; + color: @default-data-txt; +} + +.CodeMirror-gutters{ + background-color:@code-mirror-gutter !important; +} + +input[type='radio'] { + -webkit-appearance:none; + width:14px; + height:14px; + border:1px solid @radio-bg; + border-radius:50%; + outline:none; + vertical-align: sub; +} + +input[type='radio']:focus { + outline:none; +} + +input[type='radio']:hover { + box-shadow:0 0 5px 0px @btn-bg-hov inset; +} + +input[type='radio']:before { + content:''; + display:block; + width:65%; + height:60%; + margin: 20% auto; + border-radius:50%; +} + +input[type='radio']:checked:before { + background:@radio-bg; + outline:none; +} + .Form-inputLabel{ text-transform: uppercase; color: @default-interface-txt; font-weight: normal; font-size: small; + padding-right:5px; } .Form-buttons{ diff --git a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css index f233cc2941..a81ff6dff4 100644 --- a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css +++ b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css @@ -1,6 +1,6 @@ /********************************************** * AngularCodeMirror.css - * + * * CodeMirror.css overrides * * Copyright (c) 2014 Chris Houseknecht @@ -30,14 +30,14 @@ .CodeMirror { height: auto; } - + .CodeMirror-activeline-background { background-color: #f7f7f7; } - -/* Modal dialog overrides to make jqueryui dialog blend in with Twitter. + +/* Modal dialog overrides to make jqueryui dialog blend in with Twitter. Why? Twitter's modal is not draggable or resizable, which is not very useful for a code editor */ @@ -71,7 +71,7 @@ border-color: #ffffff; color: #A9A9A9; } - + .ui-dialog .ui-resizable-se { right: 5px; bottom: 5px; @@ -108,4 +108,3 @@ .CodeMirror-lint-tooltip { z-index: 2060; } - diff --git a/awx/ui/client/src/forms/ActivityDetail.js b/awx/ui/client/src/forms/ActivityDetail.js index 87abcc629d..88a6dde4e5 100644 --- a/awx/ui/client/src/forms/ActivityDetail.js +++ b/awx/ui/client/src/forms/ActivityDetail.js @@ -3,7 +3,7 @@ * * All Rights Reserved *************************************************/ - + /** * @ngdoc overview * @name forms @@ -41,6 +41,7 @@ export default changes: { label: 'Changes', type: 'textarea', + class: 'Form-textArea', ngHide: "!changes || changes =='' || changes == 'null'", readonly: true } diff --git a/awx/ui/client/src/forms/Credentials.js b/awx/ui/client/src/forms/Credentials.js index f352028e96..1673b84b6a 100644 --- a/awx/ui/client/src/forms/Credentials.js +++ b/awx/ui/client/src/forms/Credentials.js @@ -20,7 +20,7 @@ export default forceListeners: true, actions: { - + }, fields: { @@ -263,11 +263,11 @@ export default variable: 'key_required', init: true }, + class: 'Form-textArea', hintText: "{{ key_hint }}", addRequired: false, editRequired: false, awDropFile: true, - 'class': 'ssh-key-field', rows: 10, awPopOver: "SSH key description", awPopOverWatch: "key_description", diff --git a/awx/ui/client/src/forms/Groups.js b/awx/ui/client/src/forms/Groups.js index f749815e2e..de27d45d57 100644 --- a/awx/ui/client/src/forms/Groups.js +++ b/awx/ui/client/src/forms/Groups.js @@ -3,7 +3,7 @@ * * All Rights Reserved *************************************************/ - + /** * @ngdoc function * @name forms.function:Groups @@ -39,6 +39,7 @@ export default variables: { label: 'Variables', type: 'textarea', + class: 'Form-textArea', addRequired: false, editRequird: false, rows: 12, diff --git a/awx/ui/client/src/forms/Hosts.js b/awx/ui/client/src/forms/Hosts.js index 15bc3d875c..4158917fc2 100644 --- a/awx/ui/client/src/forms/Hosts.js +++ b/awx/ui/client/src/forms/Hosts.js @@ -3,7 +3,7 @@ * * All Rights Reserved *************************************************/ - + /** * @ngdoc function * @name forms.function:Hosts @@ -62,7 +62,7 @@ export default addRequired: false, editRequird: false, rows: 6, - "class": "modal-input-xlarge", + "class": "modal-input-xlarge Form-textArea", "default": "---", awPopOver: "

Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.

" + "JSON:
\n" + diff --git a/awx/ui/client/src/forms/Inventories.js b/awx/ui/client/src/forms/Inventories.js index ac20caf919..1c5567c503 100644 --- a/awx/ui/client/src/forms/Inventories.js +++ b/awx/ui/client/src/forms/Inventories.js @@ -49,7 +49,7 @@ export default variables: { label: 'Variables', type: 'textarea', - 'class': 'span12', + 'class': 'Form-textArea', addRequired: false, editRequird: false, rows: 6, diff --git a/awx/ui/client/src/forms/JobTemplates.js b/awx/ui/client/src/forms/JobTemplates.js index 097f062635..d8fe7267a4 100644 --- a/awx/ui/client/src/forms/JobTemplates.js +++ b/awx/ui/client/src/forms/JobTemplates.js @@ -177,7 +177,6 @@ export default rows: 1, addRequired: false, editRequired: false, - 'class': 'span12', column: 2, awPopOver: "

Provide a comma separated list of tags.

\n" + "

Tags are useful when you have a large playbook, and you want to run a specific part of a play or task.

" + @@ -192,8 +191,8 @@ export default variables: { label: 'Extra Variables', type: 'textarea', + class: 'Form-textArea', rows: 6, - "class": 'span12', addRequired: false, editRequired: false, "default": "---", diff --git a/awx/ui/client/src/forms/Source.js b/awx/ui/client/src/forms/Source.js index 19780c3df0..4b3f8838db 100644 --- a/awx/ui/client/src/forms/Source.js +++ b/awx/ui/client/src/forms/Source.js @@ -126,6 +126,7 @@ export default label: 'Environment Variables', //"{{vars_label}}" , ngShow: "source && source.value=='custom' ", type: 'textarea', + class: 'Form-textArea', addRequired: false, editRequired: false, rows: 6, @@ -144,6 +145,7 @@ export default label: 'Source Variables', //"{{vars_label}}" , ngShow: "source && (source.value == 'file' || source.value == 'ec2')", type: 'textarea', + class: 'Form-textArea', addRequired: false, editRequird: false, rows: 6, @@ -170,6 +172,7 @@ export default "source.value == 'openstack')", type: 'textarea', addRequired: false, + class: 'Form-textArea', editRequird: false, rows: 6, 'default': '---', diff --git a/awx/ui/client/src/helpers/Parse.js b/awx/ui/client/src/helpers/Parse.js index eb79800bd1..d769bae611 100644 --- a/awx/ui/client/src/helpers/Parse.js +++ b/awx/ui/client/src/helpers/Parse.js @@ -3,7 +3,7 @@ * * All Rights Reserved *************************************************/ - + /** * @ngdoc function * @name helpers.function:Parse @@ -47,7 +47,15 @@ export default //hide the textarea and show a fresh CodeMirror with the current mode (json or yaml) scope.codeMirror = AngularCodeMirror(); scope.codeMirror.addModes($AnsibleConfig.variable_edit_modes); - scope.codeMirror.showTextArea({ scope: scope, model: fld, element: field_id, mode: scope[pfld], onReady: onReady, onChange: onChange }); + scope.codeMirror.showTextArea({ + scope: scope, + model: fld, + element: field_id, + lineNumbers: true, + mode: scope[pfld], + onReady: onReady, + onChange: onChange + }); } // Hide the textarea and show a CodeMirror editor diff --git a/awx/ui/client/src/inventory-scripts/inventory-scripts.form.js b/awx/ui/client/src/inventory-scripts/inventory-scripts.form.js index 213a6cfcc6..61d256a098 100644 --- a/awx/ui/client/src/inventory-scripts/inventory-scripts.form.js +++ b/awx/ui/client/src/inventory-scripts/inventory-scripts.form.js @@ -50,7 +50,6 @@ export default function() { addRequired: true, editRequired: true, awDropFile: true, - // 'class': 'ssh-key-field', rows: 10, awPopOver: "

Drag and drop your custom inventory script file here or create one in the field to import your custom inventory. " + "

Script must begin with a hashbang sequence: i.e.... #!/usr/bin/env python

", diff --git a/awx/ui/client/src/partials/inventories.html b/awx/ui/client/src/partials/inventories.html index 78d2be1c99..46d04b20dd 100644 --- a/awx/ui/client/src/partials/inventories.html +++ b/awx/ui/client/src/partials/inventories.html @@ -2,7 +2,6 @@
-