aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html8
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css42
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html55
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts9
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts20
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html7
-rw-r--r--cds-ui/designer-client/src/styles.css4
7 files changed, 78 insertions, 67 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 63cf4bd6c..f7ba40ce1 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
@@ -225,14 +225,14 @@
<label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
<div class="col-sm-9">
<div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="customRadioInline1" name="customRadioInline1"
+ <input type="radio" id="customRadioInline3" name="customRadioInline3"
class="custom-control-input" (click)="setOutputRequired(true)">
- <label class="custom-control-label" for="customRadioInline1">True</label>
+ <label class="custom-control-label" for="customRadioInline3">True</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="customRadioInline2" name="customRadioInline1"
+ <input type="radio" id="customRadioInline4" name="customRadioInline3"
class="custom-control-input">
- <label class="custom-control-label" for="customRadioInline2"
+ <label class="custom-control-label" for="customRadioInline4"
(click)="setOutputRequired(false)">False</label>
</div>
</div>
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 1d2a939bd..f15d735f6 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
@@ -266,12 +266,13 @@ button.rotate{
.rotate a:hover{
text-decoration: none;
}
-#board-paper svg{
+/*PAUSE*/
+/* #board-paper svg{
top: 30px;
left: 0;
height: 95%;
-}
-.componentsList tspan{
+} */
+.functionsList tspan{
/* width:30px !important; */
font: normal 13px sans-serif;
fill: #1B3E6F !important;
@@ -307,7 +308,7 @@ tspan#type{
text-shadow: none;
border-color: #DEE8F3;
}
-.componentsList p{
+.functionsList p{
margin-bottom: 0;
padding-left: 30px;
background-position: left center;
@@ -385,8 +386,9 @@ p.compType-4{
font-size: 12px;
color: #C3CDDB;
}
-.controllerSidebar .joint-paper{
- width: 98% !important;
+/*PAUSE*/
+.functionsList .joint-paper{
+ width: 100% !important;
height: 72vh !important;
margin: 0 !important;
}
@@ -411,15 +413,9 @@ p.compType-4{
.new-action:hover{
background: #D7E7F9;
}
-.componentsList{
- margin-top: 16px;
- padding: 0 20px 10px;
-}
-.componentsList{
- padding-bottom: 0;
- /* height: calc( 100vh - 218px)!important;
- overflow: scroll;*/
- background: #F4F9FE !important;
+.functionsList{
+ height: calc(100vh - 200px);
+ overflow-y: auto;
}
.custom-control.custom-checkbox:hover,
.custom-control-label:hover{
@@ -433,8 +429,7 @@ p.compType-4{
.custom-control:hover{
background-color: white;
}
-.actionsList,
-.componentsList{
+.actionsList{
height: 65vh !important;
overflow-y: auto;
}
@@ -444,13 +439,16 @@ p.compType-4{
.actionsList li{
list-style: none;
}
-.componentsList .list-group-item{
+.functionsList .list-group-item{
margin-bottom: 10px;
padding-left: 40px;
background: #fff;
box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
border-radius: 2px;
}
+.functionsList .joint-paper{
+ background: transparent !important;
+}
.actionsList .custom-control-label{
width: 100%;
padding: 6px;
@@ -499,7 +497,7 @@ p.compType-4{
margin-right: 9px;
}
/*Components List*/
-.componentsList .list-group-item{
+.functionsList .list-group-item{
padding-left: 36px;
border: 0;
font-size: 14px;
@@ -1043,13 +1041,13 @@ p.compType-4{
background-color: #1B3E6F !important;
color: #fff !important;
}
-
-
+/*PAUSE*/
+/*
.joint-paper{
width: 96.4% !important;
height: 80vh !important;
margin: 60px auto 0 !important;
-}
+} */
ul.templateLegend{
margin: 0;
}
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 d4fea67bb..76717b03c 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
@@ -12,7 +12,7 @@
<li class="breadcrumb-item">
<a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
<button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
- data-target="#exampleModalLong" data-tooltip="Package Details">
+ data-target="#exampleModalLong" data-tooltip="Package Details">
<i class="icon-info" aria-hidden="true"></i>
</button>
</li>
@@ -22,13 +22,13 @@
</li>
</ol>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+ aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <img src="assets/img/icon-close.svg"/>
+ <img src="assets/img/icon-close.svg" />
</button>
</div>
<div class="modal-body package-info">
@@ -70,15 +70,15 @@
<li>
<div class="btn-group" role="group" aria-label="Basic example">
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Preview">
+ data-tooltip="Preview">
<i class="fa fa-eye"></i>
</a>
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Download">
+ data-tooltip="Download">
<i class="fa fa-download"></i>
</a>
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Share">
+ data-tooltip="Share">
<i class="fa fa-share-square"></i>
</a>
</div>
@@ -107,7 +107,7 @@
<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
<!--Actions/Functions Side Menu Toogole Button-->
<button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
- data-tooltip="Collapse Side bar">
+ data-tooltip="Collapse Side bar">
<i class="fa arr-size">&#xf100;</i>
</button>
<!--Nav Tabs-->
@@ -119,9 +119,9 @@
<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>
+ 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>
+ aria-controls=" " aria-selected="false">Template</a>
</div>
</div>
</nav>
@@ -162,7 +162,7 @@
<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
+ class="btn btn-secondary topologyView">Scripting
</button>
</div>
</li>
@@ -173,23 +173,24 @@
<ng-sidebar-container class="sidebar-container">
<!--Left Side Menu-->
<ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
- [mode]="'push'" #sidebarLeft>
+ [mode]="'push'" #sidebarLeft>
<nav class="row">
<!--Nav Tabs-->
<div class="col">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
- role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+ role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
<a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
- role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+ role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
</div>
</div>
</nav>
<div class="row">
<div class="col">
<div class="tab-content" id="nav-tabContent">
+ <!--Action List-->
<div class="tab-pane fade show active" id="nav-action" role="tabpanel"
- aria-labelledby="nav-action-tab">
+ aria-labelledby="nav-action-tab">
<!--Action Search Box-->
<input type="text" class="form-control input-search-controller" placeholder="Search Actions">
@@ -218,17 +219,20 @@
<li *ngFor="let customActionName of actions">
<label>
<i class="icon-file" aria-hidden="true" class="icon-file"
- (click)="openFunctionAttributes(customActionName)"></i>
+ (click)="openFunctionAttributes(customActionName)"></i>
{{customActionName}} </label>
</li>
</ul>
</div>
</div>
</div>
+ <!--Function List-->
<div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
<!--Function Search Box-->
<input type="text" class="form-control input-search-controller" placeholder="Search Functions">
- <div id="palette-paper" class="componentsList"></div>
+ <div class="functionsList">
+ <div id="palette-paper"></div>
+ </div>
</div>
</div>
</div>
@@ -275,7 +279,7 @@
<!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
</div>
<ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
- [position]="'right'" #sidebarRight1>
+ [position]="'right'" #sidebarRight1>
<div class="container-fluid0">
<div class="row m-0">
<div class="col attributesContainer">
@@ -288,9 +292,9 @@
<div class="col-3 pl-0">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn view-source" tooltip="View Action Source"
- placement="bottom"><i class="icon-source"></i></button>
+ placement="bottom"><i class="icon-source"></i></button>
<button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
- class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
+ class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
class="icon-delete-sm" aria-hidden="true"></i></button>
</div>
</div>
@@ -302,24 +306,24 @@
</ng-sidebar>
<!--Right Side Menu - Function Attribute-->
<ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
- [position]="'right'" #sidebarRight2>
+ [position]="'right'" #sidebarRight2>
<div class="container-fluid0">
<div class="row m-0">
<div class="col attributesContainer">
<div class="row m-0 attributesContainertTitle">
<div class="col-2 pl-0">
<button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close"
- placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i>
+ placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i>
</button>
</div>
<h6 class="col pl-0">Function Attributes</h6>
<div class="col-3 pl-0">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn view-source" tooltip="View Function Source"
- placement="bottom"><i class="icon-source"></i></button>
+ placement="bottom"><i class="icon-source"></i></button>
<button type="button" class="btn trash-item" tooltip="Delete Function"
- placement="bottom"><i class="icon-delete-sm" type="button"
- aria-hidden="true"></i></button>
+ placement="bottom"><i class="icon-delete-sm" type="button"
+ aria-hidden="true"></i></button>
</div>
</div>
</div>
@@ -330,5 +334,4 @@
</ng-sidebar>
-</ng-sidebar-container>
-
+</ng-sidebar-container> \ No newline at end of file
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 1475f1ac3..d0af828e8 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
@@ -251,6 +251,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
el: $('#palette-paper'),
model: this.paletteGraph,
width: 318,
+ // height: '100%',
height: $('#palette-paper').height(),
// background: {
// color: 'rgba(0, 255, 0, 0.3)'
@@ -268,12 +269,12 @@ 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: {
- // color: 'rgba(0, 255, 0, 0.3)'
+ // background: {
+ // color: 'rgba(0, 255, 0, 0.3)'
// },
cellViewNamespace: joint.shapes
});
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 b7a0ff9d5..417f60ba4 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
@@ -14,9 +14,8 @@ declare module 'jointjs' {
}
}
}
-
-const rectWidth = '100%';
-const rectHeight = '100%';
+const rectWidth = 616;
+const rectHeight = 381;
// custom element implementation
// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
@@ -40,8 +39,19 @@ 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="0" filter="url(#filter-2)" xlink:href="#custom-action"></use>
- <use fill-rule="evenodd" xlink:href="#custom-action"></use>
+ <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>
</g>
</g>
</g>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 82010db1c..256789586 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -233,9 +233,6 @@
<input type="text" class="form-control" #velocity
(input)="setVelocity(initDataSource.filteredData.indexOf(dict),velocity.value)">
</td>
-
-
-
</ng-container>
<!-- Data Type Column -->
<ng-container matColumnDef="Data Type">
@@ -259,11 +256,11 @@
<!------ View Table------->
<div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
<div class="mat-elevation-z8">
+ <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>
<mat-form-field class="tableFilter float-right">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
- </mat-form-field>
- <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+ </mat-form-field>
<table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort>
<!-- Required Column -->
<ng-container matColumnDef="Required">
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 6c315ea3a..8b576db2e 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -17,6 +17,9 @@ body{
:hover{
transition: 0.3s !important;
}
+button:focus{
+ outline: 0 !important;
+}
/*Bootstrap*/
.custom-control-input:checked ~ .custom-control-label::before{
border-color: transparent !important;
@@ -2411,7 +2414,6 @@ padding-left: 20px !important;
}
.single-custom-key{
width: 100%;
- margin-bottom: 21px;
}
.single-line-custom-key{
width: 45%;