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.
2026-05-21 15:57:52 -02:30 · 2016-01-26 09:37:28 -08:00
parent b414708aba
commit 187c01e349
15 changed files with 107 additions and 35 deletions
--- 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 {
--- 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{
--- a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css
+++ b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css
@@ -108,4 +108,3 @@
  .CodeMirror-lint-tooltip {
      z-index: 2060;
  }
-
--- a/awx/ui/client/src/forms/ActivityDetail.js
+++ b/awx/ui/client/src/forms/ActivityDetail.js
@@ -41,6 +41,7 @@ export default
                changes: {
                    label: 'Changes',
                    type: 'textarea',
+                    class: 'Form-textArea',
                    ngHide: "!changes || changes =='' || changes == 'null'",
                    readonly: true
                }
--- a/awx/ui/client/src/forms/Credentials.js
+++ b/awx/ui/client/src/forms/Credentials.js
@@ -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",
--- a/awx/ui/client/src/forms/Groups.js
+++ b/awx/ui/client/src/forms/Groups.js
@@ -39,6 +39,7 @@ export default
                variables: {
                    label: 'Variables',
                    type: 'textarea',
+                    class: 'Form-textArea',
                    addRequired: false,
                    editRequird: false,
                    rows: 12,
--- a/awx/ui/client/src/forms/Hosts.js
+++ b/awx/ui/client/src/forms/Hosts.js
@@ -62,7 +62,7 @@ export default
                    addRequired: false,
                    editRequird: false,
                    rows: 6,
-                    "class": "modal-input-xlarge",
+                    "class": "modal-input-xlarge Form-textArea",
                    "default": "---",
                    awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
                        "JSON:<br />\n" +
--- 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,
--- 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: "<p>Provide a comma separated list of tags.</p>\n" +
                        "<p>Tags are useful when you have a large playbook, and you want to run a specific part of a play or task.</p>" +
@@ -192,8 +191,8 @@ export default
                variables: {
                    label: 'Extra Variables',
                    type: 'textarea',
+                    class: 'Form-textArea',
                    rows: 6,
-                    "class": 'span12',
                    addRequired: false,
                    editRequired: false,
                    "default": "---",
--- 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': '---',
--- a/awx/ui/client/src/helpers/Parse.js
+++ b/awx/ui/client/src/helpers/Parse.js
@@ -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
--- 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: "<p>Drag and drop your custom inventory script file here or create one in the field to import your custom inventory. " +
                                    "<br><br> Script must begin with a hashbang sequence: i.e.... #!/usr/bin/env python</p>",
--- a/awx/ui/client/src/partials/inventories.html
+++ b/awx/ui/client/src/partials/inventories.html
@@ -2,7 +2,6 @@
    <div ui-view></div>
  <div ng-cloak id="htmlTemplate" class="Panel"></div>
  <div id="inventory-edit-modal-dialog"></div>
-  <div id="scan-jobs-list" style="padding-top:40px"></div>
  <div ng-include="'/static/partials/logviewer.html'"></div>
  <div id="copy-job-modal" style="display:none">
     <form name="copy_form" id="copy_form">
--- a/awx/ui/client/src/shared/branding/colors.default.less
+++ b/awx/ui/client/src/shared/branding/colors.default.less
@@ -100,6 +100,8 @@
@submit-button-bg:      @default-succ;
@submit-button-bg-hov:  @default-succ-hov;
@submit-button-bg-dis:  @default-icon-hov;
+@code-mirror-gutter:     #F2F2F2;
+@radio-bg:          @default-interface-txt;

 // footer
@copyright-text:        @default-interface-txt;
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -710,6 +710,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                        }
                        html += (field.awPopOver && !field.awPopOverRight) ? Attr(field, 'awPopOver', fld) : "";
                        html += (field.hintText) ? "\n\t\t<span class=\"label-hint-text\">\n\t\t\t<i class=\"fa fa-info-circle\">\n\t\t\t</i>\n\t\t\tHint: " + field.hintText + "\n\t\t</span>" : "";
+                        // Variable editing
+                        if (fld === "variables" || fld === "extra_vars" || fld === 'inventory_variables' || fld === 'source_vars') {
+                            html += "<div class=\"parse-selection\" id=\"" + form.name + "_" + fld + "_parse_type\">" +
+                                "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
+                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
+                            html += "\" value=\"yaml\" ng-change=\"parseTypeChange()\"> <span class=\"parse-label\">YAML</span>\n";
+                            html += "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
+                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
+                            html += "\" value=\"json\" ng-change=\"parseTypeChange()\"> <span class=\"parse-label\">JSON</span>\n";
+                            html += "</div>\n";
+                        }
                        html += "\n\t</label>\n";
                    }
                    return html;
@@ -743,7 +754,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                }

                if ((!field.readonly) || (field.readonly && options.mode === 'edit')) {
-                    html += "<div class='form-group Form-formGroup";
+                    html += "<div class='form-group Form-formGroup ";
                    html += (field['class']) ? (field['class']) : "";
                    html += "'";
                    html += (field.ngShow) ? this.attr(field, 'ngShow') : "";
@@ -1025,17 +1036,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                        html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
                        html += ">\n";

-                        // Variable editing
-                        if (fld === "variables" || fld === "extra_vars" || fld === 'inventory_variables' || fld === 'source_vars') {
-                            html += "<div class=\"parse-selection\" id=\"" + this.form.name + "_" + fld + "_parse_type\">Parse as: " +
-                                "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
-                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
-                            html += "\" value=\"yaml\" ng-change=\"parseTypeChange()\"> <span class=\"parse-label\">YAML</span>\n";
-                            html += "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
-                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
-                            html += "\" value=\"json\" ng-change=\"parseTypeChange()\"> <span class=\"parse-label\">JSON</span>\n";
-                            html += "</div>\n";
-                        }
+                        // // Variable editing
+                        // if (fld === "variables" || fld === "extra_vars" || fld === 'inventory_variables' || fld === 'source_vars') {
+                        //     html += "<div class=\"parse-selection\" id=\"" + this.form.name + "_" + fld + "_parse_type\">Parse as: " +
+                        //         "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
+                        //     html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
+                        //     html += "\" value=\"yaml\" ng-change=\"parseTypeChange()\"> <span class=\"parse-label\">YAML</span>\n";
+                        //     html += "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
+                        //     html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
+                        //     html += "\" value=\"json\" ng-change=\"parseTypeChange()\"> <span class=\"parse-label\">JSON</span>\n";
+                        //     html += "</div>\n";
+                        // }

                        html += "<textarea ";
                        html += (field.rows) ? this.attr(field, 'rows') : "";