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

Fix minor UX/UI form inconsistencies across project

Browse Source
This commit is contained in:
gconsidine 2017-04-10 14:59:35 -04:00
parent 2631e6ab9f
commit c287c4797e
24 changed files with 108 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2330,3 +2330,15 @@ html input[disabled] {
input[disabled].ui-spinner-input {
background-color: @egrey;
}
.CodeMirror-scroll {
margin-bottom: 0;
padding-bottom: 0;
margin-right: 0;
overflow: auto !important;
overflow-y: auto !important;
}
.CodeMirror-lines {
margin-bottom: 20px;
}

2
awx/ui/client/legacy-styles/codemirror.less
View File

@ -9,7 +9,7 @@
.CodeMirror {
height: auto;
overflow-x: scroll;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid @b7grey;
}

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

@ -282,11 +282,21 @@
color: @login-notice-text;
}
.Button-primary--hollow {
border: 1px solid @default-link;
color: @default-link;
background: @default-bg;
}
.Button-primary--hollow:hover {
color: @default-link-hov;
border: 1px solid @default-link-hov;
}
.ui-spinner{
height: 30px;
background-color: @field-secondary-bg;
background-color: @field-secondary-bg !important;
border-radius: 5px;
border:1px solid @field-border;
border:1px solid @field-border !important;
color: @field-input-text;
width:100%
}

3
awx/ui/client/legacy-styles/lists.less
View File

