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

Merge pull request #5816 from gconsidine/general-ux-improvements

Browse Source 
General UX Improvements
This commit is contained in:
Greg Considine 2017-03-27 09:38:17 -04:00 committed by GitHub
commit 94a7cf0858
5 changed files with 85 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1955,9 +1955,6 @@ tr td button i {
padding-left: 15px;
padding-right: 15px;
}
}
// lists.less uses 600px as the breakpoint, doing same for consistency
@ -1970,15 +1967,26 @@ tr td button i {
.nvtooltip {
border-radius: 4px;
padding: 3px 10px;
}
.nvtooltip td.value {
padding-right: 0px;
}
td.value {
padding-right: 0px;
}
.nvtooltip p {
padding: 3px 0px;
p {
padding: 3px 0px;
}
& > table > thead > tr > td {
font-weight: 700;
&:first-child {
padding-top: 0;
}
}
& > table > tbody > tr:last-child > td {
padding-bottom: 0;
}
}
.nvd3 g.nv-groups path.nv-line {
@ -2288,3 +2296,4 @@ html input[disabled] {
.CodeMirror--disabled .CodeMirror-cursors {
display: none;
}

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

@ -478,6 +478,37 @@ input[type='radio']:checked:before {
width: 100%;
display: block !important;
}
.Form-inputLabelContainer[for=variables] {
width: auto;
display: inline-block !important;
}
.FormToggle {}
.FormToggle-container {
float: right;
margin: 0 0 0 10px;
padding-bottom: 5px;
label {
&:first-child {
border-right: none;
}
&:last-child {
border-left: none;
}
}
input {
visibility: hidden;
position: absolute;
}
.btn.btn-xs {
padding: 0px 10px;
}
}
.Form-inputLabel{
text-transform: uppercase;
color: @default-interface-txt;

4
awx/ui/client/src/portal-mode/portal-mode-layout.partial.html
View File

@ -8,9 +8,9 @@
<div class="PortalMode-filterHolder">
<div class="btn-group PortalMode-filter">
<button ng-class="{'btn-primary ': activeFilter == 'user',
'btn-default' : activeFilter != 'user' }" ng-click='filterUser()' class="btn btn-xs" translate>My Jobs</button>
'btn-default' : activeFilter != 'user' }" ng-click='filterUser()' class="btn btn-xs PortalMode-filterButton--edges" translate>My Jobs</button>
<button ng-class="{'btn-primary' : activeFilter == 'all',
'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs" translate>All Jobs</button>
'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs PortalMode-filterButton--edges" translate>All Jobs</button>
</div>
<div class="PortalMode-refresh">
<button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" ng-click="refresh()" ng-show="socketStatus == 'error'">

16
awx/ui/client/src/portal-mode/portal-mode.block.less
View File

@ -21,12 +21,22 @@
right: 35px;
display: flex;
align-items: center;
justify-content: center;
justify-content: center;
.btn.btn-xs {
padding: 1px 10px;
.btn.btn-xs {
padding: 1px 10px;
}
}
.PortalMode-filterButton--edges {
&:first-child {
border-right: none;
}
&:last-child {
border-left: none;
}
}
.PortalMode-refresh {
margin-left: 10px;
}

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

@ -659,14 +659,26 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
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" || _.last(fld.split('_')) === '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('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType') + "', '" + fld + "'" + ")\"> <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('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType')+ "', '" + fld + "'" + ")\"> <span class=\"parse-label\">JSON</span>\n";
html += "</div>\n";
let parseTypeId = `${form.name}_${fld}_parse_type`;
let parseTypeName = field.parseTypeName || 'parseType';
let getToggleClass = (primary, secondary) => `{
'btn-primary': ${parseTypeName} === '${primary}',
'btn-default' : ${parseTypeName} === '${secondary}'
}`;
let toggleLeftClass = getToggleClass('yaml', 'json');
let toggleRightClass = getToggleClass('json', 'yaml');
html += `
<div class="FormToggle-container" id="${parseTypeId}">
<div class="btn-group">
<label ng-class="${toggleLeftClass}" class="btn btn-xs">
<input type="radio" value="yaml" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />YAML
</label>
<label ng-class="${toggleRightClass}" class="btn btn-xs btn-default">
<input type="radio" value="json" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />JSON
</label>
</div>
</div>`;
}
if (field.labelAction) {