Merge pull request #732 from jaredevantabor/textarea-styling

Restyling of textarea input fields

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 {

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{

awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css

@@ -108,4 +108,3 @@
   .CodeMirror-lint-tooltip {
       z-index: 2060;
   }
-

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
                 }

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",

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,

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" +

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,

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": "---",

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': '---',

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

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>",

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">

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;

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,18 +1036,6 @@ 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";
-                        }
-
                         html += "<textarea ";
                         html += (field.rows) ? this.attr(field, 'rows') : "";
                         html += "ng-model=\"" + fld + '" ';