Merge branch 'master' into jcCompactList
diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
index 2cad3ef..3d90b92 100644
--- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
+++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
@@ -42,6 +42,7 @@
normal: { name: "Normal", classes: "col-xs-4", itemsPerRow: 3 },
large: { name: "Large", classes: "col-xs-6", itemsPerRow: 2 },
list: { name: "List", classes: "col-xs-12 item-full-width", itemsPerRow: 1 },
+ compactList: { name: "Compact list", classes: "col-xs-12 item-compact-list", itemsPerRow: 1, rowHeightPx: 30 },
};
// fields in either bundle or type record:
@@ -75,13 +76,12 @@
link: link,
};
-
function link($scope, $element, attrs, controller) {
let main = angular.element($element[0].querySelector(".catalog-palette-main"));
// repaginate when load completes (and items are shown), or it is resized
$scope.$watchGroup(
- [() => $scope.isLoading, () => main[0].offsetHeight, () => $scope.state.viewMode.itemsPerRow],
+ [() => $scope.isLoading, () => main[0].offsetHeight, () => $scope.state.viewMode.name],
(values) => controller.$timeout(() => repaginate($scope, $element)));
// also repaginate on window resize
angular.element(window).bind('resize', () => repaginate($scope, $element));
diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
index c7aae95..56f2318 100644
--- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
+++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
@@ -45,7 +45,8 @@
&.item-compact {
height: 75px;
}
-
+
+ &.item-compact-list,
&.item-full-width {
.item {
display: flex;
@@ -53,8 +54,6 @@
.item-logo {
flex: 0 0 auto;
width: auto;
- height: 78px;
- min-width: 90px;
img {
margin: 0;
width: auto;
@@ -72,6 +71,23 @@
}
}
}
+ &.item-compact-list{
+ height: 30px;
+ .item {
+ .item-logo {
+ height: 20px;
+ min-width: 20px;
+ }
+ }
+ }
+ &.item-full-width{
+ .item {
+ .item-logo {
+ height: 78px;
+ min-width: 90px;
+ }
+ }
+ }
}
.catalog-palette-footer {
padding-bottom: 5px;
