From 5ea0aae0c29fa37f8efd61363d5a04c343b7bf01 Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Wed, 24 Oct 2018 10:25:29 +0100 Subject: [PATCH 1/9] rename btn-ouline to btn-outline --- .../app/components/catalog-saver/catalog-saver.template.html | 2 +- ui-modules/blueprint-composer/app/index.js | 2 +- ui-modules/utils/br-core/style/buttons.less | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-modules/blueprint-composer/app/components/catalog-saver/catalog-saver.template.html b/ui-modules/blueprint-composer/app/components/catalog-saver/catalog-saver.template.html index 5191472b9..4ba6309e0 100644 --- a/ui-modules/blueprint-composer/app/components/catalog-saver/catalog-saver.template.html +++ b/ui-modules/blueprint-composer/app/components/catalog-saver/catalog-saver.template.html @@ -16,4 +16,4 @@ specific language governing permissions and limitations under the License. --> - \ No newline at end of file + diff --git a/ui-modules/blueprint-composer/app/index.js b/ui-modules/blueprint-composer/app/index.js index d7eb860e3..9f0472d68 100755 --- a/ui-modules/blueprint-composer/app/index.js +++ b/ui-modules/blueprint-composer/app/index.js @@ -130,7 +130,7 @@ function composerOverridesProvider() { } function actionConfig(actionServiceProvider) { - actionServiceProvider.addAction("deploy", {html: ''}); + actionServiceProvider.addAction("deploy", {html: ''}); actionServiceProvider.addAction("add", {html: ''}); } diff --git a/ui-modules/utils/br-core/style/buttons.less b/ui-modules/utils/br-core/style/buttons.less index a74ef3205..e87dbc359 100644 --- a/ui-modules/utils/br-core/style/buttons.less +++ b/ui-modules/utils/br-core/style/buttons.less @@ -24,7 +24,7 @@ .button-variant(@btn-accent-color; @btn-accent-bg; @btn-accent-border); } -.btn-ouline { +.btn-outline { &.btn-primary:not(:hover) { background-color: transparent; color: @brand-primary; @@ -49,4 +49,4 @@ background-color: transparent; color: @brand-danger; } -} \ No newline at end of file +} From 63031129ce1a972bda8c049f9518c6c17e232f85 Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Wed, 24 Oct 2018 13:37:39 +0100 Subject: [PATCH 2/9] dynamically compute pagination limit for palette based on height --- .../catalog-selector.directive.js | 39 ++++++++++++++++--- .../catalog-selector/catalog-selector.less | 3 +- .../catalog-selector.template.html | 15 ++++--- .../views/main/graphical/graphical.state.html | 5 ++- .../views/main/graphical/graphical.state.js | 1 - .../views/main/graphical/graphical.state.less | 11 ++++++ 6 files changed, 59 insertions(+), 15 deletions(-) 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 32fdd1c99..a2a29486f 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 @@ -20,7 +20,7 @@ import angular from 'angular'; import {EntityFamily} from '../util/model/entity.model'; import template from './catalog-selector.template.html'; -const ITEMS_PER_PAGE = 30; +const MIN_ITEMS_PER_PAGE = 16; // fields in either bundle or type record: const FIELDS_TO_SEARCH = ['name', 'displayName', 'symbolicName', 'version', 'type', 'supertypes', 'containingBundle', 'description', 'displayTags', 'tags']; @@ -35,10 +35,38 @@ export function catalogSelectorDirective() { mode: '@?', // for use by downstream projects to pass in special modes }, template: template, - controller: ['$scope', '$element', '$q', '$uibModal', '$log', '$templateCache', 'paletteApi', 'paletteDragAndDropService', 'iconGenerator', 'composerOverrides', controller] + controller: ['$scope', '$element', '$timeout', '$q', '$uibModal', '$log', '$templateCache', 'paletteApi', 'paletteDragAndDropService', 'iconGenerator', 'composerOverrides', controller], + 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 ], + (values) => controller.$timeout( () => { + //console.log("WATCHED RESIZE TIMEOUT", new Date(), main, main[0].offsetHeight, $scope.isLoading); + repaginate($scope, $element); + } ) + ); + // also repaginate on window resize + angular.element(window).bind('resize', () => repaginate($scope, $element)); + +} + +function repaginate($scope, $element) { + let main = angular.element($element[0].querySelector(".catalog-palette-main")); + if (!main || main[0].offsetHeight==0 || $scope.itemsPerPage) { + // console.log("no main or hidden or items per page fixed"); + return; + } + 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) ); +} + export function catalogSelectorSearchFilter() { return function (items, search) { if (search) { @@ -108,10 +136,11 @@ export function catalogSelectorSortFilter($filter) { } } -function controller($scope, $element, $q, $uibModal, $log, $templateCache, paletteApi, paletteDragAndDropService, iconGenerator, composerOverrides) { +function controller($scope, $element, $timeout, $q, $uibModal, $log, $templateCache, paletteApi, paletteDragAndDropService, iconGenerator, composerOverrides) { + this.$timeout = $timeout; $scope.pagination = { page: 1, - itemsPerPage: $scope.itemsPerPage || ITEMS_PER_PAGE + itemsPerPage: $scope.itemsPerPage || MIN_ITEMS_PER_PAGE }; $scope.state = { orders: ['name', 'type', 'id'], @@ -127,7 +156,7 @@ function controller($scope, $element, $q, $uibModal, $log, $templateCache, palet $scope.getPlaceHolder = function () { return 'Search'; }; - + $scope.isLoading = true; $scope.$watch('search', () => { 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 5829dc2a0..53ec6e29c 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 @@ -22,7 +22,8 @@ catalog-selector { display: block; margin-top: 15px; - + height: 100%; + .grid { margin-bottom: 15px; } diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html index 3b5f1d14a..2f4e64165 100644 --- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html +++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html @@ -16,7 +16,7 @@ specific language governing permissions and limitations under the License. --> -
+
-
+
+
@@ -56,8 +57,9 @@ No {{family.displayName.toLowerCase()}} matching the current search +
-
+
{{freeFormTile | entityName}}
-
- - +
+
+ +
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html index 4b0b3637f..5ee0f883f 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html @@ -34,14 +34,15 @@
-
+

