diff options
author | Ahmed Abbas <ahmad.helmy@orange.com> | 2019-12-05 15:50:20 +0200 |
---|---|---|
committer | KAPIL SINGAL <ks220y@att.com> | 2019-12-06 19:40:45 +0000 |
commit | 1b8623b4cf3e5ddf8eb3e9a6fd38cb3982eeb94f (patch) | |
tree | 77774771b75be8cdfdc2205ffbb16449222430f6 /cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer | |
parent | ea84b36447601d0d6a633ae708b72c6aaae6dc67 (diff) |
rename ui project from client-franfurt to designer-client
Issue-ID: CCSDK-1981
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: Ic53ea9cf4a48d0ba60f91aa27960e05c77ae9b07
Diffstat (limited to 'cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer')
4 files changed, 0 insertions, 1037 deletions
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css deleted file mode 100644 index 067d30d7f..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css +++ /dev/null @@ -1,547 +0,0 @@ - -body{ - background-image: linear-gradient(-45deg, #000 6%, #fff 0) !important; - background-size: 6px 6px !important; -} - - -/*Header*/ -header{ - height: 60px; - background-color: #1B3E6F; - box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); -} -.logo{ - float: left; - width: 50px; - height: 60px; - background: url(/assets/img/logo-icon.svg) center center #fff no-repeat; -} - -/**Bread Crumb**/ -.breadcrumb{ - padding: 9px 20px; - background: transparent; - line-height: 40px; -} -.breadcrumb a, -.breadcrumb a:hover{ - color: #fff; -} -.breadcrumb .breadcrumb-item{ - font-size: 12px; - font-weight: bold; -} -.breadcrumb .breadcrumb-item:first-child{ - font-size: 16px; -} -.breadcrumb-item + .breadcrumb-item::before{ - color: #fff; -} -.breadcrumb .breadcrumb-item.active p{ - display: inline; - padding: 4px 10px; - background: #F4F9FE; - border-radius: 10px; - color: #C3CDDB; - font-size: 10px; -} -.sidebar-container{ - height: calc(100vh - 60px) !important; -} -/**Topology Actions**/ -.topology-actions{ - margin: 0; - height: 60px; -} -.topology-actions > li{ - height: 59px; - display: inline-block; - padding: 0 20px; -} -.topology-actions > li:first-child{ - border-right: solid 1px #16396A; -} -.topology-actions .btn-group{ - margin-top: 11px; -} -.btn-topology-action, -.btn-topology-action:hover{ - margin: 0 6px; - padding: 6px 10px; - color: #fff; - border-radius: 50%; - border: solid .5px #fff; -} -.btn-topology-action:last-child{ - margin-right: 0; -} -.btn-topology-action .fa{ - width: 16px; - height: 16px; - text-align: center; -} -.topology-actions .dropdown-text, -.dropdown-toggle:hover ~ .dropdown-text, -.dropdown-toggle:focus ~ .dropdown-text{ - top: 7px; - text-indent: 15px; - background: #1273EB; - border-radius: 15px; - border: 0; - box-shadow: none; - color: #fff; - font-weight: bold; - font-size: 13px; -} -.topology-actions .dropdown-text::after{ - right: 15px; - top: 13px; - border-width: 6px 6px 0 6px; - border-color: #fff transparent transparent transparent; -} -.topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{ - top: 13px; - border-width: 0 6px 6px 6px; - border-color: transparent transparent #fff transparent -} -.topology-actions .dropdown-content:hover, -.topology-actions .dropdown-toggle:focus ~ .dropdown-content{ - padding: 12px 0; - text-indent: 0; - background: #fff; - border: 0; - border-radius: 2px; - box-shadow: 0 2px 6px rgba(47, 83, 151, .15) -} -.topology-actions .dropdown-content a{ - padding: 0 20px; - color: #1B3E6F; - font-size: 13px; -} -.topology-actions .dropdown-content a:hover{ - background: #F4F9FE; - text-decoration: none; -} - - - - - - - - - - - - - - - - - - -/*Rotated Text*/ -button.rotate{ - position: absolute; - margin-top: 1px; - padding: 0; - background: transparent; - border: 0; -} -.rotate{ - vertical-align: bottom; - /* text-align: center; */ -} -.rotate span{ - display: inline-table !important; - -ms-writing-mode: tb-rl; - -webkit-writing-mode: vertical-rl; - writing-mode: vertical-rl !important; - transform: rotate(180deg); - white-space: nowrap; - background: #1B3E6F; - padding: 15px 12px; - font-weight: bold; - font-size: 12px; - color:#fff; - /* border-bottom-left-radius: 2px; */ - border-top-left-radius: 2px; -} -.rotate i{ - margin-right: 3px; - margin-top: 9px; - font-size: 15px; -} -.rotate span:first-child{ - margin-bottom: 0; -} -.rotate a:hover{ - text-decoration: none; -} - -/*ACTIONS & COMPONENTS MENU*/ -.input-search-controller{ - height: 50px; - padding-left: 30px; - background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat; - border-radius: 0; - border: 0; - border-bottom: solid 1px #D7E7F9; - color: #1B3E6F; - font-size: 13px; -} -.input-search-controller::placeholder{ - color: #D0D7E4; - font-size: 11px; -} -.input-search-controller:focus{ - - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); - border-color: #DEE8F3; -} -.actions-scroll{ - max-height: 160px; - overflow-y: auto; - margin-top: 12px; - margin-bottom: 20px; -} -.componentsList p{ - margin-bottom: 0; - padding-left: 30px; - background-position: left center; - background-repeat: no-repeat; -} -p.compType-1{ - background-image: url(/assets/img/icon-comType1-sm.svg); -} -p.compType-2{ - background-image: url(/assets/img/icon-comType2-sm.svg); -} -p.compType-3{ - background-image: url(/assets/img/icon-comType3-sm.svg); -} -p.compType-4{ - background-image: url(/assets/img/icon-comType4-sm.svg); -} -/*Actions Wrapper*/ -.actions-wrapper{ - position: absolute; - width: 100%; - top: 0; -} -.actions-container{ - width: 92%; - margin: 0 auto; - background: red; -} - -.controllerSidebar{ - width: 320px; - background: #F4F9FE; - border: solid 1px #C1CDDD; - box-shadow: 0 2px 6px rgba(47, 83, 151, .10); -} -.controllerSidebar h1{ - margin-bottom: 15px; - padding: 12px 0 12px 12px; - background: #fff; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - color: #C3CDDB; -} -.controllerSidebar b{ - font-size: 12px; - color: #C3CDDB; -} -.actionBtns .btn{ - margin: 0 15px 12px; - padding: 9px 20px; - border-radius: 2px !important; - font-size: 12px; - font-weight: bold; -} -.actionBtns .btn:first-child{ - background: #1B3E6F; - border: solid 1px #1B3E6F; - color: #fff; -} -.actionBtns .btn:last-child{ - padding-left: 34px; - background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat; - border: solid 1px #D0DFF1; - color: #1B3E6F; -} -.actionsList, -.componentsList{ - padding: 0 12px 20px; -} -.componentsList{ - padding-bottom: 0; -} -.actionsList .custom-checkbox, -.componentsList .list-group-item{ - margin-bottom: 10px; - padding-left: 40px; - background: #fff; - box-shadow: 0 2px 6px rgba(47, 83, 151, .15); - border-radius: 2px; -} -.actionsList .custom-control-label{ - width: 100%; - padding: 6px; - vertical-align: unset; - color: #1B3E6F; - font-size: 14px; - line-height: 20px; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; -} -.actionsList .custom-control-label::before, -.actionsList .custom-control-label::after{ - top: 1.25rem; -} -.actionsList .custom-control-label p{ - color: #C7D0DD; - font-size: 12px; -} -.custom-control-input:checked ~ .custom-control-label{ - background-color: #1B3E6F !important; - color: #fff; -} -.inserActionBtns .btn{ - border-radius: 15px !important; - padding: 6px 20px; - font-size: 12px; - font-weight: bold; - border: 0; - -} -.inserActionBtns .btn:first-child{ - background: #1273EB; - border: solid 1px #1273EB; - color: #fff; -} -.inserActionBtns .btn:last-child{ - background: #fff; - border: solid 1px #D9E6F2; - color: #C3CDDB; -} -/*Components List*/ -.componentsList .list-group-item{ - padding-left: 36px; - border: 0; - font-size: 14px; - background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat; -} - -/*CANVAS*/ -.editBar{ - width: 350px; - margin: 0 auto 0; - padding: 6px 10px; - background:#F4F9FE; - border: solid 1px #E8EFF8; - box-shadow: 0 2px 6px rgba(47, 83, 151, .1); - margin-left: 20em; -} -.editBar .btn-group{ - box-shadow: 0 2px 6px rgba(47, 83, 151, .15); -} -.editBar .btn{ - background-color: #fff; - background-repeat: no-repeat; - background-position: left center; - border: 0; - color: #1B3E6F; - font-size: 10px; -} -.editBar .btn.active{ - background-color: #1B3E6F !important; - color: #fff; -} -.viewBtns .btn{ - background-position: 10px center; - padding-left: 30px; -} -.viewBtns .topologySource{ - background-image: url(src/assets/img/icon-topologyView-active.svg); -} -.viewBtns .topologyView{ - background-image: url(src/assets/img/icon-topologySource.svg); -} -.card.actionContainer{ - margin: 20px 20px 40px 60px; - background: transparent; - border: 0; -} -.actionContainer .card-header{ - padding: 0; - background: transparent; - border: 0; -} -.actionContainer .card-header span{ - padding: 12px 20px; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - font-size: 12px; - line-height: 38px; - font-weight: bold; - color: #1B3E6F; - background: #C3CDDB; -} -.actionContainer .card-body{ - min-height: 170px; - padding: 15px 20px !important; - border: solid 1px #C3CDDB; - background: #fff; - box-shadow: 0 2px 6px rgba(18, 115, 235, .1); -} -.actionContainer a{ - display: inline-block; - width: 230px; - height: 130px; - margin: 20px; - padding: 24px; - background: #1B3E6F; - color: #fff !important; - text-align: center; - border-radius: 2px; - border: solid 1px #1B3E6F; -} -.actionContainer a:hover{ - cursor: pointer; - border: dashed 1px #E9FCC6; -}.componentContainer img{ - height: 38px; -} -.componentContainer h2{ - margin-top: 9px; - font-size: 14px; - font-weight: bold; -} -.componentContainer p{ - font-size: 12px; -} - -/*ATTRIBUTES SIDE BAR*/ -.attributesSideBar{ - width: 396px; - padding: 0; -} -.attributesSideBar .attributesContainer{ - background: #fff; - border: solid 1px #C1CDDD; - box-shadow: 0 2px 6px rgba(47, 83, 151, .1); -} -.closeBar{ - float: right; - width: 90%; - height: 40px; - background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ; - border: 0; - outline: 0; -} -.closeBar:focus{ - outline: none; -} -.attributesContainer h1{ - margin-bottom: 10px; - padding: 12px 0 12px 15px; - background: #DEE8F3; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - color: #1B3E6F; -} -.actionName{ - margin-bottom: 21px; -} -.attributesContainer label{ - color: #1B3E6F; - text-transform: uppercase; - font-size: 11px; - font-weight: bold; -} -.attributesContainer .form-group{ - margin-bottom: 9px; -} -.attributesContainer .form-control{ - border-color: #F0F5FC; - border-radius: 2px; - box-shadow: 0 2px 6px rgba(47, 83, 151, .1); - color: #103D73; - font-size: 13px; -} -.attributesContainer .form-control:focus{ - border-color: #66bfff; - box-shadow: 0 0 0 4px rgba(0,149,255,0.15); -} -.attributesContainer .form-control::placeholder{ - color: #CFD7E5; -} -.scrolll{ - max-height: 88.75vh; - overflow-y: auto; -} -.accordion > .card{ - margin-bottom: 0 !important; - border: 0; -} -.accordion > .card .card-header{ - margin: 0; - padding: 0; - background-color: #F4F9FE; - border: 0; - border-radius: 0; -} -.accordion > .card .card-body{ - padding-bottom: 10px !important; -} -.accordion .btn-link{ - padding: 0; - color: #C3CDDB; - font-weight: bold; - font-size: 13px; - text-transform: uppercase; - line-height: 38px; -} -.accordion .btn-link:hover{ - color: #103D73; - text-decoration: unset; -} -.accordion .card-header .btn-link[aria-expanded="true"]:after, -.accordion .card-header .btn-link[aria-expanded="false"]:after{ - margin-right: 9px; - font-family: 'FontAwesome'; - float: left; - font-weight: normal; - font-size: 12px; -} -.accordion .card-header .btn-link[aria-expanded="true"]:after{ - content: "\f078"; -} -.accordion .card-header .btn-link[aria-expanded="false"]:after{ - content: "\f054"; -} -.btn-addAttribute{ - width: 20px; - height: 20px; - background-image: url(/assets/img/icon-add.svg); - background-position: center center; - background-repeat: no-repeat; - vertical-align: sub; -} -.btn-addAttribute:hover{ - background-image: url(/assets/img/icon-add-hover.svg); -} -.btn-deleteAttribute{ - padding: 5px 10px; - background: #FFE6E7; - border: solid .5px #FFC9CB; - border-radius: 2px; - color: #FF6469; - font-size: 10px; - -}
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html deleted file mode 100644 index 991e126c0..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html +++ /dev/null @@ -1,337 +0,0 @@ -<!--Header--> -<header> - <div class="row m-0"> - <div class="col pl-0"> - <p class="logo mb-0"></p> - <nav aria-label="breadcrumb"> - <ol class="breadcrumb mb-0"> - <li class="breadcrumb-item"> - <a href="#">CBA Packages</a> - </li> - <li class="breadcrumb-item"> - <a href="#">Package Name</a> - </li> - <li class="breadcrumb-item active" aria-current="page"> - <p class="mb-0">Topology View</p> - </li> - </ol> - </nav> - </div> - <div class="col pr-0 text-right"> - <ul class="topology-actions"> - <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"> - <i class="fa fa-eye"></i> - </a> - <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" 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"> - <i class="fa fa-share-square"></i> - </a> - </div> - </li> - <li> - <div class="dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">Save</div> - <ul class="dropdown-content"> - <li> - <a href="">Save</a> - </li> - <li> - <a href="">Save & Deploy</a> - </li> - </ul> - </div> - </li> - </ul> - - - </div> - </div> -</header> -<ng-sidebar-container class="sidebar-container"> - <!-- Controller SideBar --> - <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" [mode]="'push'" - #sidebarLeft> - <div class="row"> - <div class="col-12 p-0"> - <form> - <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions"> - </form> - </div> - <h1 class="col-12">Actions</h1> - <div class="col-12 text-center p-0"> - <div class="btn-group actionBtns" role="group"> - <button type="button" class="btn">Insert Custom</button> - <button type="button" class="btn">Import Action</button> - </div> - </div> - <div class="col-12 actionsList"> - <b>Select from other packages:</b> - <div class="actions-scroll"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck1"> - <label class="custom-control-label" for="customCheck1">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck2"> - <label class="custom-control-label" for="customCheck2">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck3"> - <label class="custom-control-label" for="customCheck3">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck4"> - <label class="custom-control-label" for="customCheck4">Action name - <p class="m-0">Toplogy name</p> - </label> - </div> - </div> - <div class="btn-group inserActionBtns" role="group" aria-label="Basic example"> - <button type="button" class="btn btn-secondary mr-3">Insert</button> - <button type="button" class="btn btn-secondary">Cancel</button> - </div> - </div> - <h1 class="col-12">Functions</h1> - <div class="col-12 componentsList"> - <b>Drag and drop function to Action’s box</b> - <ul class="list-group actions-scroll"> - <li class="list-group-item"> - <p class="compType-1">component-resource-resolution</p> - </li> - <li class="list-group-item"> - <p class="compType-2">component-netconf-executor</p> - </li> - <li class="list-group-item"> - <p class="compType-3">component-remote-ansible-executor</p> - </li> - <li class="list-group-item"> - <p class="compType-4">dg-generic</p> - </li> - <li class="list-group-item"> - <p class="compType-1">component-resource-resolution</p> - </li> - </ul> - </div> - </div> - </ng-sidebar> - <!-- Page content --> - <div ng-sidebar-content id="paper"> - <button class="rotate" (click)="_toggleSidebar1()"> - <span> - Controller - <i class="fa fa-angle-double-left"></i> - </span> - </button> - <!-- Canvas --> - <div class="editBar text-center"> - <div class="btn-group mr-2" role="group" aria-label="First group"> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo"> - <img src="/assets/img/icon-undoActive.svg"> - </button> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo"> - <img src="/assets/img/icon-redo.svg"> - </button> - </div> - <div class="btn-group mr-2" role="group" aria-label="Second group"> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out"> - <img src="/assets/img/icon-zoomOut.svg"> - </button> - <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In"> - <img src="/assets/img/icon-zoomIn.svg"> - </button> - </div> - <div class="btn-group viewBtns" role="group" aria-label="Third group"> - <button type="button" class="btn btn-secondary topologySource active">View</button> - <button type="button" class="btn btn-secondary topologyView">Source</button> - </div> - </div> - <div class="card actionContainer"> - <div class="card-header"> - <span>Action 1</span> - </div> - <div class="card-body"> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType1.svg" title=""> - <h2>config-assign</h2> - <p>component-resource-resolution</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType3.svg" title=""> - <h2>function 1</h2> - <p>dg-generic</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - </div> - </div> - <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> - </div> - <!-- Attribute SideBar --> - <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'" - #sidebarRight> - <div class="container-fluid0"> - <div class="row m-0"> - <div class="col-2 pr-0"> - <button (click)="sidebarRight.close()" class="closeBar"></button> - </div> - <div class="col-10 attributesContainer p-0"> - <h1>Action Attributes</h1> - <div class="scrolll"> - <div class="row m-0"> - <div class="col-12"> - <div class="form-group actionName"> - <label for="exampleInputEmail1">Action Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - </div> - </div> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Steps - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> - - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - - </div> - </div> - </div> - <div class="card"> - <div class="card-header row" id="headingTwo"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> - Inputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> - <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - - </div> - </div> - </div> - <div class="card"> - <div class="card-header row" id="headingThree"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> - Outputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> - <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - - </div> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - </ng-sidebar> - -</ng-sidebar-container>
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts deleted file mode 100644 index 3b767cb81..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DesignerComponent } from './designer.component'; - -describe('DesignerComponent', () => { - let component: DesignerComponent; - let fixture: ComponentFixture<DesignerComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ DesignerComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DesignerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts deleted file mode 100644 index 547c1e574..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import * as $ from 'jquery'; -import * as _ from 'lodash'; -import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js'; - -@Component({ - selector: 'app-designer', - templateUrl: './designer.component.html', - styleUrls: ['./designer.component.css'], - encapsulation: ViewEncapsulation.None -}) -export class DesignerComponent implements OnInit { - - private controllerSideBar: boolean; - private attributesSideBar: boolean; - public graph: any; - public paper: any; - - constructor() { - this.controllerSideBar = true; - this.attributesSideBar = false; - } - private _toggleSidebar1() { - this.controllerSideBar = !this.controllerSideBar; - } - private _toggleSidebar2() { - this.attributesSideBar = !this.attributesSideBar; - } - - - ngOnInit() { - this.attachEditorBarToCanvas(); - } - - attachEditorBarToCanvas() { - this.graph = new joint.dia.Graph, - this.paper = new joint.dia.Paper({ - el: $('#paper'), - model: this.graph, - height: 720, - width: 1200, - gridSize: 2, - drawGrid: true, - cellViewNamespace: joint.shapes - }); - - this.paper.setGrid({ - name: 'dot', - args: - { color: 'black', thickness: 2, scaleFactor: 8 } - - }).drawGrid(); - - - joint.shapes["html"] = {}; - joint.shapes["html"].Element = joint.shapes.basic.Rect.extend({ - defaults: joint.util.deepSupplement({ - type: 'html.Element' - }, joint.shapes.basic.Rect.prototype.defaults) - }); - - joint.shapes["html"].ElementView = joint.dia.ElementView.extend({ - - template: [ - '<div>', - '<div id="editbar" class="editBar text-center">', - '<div class="btn-group mr-2" role="group" aria-label="First group">', - '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">', - '<img src="/assets/img/icon-undoActive.svg">', - '</button>', - '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">', - '<img src="/assets/img/icon-redo.svg">', - '</button>', - '</div>', - '<div class="btn-group mr-2" role="group" aria-label="Second group">', - '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">', - '<img src="/assets/img/icon-zoomOut.svg">', - '</button>', - '<button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>', - '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">', - '<img src="/assets/img/icon-zoomIn.svg">', - '</button>', - '</div>', - '<div class="btn-group viewBtns" role="group" aria-label="Third group">', - '<button type="button" class="btn btn-secondary topologySource active">View</button>', - '<button type="button" class="btn btn-secondary topologyView">Source</button>', - '</div>', - '</div>', - '</div>' - ].join(''), - - initialize: function() { - _.bindAll(this, 'updateBox'); - joint.dia.ElementView.prototype.initialize.apply(this, arguments); - - this.$box = $(_.template(this.template)()); - // Prevent paper from handling pointerdown. - this.$box.find('input,select').on('mousedown click', function(evt) { - evt.stopPropagation(); - }); - this.model.on('change', this.updateBox, this); - - this.updateBox(); - }, - render: function() { - joint.dia.ElementView.prototype.render.apply(this, arguments); - this.paper.$el.prepend(this.$box); - this.updateBox(); - return this; - }, - updateBox: function() { - // Set the position and dimension of the box so that it covers the JointJS element. - var bbox = this.model.getBBox(); - this.$box.css({ - width: bbox.width, - height: bbox.height, - left: bbox.x, - top: bbox.y, - transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' - }); - } - }); - - var el1 = new joint.shapes["html"].Element({}); - this.graph.addCells([el1]); - } - -} |