aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRupinder <rupinsi1@in.ibm.com>2020-06-08 18:21:31 +0530
committerKAPIL SINGAL <ks220y@att.com>2020-06-11 13:28:43 +0000
commitcc5fe65d2e756f76f8333ba985d7e147c33bc94f (patch)
tree77b2e1cc24d4215665811dde342ab557f2059c62
parent807f3df7b8d523040a65b805355f180551c3018c (diff)
added workflow and template tabs
Issue-ID: CCSDK-2278 Change-Id: I06a889d63131668c56602e2ce7a316f21b7f890f Signed-off-by: Rupinder <rupinsi1@in.ibm.com>
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css55
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html40
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts9
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">&#xf101;</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">&#xf100;</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;