{{section.title}}

- +
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js index 8cd432e2d..40a123dd9 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js @@ -37,7 +37,6 @@ export const graphicalState = { function graphicalController($scope, $state, blueprintService, paletteService) { this.EntityFamily = EntityFamily; - this.catalogItemsPerPage = 24; this.sections = paletteService.getSections(); this.selectedSection = Object.values(this.sections).find(section => section.type === EntityFamily.ENTITY); diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less index 5649c09c7..95fe08165 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less @@ -77,6 +77,17 @@ width: 440px; box-shadow: 5px 0 10px -2px @navbar-default-border; + .palette-title { + margin-left: 0; + margin-right: 0; + } + + &, .palette-full-height-wrapper { + display: flex; + flex-direction: column; + flex: 1 1 auto; + } + h3 { color: @gray-light; } From 3db686cf3da05948d781c25ce2bb12ecac53232b Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Wed, 24 Oct 2018 14:45:34 +0100 Subject: [PATCH 3/9] minor styling changes to make palette nicer esp for drag and to work with multi-width --- .../catalog-selector.directive.js | 2 +- .../catalog-selector/catalog-selector.less | 22 +++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) 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 a2a29486f..b717213f2 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() { 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 53ec6e29c..7a0b18899 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 { From 7670595878a6eb46701c45c67bce1327e443960b Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Wed, 24 Oct 2018 15:45:34 +0100 Subject: [PATCH 4/9] allow palette to have view mode customised to show 6, 4, 3, or 1 item per row --- .../catalog-selector.directive.js | 56 ++++++++++++------- .../catalog-selector/catalog-selector.less | 33 ++++++++++- .../catalog-selector.template.html | 17 ++++-- .../views/main/graphical/graphical.state.less | 2 + 4 files changed, 80 insertions(+), 28 deletions(-) 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 b717213f2..df0c73977 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 @@ -20,7 +20,14 @@ import angular from 'angular'; import {EntityFamily} from '../util/model/entity.model'; import template from './catalog-selector.template.html'; -const MIN_ITEMS_PER_PAGE = 16; +const MIN_ROWS_PER_PAGE = 4; + +const PALETTE_VIEW_MODES = { + compact: { name: "Compact", classes: "col-xs-2 item-compact", itemsPerRow: 6, rowHeightPx: 75, hideName: true }, + normal: { name: "Normal", classes: "col-xs-3", itemsPerRow: 4 }, + large: { name: "Large", classes: "col-xs-4", itemsPerRow: 3 }, + list: { name: "List", classes: "col-xs-12 item-full-width", itemsPerRow: 1 } }; + // fields in either bundle or type record: const FIELDS_TO_SEARCH = ['name', 'displayName', 'symbolicName', 'version', 'type', 'supertypes', 'containingBundle', 'description', 'displayTags', 'tags']; @@ -30,7 +37,7 @@ export function catalogSelectorDirective() { scope: { family: '<', onSelect: '&', - itemsPerPage: '<', + rowsPerPage: '<', // if unset then fill reservedKeys: ' $scope.isLoading, () => main[0].offsetHeight ], - (values) => controller.$timeout( () => { - //console.log("WATCHED RESIZE TIMEOUT", new Date(), main, main[0].offsetHeight, $scope.isLoading); - repaginate($scope, $element); - } ) - ); + $scope.$watchGroup( + [ () => $scope.isLoading, () => main[0].offsetHeight, () => $scope.state.viewMode.itemsPerRow ], + (values) => controller.$timeout( () => repaginate($scope, $element) ) ); // also repaginate on window resize angular.element(window).bind('resize', () => repaginate($scope, $element)); } function repaginate($scope, $element) { - let main = angular.element($element[0].querySelector(".catalog-palette-main")); - if (!main || main[0].offsetHeight==0 || $scope.itemsPerPage) { - // console.log("no main or hidden or items per page fixed"); - return; + let rowsPerPage = $scope.rowsPerPage; + if (!rowsPerPage) { + let main = angular.element($element[0].querySelector(".catalog-palette-main")); + if (!main || main[0].offsetHeight==0) { + // console.log("no main or hidden or items per page fixed"); + return; + } + let header = angular.element(main[0].querySelector(".catalog-palette-header")); + let footer = angular.element(main[0].querySelector(".catalog-palette-footer")); + rowsPerPage = Math.max(MIN_ROWS_PER_PAGE, Math.floor( (main[0].offsetHeight - header[0].offsetHeight - footer[0].offsetHeight) / ($scope.state.viewMode.rowHeightPx || 96)) ); } - 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) / 96) * 4) ); + $scope.$apply( () => $scope.pagination.itemsPerPage = rowsPerPage * $scope.state.viewMode.itemsPerRow ); } export function catalogSelectorSearchFilter() { @@ -138,14 +145,19 @@ export function catalogSelectorSortFilter($filter) { function controller($scope, $element, $timeout, $q, $uibModal, $log, $templateCache, paletteApi, paletteDragAndDropService, iconGenerator, composerOverrides) { this.$timeout = $timeout; - $scope.pagination = { - page: 1, - itemsPerPage: $scope.itemsPerPage || MIN_ITEMS_PER_PAGE - }; + + $scope.viewModes = PALETTE_VIEW_MODES; $scope.state = { orders: ['name', 'type', 'id'], - currentOrder: 'name' + currentOrder: 'name', + viewMode: PALETTE_VIEW_MODES.normal, }; + + $scope.pagination = { + page: 1, + itemsPerPage: $scope.state.viewMode.itemsPerRow * ($scope.rowsPerPage || MIN_ROWS_PER_PAGE) + }; + $scope.getEntityNameForPalette = function(item, entityName) { return (composerOverrides.getEntityNameForPalette || // above can be overridden with function of signature below to customize display name in palette @@ -272,4 +284,6 @@ function controller($scope, $element, $timeout, $q, $uibModal, $log, $templateCa // allow downstream to configure this controller and/or scope (composerOverrides.configurePaletteController || function() {})(this, $scope, $element); + + $scope.paletteItemClasses = "col-xs-3"; } 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 7a0b18899..91869c56b 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 @@ -42,6 +42,36 @@ catalog-selector { padding-left: 5px; padding-right: 5px; height: 96px; + &.item-compact { + height: 75px; + } + + &.item-full-width { + .item { + display: flex; + flex-direction: horizontal; + .item-logo { + flex: 0 0 auto; + width: auto; + height: 78px; + min-width: 90px; + img { + margin: 0; + width: auto; + } + } + .item-content { + flex: 1 1 auto; + display: flex; + align-items: center; + h3 { + text-align: left; + font-size: 1em; + margin-left: 8px; + } + } + } + } } .catalog-palette-footer { padding-bottom: 5px; @@ -64,7 +94,6 @@ catalog-selector { margin-bottom: -2px; padding-top: 3px; padding-bottom: 7px; - // transform: scaleY(1.1); .fa-info-circle { opacity: 1; @@ -110,7 +139,7 @@ catalog-selector { left: 0; right: 0; margin: auto; - max-width: 90%; + max-width: 100%; max-height: 100%; } } diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html index 2f4e64165..7159b806d 100644 --- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html +++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html @@ -40,7 +40,12 @@ {{filters | json}} diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html index 5ee0f883f..7dc0d79b5 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html @@ -42,7 +42,7 @@

- +
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js index 40a123dd9..d4fe313d1 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js @@ -40,6 +40,7 @@ function graphicalController($scope, $state, blueprintService, paletteService) { this.sections = paletteService.getSections(); this.selectedSection = Object.values(this.sections).find(section => section.type === EntityFamily.ENTITY); + $scope.state = {}; // share state among all sections this.onTypeSelected = (selectedType)=> { let rootEntity = blueprintService.get(); From 977e6a3dcecaa9f3df338c5b4a8b7cc5e6efb2e0 Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Wed, 24 Oct 2018 16:43:23 +0100 Subject: [PATCH 6/9] tidy dropdown and other composer styling --- .../catalog-selector.directive.js | 2 +- .../providers/palette-service.provider.js | 2 ++ .../app/views/main/main.less | 20 +++++++++++++++++-- .../app/views/main/main.template.html | 2 +- 4 files changed, 22 insertions(+), 4 deletions(-) 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 7c9a16dbb..d1d2e8c48 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 @@ -177,7 +177,7 @@ function controller($scope, $element, $timeout, $q, $uibModal, $log, $templateCa symbolicName: $scope.search, name: $scope.search, displayName: $scope.search, - supertypes: [$scope.family.superType] + supertypes: ($scope.family ? [ $scope.family.superType ] : []), }; }); diff --git a/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js b/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js index 852988878..6062a2cb9 100644 --- a/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js +++ b/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js @@ -37,7 +37,9 @@ export function paletteServiceProvider() { sections[id] = section; }, deleteSection(id) { + let old = sections[id]; delete sections[id]; + return old; } } } diff --git a/ui-modules/blueprint-composer/app/views/main/main.less b/ui-modules/blueprint-composer/app/views/main/main.less index 9a539b8fb..06e390b5e 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.less +++ b/ui-modules/blueprint-composer/app/views/main/main.less @@ -24,6 +24,10 @@ border-radius: 0; border-color: @navbar-default-border; z-index: 50; + + .container-fluid.flush-left { + padding-left: 0; + } .navbar-nav > li > a { color: @gray-lighter; @@ -35,11 +39,16 @@ .navbar-nav-mode > .active > a:hover, .navbar-nav-mode > .active > a:focus { border-bottom: 5px solid @brand-primary; + background-color: #666666; & > i.fa { color: @brand-primary; } } + + custom-action { + margin-left: 8px; + } } .page-main-area { @@ -59,10 +68,10 @@ } .layer a { cursor: pointer; - color: @gray-lighter; + color: @gray-light; transition: color 0.3s ease; &:hover { - color: @gray-light; + color: @gray-dark; } } .layer.active a { @@ -71,6 +80,13 @@ color: @brand-primary; } } + .dropdown-header { + background: @gray; + color: @gray-lighter; + font-weight: bold; + text-align: center; + padding-top: 7px; + } .tab-content { width: 100%; background: transparent; diff --git a/ui-modules/blueprint-composer/app/views/main/main.template.html b/ui-modules/blueprint-composer/app/views/main/main.template.html index 3fa92b4a6..c1c241b86 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.template.html +++ b/ui-modules/blueprint-composer/app/views/main/main.template.html @@ -19,7 +19,7 @@
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js index d4fe313d1..4f053cc9c 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js @@ -40,7 +40,7 @@ function graphicalController($scope, $state, blueprintService, paletteService) { this.sections = paletteService.getSections(); this.selectedSection = Object.values(this.sections).find(section => section.type === EntityFamily.ENTITY); - $scope.state = {}; // share state among all sections + $scope.paletteState = {}; // share state among all sections this.onTypeSelected = (selectedType)=> { let rootEntity = blueprintService.get(); diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less index 121af249b..92ae74e5c 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less @@ -106,9 +106,14 @@ & > ui-view > ui-view { display: block; - width: 440px; + width: 489px; } + .pane-palette .container-fluid { + padding-left: 15px; + padding-right: 15px; + } + .container-fluid { padding: 0; } From fb275c64f693fd9fcf2c1c83e26a65e96a3ee6aa Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Thu, 25 Oct 2018 10:28:09 +0100 Subject: [PATCH 8/9] support 'mode' parameter for sections --- .../app/components/providers/palette-service.provider.js | 1 + .../app/views/main/graphical/graphical.state.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js b/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js index 6062a2cb9..20f29efd2 100644 --- a/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js +++ b/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js @@ -48,6 +48,7 @@ class PaletteService { constructor(sectionsToAdd) { this.sections = {}; this.requiredFields = ['title', 'type', 'icon']; + // 'mode' is optional for (const [id, section] of Object.entries(sectionsToAdd)) { this.addSection(id, section); diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html index dcb506003..e78b273bf 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html @@ -42,7 +42,7 @@

- +
From 046c65601e1ed314db55ce96fc6de8d6bc9e44e6 Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Thu, 25 Oct 2018 10:54:57 +0100 Subject: [PATCH 9/9] css so add member spec use of palette can share format --- .../views/main/graphical/edit/add/add.html | 16 ++++++----- .../views/main/graphical/graphical.state.html | 16 ++++++----- .../views/main/graphical/graphical.state.less | 27 ++++++++++++++++--- 3 files changed, 43 insertions(+), 16 deletions(-) diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html index 89c29782e..dfabeaf1b 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html +++ b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html @@ -16,11 +16,13 @@ specific language governing permissions and limitations under the License. --> +
+
{{getParentLinkLabel()}}
-
+
- -
- -
+
@@ -46,6 +45,9 @@

- +
-
+
+
+ +
\ No newline at end of file diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html index e78b273bf..fd69c557d 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html @@ -17,7 +17,9 @@ under the License. --> -
+
+ +
-
+
-
+
@@ -44,8 +46,10 @@

-
+
-
+
-
+
+ +
\ No newline at end of file diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less index 92ae74e5c..543b229f0 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less @@ -19,7 +19,12 @@ .layout { display: flex; + designer { + flex-grow: 1; + } +} +.palette-and-or-toolbar { .toolbar { position: relative; height: calc(~"100vh - 105px"); @@ -59,9 +64,6 @@ } } - designer { - flex-grow: 1; - } } .pane { @@ -118,6 +120,25 @@ padding: 0; } + .add-panel { + display: flex; + flex-direction: column; + > .spec-parent { + flex: 0 0 auto; + } + > .add-panel-main { + flex: 1 1 auto; + display: flex; + flex-direction: row; + .toolbar { + flex: 0 0 auto; + } + .pane-palette { + flex: 1 1 auto; + } + } + } + .spec-parent { a { background-color: @gray-lighter;