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

Merge pull request #5241 from kensible/4617-search-action-buttons

Browse Source 
Search bar width, action button placement
This commit is contained in:
kensible 2017-02-09 11:29:32 -05:00 committed by GitHub
commit 2024ca0ae3
6 changed files with 67 additions and 41 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

@ -921,7 +921,7 @@ input[type="checkbox"].checkbox-no-label {
/* Display list actions next to search widget */
.list-actions {
text-align: right;
margin-bottom: 20px;
margin-bottom: -34px;
.fa-lg {
vertical-align: -8%;
@ -1939,10 +1939,16 @@ tr td button i {
padding-right: 15px;
}
}
// lists.less uses 600px as the breakpoint, doing same for consistency
@media (max-width: 600px) {
.list-actions {
text-align: left;
margin-bottom: 20px;
}
}
.nvtooltip {

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

@ -153,10 +153,13 @@ table, tbody {
.List-actionHolder {
justify-content: flex-end;
display: flex;
// margin-bottom: 20px;
// float: right;
}
.List-actions {
display: flex;
margin-bottom: -32px;
}
.List-auxAction {
@ -419,7 +422,13 @@ table, tbody {
flex: 1 0 auto;
margin-top: 12px;
}
.List-actions {
margin-bottom: 20px;
}
.List-well {
margin-top: 20px;
}
.List-action:not(.ng-hide) ~ .List-action:not(.ng-hide) {
margin-left: 0;
}
}

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

@ -10,18 +10,21 @@
{{ orgCount }}
</span>
</div>
<div class="List-actions">
<!-- &#43; ADD -->
<button class="btn List-buttonSubmit"
aw-tool-tip="{{'Create a new organization'|translate}}"
ng-show="canAdd"
ng-click="addOrganization()" translate>
+ ADD
</button>
</div>
</div>
<div class="List-well">
<div class="List-actionHolder">
<div class="List-actions">
<!-- &#43; ADD -->
<button class="btn List-buttonSubmit"
aw-tool-tip="{{'Create a new organization'|translate}}"
ng-show="canAdd"
ng-click="addOrganization()" translate>
+ ADD
</button>
</div>
</div>
<!-- smart-search directive bindings:
djangoModel: '@', // one-way, interpolated
searchSize: '@',

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

@ -1852,6 +1852,12 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
width = "col-lg-8 col-md-8 col-sm-8 col-xs-12";
}
if(actionButtons.length>0){
html += `<div class="list-actions">
${actionButtons}
</div>`;
}
// smart-search directive
html += `
<div
@ -1869,11 +1875,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
</div>
`;
if(actionButtons.length>0){
html += `<div class="list-actions">
${actionButtons}
</div>`;
}
//html += "</div>";
// Message for when a search returns no results. This should only get shown after a search is executed with no results.

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

@ -133,21 +133,18 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
base, action, fld, cnt, field_action, fAction, itm;
if (options.mode !== 'lookup') {
if (options.title !== false && list.title !== false) {
html += "<div class=\"List-header\">";
// Don't display an empty <div> if there is no listTitle
if ((options.title !== false && list.title !== false) && list.listTitle !== undefined) {
html += "<div class=\"List-header\" >";
html += "<div class=\"List-title\">";
if (list.listTitle && options.listTitle !== false) {
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}_dataset.count }}</span>`;
}
}
html += "</div>";
if (options.cancelButton === true) {
html += "<div class=\"Form-exitHolder\">";
@ -155,27 +152,10 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
html += "<i class=\"fa fa-times-circle\"></i>";
html += "</button></div>\n";
}
html += "<div class=\"List-actionHolder\">";
html += "<div class=\"List-actions\">";
html += `<div ng-include="'${templateUrl('shared/list-generator/list-actions')}'">`;
for (action in list.actions) {
list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
}
html += "</div>";
if (list.toolbarAuxAction) {
html += "<div class=\"List-auxAction\">";
html += list.toolbarAuxAction;
html += "</div>";
}
html += "\n</div>";
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\"><i class=\"fa fa-times-circle\"></i></button>\n";
@ -193,6 +173,23 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
html += `<div class="${list.name}List List-well">`;
}
// List actions
html += "<div class=\"List-actionHolder\">";
html += "<div class=\"List-actions\">";
html += `<div ng-include="'${templateUrl('shared/list-generator/list-actions')}'">`;
for (action in list.actions) {
list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
}
html += "</div>";
if (list.toolbarAuxAction) {
html += `<div class="List-auxAction">${list.toolbarAuxAction}</div>`;
}
html += "\n</div>";
html += "</div>";
// End list actions
html += (list.searchRowActions) ? "<div class='row'><div class=\"col-lg-8 col-md-8 col-sm-8 col-xs-12\">" : "";
if (list.searchRowActions && !list.searchSize) {
list.searchSize = 'col-lg-7 col-md-12 col-sm-12 col-xs-12';

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

@ -35,7 +35,7 @@
.SmartSearch-searchTermContainer {
flex: initial;
width: ~"calc(100% - 100px)";
width: 50%;
border: 1px solid @d7grey;
border-radius: 4px;
display: flex;
@ -158,7 +158,8 @@
padding-top: 5px;
}
.SmartSearch-keyToggle {
margin-left: auto;
margin-right: auto;
margin-left: 12px;
text-transform: uppercase;
background-color: @default-bg;
border-radius: 5px;
@ -233,3 +234,11 @@
padding: 0px 5px;
margin-right: 5px;
}
// Additional modal specific styles
.modal-body, #add-permissions-modal {
.SmartSearch-searchTermContainer {
width: 100%;
}
}