brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From henev...@apache.org
Subject [2/4] brooklyn-ui git commit: Add palette service for easy customisation. The template can still be overridden
Date Tue, 23 Oct 2018 16:43:52 GMT
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.bouron@cloudsoftcorp.com>
Authored: Mon Oct 15 09:51:02 2018 +0100
Committer: Thomas Bouron <thomas.bouron@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;
       }
     }
   }


Mime
View raw message