summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-06-15 20:38:07 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-06-15 21:42:57 +0200
commitd54169fb3fd48e8b4a984ed8ec6cc70624893a25 (patch)
tree7f6d234d1861a19c0f5d0b71f75f254f6b41dc55 /cds-ui/designer-client/src/app
parent50d6d53c9ceb84c781f8619ad0cafcede2869371 (diff)
Edit Designer tabs ui and fix canvas scroll bar
Issue-ID: CCSDK-2446 Issue-ID: CCSDK-2447 Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com> Change-Id: I74d7aca0f382a60f668f9acb3bb08e285be81a47
Diffstat (limited to 'cds-ui/designer-client/src/app')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css146
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html17
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts4
3 files changed, 105 insertions, 62 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 8b79844be..1441406ce 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
@@ -1,7 +1,9 @@
body{
- background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
- background-size: 6px 6px !important;
+ /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
+ background-size: 6px 6px !important; */
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important;
+ background-color: #fff !important;
}
/*Icons*/
@@ -25,22 +27,29 @@ body{
}
.editNavbar .nav-tabs{
- border-bottom-width: 2px;
+ border-bottom-width: 0;
}
.editNavbar .nav-tabs .nav-link{
- padding: 12px 15px !important;
+ padding: 12px 28px !important;
text-align: center;
}
.editNavbar .nav-tabs .nav-link::before{
content: "";
}
+.editNavbar .nav-link{
+ text-transform: initial !important;
+}
+.editNavbar .navbar,
+.editNavbar .navbar{
+ padding: 0;
+}
/*Header*/
header{
position: relative;
height: 60px;
background-color: #1B3E6F;
- box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
+ /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */
z-index: 200000000 !important;
}
.logo{
@@ -101,6 +110,9 @@ header{
.topology-actions .btn-group{
margin-top: 11px;
}
+.btn-group > .btn:not(:first-child){
+ margin-left: 0;
+}
.btn-topology-action,
.btn-topology-action:hover{
margin: 0 6px;
@@ -122,11 +134,11 @@ header{
.dropdown-toggle:focus ~ .dropdown-text{
top: 7px;
text-indent: 15px;
- background: #1273EB;
- border-radius: 15px;
+ background: #1273EB !important;
+ border-radius: 15px !important;
border: 0;
box-shadow: none;
- color: #fff;
+ color: #fff !important;
font-weight: bold;
font-size: 13px;
}
@@ -244,8 +256,8 @@ button.rotate{
text-decoration: none;
}
#board-paper svg{
- top: 40px;
- left: 30px;
+ top: 70px;
+ left: 0;
}
.componentsList tspan{
/* width:30px !important; */
@@ -329,7 +341,7 @@ p.compType-4{
padding-left: 20px;
background: #fff;
border-top: solid 1px #C1CDDD;
- font-size: 14px;
+ font-size: 13px;
line-height: 40px;
color: #0070F4;
}
@@ -472,35 +484,52 @@ p.compType-4{
}
/*CANVAS*/
-.editBar{
- width: 73.7%;
- margin: 0 auto 0 -320px;
+.source-button.editBar{
+ position: absolute;
+ z-index: 9999999;
+ top: 60px;
+ /* left: 50%; */
+}
+.editBar,
+.editBar2{
+ width: calc(100% - 320px);
+ margin: 0 auto 0 320px;
height: 45px;
- padding: 6px 10px;
+ padding: 0;
+ padding-right: 20px;
background:#F4F9FE;
- /* border: solid 1px #E8EFF8; */
+ border-bottom: solid 1px #E8EFF8;
box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
}
-.editBar .btn-group{
+
+.editBar .btn-group,
+.editBar2 .btn-group{
box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
}
-.editBar .btn{
+.editBar .toggoleBtn,
+.editBar2 .toggoleBtn{
+ height: 43px;
+ margin-right: 12px;
background-color: #fff;
background-repeat: no-repeat;
background-position: left center;
border: 0;
color: #1B3E6F;
font-size: 10px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 4px;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 4px;
}
-.editBar .btn.active{
+.editBar .toggoleBtn i,
+.editBar2 .toggoleBtn i{
+ font-size: 20px;
+}
+.editBar .toggoleBtn.active,
+.editBar2 .toggoleBtn.active{
background-color: #1B3E6F !important;
color: #fff;
}
-.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);
}
@@ -701,12 +730,12 @@ p.compType-4{
font-size: 10px;
}
-.source-button{
+/* .source-button{
position: absolute;
z-index: 9999999;
top: 60px;
left: 50%;
-}
+} */
/*jointjs paper*/
/* #board-paper {
position: relative;
@@ -753,39 +782,46 @@ p.compType-4{
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);
+ width: 100%;
+ margin: 0;
}
-.editBar2 .btn{
- background-color: #fff;
- background-repeat: no-repeat;
- background-position: left center;
+
+.viewBtns .btn{
+ margin-top: 14px;
+ padding-left: 30px!important;
border: 0;
- color: #1B3E6F;
- font-size: 10px;
+ font-size: 12px;
+ color: #1B3E6F !important;
+ background-color: #fff !important;
+ background-repeat: no-repeat;
+ background-position: 10px center;
}
-.editBar2 .btn.active{
+.viewBtns .btn.active{
background-color: #1B3E6F !important;
- color: #fff;
+ color: #fff !important;
}
-.editBar2 .viewBtns .btn{
- background-position: 10px center;
- padding-left: 30px!important;
- margin-top: 14px;
+
+
+.joint-paper{
+ width: 94% !important;
+ height: 100vh !important;
+ margin: 0 auto !important;
+}
+ul.templateLegend{
+ margin: 0;
+}
+.templateLegend li{
+ float: left;
+ list-style: none;
+ font-size: 11px;
+}
+.templateLegend li:not(:last-child){
+ margin-right: 24px;
+}
+.templateLegend .requirement i{
+ color: #FF6B6B;
+}
+.templateLegend .capability i{
+ color: #0ABDE3;
}
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 fe24f9df4..08f9a0789 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
@@ -109,11 +109,12 @@
</div> -->
<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
- <button (click)="_toggleSidebar1()" class="active btn arrow">
+ <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
+ data-tooltip="Collapse Side bar">
<i class="fa arr-size">&#xf100;</i>
</button>
<div class="collapse navbar-collapse ">
- <ul class="navbar-nav mr-auto">
+ <ul class="navbar-nav">
<li class="nav-item active">
<nav class="row">
<!--Nav Tabs-->
@@ -128,7 +129,11 @@
</nav>
</li>
</ul>
- <ul class="navbar ml-auto" style="list-style: none;">
+ <ul class="templateLegend ml-auto mr-auto p-0">
+ <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
+ <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
+ </ul>
+ <ul class="navbar" 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>
@@ -184,7 +189,9 @@
</div>
</div>
</div>
- <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a></div>
+ <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a
+ href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
+ </div>
</ng-sidebar>
<!-- Page content -->
@@ -612,4 +619,4 @@
</div>
</ng-sidebar>
-</ng-sidebar-container> \ No newline at end of file
+</ng-sidebar-container>
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 4f31a08f4..e2a8d642b 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
@@ -205,8 +205,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
this.boardPaper = new joint.dia.Paper({
el: $('#board-paper'),
model: this.boardGraph,
- height: 720,
- width: 1100,
+ // height: 720,
+ // width: 1100,
gridSize: 10,
drawGrid: true,
// background: {