diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index ec58ca474f..028529fffa 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -697,11 +697,6 @@ legend { margin-bottom: 7px; } - .pagination > li > a { - padding: 3px 6px; - font-size: 10px; - } - .modal-body { .pagination { margin-top: 15px; diff --git a/awx/ui/client/legacy-styles/jquery-ui-overrides.less b/awx/ui/client/legacy-styles/jquery-ui-overrides.less index c21dadb3c6..c40440bf8a 100644 --- a/awx/ui/client/legacy-styles/jquery-ui-overrides.less +++ b/awx/ui/client/legacy-styles/jquery-ui-overrides.less @@ -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 { diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less index 020d306dfc..9db2792d2b 100644 --- a/awx/ui/client/legacy-styles/lists.less +++ b/awx/ui/client/legacy-styles/lists.less @@ -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; + } +} diff --git a/awx/ui/client/src/helpers/Lookup.js b/awx/ui/client/src/helpers/Lookup.js index 0b92d43d75..d23614de3c 100644 --- a/awx/ui/client/src/helpers/Lookup.js +++ b/awx/ui/client/src/helpers/Lookup.js @@ -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', diff --git a/awx/ui/client/src/shared/Modal.js b/awx/ui/client/src/shared/Modal.js index 2c17b1e14c..37ae34f97a 100644 --- a/awx/ui/client/src/shared/Modal.js +++ b/awx/ui/client/src/shared/Modal.js @@ -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(''); setTimeout(function() { // Make buttons bootstrapy diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index fbde1449ac..dd53943e88 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -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; diff --git a/awx/ui/client/src/shared/branding/colors.less b/awx/ui/client/src/shared/branding/colors.less index 4d9d801584..839b79a174 100644 --- a/awx/ui/client/src/shared/branding/colors.less +++ b/awx/ui/client/src/shared/branding/colors.less @@ -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; diff --git a/awx/ui/client/src/shared/list-generator/list-generator.factory.js b/awx/ui/client/src/shared/list-generator/list-generator.factory.js index 304478ab3c..3d974db190 100644 --- a/awx/ui/client/src/shared/list-generator/list-generator.factory.js +++ b/awx/ui/client/src/shared/list-generator/list-generator.factory.js @@ -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 += "
"; - html += "
"; + if (options.mode !== 'lookup') { + if(options.title !== false){ + html += "
"; + html += "
"; - if (list.listTitle) { + if (list.listTitle) { - html += "
" + list.listTitle + "
"; - // 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 += "{{(" + list.iterator + "_total_rows | number:0)}}"; - } + html += "
" + list.listTitle + "
"; + // 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 += "{{(" + list.iterator + "_total_rows | number:0)}}"; + } + } + + html += "
"; + if(list.toolbarAuxAction) { + html += "
"; + html += list.toolbarAuxAction; + html += "
"; + } + html += "
"; + html += "
\n"; + + for (action in list.actions) { + list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" }); + } + + html += "
\n"; + html += "
"; + html += "
"; + } } - html += "
"; - if(list.toolbarAuxAction) { - html += "
"; - html += list.toolbarAuxAction; - html += "
"; - } - html += "
"; - html += "
\n"; - - for (action in list.actions) { - list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" }); - } - - html += "
\n"; - html += "
"; - html += "
"; - } if (options.mode === 'edit' && list.editInstructions) { html += "
\n"; - html += "\n"; + html += "\n"; html += "Hint: " + list.editInstructions + "\n"; html += "
\n"; } @@ -356,7 +359,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate html += "
"; html += (list.emptyListText) ? list.emptyListText : "PLEASE ADD ITEMS TO THIS LIST"; html += "
"; - 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 += "
0)\">\n"; @@ -459,6 +461,20 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate innerTable += ''; } + // 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 += ""; + } + else { // its assumed that options.input_type = checkbox + innerTable += ""; + } + } + 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 += ""; + } 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 += "\n"; } } - if (options.mode === 'select' || options.mode === 'lookup') { - html += "Select"; - } else if (options.mode === 'edit' && list.fieldActions) { + if (options.mode === 'select') { + html += "Select"; + } + else if (options.mode === 'edit' && list.fieldActions) { html += "";