Repository: brooklyn-ui Updated Branches: refs/heads/master 8c2eb51dd -> 88c36c34e
New layout for the blueprint composer. This allows to: - add multiple visualisations, if we wish to. Will be added as tabs - customise palettes. Add/remove sections, they are on the left side - separate the palette from the configuration screen, less confusing for users - hide both the palette and spec editor for showing off the blueprint fullscreen Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/38e7c3c9 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/38e7c3c9 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/38e7c3c9 Branch: refs/heads/master Commit: 38e7c3c9ef77288293f6ede143cbc22db322e164 Parents: 3c1ab28 Author: Thomas Bouron <[email protected]> Authored: Thu Oct 11 14:58:37 2018 +0100 Committer: Thomas Bouron <[email protected]> Committed: Thu Oct 11 15:13:14 2018 +0100 ---------------------------------------------------------------------- .../catalog-saver/catalog-saver.template.html | 2 +- .../app/components/designer/designer.less | 2 +- ui-modules/blueprint-composer/app/index.js | 2 +- .../app/views/main/graphical/edit/add/add.js | 2 + .../views/main/graphical/graphical.state.html | 56 +++-- .../app/views/main/graphical/graphical.state.js | 31 ++- .../views/main/graphical/graphical.state.less | 214 ++++++++++++------- .../blueprint-composer/app/views/main/main.less | 24 +++ .../app/views/main/main.template.html | 73 ++++--- ui-modules/utils/br-core/style/buttons.less | 34 ++- 10 files changed, 287 insertions(+), 153 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/ui-modules/blueprint-composer/app/components/catalog-saver/catalog-saver.template.html ---------------------------------------------------------------------- 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 4a216af..5191472 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. --> -<button class="btn btn-info" ng-click="activateModal()">{{buttonText}}</button> \ No newline at end of file +<button class="btn btn-info btn-ouline" ng-click="activateModal()">{{buttonText}}</button> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/ui-modules/blueprint-composer/app/components/designer/designer.less ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/components/designer/designer.less b/ui-modules/blueprint-composer/app/components/designer/designer.less index 86f4b03..75a1b58 100644 --- a/ui-modules/blueprint-composer/app/components/designer/designer.less +++ b/ui-modules/blueprint-composer/app/components/designer/designer.less @@ -35,7 +35,7 @@ designer { svg { width: 100%; - height: calc(~"100vh - 55px"); + height: 100%; cursor: move; position: absolute; z-index: 1; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/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 a9f2d87..38313af 100755 --- a/ui-modules/blueprint-composer/app/index.js +++ b/ui-modules/blueprint-composer/app/index.js @@ -127,7 +127,7 @@ function composerOverridesProvider() { } function actionConfig(actionServiceProvider) { - actionServiceProvider.addAction("deploy", {html: '<button class="btn btn-success" ng-click="vm.deployApplication()" ng-disabled="vm.deploying">Deploy</button>'}); + actionServiceProvider.addAction("deploy", {html: '<button class="btn btn-ouline btn-success" ng-click="vm.deployApplication()" ng-disabled="vm.deploying">Deploy</button>'}); actionServiceProvider.addAction("add", {html: '<catalog-saver config="vm.saveToCatalogConfig"></catalog-saver>'}); } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js index 1d23ce1..efe8a02 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js +++ b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js @@ -51,6 +51,8 @@ export function GraphicalEditAddController($scope, $filter, $state, $stateParams break; } + $scope.catalogItemsPerPage = 24; + $scope.getParentLink = ()=> { let state = graphicalEditEntityState; let params = {entityId: $scope.entity.hasParent() ? $scope.entity.parent._id : $scope.entity._id}; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/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 b87c38c..8b410df 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 @@ -16,37 +16,35 @@ specific language governing permissions and limitations under the License. --> -<designer></designer> -<div class="left-panel"> - <ui-view> - <br-collapsible state="true"> - <heading> - Entities - </heading> - <catalog-selector family="EntityFamily.ENTITY" on-select="onTypeSelected(item)" items-per-page="catalogItemsPerPage"></catalog-selector> - </br-collapsible> +<div class="layout"> + <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> + </a> + </div> + </div> - <br-collapsible> - <heading> - Policies - </heading> - <catalog-selector family="EntityFamily.POLICY" on-select="onTypeSelected(item)" items-per-page="catalogItemsPerPage"></catalog-selector> - </br-collapsible> - - <br-collapsible> - <heading> - Enrichers - </heading> - <catalog-selector family="EntityFamily.ENRICHER" on-select="onTypeSelected(item)" items-per-page="catalogItemsPerPage"></catalog-selector> - </br-collapsible> + <designer></designer> +</div> - <br-collapsible> - <heading> - Locations - </heading> - <catalog-selector family="EntityFamily.LOCATION" on-select="onTypeSelected(item)" items-per-page="catalogItemsPerPage"></catalog-selector> - </br-collapsible> - </ui-view> +<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="container-fluid"> + <h3> + {{palette.title}} + <br-svg type="close" class="pull-right" ng-click="vm.paletteType = undefined"></br-svg> + </h3> + </div> + <catalog-selector family="palette.type" on-select="vm.onTypeSelected(item)" items-per-page="vm.catalogItemsPerPage"></catalog-selector> + </div> </div> +<div class="pane pane-configuration"> + <ui-view></ui-view> +</div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/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 470d59e..e19a4f5 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 @@ -29,16 +29,41 @@ export const graphicalState = { return composerOverrides.paletteGraphicalStateTemplate || template; }, controller: ['$scope', '$state', 'blueprintService', graphicalController], + controllerAs: 'vm', data: { label: 'Graphical Designer' } }; function graphicalController($scope, $state, blueprintService) { - $scope.EntityFamily = EntityFamily; - $scope.catalogItemsPerPage = 24; + this.EntityFamily = EntityFamily; + this.catalogItemsPerPage = 24; - $scope.onTypeSelected = (selectedType)=> { + 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.onTypeSelected = (selectedType)=> { let rootEntity = blueprintService.get(); if (selectedType.supertypes.includes(EntityFamily.ENTITY.superType)) { http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/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 0288439..dabfc4f 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 @@ -16,99 +16,157 @@ * specific language governing permissions and limitations * under the License. */ -.left-panel { - display: block; + +.layout { + display: flex; + + .toolbar { + position: relative; + height: calc(~"100vh - 105px"); + background-color: #fff; + overflow-y: scroll; + z-index: 40; + box-shadow: 0 0 10px 2px @navbar-default-border; + + &:after { + position: absolute; + content: ''; + width: 1px; + top: 0; + bottom: 0; + right: 0; + background-color: @navbar-default-border; + } + + .list-group-item { + border-left: none; + border-radius: 0; + + &:first-child { + border-top: none; + } + &.active { + border-right: none; + border-color: @list-group-border; + border-bottom: 4px solid @brand-primary; + background-color: #fff; + color: @list-group-link-color; + } + } + } + + designer { + flex-grow: 1; + } +} + +.pane { position: absolute; - left: 20px; - top: 20px; - width: 440px; - padding-top: 6px; - z-index: 200; - overflow-y: scroll; - height: calc(~"100vh - 95px"); - box-shadow: 0 0 rgba(0, 0, 0, 0.2), 0 1px 18px 1px rgba(0, 0, 0, 0.11); + top: 50px; + bottom: 0; background-color: #fff; - border: 1px solid @navbar-default-border; + z-index: 40; + overflow-y: scroll; - .container-fluid { - padding: 0; - } - - .spec-parent { - margin-top: -6px; - a { - background-color: @gray-lighter; - padding: 15px 45px 15px 15px; - position: relative; + &.pane-palette { + left: 49px; + width: 440px; + box-shadow: 5px 0 10px -2px @navbar-default-border; + + h3 { color: @gray-light; - font-style: italic; + } + br-svg { + width: 20px; + height: 20px; + cursor: pointer; + } + } + + &.pane-configuration { + right: 0; + box-shadow: 5px 0 10px 5px @navbar-default-border; + + & > ui-view > ui-view { display: block; - transition: color 0.3s ease; - .text-overflow(); - - &:after{ - content: '\f112'; - font-family: FontAwesome; - position: absolute; - right: 15px; + width: 440px; + } + + .container-fluid { + padding: 0; + } + + .spec-parent { + a { + background-color: @gray-lighter; + padding: 15px 45px 15px 15px; + position: relative; color: @gray-light; + font-style: italic; + display: block; transition: color 0.3s ease; - } - &:hover { - color: @gray; - &:after { + .text-overflow(); + + &:after{ + content: '\f112'; + font-family: FontAwesome; + position: absolute; + right: 15px; + color: @gray-light; + transition: color 0.3s ease; + } + &:hover { color: @gray; + &:after { + color: @gray; + } } } } - } - // panel classes are added by use of accordion toggle in palette - // we also use these classes for spec editor and others - // (would be nice to refactor so we use our own classes instead) - .panel-group { - margin-bottom: 0; - .panel { - border-bottom: 1px solid @gray-lighter; - margin: 0 12px; - border-radius: 0; - box-shadow: none; - .panel-heading { - padding: 15px 3px 15px 3px; - } - .panel-title { - font-size: 16px; - font-weight: 400; - } - .panel-body { - padding: 0; - border: none !important; - margin-bottom: 24px; - } - } - .panel-title > a, - .panel-title > a:hover, - .panel-title > a:focus:hover { - background: none; - color: @gray-light; - - .collapsible-action { - padding-left: 2px; - padding-right: 6px; - margin-top: 1px; + // panel classes are added by use of accordion toggle in palette + // we also use these classes for spec editor and others + // (would be nice to refactor so we use our own classes instead) + .panel-group { + margin-bottom: 0; + .panel { + border-bottom: 1px solid @gray-lighter; + margin: 0 12px; + border-radius: 0; + box-shadow: none; + .panel-heading { + padding: 15px 3px 15px 3px; + } + .panel-title { + font-size: 16px; + font-weight: 400; + } + .panel-body { + padding: 0; + border: none !important; + margin-bottom: 24px; + } } - .collapsible-action, a.collapsible-action { + .panel-title > a, + .panel-title > a:hover, + .panel-title > a:focus:hover { + background: none; color: @gray-light; - } - .collapsible-action:active, a.collapsible-action:active, - .collapsible-action:hover, a.collapsible-action:hover, - .collapsible-action:focus, a.collapsible-action:focus { - color: @gray; + + .collapsible-action { + padding-left: 2px; + padding-right: 6px; + margin-top: 1px; + } + .collapsible-action, a.collapsible-action { + color: @gray-light; + } + .collapsible-action:active, a.collapsible-action:active, + .collapsible-action:hover, a.collapsible-action:hover, + .collapsible-action:focus, a.collapsible-action:focus { + color: @gray; + } } } } - - br-collapsible catalog-selector { - margin-top: 0; - } } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/ui-modules/blueprint-composer/app/views/main/main.less ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/views/main/main.less b/ui-modules/blueprint-composer/app/views/main/main.less index 1713b29..9a539b8 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.less +++ b/ui-modules/blueprint-composer/app/views/main/main.less @@ -18,6 +18,30 @@ */ @import "./bottom-sheet.less"; +.navbar-mode { + background: #555; + border: none; + border-radius: 0; + border-color: @navbar-default-border; + z-index: 50; + + .navbar-nav > li > a { + color: @gray-lighter; + padding-bottom: 10px; + border-bottom: 5px solid transparent; + } + + .navbar-nav-mode > .active > a, + .navbar-nav-mode > .active > a:hover, + .navbar-nav-mode > .active > a:focus { + border-bottom: 5px solid @brand-primary; + + & > i.fa { + color: @brand-primary; + } + } +} + .page-main-area { position: relative; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/ui-modules/blueprint-composer/app/views/main/main.template.html ---------------------------------------------------------------------- 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 db569d0..3fa92b4 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.template.html +++ b/ui-modules/blueprint-composer/app/views/main/main.template.html @@ -16,39 +16,46 @@ specific language governing permissions and limitations under the License. --> -<div class="btn-group modes flex" role="group" aria-label="..."> - <div class="btn-group flex" uib-dropdown keyboard-nav auto-close="outsideClick"> - <button type="button" class="btn btn-default disabled"> - {{vm.mode.data.label}} - </button> - <button type="button" class="btn btn-success dropdown-toggle" ng-disabled="!vm.isGraphicalMode()" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false"> - <span class="caret"></span> - <span class="sr-only">Toggle layers selection</span> - </button> - <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu"> - <li ng-if="vm.isGraphicalMode()" class="dropdown-header">Layers</li> - <li role="menuitem" class="layer" - ng-if="vm.isGraphicalMode()" - ng-repeat="layer in vm.layers track by layer.id" - ng-class="{'active': layer.active}"> - <a ng-click="layer.active = !layer.active"><i class="fa fa-fw fa-circle"></i> {{layer.label}}</a> - </li> - </ul> - </div> - <a ui-sref="main.graphical" ng-if="!vm.isGraphicalMode()" class="btn btn-primary" ng-disabled="vm.parseError"> - <i class="fa fa-fw fa-exchange"></i> - <span class="sr-only">Switch to Graphical Designer</span> - </a> - <a ui-sref="main.yaml" ng-if="vm.isGraphicalMode()" class="btn btn-primary"> - <i class="fa fa-fw fa-exchange"></i> - <span class="sr-only">Switch to YAML Editor</span> - </a> -</div> -<ui-view></ui-view> +<header> + <nav class="navbar navbar-mode"> + <div class="container-fluid"> + <ul class="nav navbar-nav navbar-nav-mode"> + <li ng-class="{'active': vm.isGraphicalMode()}"> + <a ui-sref="main.graphical" ng-disabled="vm.parseError"> + <i class="fa fa-fw fa-object-group"></i> Graphical Designer + </a> + </li> + <li ng-class="{'active': !vm.isGraphicalMode()}"> + <a ui-sref="main.yaml"> + <i class="fa fa-fw fa-pencil"></i> YAML Editor + </a> + </li> + </ul> + + <div class="nav navbar-form navbar-right navbar-nav-main-actions"> + <custom-action ng-repeat="(id, action) in vm.getAllActions() track by id" action="action"></custom-action> + <blueprint-data-manager></blueprint-data-manager> + </div> + <ul class="nav navbar-nav navbar-right navbar-nav-secondary-actions" ng-if="vm.isGraphicalMode()" > + <li class="dropdown" uib-dropdown> + <a href class="dropdown-toggle" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false"> + <i class="fa fa-fw fa-clone"></i> Layers <span class="caret"></span> + </a> + <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu"> + <li role="menuitem" class="layer" + ng-if="vm.isGraphicalMode()" + ng-repeat="layer in vm.layers track by layer.id" + ng-class="{'active': layer.active}"> + <a ng-click="layer.active = !layer.active"><i class="fa fa-fw fa-circle"></i> {{layer.label}}</a> + </li> + </ul> + </li> + </ul> + </div> + </nav> +</header> + +<ui-view></ui-view> -<div class="actions"> - <custom-action ng-repeat="(id, action) in vm.getAllActions() track by id" action="action"></custom-action> - <blueprint-data-manager></blueprint-data-manager> -</div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e7c3c9/ui-modules/utils/br-core/style/buttons.less ---------------------------------------------------------------------- diff --git a/ui-modules/utils/br-core/style/buttons.less b/ui-modules/utils/br-core/style/buttons.less index 5758fde..a74ef32 100644 --- a/ui-modules/utils/br-core/style/buttons.less +++ b/ui-modules/utils/br-core/style/buttons.less @@ -16,13 +16,6 @@ * specific language governing permissions and limitations * under the License. */ -.btn-primary { - border: none; -} -.btn-primary:hover, -.btn-primary:focus { - box-shadow: inset 0px -2px 0px rgba(0,0,0,0.4); -} @btn-primary-border: @btn-primary-bg; @@ -30,3 +23,30 @@ .btn-accent { .button-variant(@btn-accent-color; @btn-accent-bg; @btn-accent-border); } + +.btn-ouline { + &.btn-primary:not(:hover) { + background-color: transparent; + color: @brand-primary; + } + &.btn-accent:not(:hover) { + background-color: transparent; + color: @brand-accent; + } + &.btn-success:not(:hover) { + background-color: transparent; + color: @brand-success; + } + &.btn-info:not(:hover) { + background-color: transparent; + color: @brand-info; + } + &.btn-warning:not(:hover) { + background-color: transparent; + color: @brand-warning; + } + &.btn-danger:not(:hover) { + background-color: transparent; + color: @brand-danger; + } +} \ No newline at end of file
