External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-11 01:57:35 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #732 from jaredevantabor/textarea-styling

Browse Source 
Restyling of textarea input fields
This commit is contained in:
Jared Tabor 2016-01-28 08:43:23 -08:00
commit 9c538b5618
15 changed files with 96 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
awx/ui/client/legacy-styles/ansible-ui.less
View File

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

48
awx/ui/client/legacy-styles/forms.less
View File

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

11
awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css
View File

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

3
awx/ui/client/src/forms/ActivityDetail.js
View File

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

4
awx/ui/client/src/forms/Credentials.js
View File

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

3
awx/ui/client/src/forms/Groups.js
View File

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

4
awx/ui/client/src/forms/Hosts.js
View File

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

2
awx/ui/client/src/forms/Inventories.js
View File

@ -49,7 +49,7 @@ export default
variables: {
label: 'Variables',
type: 'textarea',
'class': 'span12',
'class': 'Form-textArea',
addRequired: false,
editRequird: false,
rows: 6,

3
awx/ui/client/src/forms/JobTemplates.js
View File

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

3
awx/ui/client/src/forms/Source.js
View File

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

12
awx/ui/client/src/helpers/Parse.js
View File

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

1
awx/ui/client/src/inventory-scripts/inventory-scripts.form.js
View File

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

1
awx/ui/client/src/partials/inventories.html
View File

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

2
awx/ui/client/src/shared/branding/colors.default.less
View File

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

25
awx/ui/client/src/shared/form-generator.js
View File

@ -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 + '" ';