@ -20,6 +20,7 @@ table, tbody {
.List-table{
width: 100%;
margin-top: 20px;
table-layout: fixed;
}
@ -129,7 +130,7 @@ table, tbody {
.List-titleBadge {
font-size: 11px;
font-weight: normal;
padding: 1px 10px;
padding: 2px 10px;
height: 14px;
margin: 3px 0;
background-color: @list-title-badge;

2
awx/ui/client/legacy-styles/main-layout.less
View File

@ -21,7 +21,7 @@ body {
padding-bottom: 50px;
position: relative;
background-color: @default-secondary-bg;
padding-top: 96px;
padding-top: 100px;
}
.container-fluid {

9
awx/ui/client/src/credentials/credentials.list.js
View File

@ -26,12 +26,9 @@ export default ['i18n', function(i18n) {
key: true,
label: i18n._('Name'),
columnClass: 'col-md-3 col-sm-9 col-xs-9',
modalColumnClass: 'col-md-11'
},
description: {
label: i18n._('Description'),
excludeModal: true,
columnClass: 'col-md-3 hidden-sm hidden-xs'
modalColumnClass: 'col-md-11',
awToolTip: '{{credential.description}}',
dataPlacement: 'top'
},
kind: {
label: i18n._('Type'),

2
awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
View File

@ -33,8 +33,6 @@
.DashboardGraphs-graphSection {
display: block;
flex: 1;
padding-top:20px;
margin-bottom: -20px;
}
.DashboardGraphs-graphContainer {

4
awx/ui/client/src/home/dashboard/graphs/graph-helpers/auto-size.directive.js
View File

@ -20,12 +20,12 @@ function AutoSizeModule($window) {
function adjustSize() {
if (attrs.graphType === "hostStatus") {
if (element.parent().width() > 596) {
element.height(320);//596);
element.height(285);//596);
} else {
element.height(element.parent().width());
}
} else {
element.height(320);
element.height(285);
}
}

4
awx/ui/client/src/inventories/inventory.list.js
View File

@ -44,7 +44,9 @@ export default ['i18n', function(i18n) {
label: i18n._('Name'),
columnClass: 'col-md-5 col-sm-5 col-xs-8 List-staticColumnAdjacent',
modalColumnClass: 'col-md-11',
linkTo: '/#/inventories/{{inventory.id}}/manage'
linkTo: '/#/inventories/{{inventory.id}}/manage',
awToolTip: "{{ inventory.description }}",
awTipPlacement: "top"
},
organization: {
label: i18n._('Organization'),

9
awx/ui/client/src/inventory-scripts/inventory-scripts.list.js
View File

@ -19,12 +19,9 @@ export default ['i18n', function(i18n){
key: true,
label: i18n._('Name'),
columnClass: 'col-md-3 col-sm-9 col-xs-9',
modalColumnClass: 'col-md-8'
},
description: {
label: i18n._('Description'),
excludeModal: true,
columnClass: 'col-md-4 hidden-sm hidden-xs'
modalColumnClass: 'col-md-8',
awToolTip: '{{inventory_script.description}}',
dataPlacement: 'top'
},
organization: {
label: i18n._('Organization'),

8
awx/ui/client/src/management-jobs/management-jobs.list.js
View File

@ -15,11 +15,9 @@ export default function(){
fields: {
name: {
label: 'Name',
columnClass: 'col-sm-4 col-xs-4'
},
description: {
label: 'Description',
columnClass: 'col-sm-6 col-xs-6 hidden-sm hidden-xs'
columnClass: 'col-sm-4 col-xs-4',
awToolTip: '{{configure_job.description}}',
dataPlacement: 'top'
}
},
actions: {

4
awx/ui/client/src/notifications/notificationTemplates.list.js
View File

@ -31,7 +31,9 @@ export default ['i18n', function(i18n){
key: true,
label: i18n._('Name'),
columnClass: 'col-md-3 col-sm-9 col-xs-9',
linkTo: '/#/notification_templates/{{notification_template.id}}'
linkTo: '/#/notification_templates/{{notification_template.id}}',
awToolTip: '{{notification_template.description}}',
dataPlacement: 'top'
},
notification_type: {
label: i18n._('Type'),

7
awx/ui/client/src/organizations/list/organizations-list.partial.html
View File

@ -52,7 +52,11 @@
ng-class="{'OrgCards-card--selected': $stateParams.organization_id == card.id}"
ng-repeat="card in orgCards track by card.id">
<div class="OrgCards-header">
<h3 class="OrgCards-label">{{ card.name }}</h3>
<h3 class="OrgCards-label"
aw-tool-tip="{{ card.description || 'Place organization description here' }}"
aw-tip-placement="top">
{{ card.name }}
</h3>
<div class="OrgCards-actionItems">
<button class="OrgCards-actionItem
List-actionButton"
@ -80,7 +84,6 @@
</button>
</div>
</div>
<p class="OrgCards-description">{{ card.description || "Place organization description here" }}</p>
<div class="OrgCards-links">
<div class="OrgCards-link" ng-repeat="link in card.links">
<span class="badge List-titleBadge

9
awx/ui/client/src/organizations/organizations.list.js
View File

@ -21,13 +21,10 @@ export default [function() {
name: {
key: true,
label: 'Name',
columnClass: 'col-lg-4 col-md-6 col-sm-8 col-xs-8'
columnClass: 'col-lg-4 col-md-6 col-sm-8 col-xs-8',
awToolTip: '{{organization.description}}',
dataPlacement: 'top'
},
description: {
label: 'Description',
columnClass: 'hidden-sm hidden-xs',
excludeModal: true
}
},
actions: {

3
awx/ui/client/src/organizations/orgcards.block.less
View File

@ -37,7 +37,6 @@
border: 1px solid @default-border;
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-top: 20px;
width: ~"calc(33.333% - 20px)";
margin-left: 10px;
@ -52,7 +51,6 @@
.OrgCards-header {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
width: 100%;
}
@ -66,6 +64,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-items: baseline;
}
.OrgCards-actionItems {

8
awx/ui/client/src/portal-mode/portal-job-templates.list.js
View File

@ -21,11 +21,9 @@ export default ['i18n', function(i18n) {
key: true,
label: i18n._('Name'),
columnClass: 'col-lg-5 col-md-5 col-sm-9 col-xs-8',
linkTo: '/#/templates/{{job_template.id}}'
},
description: {
label: i18n._('Description'),
columnClass: 'col-lg-4 col-md-4 hidden-sm hidden-xs'
linkTo: '/#/templates/{{job_template.id}}',
awToolTip: '{{job_template.description}}',
dataPlacement: 'top'
}
},

36
awx/ui/client/src/portal-mode/portal-mode-jobs.partial.html
View File

@ -1,18 +1,26 @@
<div id="portal-container-jobs" class="Panel">
<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>
<button ng-class="{'btn-primary' : activeFilter == 'all',
'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs btn-default" 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'">
<span translate>REFRESH</span>
</button>
</div>
</div>
<div class="FormToggle-container">
<div class="btn-group">
<button ng-class="{'btn-primary': activeFilter === 'user', 'Button-primary--hollow': activeFilter !== 'user'}"
ng-click='filterUser()'
class="btn btn-xs"
translate>
My Jobs
</button>
<button ng-class="{'btn-primary': activeFilter === 'all', 'Button-primary--hollow': activeFilter !== 'all'}"
ng-click='filterAll()'
class="btn btn-xs"
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'">
<span translate>REFRESH</span>
</button>
</div>
</div>
<div id="portal-jobs">
</div>
</div>

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

@ -6,14 +6,25 @@
<div class="PortalMode-panel--right">
<div id="portal-container-jobs" class="Panel">
<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 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 PortalMode-filterButton--edges" translate>All Jobs</button>
<div class="FormToggle-container">
<div class="btn-group">
<button ng-class="{'btn-primary': activeFilter === 'user', 'Button-primary--hollow': activeFilter !== 'user'}"
ng-click='filterUser()'
class="btn btn-xs"
translate>
My Jobs
</button>
<button ng-class="{'btn-primary': activeFilter === 'all', 'Button-primary--hollow': activeFilter !== 'all'}"
ng-click='filterAll()'
class="btn btn-xs"
translate>
All Jobs
</button>
</div>
</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'">
<button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault"
ng-click="refresh()" ng-show="socketStatus == 'error'">
<span>REFRESH</span>
</button>
</div>

4
awx/ui/client/src/projects/projects.list.js
View File

@ -35,7 +35,9 @@ export default ['i18n', function(i18n) {
key: true,
label: i18n._('Name'),
columnClass: "col-lg-4 col-md-4 col-sm-5 col-xs-7 List-staticColumnAdjacent",
modalColumnClass: 'col-md-8'
modalColumnClass: 'col-md-8',
awToolTip: '{{project.description}}',
dataPlacement: 'top'
},
scm_type: {
label: i18n._('Type'),

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

@ -663,7 +663,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
let parseTypeName = field.parseTypeName || 'parseType';
let getToggleClass = (primary, secondary) => `{
'btn-primary': ${parseTypeName} === '${primary}',
'btn-default' : ${parseTypeName} === '${secondary}'
'Button-primary--hollow' : ${parseTypeName} === '${secondary}'
}`;
let toggleLeftClass = getToggleClass('yaml', 'json');
let toggleRightClass = getToggleClass('json', 'yaml');
@ -674,7 +674,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
<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">
<label ng-class="${toggleRightClass}" class="btn btn-xs">
<input type="radio" value="json" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />JSON
</label>
</div>

1
awx/ui/client/src/shared/paginate/paginate.block.less
View File

@ -23,7 +23,6 @@
font-size: 12px !important;
color: @list-pagin-text;
text-transform: uppercase;
height: 22px;
display: flex;
justify-content: flex-end;
}

5
awx/ui/client/src/shared/smart-search/smart-search.block.less
View File

@ -1,7 +1,5 @@
@import "../branding/colors.default.less";
.SmartSearch {
margin-bottom: 10px;
min-height: 45px;
padding-left: 15px;
padding-right: 15px;
}
@ -14,9 +12,7 @@
display: flex;
padding: 0;
font-size: 12px;
height: 35px;
align-items: stretch;
margin-bottom: 10px;
line-height: 20px;
width: 50%;
}
@ -42,6 +38,7 @@
display: flex;
background-color: @default-bg;
position: relative;
height: 34px;
}
.SmartSearch-searchTermContainer.is-open {

9
awx/ui/client/src/teams/teams.list.js
View File

@ -22,12 +22,9 @@ export default ['i18n', function(i18n) {
key: true,
label: i18n._('Name'),
columnClass: 'col-lg-3 col-md-4 col-sm-9 col-xs-9',
modalColumnClass: 'col-md-8'
},
description: {
label: i18n._('Description'),
columnClass: 'col-lg-3 col-md-3 hidden-sm hidden-xs',
excludeModal: true
modalColumnClass: 'col-md-8',
awToolTip: '{{team.description}}',
dataPlacement: 'top'
},
organization: {
label: i18n._('Organization'),

8
awx/ui/client/src/templates/templates.list.js
View File

@ -23,17 +23,15 @@ export default ['i18n', function(i18n) {
key: true,
label: i18n._('Name'),
columnClass: 'col-lg-2 col-md-2 col-sm-4 col-xs-9',
ngHref: '#/templates/{{template.type}}/{{template.id}}'
ngHref: '#/templates/{{template.type}}/{{template.id}}',
awToolTip: '{{template.description}}',
dataPlacement: 'top'
},
type: {
label: i18n._('Type'),
ngBind: 'template.type_label',
columnClass: 'col-lg-2 col-md-2 col-sm-4 hidden-xs'
},
description: {
label: i18n._('Description'),
columnClass: 'col-lg-2 hidden-md hidden-sm hidden-xs'
},
smart_status: {
label: i18n._('Activity'),
columnClass: 'List-tableCell col-lg-2 col-md-2 hidden-sm hidden-xs',