diff --git a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js index cbcb0ffba..adfc7fe97 100644 --- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js +++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js @@ -80,6 +80,7 @@ export function designerDirective($log, $state, $q, iconGenerator, catalogApi, b switch (entity.family) { case EntityFamily.ENTITY: + if ($scope.onSelectionChange) $scope.onSelectionChange(undefined); entity.delete(); break; case EntityFamily.POLICY: diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js index 53be4f299..04786cecb 100644 --- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js +++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js @@ -81,7 +81,7 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani scope: { model: '=' }, - controller: ['$scope', '$element', controller], + controller: ['$scope', '$element', 'paletteService', controller], templateUrl: function (tElement, tAttrs) { return tAttrs.templateUrl || TEMPLATE_URL; }, @@ -89,7 +89,8 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani controllerAs: 'specEditor', }; - function controller($scope, $element) { + function controller($scope, $element, paletteService) { + $scope.paletteService = paletteService; (composerOverrides.configureSpecEditorController || function() {})(this, $scope, $element); // does very little currently, but link adds to this @@ -103,6 +104,19 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani scope.RESERVED_KEYS = RESERVED_KEYS; scope.REPLACED_DSL_ENTITYSPEC = REPLACED_DSL_ENTITYSPEC; + specEditor.sections = scope.paletteService.getSections(); + specEditor.hasParentEntity = element.parent().children()[0].tagName == "SECTION" + && element.parent().children()[0].classList.contains("spec-parent"); + specEditor.needToolbar = !["policy", "enricher", "location", "other"].includes(element.attr("model")); + + if (specEditor.hasParentEntity) { + $rootScope.oldSelectedSection = $rootScope.selectedSection + $rootScope.selectedSection = specEditor.sections.entities; + } else if ($rootScope.oldSelectedSection) { + $rootScope.selectedSection = $rootScope.oldSelectedSection; + $rootScope.oldSelectedSection = undefined; + } + let defaultState = { config: { add: { diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less index 591e046d7..1a21d999e 100644 --- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less +++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less @@ -27,9 +27,15 @@ spec-editor { display: block; - margin-top: 15px; color: @gray; + .config-panel { + padding: 20px 15px; + flex-basis: 100%; + border-right: 1px solid @navbar-default-border; + min-width: 0; + } + .toolbar-button-affordance() { color: mix(@gray, @gray-lighter); cursor: pointer; @@ -76,6 +82,7 @@ spec-editor { .panel-header-body { padding-left: 2em; + width: initial; .panel-header-icon { width: 30px; margin-left: -30px; @@ -196,6 +203,66 @@ spec-editor { .spec-actions { flex-grow: 0; } + h2 { + margin-bottom: 0px; + input { + color: @gray-light; + } + } + .btn-group { + display: flex; + align-items: center; + + & br-svg { + display: block; + height: 20px; + width: 20px; + cursor: pointer; + } + + .fa-bars { + font-size: 20px; + } + } + } + + .media { + display: flex; + + .panel-header-body { + min-width: 0; + padding-left: 0; + + div { + display: flex; + } + + .fa-bookmark { + display: block; + min-width: 28px; + margin-left: 0; + } + + .fa-id-card-o { + margin-left: 0; + margin-right: 0; + } + + .entity-type-header { + text-overflow: ellipsis; + overflow: hidden; + display: block; + } + + .version { + margin-left: 28px; + } + + .identifier { + margin-top: 0; + align-items: center; + } + } } .spec-actions { @@ -215,6 +282,26 @@ spec-editor { } } + .core-config-panel { + margin-top: 20px; + + > div:first-child { + display:flex; + align-items: center; + + div:first-child { + color: @gray-light; + font-size: 16px; + } + span { + margin-left: 6px; + } + div:last-child { + margin-left: auto; + } + } + } + .spec-type, .spec-configuration, .spec-policies, @@ -781,7 +868,7 @@ spec-editor { border: 1px solid @gray-light; transition: 0.15s ease all; padding: 0.5em; - margin-top: -12px; + margin-top: 0px; margin-bottom: 24px; .dropdown-menu li a { // quite a lot of padding in normal dropdown, in the ul and in the a @@ -857,3 +944,10 @@ dsl-viewer { cursor: alias; } } + +.pane-configuration .pane-palette { + width: initial; + left: initial; + border-left: initial; + box-shadow: initial; +} diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html index 31af6f89e..cc30448a0 100644 --- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html +++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html @@ -17,141 +17,151 @@ under the License. --> -
-
-
-

- -
- - -
-
+
+
+
+
+ +
+

+ +

+ +
+ + + +
+
-

+

-
-
- {{model | entityName}} logo -
-
-
{{model.type}} {{model | entityVersion}}
-
- - +
+
+ {{model | entityName}} logo +
+
+
{{model.type}}
+ {{model | entityVersion}} +
+ + +
+
+
+
+ + +
+
+
Configuration
+ {{getConfigIssues().length}} +
+ + +
-
-
-
- - - - - Configuration - {{getConfigIssues().length}} - - - - - - -
-
- -
-
-
    -
  • - {{filter.label}} -
    • -
-
-
- -
- - -
- -
-
- -
-
-
-

No configuration

-
-
-

No matching configuration

-

- - -

-
-
+
+

No matching configuration

+

+ + +

+
+
-
-
-
-
- -
- - -
-
+ +
- - - +
+ + + + + + + + + + +
+ + +
+ + + + + + + -
- - + +
+
+
+ + +
- - - - - - + @@ -473,7 +486,7 @@

No enrichers @@ -497,12 +510,12 @@

No enrichers + diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js index b25bc046d..f16e96916 100755 --- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js @@ -30,7 +30,6 @@ export function D3Blueprint(container) { let _relationGroup = _parentGroup.append('g').attr('class', 'relation-group'); let _specNodeGroup = _parentGroup.append('g').attr('class', 'spec-node-group'); let _dropZoneGroup = _parentGroup.append('g').attr('class', 'dropzone-group'); - let _ghostNodeGroup = _parentGroup.append('g').attr('class', 'ghost-node-group'); let _nodeGroup = _parentGroup.append('g').attr('class', 'node-group'); let _cloneGroup = _parentGroup.append('g').attr('class', 'clone-group'); @@ -167,7 +166,6 @@ export function D3Blueprint(container) { }; let _d3DataHolder = { nodes: [], - ghostNodes: [], orphans: [], links: [], relationships: [], @@ -263,25 +261,6 @@ export function D3Blueprint(container) { } } - /** - * Mouse Enter Event Handler - * - * @param {object} node The graph node the mouse is over - */ - function onGhostOver(node) { - d3.select(`#ghost-node-${node.data._id} g.buttons`).classed('active', true); - // show whole group not just buttons - } - - /** - * Mouse Leave Event Handler - * - * @param {object} node The graph node the mouse just left - */ - function onGhostLeave(node) { - d3.select(`#ghost-node-${node.data._id} g.buttons`).classed('active', false); - } - /** * Fires a custom event "click-entity" when a graph node is clicked. * @@ -451,8 +430,6 @@ export function D3Blueprint(container) { if (id) { _dropZoneGroup.select(`#${id}`).classed('active', true) } - } else { - onGhostOver(node); } } @@ -472,8 +449,6 @@ export function D3Blueprint(container) { if (id) { _dropZoneGroup.select(`#${id}`).classed('active', false) } - } else { - onGhostLeave(node); } } @@ -541,7 +516,6 @@ export function D3Blueprint(container) { drawRelationships(); drawNodeGroup(); drawSpecNodeGroup(); - drawGhostNode(); drawDropZoneGroup(); return this; } @@ -577,8 +551,6 @@ export function D3Blueprint(container) { let entity = nodeGroup.append('g') .attr('class', 'node-entity entity') .on('click', onEntityClick) - .on('mouseenter', onGhostOver) - .on('mouseleave', onGhostLeave) .call(d3.drag() .on('start', onDragStart) .on('drag', onDrag) @@ -731,40 +703,6 @@ export function D3Blueprint(container) { .remove(); } - function drawGhostNode() { - let ghostNodeData = _ghostNodeGroup.selectAll('g.ghost-node') - .data(_d3DataHolder.nodes, (d)=>(`ghost-node-${d.data._id}`)); - let ghostNode = ghostNodeData - .enter() - .append('g') - .attr('id', (d)=>(`ghost-node-${d.data._id}`)) - .attr('class', 'ghost-node') - .attr('transform', (d)=>(`translate(${d.x}, ${d.y})`)) - .on('mouseenter', onGhostOver) - .on('mouseleave', onGhostLeave); - ghostNodeData - .transition() - .duration(_configHolder.transition) - .attr('transform', (d)=>(`translate(${d.x}, ${d.y})`)); - ghostNodeData.exit().remove(); - - ghostNode.append('rect') - .attr('class', 'ghost') - .attr('width', (d)=>(isRootNode(d) ? _configHolder.nodes.root.rect.width : _configHolder.nodes.child.circle.r * 2)) - .attr('height', (d)=>((isRootNode(d) ? _configHolder.nodes.root.rect.height : _configHolder.nodes.child.circle.r * 2) + 80)) - .attr('x', (d)=>(isRootNode(d) ? _configHolder.nodes.root.rect.x : -_configHolder.nodes.child.circle.r)) - .attr('y', (d)=>(isRootNode(d) ? _configHolder.nodes.root.rect.y : -_configHolder.nodes.child.circle.r)); - - let buttonsGroup = ghostNode.append('g') - .attr('class', 'buttons'); - appendElements(buttonsGroup, _configHolder.nodes.buttongroup); - - let buttonAdd = buttonsGroup.append('g') - .attr('class', 'button button-add') - .on('click', onAddChildClick); - appendElements(buttonAdd, _configHolder.nodes.buttonAdd); - } - function drawDropZoneGroup() { showDropzones(); 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 24acefc11..2fe54b9f0 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 @@ -23,18 +23,6 @@
-
-
- - - -
-
-

{{section.title}} -

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 711d4c11c..4a295a144 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 @@ -20,7 +20,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 ffb961674..129530e77 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 @@ -38,6 +38,9 @@ export const graphicalState = { function graphicalController($scope, $state, $filter, blueprintService, paletteService) { this.EntityFamily = EntityFamily; + $scope.$root.selectedSection = paletteService.getSections().entities; + this.$state = $state; + this.sections = paletteService.getSections(); this.selectedSection = Object.values(this.sections).find(section => section.type === EntityFamily.ENTITY); $scope.paletteState = {}; // share state among all sections 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 3e5c5b863..0f571aea6 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 @@ -29,19 +29,9 @@ position: relative; height: calc(~"100vh - 105px"); background-color: #fff; - overflow-y: scroll; + overflow-y: auto; 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; - } + flex-shrink: 0; .list-group-item { @active-border-width: 4px; @@ -63,6 +53,10 @@ } } } + + .toolbar-left { + box-shadow: -5px 0 10px 5px @navbar-default-border; + } #palette-controls-button { margin-right: -2px; // not sure why the default -1px doesn't work to merge the borders? @@ -132,12 +126,13 @@ bottom: 0; background-color: #fff; z-index: 40; - overflow-y: scroll; + overflow-y: auto; &.pane-palette { - left: 49px; - width: 440px; + left: 48px; + width: 23%; box-shadow: 5px 0 10px -2px @navbar-default-border; + border-left: 1px solid @navbar-default-border; .palette-title { margin-left: 0; @@ -166,9 +161,12 @@ right: 0; box-shadow: 5px 0 10px 5px @navbar-default-border; + &.config-panel-open { + width: 23%; + } + & > ui-view > ui-view { display: block; - width: 489px; } .pane-palette .container-fluid { @@ -233,8 +231,6 @@ .panel-group { margin-bottom: 0; .panel { - border-bottom: 1px solid @gray-lighter; - margin: 0 12px; border-radius: 0; box-shadow: none; .panel-heading { @@ -272,4 +268,12 @@ } } } + + .br-icon-close-bar { + stroke: @gray-light ; + } + + svg:hover .br-icon-close-bar { + stroke: black; + } }