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

Styling overhaul for the list view search bar

Browse Source
This commit is contained in:
Michael Abashian 2016-01-14 17:19:53 -05:00
parent 31d9438fdf
commit 2fbc50093f
4 changed files with 105 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -782,24 +782,6 @@ select.page-size {
padding-right: 25px;
}
.search-reset-start {
color: @grey;
float: right;
position: relative;
top: -25px;
left: -10px;
z-index: 10;
}
.search-reset-start:hover {
cursor: pointer;
color: @black;
}
.ui-widget-content a.search-reset-start {
color: @grey;
}
#search-widget-spacer {
height: 20px;
}

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

@ -183,3 +183,51 @@ table, tbody {
background-color: @btn-bg-hov;
color: @btn-txt;
}
.List-searchDropdown {
border-top-left-radius: 5px!important;
border-bottom-left-radius: 5px!important;
}
.List-searchInput {
background-color: @list-srch-inpt-bg!important;
font-size: 14px!important;
color: @list-srch-inpt-txt!important;
border-color: @list-srch-inpt-bord!important;
border-radius: 5px!important;
padding-left: 15px!important;
}
.List-searchInput:placeholder-shown {
color: @list-srch-inpt-ph-txt!important;
text-transform: uppercase;
}
.List-searchInput:focus {
border-color: @list-srch-inpt-focus!important;
}
.List-searchInputIcon {
height: 32px;
width: 32px;
border-left: 1px solid @list-srch-inpt-bord;
color: #B7B7B7;
float: right;
position: relative;
top: -33px;
left: -1px;
z-index: 10;
font-size: 16px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.List-searchInputIcon:hover {
cursor: pointer;
background-color: #FAFAFA;
color: #B7B7B7;
}

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

@ -28,32 +28,37 @@
@btn-txt-sel: @default-bg;
// lists
@list-empty-txt: @default-interface-txt;
@list-header-bord: @default-bg;
@list-header-bg: #EBEBEB;
@list-header-txt: @default-interface-txt;
@list-header-icon: @default-icon;
@list-item: @default-data-txt;
@list-item-link: @default-link;
@list-item-link-hov: @default-link-hov;
@list-item-bg: @default-bg;
@list-alt-item-bg: @default-tertiary-bg;
@list-action-icon: @default-icon;
@list-actn-bg: inherit;
@list-actn-bord: @default-bg;
@list-actn-alt-bg: @default-tertiary-bg;
@list-actn-alt-bord: @default-tertiary-bg;
@list-actn-icn-hov: @default-bg;
@list-actn-bg-hov: @default-link;
@list-actn-del-bg-hov: @default-err;
@list-actn-bord-hov: @default-link;
@list-row-select-bord: @default-link;
@list-pagin-text: @default-interface-txt;
@list-pagin-bord: @default-second-border;
@list-pagin-bord-act: @default-icon-hov;
@list-pagin-bg-act: @default-icon-hov;
@list-title-txt: @default-interface-txt;
@list-title-badge: @default-icon-hov;
@list-empty-txt: @default-interface-txt;
@list-header-bord: @default-bg;
@list-header-bg: #EBEBEB;
@list-header-txt: @default-interface-txt;
@list-header-icon: @default-icon;
@list-item: @default-data-txt;
@list-item-link: @default-link;
@list-item-link-hov: @default-link-hov;
@list-item-bg: @default-bg;
@list-alt-item-bg: @default-tertiary-bg;
@list-action-icon: @default-icon;
@list-actn-bg: inherit;
@list-actn-bord: @default-bg;
@list-actn-alt-bg: @default-tertiary-bg;
@list-actn-alt-bord: @default-tertiary-bg;
@list-actn-icn-hov: @default-bg;
@list-actn-bg-hov: @default-link;
@list-actn-del-bg-hov: @default-err;
@list-actn-bord-hov: @default-link;
@list-row-select-bord: @default-link;
@list-pagin-text: @default-interface-txt;
@list-pagin-bord: @default-second-border;
@list-pagin-bord-act: @default-icon-hov;
@list-pagin-bg-act: @default-icon-hov;
@list-title-txt: @default-interface-txt;
@list-title-badge: @default-icon-hov;
@list-srch-inpt-bg: @default-secondary-bg;
@list-srch-inpt-txt: @default-data-txt;
@list-srch-inpt-ph-txt: @default-icon;
@list-srch-inpt-bord: @default-second-border;
@list-srch-inpt-focus: @default-link;
// tooltups
@tooltip-bg: @default-interface-txt;

52
awx/ui/client/src/shared/generator-helpers.js
View File

@ -667,49 +667,49 @@ angular.module('GeneratorHelpers', [systemStatus.name])
html += "\" id=\"search-widget-container" + modifier + "\">\n";
}
html += "<div class=\"input-group input-group-sm";
html += "\">\n";
html += "<div class=\"input-group-btn dropdown\">\n";
html += "<button type=\"button\" ";
html += "id=\"search_field_ddown\" ";
html += "class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"";
html += ">\n";
html += "<span ng-bind=\"" + iterator + "SearchFieldLabel" + modifier + "\"></span>\n";
html += "<span class=\"caret\"></span>\n";
html += "</button>\n";
html += "<ul class=\"dropdown-menu\" id=\"" + iterator + "SearchDropdown" + modifier + "\">\n";
html += addSearchFields(i);
html += "</ul>\n";
html += "</div><!-- input-group-btn -->\n";
// html += "<div class=\"input-group input-group-sm";
// html += "\">\n";
// html += "<div class=\"input-group-btn dropdown\">\n";
// html += "<button type=\"button\" ";
// html += "id=\"search_field_ddown\" ";
// html += "class=\"btn btn-default dropdown-toggle List-searchDropdown\" data-toggle=\"dropdown\"";
// html += ">\n";
// html += "<span ng-bind=\"" + iterator + "SearchFieldLabel" + modifier + "\"></span>\n";
// html += "<span class=\"caret\"></span>\n";
// html += "</button>\n";
// html += "<ul class=\"dropdown-menu\" id=\"" + iterator + "SearchDropdown" + modifier + "\">\n";
// html += addSearchFields(i);
// html += "</ul>\n";
// html += "</div><!-- input-group-btn -->\n";
html += "<select id=\"search_value_select\" ng-show=\"" + iterator + "SelectShow" + modifier + "\" " +
"ng-model=\"" + iterator + "SearchSelectValue" + modifier + "\" ng-change=\"search('" + iterator + "')\" ";
html += "ng-options=\"c.name for c in " + iterator + "SearchSelectOpts track by c.value" + modifier + "\" class=\"form-control search-select";
html += "\"></select>\n";
// html += "<select id=\"search_value_select\" ng-show=\"" + iterator + "SelectShow" + modifier + "\" " +
// "ng-model=\"" + iterator + "SearchSelectValue" + modifier + "\" ng-change=\"search('" + iterator + "')\" ";
// html += "ng-options=\"c.name for c in " + iterator + "SearchSelectOpts track by c.value" + modifier + "\" class=\"form-control search-select";
// html += "\"></select>\n";
html += "<input id=\"search_value_input\" type=\"text\" ng-hide=\"" + iterator + "SelectShow" + modifier + " || " +
iterator + "InputHide" + modifier + "\" " +
"class=\"form-control\" ng-model=\"" + iterator + "SearchValue" + modifier + "\" " +
"class=\"form-control List-searchInput\" ng-model=\"" + iterator + "SearchValue" + modifier + "\" " +
"aw-placeholder=\"" + iterator + "SearchPlaceholder" + modifier + "\" type=\"text\" ng-disabled=\"" + iterator +
"InputDisable" + modifier + " || " + iterator + "HoldInput" + modifier + "\" ng-keypress=\"startSearch($event,'" +
iterator + "')\">\n";
// Reset button for drop-down
html += "<div class=\"input-group-btn\" ng-show=\"" + iterator + "SelectShow" + modifier + "\" >\n";
html += "<button type=\"button\" class=\"btn btn-default btn-small\" id=\"search-reset-button\" ng-click=\"resetSearch('" + iterator + "')\" " +
"aw-tool-tip=\"Clear the search\" data-placement=\"top\"><i class=\"fa fa-times\"></i></button>\n";
html += "</div><!-- input-group-btn -->\n";
// html += "<div class=\"input-group-btn\" ng-show=\"" + iterator + "SelectShow" + modifier + "\" >\n";
// html += "<button type=\"button\" class=\"btn btn-default btn-small\" id=\"search-reset-button\" ng-click=\"resetSearch('" + iterator + "')\" " +
// "aw-tool-tip=\"Clear the search\" data-placement=\"top\"><i class=\"fa fa-times\"></i></button>\n";
// html += "</div><!-- input-group-btn -->\n";
html += "</div><!-- input-group -->\n";
// html += "</div><!-- input-group -->\n";
html += "<a class=\"search-reset-start\" id=\"search-reset-button\" ng-click=\"resetSearch('" + iterator + "')\"" +
html += "<a class=\"search-reset-start List-searchInputIcon\" id=\"search-reset-button\" ng-click=\"resetSearch('" + iterator + "')\"" +
"ng-hide=\"" + iterator + "SelectShow" + modifier + " || " + iterator + "InputHide" + modifier + " || " +
iterator + "ShowStartBtn" + modifier + " || " +
iterator + "HideAllStartBtn" + modifier + "\"" +
"><i class=\"fa fa-times\"></i></a>\n";
html += "<a class=\"search-reset-start\" id=\"search-submit-button\" ng-click=\"search('" + iterator + "')\"" +
html += "<a class=\"List-searchInputIcon\" id=\"search-submit-button\" ng-click=\"search('" + iterator + "')\"" +
"ng-hide=\"" + iterator + "SelectShow" + modifier + " || " + iterator + "InputHide" + modifier + " || " +
"!" + iterator + "ShowStartBtn" + modifier + " || " +
iterator + "HideAllStartBtn" + modifier + "\"" +