diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules')
3 files changed, 96 insertions, 8 deletions
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 5054a8e9e..8b79844be 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 @@ -24,6 +24,17 @@ body{ content: ""; } +.editNavbar .nav-tabs{ + border-bottom-width: 2px; +} +.editNavbar .nav-tabs .nav-link{ + padding: 12px 15px !important; + text-align: center; +} +.editNavbar .nav-tabs .nav-link::before{ + content: ""; +} + /*Header*/ header{ position: relative; @@ -444,6 +455,7 @@ p.compType-4{ background: #fff; border: solid 1px #D9E6F2; color: #C3CDDB; + margin-top: 14px; } .controllerSidebar .custom-control label{ margin-bottom: 0; @@ -461,8 +473,9 @@ p.compType-4{ /*CANVAS*/ .editBar{ - width: 200px; - margin: 0 auto 0; + width: 73.7%; + margin: 0 auto 0 -320px; + height: 45px; padding: 6px 10px; background:#F4F9FE; /* border: solid 1px #E8EFF8; */ @@ -486,6 +499,7 @@ p.compType-4{ .viewBtns .btn{ background-position: 10px center; padding-left: 30px!important; + margin-top: 14px; } .viewBtns .topologySource{ background-image: url(src/assets/img/icon-topologyView-active.svg); @@ -738,3 +752,40 @@ p.compType-4{ margin-left: 150px; font-size:15px } + +.arrow{ + margin-left: -10px; + border-radius: 3% +} +.arr-size{ + font-size: 31px; +} +.editBar2{ + width: 98.7%; + margin: 0 auto 0 -640px; + height: 45px; + padding: 6px 10px; + background:#F4F9FE; + /* border: solid 1px #E8EFF8; */ + box-shadow: 0 2px 6px rgba(47, 83, 151, .1); +} +.editBar2 .btn-group{ + box-shadow: 0 2px 6px rgba(47, 83, 151, .15); +} +.editBar2 .btn{ + background-color: #fff; + background-repeat: no-repeat; + background-position: left center; + border: 0; + color: #1B3E6F; + font-size: 10px; +} +.editBar2 .btn.active{ + background-color: #1B3E6F !important; + color: #fff; +} +.editBar2 .viewBtns .btn{ + background-position: 10px center; + padding-left: 30px!important; + margin-top: 14px; +} 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 2bd484258..fe24f9df4 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 @@ -99,17 +99,47 @@ </div> </div> </header> -<div class="source-button editBar"> +<!-- <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> - <!-- <button (click)="_toggleSidebar1()" class="topologySource active"> - <i style="font-size:24px" class="fa"></i> - </button> --> <button type="button" class="btn btn-secondary topologySource active">Designer</button> <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" class="btn btn-secondary topologyView">Scripting</button> </div> -</div> +</div> --> + +<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> + <button (click)="_toggleSidebar1()" class="active btn arrow"> + <i class="fa arr-size"></i> + </button> + <div class="collapse navbar-collapse "> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <nav class="row"> + <!--Nav Tabs--> + <div class="col-12"> + <div class="nav nav-tabs " id="nav-tab" role="tablist"> + <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab" + aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> + <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab" + aria-controls=" " aria-selected="false">Template</a> + </div> + </div> + </nav> + </li> + </ul> + <ul class="navbar ml-auto" style="list-style: none;"> + <li class="nav-item"> + <div class="btn-group viewBtns" role="group"> + <button type="button" class="btn btn-secondary topologySource active">Designer</button> + <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" + class="btn btn-secondary topologyView">Scripting</button> + </div> + </li> + </ul> + + </div> +</nav> <ng-sidebar-container class="sidebar-container"> <!-- Controller SideBar --> 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 9b8781d9b..4f31a08f4 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 @@ -55,6 +55,7 @@ export class DesignerComponent implements OnInit, OnDestroy { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); customActionName: string; showAction: boolean; + cl = 'editBar'; boardGraph: joint.dia.Graph; boardPaper: joint.dia.Paper; @@ -73,11 +74,17 @@ export class DesignerComponent implements OnInit, OnDestroy { this.controllerSideBar = true; this.attributesSideBar = false; this.showAction = false; - this.functionAttributeSidebar = true; + this.functionAttributeSidebar = false; } private _toggleSidebar1() { this.controllerSideBar = !this.controllerSideBar; + if (this.controllerSideBar === false) { + this.cl = 'editBar2'; + } + if (this.controllerSideBar === true) { + this.cl = 'editBar'; + } } private _toggleSidebar2() { this.attributesSideBar = !this.attributesSideBar; |