From d04515ae5983945d24fa2a339827ee938e5cb6ab Mon Sep 17 00:00:00 2001 From: Rupinder Date: Thu, 28 May 2020 16:44:05 +0530 Subject: added a basic function attribute sidebar Designed a basic function attribute sidebar, it is still work in progress. Need to work on Content depends on current selection of Function. Issue-ID: CCSDK-2281 Change-Id: Ifd6019348d530deb043d1a0275cd93413e128c7c Signed-off-by: Rupinder --- .../configuration-dashboard.component.ts | 2 +- .../packages/designer/designer.component.css | 63 ++++++- .../packages/designer/designer.component.html | 204 ++++++++++++++++++++- .../packages/designer/designer.component.ts | 10 +- .../designer/source-view/source-view.component.ts | 3 +- 5 files changed, 265 insertions(+), 17 deletions(-) (limited to 'cds-ui/designer-client') diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 19c10c5fd..0c8fa3d20 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -24,7 +24,7 @@ export class ConfigurationDashboardComponent implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); @ViewChild(MetadataTabComponent, {static: false}) private metadataTabComponent: MetadataTabComponent; - public customActionName: string; + public customActionName = ''; entryDefinitionKeys: string[] = ['template_tags', 'user-groups', 'author-email', 'template_version', 'template_name', 'template_author']; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index 964268de5..a095b3dfc 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -225,7 +225,7 @@ button.rotate{ left: 30px; } .componentsList tspan{ - width:60px !important; + /* width:30px !important; */ font: normal 13px sans-serif; fill: #1B3E6F !important; overflow-wrap: break-word; @@ -419,9 +419,8 @@ p.compType-4{ /*CANVAS*/ .editBar{ - width: 1080px; - height: 50px; - margin: 0 auto 0 -392px; + width: 200px; + margin: 0 auto 0; padding: 6px 10px; background:#F4F9FE; /* border: solid 1px #E8EFF8; */ @@ -505,11 +504,21 @@ p.compType-4{ .componentContainer p{ font-size: 12px; } - +.functionAttributeSidebar{ + width: 440px; + padding: 0px; + margin-top: 50px; +} +.functionAttributeSidebar .attributesContainer{ + background: #fff; + border: solid 1px #C1CDDD; + box-shadow: 0 2px 6px rgba(47, 83, 151, .1); +} /*ATTRIBUTES SIDE BAR*/ .attributesSideBar{ width: 396px; - padding: 0; + padding: 0px; + margin-top: 50px; } .attributesSideBar .attributesContainer{ background: #fff; @@ -517,12 +526,13 @@ p.compType-4{ box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } .closeBar{ - float: right; - width: 90%; - height: 40px; + float: left; + width: 50%; + height: 42px; background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ; border: 0; outline: 0; + margin-left: -30px; } .closeBar:focus{ outline: none; @@ -536,6 +546,15 @@ p.compType-4{ text-transform: uppercase; color: #1B3E6F; } +.attributesContainer h6{ + margin-bottom: 10px; + padding: 12px 0 12px 15px; + background: #DEE8F3; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + color: #1B3E6F; +} .actionName{ margin-bottom: 21px; } @@ -586,7 +605,7 @@ p.compType-4{ font-weight: bold; font-size: 13px; text-transform: uppercase; - line-height: 38px; + line-height: 15px; } .accordion .btn-link:hover{ color: #103D73; @@ -653,3 +672,27 @@ p.compType-4{ -webkit-user-select: none; z-index: 2; } */ +.attributesContainer .dropdown-text, +.dropdown-toggle:hover ~ .dropdown-text, +.dropdown-toggle:focus ~ .dropdown-text{ + top: 7px; + text-indent: 15px; + background: #F4F9FE; + border-radius: 5px; + border: 0; + box-shadow: whitesmoke; + color: #1B3E6F; + font-weight: bold; + font-size: 13px; +} +.radio-btn{ + margin-left: 12px; + font-weight: bold; +} +.function-attribute{ + margin-right: -16px; +} +.trash-span{ + margin-left: 150px; + font-size:15px +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 6904d5781..52503cf53 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -102,9 +102,9 @@
- @@ -230,7 +230,7 @@
-->
- +
@@ -388,4 +388,202 @@
+ + +
+
+
+ +
+
+
+
+
+ +
+ +
+
Function Attributes + + + +
+
+ + +
+
+ +
+
+
+
+ + +
+
+
+
+
+
+ +
+ +
component-resource-resolution
+
    +
  • +
    +
  • other component
    • +
+ + +
+
+
+
+
+
+
+

+ +

+
+ +
+
+ +
+
+
+
+   + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + + +
+ +
+
+
+ +
+ +
+
+
+

+ +

+
+ +
+
+ +
+
+
+
+   + +
+
+ +
+
+
+ +
+ +
artifact-template-velocity
+
    +
  • +
    +
  • ddwd
    • +
+ + +
+
+ +
+ +
+
+   + +
+
+ +
+
+
+ +
+ +
artifact-mapping resource
+
    +
  • +
    +
  • ddwd
    • +
+ + +
+
+ +
+
+
+
+ +
+
+ + + + + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index fe90b6b90..3d10f99e7 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -33,12 +33,13 @@ import { ActionElementTypeName } from 'src/app/common/constants/app-constants'; import { GraphUtil } from './graph.util'; import { GraphGenerator } from './graph.generator.util'; import { FunctionsStore } from './functions.store'; -import { Subject } from 'rxjs'; +import { Subject, empty } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { distinctUntilChanged } from 'rxjs/operators'; import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; import { ActivatedRoute } from '@angular/router'; import { DesignerService } from './designer.service'; +import { isDefined } from '@angular/compiler/src/util'; @Component({ selector: 'app-designer', @@ -50,6 +51,7 @@ export class DesignerComponent implements OnInit, OnDestroy { private controllerSideBar: boolean; private attributesSideBar: boolean; + functionAttributeSidebar: boolean; viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); customActionName: string; showAction: boolean; @@ -71,6 +73,7 @@ export class DesignerComponent implements OnInit, OnDestroy { this.controllerSideBar = true; this.attributesSideBar = false; this.showAction = false; + this.functionAttributeSidebar = true; } private _toggleSidebar1() { @@ -79,6 +82,9 @@ export class DesignerComponent implements OnInit, OnDestroy { private _toggleSidebar2() { this.attributesSideBar = !this.attributesSideBar; } + // private _toggleSidebar3() { + // this.functionAttributeSidebar = !this.functionAttributeSidebar; + // } /** @@ -95,7 +101,7 @@ export class DesignerComponent implements OnInit, OnDestroy { ngOnInit() { this.customActionName = this.route.snapshot.paramMap.get('actionName'); - if (this.customActionName != null) { + if (this.customActionName !== '') { this.showAction = true; } this.initializeBoard(); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts index e70d98d04..e6b00f413 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts @@ -19,6 +19,7 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { private controllerSideBar: boolean; private ngUnsubscribe = new Subject(); viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); + public customActionName = ''; constructor(private store: DesignerStore, private packageCreationUtils: PackageCreationUtils, @@ -48,7 +49,7 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy { // TODO validate json against scheme console.log('convertAndOpenInDesingerView ...', this.content); this.store.saveSourceContent(this.content); - this.router.navigate(['/packages/designer', id]); + this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); } ngOnDestroy() { -- cgit 1.2.3-korg