You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by tb...@apache.org on 2018/10/30 17:33:50 UTC
[03/10] brooklyn-ui git commit: minor styling changes to make palette
nicer
minor styling changes to make palette nicer
esp for drag and to work with multi-width
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo
Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/3db686cf
Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/3db686cf
Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/3db686cf
Branch: refs/heads/master
Commit: 3db686cf3da05948d781c25ce2bb12ecac53232b
Parents: 6303112
Author: Alex Heneveld <al...@cloudsoftcorp.com>
Authored: Wed Oct 24 14:45:34 2018 +0100
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
Committed: Wed Oct 24 14:45:34 2018 +0100
----------------------------------------------------------------------
.../catalog-selector.directive.js | 2 +-
.../catalog-selector/catalog-selector.less | 22 ++++++++++++++++----
2 files changed, 19 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/3db686cf/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
----------------------------------------------------------------------
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 a2a2948..b717213 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
@@ -64,7 +64,7 @@ function repaginate($scope, $element) {
let header = angular.element(main[0].querySelector(".catalog-palette-header"));
let footer = angular.element(main[0].querySelector(".catalog-palette-footer"));
$scope.$apply( () =>
- $scope.pagination.itemsPerPage = Math.max(MIN_ITEMS_PER_PAGE, Math.floor( (main[0].offsetHeight - header[0].offsetHeight - footer[0].offsetHeight - 4) / 96) * 4) );
+ $scope.pagination.itemsPerPage = Math.max(MIN_ITEMS_PER_PAGE, Math.floor( (main[0].offsetHeight - header[0].offsetHeight - footer[0].offsetHeight) / 96) * 4) );
}
export function catalogSelectorSearchFilter() {
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/3db686cf/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
----------------------------------------------------------------------
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 53ec6e2..7a0b188 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
@@ -26,6 +26,8 @@ catalog-selector {
.grid {
margin-bottom: 15px;
+ padding-left: 10px;
+ padding-right: 10px;
}
.pagination {
margin-top: 0;
@@ -39,6 +41,10 @@ catalog-selector {
.catalog-palette-item {
padding-left: 5px;
padding-right: 5px;
+ height: 96px;
+ }
+ .catalog-palette-footer {
+ padding-bottom: 5px;
}
.item {
@@ -48,10 +54,17 @@ catalog-selector {
transition: all @duration-item ease;
position: relative;
background: white; //useful when dragging
- box-shadow: 0 0 rgba(0, 0, 0, 0.1), 0 1px 2px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 rgba(0, 0, 0, 0.1), 0 0 2px 1px rgba(0, 0, 0, 0.2);
&:hover {
- box-shadow: 0 0 rgba(0, 0, 0, 0.2), 0 2px 4px 1px rgba(0, 0, 0, 0.2);
- transform: scale(1.1);
+ box-shadow: 0 0 rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.5);
+ margin: -2px;
+ padding: 5px;
+
+ margin-top: 7px;
+ margin-bottom: -2px;
+ padding-top: 3px;
+ padding-bottom: 7px;
+ // transform: scaleY(1.1);
.fa-info-circle {
opacity: 1;
@@ -61,9 +74,10 @@ catalog-selector {
position: absolute;
top: 0;
left: 0;
+ margin: 0;
+ border: 3px solid @brand-primary;
width: 100%;
height: 100%;
- transform: scale(1.15);
}
.fa-info-circle {