diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js
index 78edb30b85..ce5de265b3 100644
--- a/awx/ui/client/lib/components/components.strings.js
+++ b/awx/ui/client/lib/components/components.strings.js
@@ -113,6 +113,12 @@ function ComponentsStrings (BaseString) {
ns.list = {
DEFAULT_EMPTY_LIST: t.s('Please add items to this list.')
};
+
+ ns.toolbar = {
+ COMPACT: t.s('Compact'),
+ EXPANDED: t.s('Expanded'),
+ SORT_BY: t.s('SORT BY')
+ };
}
ComponentsStrings.$inject = ['BaseStringService'];
diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less
index d01b4e48fe..7b8c31b844 100644
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@@ -96,6 +96,43 @@
}
}
+.at-List-toolbarDropdown {
+ border-top-right-radius: @at-border-radius;
+ padding: 2px 10px;
+
+ &:hover {
+ cursor: pointer;
+ background: @at-gray-f2;
+ }
+
+ &-toggle {
+ background: none;
+ border: none;
+ padding: 0;
+ }
+
+ &-toggleText {
+ margin-right: 10px;
+ }
+
+ &-menu {
+ border-bottom-left-radius: @at-border-radius;
+ border-bottom-right-radius: @at-border-radius;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ left: auto;
+ margin: 0;
+ right: 0;
+ width: 100%;
+ }
+
+ &-menuHeader {
+ color: @at-gray-646972;
+ font-weight: bold;
+ pointer-events: none;
+ }
+}
+
.at-List-container {
border: @at-border-default-width solid @at-color-list-border;
border-radius: @at-border-radius;
diff --git a/awx/ui/client/lib/components/list/list-toolbar.directive.js b/awx/ui/client/lib/components/list/list-toolbar.directive.js
index 57183e32af..7e3ed8eee9 100644
--- a/awx/ui/client/lib/components/list/list-toolbar.directive.js
+++ b/awx/ui/client/lib/components/list/list-toolbar.directive.js
@@ -1,5 +1,12 @@
const templateUrl = require('~components/list/list-toolbar.partial.html');
+function AtListToolbar (strings) {
+ const vm = this || {};
+ vm.strings = strings;
+}
+
+AtListToolbar.$inject = ['ComponentsStrings'];
+
function atListToolbar () {
return {
restrict: 'E',
@@ -9,9 +16,14 @@ function atListToolbar () {
scope: {
onExpand: '=',
onCollapse: '=',
- sortOnly: '=',
isCollapsed: '=',
- }
+ onSort: '<',
+ sortOnly: '=',
+ sortOptions: '<',
+ sortValue: '<'
+ },
+ controller: AtListToolbar,
+ controllerAs: 'vm'
};
}
diff --git a/awx/ui/client/lib/components/list/list-toolbar.partial.html b/awx/ui/client/lib/components/list/list-toolbar.partial.html
index 4511be1760..0b29718652 100644
--- a/awx/ui/client/lib/components/list/list-toolbar.partial.html
+++ b/awx/ui/client/lib/components/list/list-toolbar.partial.html
@@ -1,5 +1,24 @@
\ No newline at end of file