Add palette service for easy customisation. The template can still be overridden
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/a9236f00 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/a9236f00 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/a9236f00 Branch: refs/heads/master Commit: a9236f0070e6813bac5549adfc04bb34a5f076f5 Parents: 38e7c3c Author: Thomas Bouron <thomas.bou...@cloudsoftcorp.com> Authored: Mon Oct 15 09:51:02 2018 +0100 Committer: Thomas Bouron <thomas.bou...@cloudsoftcorp.com> Committed: Mon Oct 15 09:51:02 2018 +0100 ---------------------------------------------------------------------- .../providers/palette-service.provider.js | 75 ++++++++++++++++++++ ui-modules/blueprint-composer/app/index.js | 40 +++++++++-- .../views/main/graphical/graphical.state.html | 20 +++--- .../app/views/main/graphical/graphical.state.js | 29 ++------ .../views/main/graphical/graphical.state.less | 6 +- 5 files changed, 127 insertions(+), 43 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a9236f00/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js ---------------------------------------------------------------------- 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 new file mode 100644 index 0000000..7fbb4ee --- /dev/null +++ b/ui-modules/blueprint-composer/app/components/providers/palette-service.provider.js @@ -0,0 +1,75 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import angular from 'angular'; + +const MODULE_NAME = 'brooklyn.composer.service.palette'; + +angular.module(MODULE_NAME, []) + .provider('paletteService', paletteServiceProvider); + +export default MODULE_NAME; + +export function paletteServiceProvider() { + let sections = {}; + + return { + $get: function () { + return new PaletteService(sections); + }, + addSection(id, section) { + sections[id] = section; + }, + deleteSection(id) { + delete sections[id]; + } + } +} + +class PaletteService { + constructor(sectionsToAdd) { + this.sections = {}; + this.fields = ['title', 'type', 'icon']; + + for (const [id, section] of Object.entries(sectionsToAdd)) { + this.addSection(id, section); + } + } + + addSection(id, section) { + if (!section) { + throw 'Section must be an object'; + } + + this.fields.forEach(field => { + if (!section.hasOwnProperty(field)) { + throw `Section must have field "${field}" defined`; + } + }); + + if (!id) { + throw 'Action must have id defined'; + } + this.sections[id] = section; + } + + getSections() { + return this.sections; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a9236f00/ui-modules/blueprint-composer/app/index.js ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/index.js b/ui-modules/blueprint-composer/app/index.js index 38313af..d7eb860 100755 --- a/ui-modules/blueprint-composer/app/index.js +++ b/ui-modules/blueprint-composer/app/index.js @@ -38,7 +38,8 @@ import brUtils from 'brooklyn-ui-utils/utils/general'; import brSpecEditor from './components/spec-editor/spec-editor.directive'; import brooklynCatalogSaver from './components/catalog-saver/catalog-saver.directive'; -import paletteApiProvider from "./components/providers/palette-api.provider" +import paletteApiProvider from "./components/providers/palette-api.provider"; +import paletteServiceProvider from "./components/providers/palette-service.provider"; import brooklynApi from "brooklyn-ui-utils/brooklyn.api/brooklyn.api"; import {designerDirective} from "./components/designer/designer.directive"; @@ -71,11 +72,12 @@ import {graphicalEditSpecState} from "./views/main/graphical/edit/spec/edit.spec import {graphicalEditDslState, dslParamLabelFilter} from "./views/main/graphical/edit/dsl/edit.dsl.controller"; import bottomSheet from "brooklyn-ui-utils/bottom-sheet/bottom-sheet"; import stackViewer from 'angular-java-stack-viewer'; +import {EntityFamily} from "./components/util/model/entity.model"; -angular.module('app', [ngAnimate, ngResource, ngCookies, ngClipboard, uiRouter, 'ui.router.state.events', brCore, - brServerStatus, brAutoFocus, brIconGenerator, brInterstitialSpinner, brooklynModuleLinks, brooklynUserManagement, - brYamlEditor, brUtils, brSpecEditor, brooklynCatalogSaver, brooklynApi, bottomSheet, stackViewer, brDragndrop, - customActionDirective, customConfigSuggestionDropdown, paletteApiProvider]) +angular.module('app', [ngAnimate, ngResource, ngCookies, ngClipboard, uiRouter, 'ui.router.state.events', brCore, + brServerStatus, brAutoFocus, brIconGenerator, brInterstitialSpinner, brooklynModuleLinks, brooklynUserManagement, + brYamlEditor, brUtils, brSpecEditor, brooklynCatalogSaver, brooklynApi, bottomSheet, stackViewer, brDragndrop, + customActionDirective, customConfigSuggestionDropdown, paletteApiProvider, paletteServiceProvider]) .directive('designer', ['$log', '$state', '$q', 'iconGenerator', 'catalogApi', 'blueprintService', 'brSnackbar', 'paletteDragAndDropService', designerDirective]) .directive('onError', onErrorDirective) .directive('catalogSelector', catalogSelectorDirective) @@ -96,6 +98,7 @@ angular.module('app', [ngAnimate, ngResource, ngCookies, ngClipboard, uiRouter, .filter('dslParamLabel', ['$filter', dslParamLabelFilter]) .config(['$urlRouterProvider', '$stateProvider', '$logProvider', applicationConfig]) .config(['actionServiceProvider', actionConfig]) + .config(['paletteServiceProvider', paletteConfig]) .run(['$rootScope', '$state', 'brSnackbar', errorHandler]) .run(['$http', httpConfig]); @@ -131,8 +134,31 @@ function actionConfig(actionServiceProvider) { actionServiceProvider.addAction("add", {html: '<catalog-saver config="vm.saveToCatalogConfig"></catalog-saver>'}); } +function paletteConfig(paletteServiceProvider) { + paletteServiceProvider.addSection('entities', { + title: 'Entities', + type: EntityFamily.ENTITY, + icon: 'fa-square-o' + }); + paletteServiceProvider.addSection('policies', { + title: 'Policies', + type: EntityFamily.POLICY, + icon: 'fa-heartbeat' + }); + paletteServiceProvider.addSection('enrichers', { + title: 'Enrichers', + type: EntityFamily.ENRICHER, + icon: 'fa-puzzle-piece' + }); + paletteServiceProvider.addSection('locations', { + title: 'Locations', + type: EntityFamily.LOCATION, + icon: 'fa-map-pin' + }); +} + function errorHandler($rootScope, $state, brSnackbar) { - $rootScope.$on('$stateChangeError', (event, toState, toParams, fromState, fromParams, error)=> { + $rootScope.$on('$stateChangeError', (event, toState, toParams, fromState, fromParams, error) => { brSnackbar.create(error.detail); if (toState === yamlState) { $state.go(toState); @@ -142,6 +168,6 @@ function errorHandler($rootScope, $state, brSnackbar) { }); } -function httpConfig($http){ +function httpConfig($http) { $http.defaults.headers.common['X-Csrf-Token-Required-For-Requests'] = 'write'; } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a9236f00/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html ---------------------------------------------------------------------- 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 8b410df..4b0b363 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 @@ -21,10 +21,10 @@ <div class="toolbar"> <div class="list-group"> <a href class="list-group-item" - ng-repeat="palette in vm.palettes track by $index" - ng-class="{'active': vm.paletteType === palette.type}" - ng-click="vm.paletteType = palette.type"> - <i class="fa fa-fw" ng-class="palette.icon"></i> + ng-repeat="section in vm.sections track by $index" + ng-class="{'active': vm.selectedSection === section}" + ng-click="vm.selectedSection = section"> + <i class="fa fa-fw" ng-class="section.icon"></i> </a> </div> </div> @@ -32,16 +32,16 @@ <designer></designer> </div> -<div class="pane pane-palette" ng-if="vm.paletteType"> - <div ng-repeat="palette in vm.palettes track by $index" - ng-if="vm.paletteType === palette.type"> +<div class="pane pane-palette" ng-if="vm.selectedSection"> + <div ng-repeat="section in vm.sections track by $index" + ng-if="vm.selectedSection === section"> <div class="container-fluid"> <h3> - {{palette.title}} - <br-svg type="close" class="pull-right" ng-click="vm.paletteType = undefined"></br-svg> + {{section.title}} + <br-svg type="close" class="pull-right" ng-click="vm.selectedSection = undefined"></br-svg> </h3> </div> - <catalog-selector family="palette.type" on-select="vm.onTypeSelected(item)" items-per-page="vm.catalogItemsPerPage"></catalog-selector> + <catalog-selector family="section.type" on-select="vm.onTypeSelected(item)" items-per-page="vm.catalogItemsPerPage"></catalog-selector> </div> </div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a9236f00/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js ---------------------------------------------------------------------- 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 e19a4f5..8cd432e 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 @@ -28,40 +28,19 @@ export const graphicalState = { templateProvider: function(composerOverrides) { return composerOverrides.paletteGraphicalStateTemplate || template; }, - controller: ['$scope', '$state', 'blueprintService', graphicalController], + controller: ['$scope', '$state', 'blueprintService', 'paletteService', graphicalController], controllerAs: 'vm', data: { label: 'Graphical Designer' } }; -function graphicalController($scope, $state, blueprintService) { +function graphicalController($scope, $state, blueprintService, paletteService) { this.EntityFamily = EntityFamily; this.catalogItemsPerPage = 24; - this.palettes = [ - { - title: 'Entities', - type: EntityFamily.ENTITY, - icon: 'fa-square-o' - }, - { - title: 'Policies', - type: EntityFamily.POLICY, - icon: 'fa-heartbeat' - }, - { - title: 'Enrichers', - type: EntityFamily.ENRICHER, - icon: 'fa-puzzle-piece' - }, - { - title: 'Locations', - type: EntityFamily.LOCATION, - icon: 'fa-map-pin' - } - ]; - this.paletteType = EntityFamily.ENTITY; + this.sections = paletteService.getSections(); + this.selectedSection = Object.values(this.sections).find(section => section.type === EntityFamily.ENTITY); this.onTypeSelected = (selectedType)=> { let rootEntity = blueprintService.get(); http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a9236f00/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less ---------------------------------------------------------------------- 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 dabfc4f..5649c09 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 @@ -39,6 +39,9 @@ } .list-group-item { + @active-border-width: 4px; + padding-top: 10px + @active-border-width; + padding-bottom: 9px + @active-border-width; border-left: none; border-radius: 0; @@ -48,9 +51,10 @@ &.active { border-right: none; border-color: @list-group-border; - border-bottom: 4px solid @brand-primary; + border-bottom: @active-border-width solid @brand-primary; background-color: #fff; color: @list-group-link-color; + padding-bottom: 10px; } } }
