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

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

@@ -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;
   }
-

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
                 }

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

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,

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

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

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,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') : "";