<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>
</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">
<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>
<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"></i>
</button>
<!--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>
+ 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>
<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>
<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">
<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>
<!--<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">
<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>
</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>
</ng-sidebar>
-</ng-sidebar-container>
-
+</ng-sidebar-container>
\ No newline at end of file
}
}
}
-
-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, {
<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>