External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-13 23:17:32 -02:30
Code Issues Packages Projects Releases Wiki Activity

Lookup modal styling to match given design

Browse Source
This commit is contained in:
Ken Hoes
2016-02-22 10:00:50 -05:00
parent 7dbb69dd6d
commit 5c049d37a6
8 changed files with 169 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -697,11 +697,6 @@ legend {
margin-bottom: 7px;
}
.pagination > li > a {
padding: 3px 6px;
font-size: 10px;
}
.modal-body {
.pagination {
margin-top: 15px;

62
awx/ui/client/legacy-styles/jquery-ui-overrides.less
View File

@@ -14,12 +14,13 @@ table.ui-datepicker-calendar {
}
/* Modal dialog */
.ui-dialog-title {
font-size: 22px;
color: @blue-link;
font-size: 15px;
color: @default-interface-txt;
font-weight: bold;
line-height: normal;
font-family: 'Open Sans', helvetica;
text-transform: uppercase;
}
.ui-dialog {
.close {
@@ -33,12 +34,14 @@ table.ui-datepicker-calendar {
.ui-widget-header {
border-radius: 0;
border: none;
border-bottom: 1px solid #A9A9A9;
height: 55px;
}
.ui-dialog-titlebar {
padding-bottom: 0;
padding-top: 12px;
button.close i {
font-size: 24px;
}
}
.ui-dialog-titlebar .ui-state-default {
background-image: none;
@@ -58,9 +61,58 @@ table.ui-datepicker-calendar {
background-position: -80px -224px;
color: @black;
}
button.btn.btn-primary,
button.btn.btn-default {
padding: 5px 15px;
font-size: 12px;
line-height: 1.5;
transition: background-color 0.2s;
font-size: 12px;
}
button.btn.btn-primary {
text-transform: uppercase;
background-color: @default-succ;
border-color: @default-succ;
&:hover {
background-color: @default-succ-hov;
border-color: @default-succ-hov;
}
&:disabled {
background-color: @default-succ-disabled;
border-color: @default-succ-disabled;
}
&:first-of-type {
margin-right: 24px;
}
}
button.btn.btn-default {
text-transform: uppercase;
border-color: @default-border;
color: @default-interface-txt;
}
.ui-dialog-buttonpane.ui-widget-content {
border: none;
margin: 0;
padding-top: 0;
padding-right: 8px;
}
.input-group-btn.dropdown, .List-pagination, .List-tableHeader {
font-family: 'Open Sans', sans-serif;
}
}
.ui-dialog-buttonset {
text-transform: uppercase;
button.btn.btn-default.ui-state-hover,
button.btn.btn-default.ui-state-active,
button.btn.btn-default.ui-state-focus {

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

@@ -101,6 +101,8 @@ table, tbody {
margin-left: 15px;
}
/* -- Pagination -- */
.List-pagination {
margin-top: 20px;
font-size: 12px;
@@ -108,6 +110,23 @@ table, tbody {
text-transform: uppercase;
height: 22px;
display: flex;
.pagination>li>a,
.pagination>li>span {
border: 1px solid @grey-border;
padding: 3px 6px;
font-size: 10px;
}
.pagination li {
a#next-page {
border-radius: 0 4px 4px 0;
}
a#previous-page {
border-radius: 4px 0 0 4px;
}
}
}
.List-paginationPagerHolder {
@@ -244,6 +263,7 @@ table, tbody {
padding-left: 15px!important;
height: 34px!important;
padding-right: 45px!important;
font-family: 'Open Sans', sans-serif;
}
.List-searchInput:placeholder-shown {
@@ -348,3 +368,25 @@ table, tbody {
display: block;
font-size: 13px;
}
#lookup-modal-dialog {
.List-searchWidget {
width: 66.6666%
}
.List-tableHeaderRow {
.List-tableHeader:first-of-type {
width: 3%;
}
}
.List-tableHeader,
.List-tableHeader:last-of-type {
text-align:left;
}
.List-tableCell {
color: @default-interface-txt;
}
}

23
awx/ui/client/src/helpers/Lookup.js
View File

@@ -132,7 +132,6 @@ export default
master[field] = scope[field];
master[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField];
GenerateList.inject(list, {
mode: 'lookup',
id: 'lookup-modal-dialog',
@@ -145,22 +144,22 @@ export default
hdr = (params.hdr) ? params.hdr : 'Select ' + name;
// Show pop-up
buttons = [{
buttons = [
{
label: "Save",
onClick: function() {
scope.selectAction();
},
//icon: "fa-check",
"class": "btn btn-primary",
"id": "lookup-save-button"
},{
label: "Cancel",
icon: "fa-times",
"class": "btn btn-default",
"id": "lookup-cancel-button",
onClick: function() {
$('#lookup-modal-dialog').dialog('close');
}
},{
label: "Select",
onClick: function() {
scope.selectAction();
},
icon: "fa-check",
"class": "btn btn-primary",
"id": "lookup-save-button"
}];
if (scope.removeModalReady) {
@@ -175,7 +174,7 @@ export default
scope: scope,
buttons: buttons,
width: 600,
height: (instructions) ? 625 : 500,
height: (instructions) ? 625 : 450,
minWidth: 500,
title: hdr,
id: 'lookup-modal-dialog',

2
awx/ui/client/src/shared/Modal.js
View File

@@ -106,7 +106,7 @@ angular.module('ModalDialog', ['Utilities', 'ParseHelper'])
resizable: resizable,
create: function () {
// Fix the close button
$('.ui-dialog[aria-describedby="' + id + '"]').find('.ui-dialog-titlebar button').empty().attr({'class': 'close'}).text('x');
$('.ui-dialog[aria-describedby="' + id + '"]').find('.ui-dialog-titlebar button').empty().attr({'class': 'close'}).html('<i class="fa fa-times-circle"></i>');
setTimeout(function() {
// Make buttons bootstrapy

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

@@ -12,6 +12,7 @@
@default-err-hov: #FF1105;
@default-succ: #3CB878;
@default-succ-hov: #60D66F;
@default-succ-disabled: lighten(@default-succ, 30);
@default-link: #1678C4;
@default-link-hov: #4498DA;
@default-button-hov: #F2F2F2;

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

@@ -5,6 +5,7 @@
@blue-dark: #2a6496; /* link hover */
@grey: #A9A9A9;
@grey-txt: #707070;
@grey-border: #DDDDDD;
@info: #d9edf7; /* alert info background color */
@info-border: #bce8f1; /* alert info border color */
@info-color: #3a87ad;

92
awx/ui/client/src/shared/list-generator/list-generator.factory.js
View File

@@ -299,44 +299,47 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
list = this.list,
base, size, action, fld, cnt, field_action, fAction, itm;
if(options.title !== false){
html += "<div class=\"List-header\">";
html += "<div class=\"List-title\">";
if (options.mode !== 'lookup') {
if(options.title !== false){
html += "<div class=\"List-header\">";
html += "<div class=\"List-title\">";
if (list.listTitle) {
if (list.listTitle) {
html += "<div class=\"List-titleText\">" + list.listTitle + "</div>";
// We want to show the list title badge by default and only hide it when the list config specifically passes a false flag
list.listTitleBadge = (typeof list.listTitleBadge === 'boolean' && list.listTitleBadge == false) ? false : true;
if(list.listTitleBadge) {
html += "<span class=\"badge List-titleBadge\">{{(" + list.iterator + "_total_rows | number:0)}}</span>";
}
html += "<div class=\"List-titleText\">" + list.listTitle + "</div>";
// We want to show the list title badge by default and only hide it when the list config specifically passes a false flag
list.listTitleBadge = (typeof list.listTitleBadge === 'boolean' && list.listTitleBadge == false) ? false : true;
if(list.listTitleBadge) {
html += "<span class=\"badge List-titleBadge\">{{(" + list.iterator + "_total_rows | number:0)}}</span>";
}
}
html += "</div>";
if(list.toolbarAuxAction) {
html += "<div class=\"List-auxAction\">";
html += list.toolbarAuxAction;
html += "</div>";
}
html += "<div class=\"List-actions\">";
html += "<div class=\"list-actions\" ng-include=\"'" +
templateUrl('shared/list-generator/list-actions') +
"'\">\n";
for (action in list.actions) {
list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
}
html += "</div>\n";
html += "</div>";
html += "</div>";
}
}
html += "</div>";
if(list.toolbarAuxAction) {
html += "<div class=\"List-auxAction\">";
html += list.toolbarAuxAction;
html += "</div>";
}
html += "<div class=\"List-actions\">";
html += "<div class=\"list-actions\" ng-include=\"'" +
templateUrl('shared/list-generator/list-actions') +
"'\">\n";
for (action in list.actions) {
list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
}
html += "</div>\n";
html += "</div>";
html += "</div>";
}
if (options.mode === 'edit' && list.editInstructions) {
html += "<div class=\"alert alert-info alert-block\">\n";
html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><i class=\"fa fa-times-circle\"></i></button>\n";
html += "<strong>Hint: </strong>" + list.editInstructions + "\n";
html += "</div>\n";
}
@@ -356,7 +359,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += "<div class=\"List-noItems\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows < 1\">";
html += (list.emptyListText) ? list.emptyListText : "PLEASE ADD ITEMS TO THIS LIST";
html += "</div>";
if (options.showSearch=== undefined || options.showSearch === true) {
// Only show the search bar if we are loading results or if we have at least 1 base result
html += "<div class=\"row List-searchRow\" ng-show=\"" + list.iterator + "Loading == true || " + list.iterator + "_active_search == true || (" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows > 0)\">\n";
@@ -459,6 +461,20 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
innerTable += '<td class="col-xs-1 select-column List-tableCell"><select-list-item item=\"' + list.iterator + '\"></select-list-item></td>';
}
// Change layout if a lookup list, place radio buttons before labels
if (options.mode === 'lookup') {
if(options.input_type==="radio"){ //added by JT so that lookup forms can be either radio inputs or check box inputs
innerTable += "<td class=\"List-tableCell\"><input type=\"radio\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-value=\"1\" " +
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
}
else { // its assumed that options.input_type = checkbox
innerTable += "<td class=\"List-tableCell\"><input type=\"checkbox\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-true-value=\"1\" " +
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
}
}
cnt = 2;
base = (list.base) ? list.base : list.name;
base = base.replace(/^\//, '');
@@ -475,7 +491,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
}
}
if (options.mode === 'select' || options.mode === 'lookup') {
if (options.mode === 'select') {
if(options.input_type==="radio"){ //added by JT so that lookup forms can be either radio inputs or check box inputs
innerTable += "<td class=\"List-tableCell\"><input type=\"radio\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-value=\"1\" " +
@@ -543,6 +559,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
}
innerTable += "</td>\n";
}
innerTable += "</tr>\n";
// Message for loading
@@ -611,7 +628,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
if (list.multiSelect) {
html += buildSelectAll().prop('outerHTML');
}
else if (options.mode === 'lookup') {
html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\"></th>";
}
for (fld in list.fields) {
if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
!(options.mode === 'lookup' && list.fields[fld].excludeModal === true)) {
@@ -643,9 +662,10 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += "</th>\n";
}
}
if (options.mode === 'select' || options.mode === 'lookup') {
html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>";
} else if (options.mode === 'edit' && list.fieldActions) {
if (options.mode === 'select') {
html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>";
}
else if (options.mode === 'edit' && list.fieldActions) {
html += "<th class=\"List-tableHeader actions-column";
html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
html += "\">";