aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-11 22:18:29 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-10-11 22:18:29 +0200
commit8210cf79abd110d388641f4878fed9da573e686d (patch)
tree5f320653e1874fd440db56e94c75146d93046d21 /cds-ui/designer-client
parente7396afde23c4d335a097fa02bcae5f47a4ca6ed (diff)
Add and modify style elements of Designer components
Issue-ID: CCSDK-2823 Issue-ID: CCSDK-2800 Issue-ID: CCSDK-2780 Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com> Change-Id: I20612659baf227f4d2543b4fc1312a988eab144a
Diffstat (limited to 'cds-ui/designer-client')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html2
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css132
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts18
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts10
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html3
-rw-r--r--cds-ui/designer-client/src/styles.css21
8 files changed, 143 insertions, 51 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index 051ef1634..7f1c9f35a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -99,7 +99,7 @@
<!--Action - Add Custom Attribute - Modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+ <div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">
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 43f3818a0..c54673d8e 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
@@ -259,8 +259,9 @@ button.rotate{
text-decoration: none;
}
#board-paper svg{
- top: 70px;
+ top: 30px;
left: 0;
+ height: 95%;
}
.componentsList tspan{
/* width:30px !important; */
@@ -279,8 +280,9 @@ tspan#type{
/*ACTIONS & COMPONENTS MENU*/
.input-search-controller{
height: 40px;
- padding-left: 42px;
- background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat;
+ padding-left: 36px;
+ background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat;
+ background-size: 4.5%;
border-radius: 0;
border: 0;
border-bottom: solid 1px #D7E7F9;
@@ -289,7 +291,7 @@ tspan#type{
}
.input-search-controller::placeholder{
color: #D0D7E4;
- font-size: 11px;
+ font-size: 12px;
}
.input-search-controller:focus{
background-color: #fff !important;
@@ -375,7 +377,11 @@ p.compType-4{
font-size: 12px;
color: #C3CDDB;
}
-
+.controllerSidebar .joint-paper{
+ width: 98% !important;
+ height: 72vh !important;
+ margin: 0 !important;
+}
.actionBtns .btn{
margin: 0px 15px 16px -90px;
/* padding: 9px 20px; */
@@ -390,7 +396,7 @@ p.compType-4{
.new-action:hover{
margin: 9px 0 4px 3px;
padding: 6px;
- font-size: 12px;
+ font-size: 13px;
font-weight: bold;
color: #1B3E6F;
}
@@ -424,6 +430,12 @@ p.compType-4{
height: 65vh !important;
overflow-y: auto;
}
+.actionsList ul{
+ padding-left: 0;
+}
+.actionsList li{
+ list-style: none;
+}
.componentsList .list-group-item{
margin-bottom: 10px;
padding-left: 40px;
@@ -699,6 +711,9 @@ p.compType-4{
.add-attribute .btn:hover i::before{
color: #fff;
}
+.add-attribute .btn:focus{
+ box-shadow: none;
+}
.icon-function-attribute{
font-size: 18px;
}
@@ -741,10 +756,12 @@ p.compType-4{
font-size: 14px;
}
.attributesContainer label{
+ margin-bottom: 0;
color: #1B3E6F;
/* text-transform: uppercase; */
font-size: 12px;
font-weight: bold;
+ line-height: 32px;
}
.attributesContainer label.custom-control-label{
text-transform: unset;
@@ -789,7 +806,7 @@ p.compType-4{
border: 0;
}
.attributeOptions a:not(:first-child){
- margin-left: 18px;
+ margin-left: 14px;
}
.attributeOptions i{
color: #103D73 !important;
@@ -1000,9 +1017,9 @@ p.compType-4{
.joint-paper{
- width: 94% !important;
- height: 100vh !important;
- margin: 0 auto !important;
+ width: 96.4% !important;
+ height: 80vh !important;
+ margin: 60px auto 0 !important;
}
ul.templateLegend{
margin: 0;
@@ -1049,9 +1066,94 @@ ul.editor{
font-size: 12px;
}
/*Modal*/
-.modal-backdrop{z-index: -1}
-.modal-holder.modal-backdrop{z-index: 100}
-.modal-holder + .modal-dialog {z-index: 1000}
+.modal{
+ top: 60px;
+}
+.modal-backdrop{
+ z-index: 0 !important;
+ opacity: 0 !important;
+}
+/* .modal-holder.modal-backdrop{z-index: 100}
+.modal-holder + .modal-dialog {z-index: 1000} */
.modal-dialog{
- max-width: 680px;
-} \ No newline at end of file
+ max-width: 50%;
+}
+.modal-body{
+ font-size: 14px;
+}
+.createAttributeTabs .nav-link{
+ padding-top: 0 !important;
+}
+.createAttributeTabs .nav-item a,
+.createAttributeTabs .nav-item a.active{
+ border-radius: 0 !important;
+}
+.createAttributeTabs .nav-link{
+ text-transform: uppercase !important;
+ border-radius: 0 !important;
+ border: 0 !important;
+}
+.createAttributeTabs .nav-link.active{
+ border-radius: 0 !important;
+ border-bottom: solid 1px #1B3E6F !important;
+}
+.createAttributeTabs .nav-item{
+ margin-left: 50px;
+}
+.createAttributeTabs .tab-content{
+ margin-top: 20px;
+ padding: 20px 50px;
+ border: solid 1px #F4F9FE;
+}
+/*FORM*/
+.create-form .col-form-label{
+ color: #1B3E6F;
+ font-size: 12px;
+ font-weight: bold;
+}
+.create-form .col-form-label span{
+ color: #FF6469;
+}
+.create-form .form-control{
+ margin-bottom: 9px;
+ padding-left: 0;
+ padding-right: 0;
+ border-radius: 0;
+ border: 0;
+ border-bottom: solid 1px #EFEFF4;
+ font-size: 13px;
+ box-shadow: none !important;
+ color: #1B3E6F;
+}
+.create-form .form-control::placeholder{
+ color: #C3CDDB;
+}
+.create-form .form-control:focus{
+ border-bottom-color: #1B3E6F;
+ -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+ -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+ box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+ background-color: transparent !important;
+ text-shadow: none;
+}
+.list-group-item{
+ margin-bottom: 9px;
+ padding: 9px 1.25rem;
+ border-color: #E6EDF5;
+ font-size: 11px;
+ color: #1B3E6F;
+ font-weight: bold;
+ text-align: center;
+}
+.list-group-item.active{
+ color: #1B3E6F;
+ background-color: #C3CDDB;
+ border-color: #C3CDDB;
+}
+.list-group-horizontal .list-group-item + .list-group-item{
+ border-left-width: 1px;
+}
+.create-form .custom-control-input:checked ~ .custom-control-label{
+ background-color: transparent !important;
+ color: #1B3E6F;
+}
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 537a0a8ca..e717d9019 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
@@ -11,8 +11,8 @@
<i class="fa fa-angle-right ml-2 mr-2"></i>
<li class="breadcrumb-item">
<a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
- <button type="button" class="btn package-info-btn" data-toggle="modal"
- data-target="#exampleModalLong">
+ <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
+ data-target="#exampleModalLong" data-tooltip="Package Details">
<i class="icon-info" aria-hidden="true"></i>
</button>
</li>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
index 7960e83d1..b7a0ff9d5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
@@ -15,8 +15,8 @@ declare module 'jointjs' {
}
}
-const rectWidth = 616;
-const rectHeight = 381;
+const rectWidth = '100%';
+const rectHeight = '100%';
// custom element implementation
// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
@@ -40,18 +40,8 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa
<g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)">
<g id="workflow-container" transform="translate(401.000000, 137.000000)">
<g id="Card">
- <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use>
- <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use>
- </g>
- <g id="name">
- <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87,
- 0.8954305 87,2 L87,30 L87,30 L0,30 L0,
- 2 C-1.3527075e-16,0.8954305 0.8954305,
- 2.02906125e-16 2,0 Z" id="Rectangle"
- fill="#C3CDDB"></path>
- <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12" font-weight="bold" fill="#1B3E6F">
- <tspan id="label" x="20" y="20">Action 1</tspan>
- </text>
+ <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use>
+ <use fill-rule="evenodd" xlink:href="#custom-action"></use>
</g>
</g>
</g>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
index 72019bfa0..7411eed49 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
@@ -28,9 +28,9 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
<g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)">
<g id="execute" transform="translate(304.000000, 0.000000)">
<g id="Group" transform="translate(7.000000, 0.000000)">
- <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="330" height="84" rx="2"></rect>
- <g id="Group-4" transform="translate(20.000000, 20.000000)" fill="#FFFFFF">
- <g id="database0-copy" transform="translate(15.000000, 0.000000)" fill-rule="nonzero">
+ <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="280" height="150" rx="3"></rect>
+ <g id="Group-4" transform="translate(20.000000, 25.000000)" fill="#FFFFFF">
+ <g id="database0-copy" transform="translate(115.000000, 5.000000)" fill-rule="nonzero">
<path d="M35.544,6.00705882 C34.7265882,
2.97882353 28.6425882,0 18,0 C7.35741176,
0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882,
@@ -304,8 +304,8 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
font-family="HelveticaNeue-Bold, Helvetica Neue"
font-size="13"
font-weight="bold" line-spacing="18">
- <tspan id="label" x="64" y="18">execute</tspan>
- <tspan id="type" x="64" y="40"
+ <tspan id="label" x="20" y="70">execute</tspan>
+ <tspan id="type" x="30" y="92"
font-family="HelveticaNeue, Helvetica Neue" font-size="12"
font-weight="normal"></tspan>
</text>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
index 48a680982..25908b047 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
@@ -20,7 +20,7 @@ declare module 'jointjs' {
}
const rectWidth = 260;
-const rectHeight = 60;
+const rectHeight = 50;
// custom element implementation
// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', {
@@ -45,7 +45,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="7.1-Designer" transform="translate(-14.000000, -618.000000)">
- <g id="controller" transform="translate(0.000000, 60.000000)">
+ <g id="controller" transform="translate(0.000000, 70.000000)">
<g id="functions" transform="translate(0.000000, 479.000000)">
<g id="list" transform="translate(8.000000, 51.000000)">
<g id="1" transform="translate(12.000000, 32.000000)">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index f81b02643..0ffa9780a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -6,9 +6,10 @@
<app-packages-header></app-packages-header>
<div class="container-fluid body-container">
<!--Tour Starter-->
+ <div>
<input id="clicker" [checked]="startTour" type="checkbox" />
<label class="ml-1" for="clicker">Start the tour</label>
-
+ </div>
<div class="panel-wrap packageWizard">
<div class="panel">
<button id="clicker1" class="close" type="button" (click)="stopTour()">
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index b215dd46a..252cb89b1 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -582,7 +582,7 @@ height: 40px;
.packages-card [data-tooltip]:after {
padding: 9px;
font-size: 11px;
- background: #fff;
+ background: #C3CDDB;
border: solid 1px #E6EDF5;
box-shadow: 0 0 12 rgba(0,0,0,0.8);
border-radius: 3px;
@@ -1946,8 +1946,8 @@ ul.package-contributers{
[data-tooltip]:after {
z-index: 1000;
padding: 8px 20px !important;
- width: auto;
- background-color: #fff !important;
+ width: max-content;
+ background-color: #C3CDDB !important;
color: #1B3E6F;
content: attr(data-tooltip);
font-size: 12px;
@@ -2015,7 +2015,7 @@ ul.package-contributers{
margin-right: -12px;
margin-bottom: 0;
border-top-color: transparent;
- border-left-color: #fff;
+ border-left-color: #C3CDDB;
/* border-left-color: hsla(0, 0%, 20%, 0.9); */
}
@@ -2040,8 +2040,8 @@ ul.package-contributers{
margin-top: -12px;
margin-bottom: 0;
border-top-color: transparent;
- border-bottom-color: #DEE8F3;
- border-bottom-color: rgba(222, 232, 243, 1.0);
+ border-bottom-color: #C3CDDB;
+ border-bottom-color: rgba(195, 205, 219, 1.0);
}
.tooltip-bottom:hover:before,
@@ -2064,7 +2064,7 @@ ul.package-contributers{
margin-bottom: 0;
margin-left: -12px;
border-top-color: transparent;
- border-right-color: #fff;
+ border-right-color: #C3CDDB;
/* border-right-color: hsla(0, 0%, 20%, 0.9); */
}
@@ -2100,8 +2100,7 @@ ul.package-contributers{
width: 100% !important;
}
.tooltip .tooltip-inner{
- width: auto !important;
- max-width: 280px !important;
+ width: max-content !important;
text-align: left!important;
/* color:#1B3E6F;
background-color: #fff !important; */
@@ -2140,8 +2139,8 @@ padding-left: 20px !important;
border-radius: 20px !important;
}
.btn-primary{
- background-color: #1273EB !important;
- border-color: #1273EB !important;
+ background-color: #1273EB !important;
+ border-color: #1273EB !important;
}
.btn-primary:hover {
background-color: #0069d9 !important;