diff options
author | Sarah Abouzainah <sarah.abouzainah@Sarahs-MacBook-Pro.local> | 2020-04-10 14:54:02 +0200 |
---|---|---|
committer | Dan Timoney <dtimoney@att.com> | 2020-04-13 09:28:01 -0400 |
commit | d928388e9a9bab884cdf576f492d753d6e5289ee (patch) | |
tree | 187724674809d9e2868291e610858d5df73080e2 /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer | |
parent | af0625bf4ff1d4ef1d33bb4253ea0e004bd53d3a (diff) |
Merge live repo with design changes ccsdk-2309
Issue-ID: CCSDK-2309
Change-Id: Iba91eebc5880a930842e66fa97d20441c52e347b
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Signed-off-by: Dan Timoney <dtimoney@att.com>
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer')
5 files changed, 167 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 37a6f9235..04f410c5f 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 @@ -4,12 +4,21 @@ body{ background-size: 6px 6px !important; } +/*Icons*/ +.icon-info{ + margin-left: 3px; +} +.icon-info::before{ + color: #fff; +} /*Header*/ header{ + position: relative; height: 60px; background-color: #1B3E6F; box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); + z-index: 200000000 !important; } .logo{ float: left; @@ -43,9 +52,13 @@ header{ padding: 4px 10px; background: #F4F9FE; border-radius: 10px; - color: #C3CDDB; + color: #1B3E6F; font-size: 10px; } +.designer-breadcrumb .fa-angle-right::before { + color: #fff; + line-height: 38px; +} .sidebar-container{ height: calc(100vh - 60px) !important; } @@ -68,7 +81,7 @@ header{ .btn-topology-action, .btn-topology-action:hover{ margin: 0 6px; - padding: 6px 10px; + padding: 4px 8px; color: #fff; border-radius: 50%; border: solid .5px #fff; @@ -97,13 +110,15 @@ header{ .topology-actions .dropdown-text::after{ right: 15px; top: 13px; - border-width: 6px 6px 0 6px; + border-style: solid !important; + border-width: 5px 5px 0 5px !important; 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 + border-style: solid !important; + border-width: 0 5px 5px 5px !important; + border-color: transparent transparent #fff transparent; } .topology-actions .dropdown-content:hover, .topology-actions .dropdown-toggle:focus ~ .dropdown-content{ @@ -123,9 +138,35 @@ header{ background: #F4F9FE; text-decoration: none; } - - - +.package-info-btn{ + padding: 0 !important; +} +.package-info h3{ + font-size: 15px; + font-weight: bold; +} +.package-info h3 span{ + font-size: 11px; +} +.package-info .badge{ + margin-right: 6px; + padding: 4px 10px; + background: #E0E8F2; + border-radius: 12px; + color: #1B3E6F; + font-size: 11px; + font-weight: normal; +} +.creator-pic{ + border-radius: 50%; + width: 30px; + height: 30px; +} +.package-info p{ + margin-bottom: 0; + font-size: 11px; + line-height: 20px; +} @@ -179,7 +220,24 @@ button.rotate{ .rotate a:hover{ text-decoration: none; } - +#board-paper svg{ + top: 40px; + left: 30px; +} +.componentsList tspan{ + width:60px !important; + font: normal 13px sans-serif; + fill: #1B3E6F !important; + overflow-wrap: break-word; +} +#board-paper #name tspan{ + /* fill: green; */ + text-align: center; + +} +tspan#type{ + text-align: center; +} /*ACTIONS & COMPONENTS MENU*/ .input-search-controller{ height: 50px; @@ -252,6 +310,8 @@ p.compType-4{ color: #C3CDDB; } .controllerSidebar b{ + margin-left: 12px; + margin-bottom: 9px; font-size: 12px; color: #C3CDDB; } @@ -261,17 +321,17 @@ p.compType-4{ border-radius: 2px !important; font-size: 12px; font-weight: bold; + outline: 0 !important; } -.actionBtns .btn:first-child{ +.actionBtns .btn.insert-custom{ background: #1B3E6F; border: solid 1px #1B3E6F; color: #fff; } -.actionBtns .btn:last-child{ - padding-left: 34px !important; - background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat; +.actionBtns .btn.import-action{ border: solid 1px #D0DFF1; color: #1B3E6F; + } .actionsList, .componentsList{ @@ -281,6 +341,7 @@ p.compType-4{ padding-bottom: 0; height: calc( 100vh - 218px)!important; overflow: scroll; + background: #F4F9FE !important; } .custom-control.custom-checkbox:hover, .custom-control-label:hover{ @@ -553,7 +614,7 @@ p.compType-4{ .source-button{ position: absolute; z-index: 9999999; - top: 69px; + top: 60px; left: 50%; } /*jointjs paper*/ 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 1a2219bab..bd5b07e45 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 @@ -4,17 +4,61 @@ <div class="col pl-0"> <p class="logo mb-0"></p> <nav aria-label="breadcrumb"> - <ol class="breadcrumb mb-0"> + <ol class="breadcrumb designer-breadcrumb mb-0"> <li class="breadcrumb-item"> <a href="#">CBA Packages</a> </li> + <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item"> <a href="#">Package Name</a> + <button type="button" class="btn package-info-btn" data-toggle="modal" + data-target="#exampleModalLong"> + <i class="icon-info" aria-hidden="true"></i> + </button> </li> + <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item active" aria-current="page"> - <p class="mb-0">Topology View</p> + <p class="mb-0">Designer Mode</p> </li> </ol> + <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" + 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" /> + </button> + </div> + <div class="modal-body"> + <div class="row package-info"> + <div class="col-12"> + <h3>Test Package<span>.vLB.CDS</span> + <span class="package-version">Version 1.0.2</span></h3> + </div> + <div class="col-12 mb-3"> + <span class="badge badge-primary">test</span> + <span class="badge badge-primary">vDNS-CDS</span> + <span class="badge badge-primary">SCALE-OUT</span> + <span class="badge badge-primary">MARCO</span> + </div> + <div class="col-2"> + <img src="/assets/img/img-user3.jpg" class="creator-pic"> + </div> + <div class="col-10 pl-0"> + <p><b>Author information:</b></p> + <p>Abdelmuhaimen Seaudi</p> + <p>abdelmuhaimen.seaudi@orange.com</p> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> + </div> </nav> </div> <div class="col pr-0 text-right"> @@ -22,15 +66,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> @@ -58,24 +102,24 @@ <div class="source-button editBar"> <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> - <button [routerLink]="['/designer/source']" type="button" class="btn btn-secondary topologyView">Scripting</button> + <button [routerLink]="['/designer/source']" type="button" + class="btn btn-secondary topologyView">Scripting</button> </div> </div> <ng-sidebar-container class="sidebar-container"> <!-- Controller SideBar --> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" - [mode]="'push'" - #sidebarLeft> + [mode]="'push'" #sidebarLeft> <div class="row"> - <h1 class="col-12">Actions</h1> <div class="col-12 text-center p-0"> <div class="btn-group actionBtns" role="group"> - <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button> - <!-- <button type="button" class="btn">Import Action</button> --> + <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">Insert + Custom</button> + <!-- <button type="button" class="btn import-action"><i class="icon-import-blue" aria-hidden="true"></i>Import Action</button> --> </div> </div> - <!-- <div class="col-12 actionsList"> + <!-- <div class="col-12 actionsList"> <b>Select from other packages:</b> <div class="actions-scroll"> <div class="custom-control custom-checkbox"> @@ -109,22 +153,22 @@ </div> </div> --> - <h1 class="col-12">Functions</h1> - <b>Drag and drop function to Action’s box</b> - <div id="palette-paper" class="col-12 componentsList"> - </div> + <h1 class="col-12">Functions</h1> + <b>Drag and drop function to Action’s box</b> + <div id="palette-paper" class="col-12 componentsList"> + </div> </div> </ng-sidebar> <!-- Page content --> - + <div ng-sidebar-content id="board-paper"> <button class="rotate" (click)="_toggleSidebar1()"> - <span> - Controller - <i class="fa fa-angle-double-left"></i> - </span> + <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"> @@ -180,8 +224,7 @@ </div> <!-- Attribute SideBar --> <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" - [position]="'right'" - #sidebarRight> + [position]="'right'" #sidebarRight> <div class="container-fluid0"> <div class="row m-0"> <div class="col-2 pr-0"> @@ -203,8 +246,7 @@ <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"> + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Steps </button> </h2> @@ -214,7 +256,7 @@ </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -234,7 +276,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -248,8 +290,7 @@ <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"> + data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> Inputs </button> </h2> @@ -258,7 +299,7 @@ </div> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -278,7 +319,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -292,8 +333,8 @@ <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"> + data-target="#collapseThree" aria-expanded="true" + aria-controls="collapseThree"> Outputs </button> </h2> @@ -302,7 +343,7 @@ </div> </div> <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -322,7 +363,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> 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 42813075c..72019bfa0 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="0" y="0" width="230" height="130" rx="2"></rect> - <g id="Group-4" transform="translate(36.000000, 25.000000)" fill="#FFFFFF"> - <g id="database0-copy" transform="translate(61.000000, 0.000000)" fill-rule="nonzero"> + <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"> <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, @@ -302,11 +302,10 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl </g> <text id="func-board-element-text" font-family="HelveticaNeue-Bold, Helvetica Neue" - font-size="14" + font-size="13" font-weight="bold" line-spacing="18"> - <tspan id="label" x="52.554" y="59">execute</tspan> - <tspan x="105.446" y="59" font-family="HelveticaNeue, Helvetica Neue" font-weight="normal"></tspan> - <tspan id="type" x="0.094" y="77" + <tspan id="label" x="64" y="18">execute</tspan> + <tspan id="type" x="64" y="40" 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 896ecaa88..48a680982 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 @@ -34,7 +34,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function }, { markup: `<defs> - <rect id="pallete-function-rect" x="0" y="0" width="280" height="40" rx="2"></rect> + <rect id="pallete-function-rect" x="0" y="0" width="290" height="40" rx="2"></rect> <filter x="-3.6%" y="-20.0%" width="107.1%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2"> <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> @@ -53,7 +53,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#pallete-function-rect"></use> <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#pallete-function-rect"></use> </g> - <g id="drag-menu" transform="translate(20.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero"> + <g id="drag-menu" transform="translate(15.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero"> <g id="left"> <circle id="1" cx="0.8" cy="0.8" r="1"></circle> <circle id="2" cx="0.8" cy="3.8" r="1"></circle> @@ -67,7 +67,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function <circle id="4" cx="0.8" cy="9.8" r="1"></circle> </g> </g> - <g id="txt" transform="translate(35.000000, 10.000000)" fill="#1B3E6F"> + <g id="txt" transform="translate(30.000000, 10.000000)" fill="#1B3E6F"> <g id="browser" fill-rule="nonzero"> <path d="M21.0000051,0.39034364 C20.9994786, 0.29701568 20.9615913,0.207858845 20.8946802, @@ -254,7 +254,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function id="Shape"></path> </g> <text id="function-type" font-family="ArialMT, Arial" font-size="14" font-weight="normal" line-spacing="20"> - <tspan id="label" x="32" y="13"></tspan> + <tspan id="label" x="30" y="13"></tspan> </text> </g> </g> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css index 01ae599a4..75274ba33 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css @@ -49,6 +49,9 @@ header{ color: #C3CDDB; font-size: 10px; } +.designer-breadcrumb .fa-angle-right::before{ + color: #fff; +} .sidebar-container{ height: calc(100vh - 60px) !important; } @@ -255,6 +258,7 @@ p.compType-4{ color: #C3CDDB; } .controllerSidebar b{ + margin-left: 12px; font-size: 12px; color: #C3CDDB; } @@ -272,9 +276,9 @@ p.compType-4{ } .actionBtns .btn:last-child{ padding-left: 34px !important; - background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat; border: solid 1px #D0DFF1; color: #1B3E6F; + outline: 0 !important; } .actionsList, .componentsList{ |