diff options
author | 2020-06-05 14:56:25 +0000 | |
---|---|---|
committer | 2020-06-05 14:56:25 +0000 | |
commit | aec7bcff2843cfe60f946535599b49b1778dce45 (patch) | |
tree | d3a2162e8d266a71b8aaf40d7c2473b34623b16e | |
parent | bef1899ac0e9cc77e8c22feffaab95cbc923d6ba (diff) | |
parent | ced915588f42312b3e65accea0ff72f095c929ce (diff) |
Merge "Actions list - UI"
15 files changed, 286 insertions, 230 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index a31c95652..4abc93b55 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -62,7 +62,7 @@ <div class="col-12 package-name deployed"> {{viewedPackage.artifactName}} <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon"> - <span class="package-version">Version 1.0.2</span> + <span class="package-version">v1.0.2</span> </div> <div class="col-12 package-description"> Last modified {{ viewedPackage.createdDate | date:'short' }} By 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 a095b3dfc..5054a8e9e 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 @@ -12,6 +12,18 @@ body{ color: #fff; } +/*Bootstrap*/ +.controllerSidebar .nav-tabs{ + border-bottom-width: 2px; +} +.controllerSidebar .nav-tabs .nav-link{ + padding: 12px 0 !important; + text-align: center; +} +.controllerSidebar .nav-tabs .nav-link::before{ + content: ""; +} + /*Header*/ header{ position: relative; @@ -240,9 +252,9 @@ tspan#type{ } /*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; + height: 40px; + padding-left: 42px; + background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; @@ -254,16 +266,11 @@ tspan#type{ font-size: 11px; } .input-search-controller:focus{ - + background-color: #fff !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + text-shadow: none; border-color: #DEE8F3; } -.actions-scroll{ - max-height: 29vh; - overflow-y: auto; - margin-top: 12px; - margin-bottom: 20px; -} .componentsList p{ margin-bottom: 0; padding-left: 30px; @@ -296,10 +303,37 @@ p.compType-4{ .controllerSidebar{ width: 320px; + padding: 0; + overflow: hidden !important; background: #F4F9FE; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .10); } +.helpBox{ + position : absolute; + bottom : 0; + width: 100%; + height : 40px; + margin-top : 24px; + padding-left: 20px; + background: #fff; + border-top: solid 1px #C1CDDD; + font-size: 14px; + line-height: 40px; + color: #0070F4; +} +.helpBox .icon-info{ + margin-left: 0; + margin-right: 10px; +} +.helpBox .icon-info::before{ + color: #0070F4 !important; +} +.controllerSidebar .row, +.controllerSidebar .col{ + margin: 0; + padding: 0; +} .controllerSidebar h1{ margin-bottom: 15px; padding: 12px 0 12px 12px; @@ -315,6 +349,7 @@ p.compType-4{ font-size: 12px; color: #C3CDDB; } + .actionBtns .btn{ margin: 0px 15px 16px -90px; /* padding: 9px 20px; */ @@ -325,24 +360,25 @@ p.compType-4{ float: left; } -.actionBtns .btn.insert-custom{ - /* background: white; */ - /* border: solid 1px #1B3E6F; */ +.new-action, +.new-action:hover{ + margin: 9px 0 4px 18px; + padding: 6px; + font-size: 13px; + font-weight: bold; color: #1B3E6F; } -.actionBtns .btn.import-action{ - border: solid 1px #D0DFF1; - color: #1B3E6F; - +.new-action:hover{ + background: #D7E7F9; } -.actionsList, .componentsList{ - padding: 0 12px 20px; + margin-top: 16px; + padding: 0 20px 10px; } .componentsList{ padding-bottom: 0; - height: calc( 100vh - 218px)!important; - overflow: scroll; + /* height: calc( 100vh - 218px)!important; + overflow: scroll;*/ background: #F4F9FE !important; } .custom-control.custom-checkbox:hover, @@ -350,18 +386,18 @@ p.compType-4{ cursor: pointer; } .custom-control{ - padding-top: 10px; - width: 315px; height: 40px; - margin-left: -15px; font-size: 14px; - padding-bottom: 0; + line-height: 40px; } .custom-control:hover{ background-color: white; } - -.actionsList .custom-checkbox, +.actionsList, +.componentsList{ + height: 65vh !important; + overflow-y: auto; +} .componentsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; @@ -374,7 +410,7 @@ p.compType-4{ padding: 6px; vertical-align: unset; color: #1B3E6F; - font-size: 14px; + font-size: 13px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; @@ -409,6 +445,12 @@ p.compType-4{ border: solid 1px #D9E6F2; color: #C3CDDB; } +.controllerSidebar .custom-control label{ + margin-bottom: 0; +} +.controllerSidebar .custom-control i{ + margin-right: 9px; +} /*Components List*/ .componentsList .list-group-item{ padding-left: 36px; @@ -507,7 +549,7 @@ p.compType-4{ .functionAttributeSidebar{ width: 440px; padding: 0px; - margin-top: 50px; + margin-top: 45px; } .functionAttributeSidebar .attributesContainer{ background: #fff; 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 52503cf53..2bd484258 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 @@ -33,11 +33,11 @@ </div> <div class="modal-body"> <div class="row package-info"> - <div class="col-12"> + <div class="col"> <h3>Test Package <span class="package-version">Version 1.0.2</span></h3> </div> - <div class="col-12 mb-3"> + <div class="col 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> @@ -100,7 +100,7 @@ </div> </header> <div class="source-button editBar"> - + <div class="btn-group viewBtns" role="group"> <!-- <button (click)="_toggleSidebar1()" class="topologySource active"> <i style="font-size:24px" class="fa"></i> @@ -118,54 +118,43 @@ <nav class="row"> <!--Nav Tabs--> - <div class="col-12"> + <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> - <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> + <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> + <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> </div> </div> </nav> - - - <div class="row mt-2"> - <div class="col-12"> + <div class="row"> + <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" aria-labelledby="nav-action-tab"> <!--Action Search Box--> - <div> - <h1>Search</h1> - </div> + <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> - <div class="btn-group actionBtns col-8" role="group"> - <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom"> - + New Action - </button> - </div> - - <div> - <div *ngIf="showAction" class="custom-control"> - <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span> + <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action"> + + New Action + </button> + <div class="actionsList"> + <div *ngIf="showAction" class="custom-control"> + <label><i class="icon-file" aria-hidden="true"></i> {{customActionName}} </label> - </div> </div> - </div> - - <div class="tab-pane fade" id="nav-function" role="tabpanel" - aria-labelledby="nav-function-tab"> - <div class="col-12 text-center p-0"> - <b>Drag and drop function to Action’s box</b> - <div id="palette-paper" class="col-12 componentsList"> </div> </div> </div> + <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> + </div> </div> </div> - - + <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a></div> </ng-sidebar> <!-- Page content --> @@ -242,7 +231,7 @@ <h1>Action Attributes</h1> <div class="scrolll"> <div class="row m-0"> - <div class="col-12"> + <div class="col"> <div class="form-group actionName"> <label for="exampleInputEmail1">Action Name</label> <input type="text" class="form-control" placeholder="Action 1"> @@ -388,36 +377,36 @@ </div> </ng-sidebar> - <!-- Function Attribute SideBar --> - <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" [mode]="'push'" - [position]="'right'" #sidebarRight> + <!-- Function Attribute SideBar --> + <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" + [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"> - <div class="row m-0"> - <div class="col-12"> - <div class="col-3"> - <button (click)="sidebarRight.close()" class="closeBar"></button> - </div> + <div class="row m-0"> + <div class="col"> + <div class="col-3"> + <button (click)="sidebarRight.close()" class="closeBar"></button> + </div> + + <div class="function-attribute"> + <h6>Function Attributes + <span class="trash-span"> + <i class="fa fa-trash" type="button" aria-hidden="true"></i> + </span> + </h6> + </div> + + + </div> + </div> - <div class="function-attribute"> - <h6>Function Attributes - <span class="trash-span"> - <i class="fa fa-trash" type="button" aria-hidden="true"></i> - </span> - </h6> - </div> - - - </div> - </div> - <div> <div class="row m-0"> - <div class="col-12"> + <div class="col"> <div class="form-group actionName"> <label for="exampleInputEmail1">Function Name</label> <input type="text" class="form-control" placeholder="Function Name"> @@ -425,165 +414,172 @@ </div> </div> <div class="row m-0"> - <div class="col-12"> + <div class="col"> <div class=" actionName"> <label>Function Type</label> <div class="dropdown w-100"> <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">component-resource-resolution <i class="fa fa-caret-down"></i></div> + <div class="dropdown-text">component-resource-resolution <i + class="fa fa-caret-down"></i></div> <ul class="dropdown-content w-100"> <li> <div class="form-group "> - <li>other component</li> - </div> - </li> - </ul> + <li>other component</li> </div> + </li> + </ul> </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"> - Interface - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </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"> + Interface + </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">ResourceResolutionComponent</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">Resoluton-key</label> - <input type="text" class="form-control"> + <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">ResourceResolutionComponent</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Store result</label> - </div> - <div class="form-group"> - <label> - <input class="with-gap radio-btn" name="group1" type="radio"/> - <span class="radio-btn">True</span> - </label> - <label class="radio-btn"> - <input class="with-gap radio-btn" name="group1" type="radio" /> - <span class="radio-btn">False</span> - </label> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder=""> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Artifact Prefix Name</label> - <input type="text" class="form-control" placeholder=""> - + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Resoluton-key</label> + <input type="text" class="form-control"> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Store result</label> + </div> + <div class="form-group"> + <label> + <input class="with-gap radio-btn" name="group1" type="radio" /> + <span class="radio-btn">True</span> + </label> + <label class="radio-btn"> + <input class="with-gap radio-btn" name="group1" type="radio" /> + <span class="radio-btn">False</span> + </label> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Target</label> + <input type="text" class="form-control" placeholder=""> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Artifact Prefix Name</label> + <input type="text" class="form-control" placeholder=""> </div> + </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"> - Artifact - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </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"> + Artifact + </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">base config-template</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">Type</label> - <div class="dropdown w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">artifact-template-velocity <i class="fa fa-caret-down"></i></div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group "> - <li>ddwd</li> - </div> - </li> - </ul> - </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">base config-template</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> </div> - - <div style="height: 30px; margin-top: 30px;"><hr></div> - - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">base config-mapping</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 class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> </div> - <div class="form-group"> - <label for="exampleInputEmail1">Type</label> - <div class="dropdown w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">artifact-mapping resource <i class="fa fa-caret-down"></i></div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group "> - <li>ddwd</li> - </div> - </li> - </ul> - </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Type</label> + <div class="dropdown w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">artifact-template-velocity <i + class="fa fa-caret-down"></i></div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>ddwd</li> </div> + </li> + </ul> + </div> + </div> + + <div style="height: 30px; margin-top: 30px;"> + <hr> + </div> - <div style="height: 30px; margin-top: 30px;"><hr></div> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">base config-mapping</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">Type</label> + <div class="dropdown w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">artifact-mapping resource <i + class="fa fa-caret-down"></i></div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group "> + <li>ddwd</li> + </div> + </li> + </ul> + </div> + </div> + + <div style="height: 30px; margin-top: 30px;"> + <hr> </div> - </div> </div> </div> + </div> </div> + </div> + </div> + </div> </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 3d10f99e7..9b8781d9b 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 @@ -180,7 +180,7 @@ export class DesignerComponent implements OnInit, OnDestroy { this.palettePaper = new joint.dia.Paper({ el: $('#palette-paper'), model: this.paletteGraph, - width: 300, + width: 318, height: $('#palette-paper').height(), // background: { // color: 'rgba(0, 255, 0, 0.3)' 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 75274ba33..bc1890bdb 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 @@ -6,8 +6,6 @@ body{ background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; background-size: 6px 6px !important; } - - /*Header*/ header{ height: 60px; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 9c789941d..a7ce5ed4a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -3,7 +3,7 @@ <!--Add Package Card--> <div class="card addPaackage-card"> <div class="card-body text-center"> - <img src="/assets/img/icon-addPackage.svg" width="30%"> + <img src="/assets/img/icon-addPackage.svg"> </div> <div class="card-footer row"> <div class="col text-center"> @@ -30,7 +30,7 @@ <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> --> <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom"> {{bluePrint.artifactName}}</p> - <span class="package-version">version {{bluePrint.artifactVersion}}</span> + <span class="package-version">v{{bluePrint.artifactVersion}}</span> </a> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html index b6fbf5939..41b13a601 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html @@ -23,15 +23,15 @@ <!--Add Package Card--> <div class="card addPaackage-card"> <div class="card-body text-center"> - <img src="/assets/img/icon-addPackage.svg" width="40%"> + <img src="/assets/img/icon-addPackage.svg"> </div> <div class="card-footer row"> <div class="col text-center"> <a routerLink="/resource-dictionary/createDictionary" role="button" aria-pressed="true" class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Dictionary </a> - <br/> - <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package + <br /> + <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i class="icon-import-blue" aria-hidden="true"></i>Import Dictionary </a> </div> </div> diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot Binary files differindex 01dd66cf8..46b2de673 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg index 6d0d75fd1..c966c1125 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg @@ -12,6 +12,7 @@ <glyph unicode="" glyph-name="icon-enter-link" d="M677.571 421.241h-644.248c-18.395 0-33.323 14.929-33.323 33.323s14.929 33.323 33.323 33.323h644.248c18.395 0 33.323-14.929 33.323-33.323s-14.929-33.323-33.323-33.323zM499.849 243.519c-8.534 0-17.060 3.238-23.552 9.771-13.017 13.017-13.017 34.121 0 47.146l154.177 154.169-154.177 154.177c-13.017 13.017-13.017 34.129 0 47.146 13.025 13.017 34.129 13.017 47.146 0l177.722-177.73c13.017-13.017 13.017-34.121 0-47.137l-177.722-177.722c-6.533-6.582-15.059-9.82-23.593-9.82v0zM533.173-34.18c-202.21 0-380.728 121.651-454.884 309.957-6.753 17.060 1.684 36.431 18.793 43.184 17.060 6.663 36.48-1.643 43.232-18.842 64.027-162.573 218.245-267.652 392.859-267.652 232.726 0 422.098 189.372 422.098 422.098s-189.372 422.098-422.098 422.098c-174.614 0-328.832-105.079-392.859-267.652-6.801-17.199-26.172-25.505-43.232-18.842-17.109 6.753-25.546 26.123-18.793 43.184 74.156 188.306 252.675 309.957 454.884 309.957 269.475 0 488.744-219.27 488.744-488.744s-219.27-488.744-488.744-488.744z" /> <glyph unicode="" glyph-name="icon-action-close" d="M1011.886 947.884c-16.154 16.154-42.344 16.154-58.498 0l-941.272-941.27c-16.154-16.154-16.154-42.344 0-58.498 8.076-8.080 18.664-12.116 29.25-12.116s21.172 4.039 29.25 12.119l941.27 941.27c16.152 16.152 16.152 42.342 0 58.496zM1011.884 6.612l-941.272 941.27c-16.152 16.154-42.344 16.154-58.496 0-16.154-16.152-16.154-42.342 0-58.496l941.272-941.272c8.076-8.078 18.664-12.117 29.25-12.117s21.174 4.039 29.248 12.115c16.15 16.156 16.15 42.346-0.002 58.5z" /> <glyph unicode="" glyph-name="icon-action-back" horiz-adv-x="1422" d="M479.778 915.244c19.067 19.733 50.8 19.733 70.533 0 19.067-19.067 19.067-50.8 0-69.822l-357.644-357.644h1180.178c27.511-0.044 49.378-21.911 49.378-49.422s-21.867-50.089-49.378-50.089h-1180.178l357.644-356.978c19.067-19.733 19.067-51.511 0-70.533-19.733-19.733-51.511-19.733-70.533 0l-442.311 442.311c-19.733 19.067-19.733 50.8 0 69.822l442.311 442.356z" /> +<glyph unicode="" glyph-name="icon-file" horiz-adv-x="751" d="M731.195 731.764l-208.496 208.494c-12.729 12.731-29.652 19.742-47.655 19.742h-407.653c-37.16 0-67.391-30.232-67.391-67.391v-851.058c0-37.16 30.232-67.391 67.391-67.391h616.15c37.16 0 67.391 30.232 67.391 67.391v642.56c0 17.997-7.009 34.92-19.738 47.653zM652.324 728.944h-122.82c-5.309 0-9.627 4.319-9.627 9.627v122.818l132.447-132.445zM683.542 31.923h-616.15c-5.309 0-9.627 4.319-9.627 9.627v851.058c0 5.309 4.319 9.627 9.627 9.627h394.721v-163.665c0-37.16 30.232-67.391 67.391-67.391h163.665v-629.629c0-5.309-4.319-9.627-9.627-9.627z" /> <glyph unicode="" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" /> <glyph unicode="" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" /> <glyph unicode="" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" /> diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf Binary files differindex d08d2740b..b8c3e0106 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff Binary files differindex b6d35bcac..169d6d61e 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css index dc7de38e5..945d9d380 100755 --- a/cds-ui/designer-client/src/assets/icomoon/style.css +++ b/cds-ui/designer-client/src/assets/icomoon/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?hdnbak'); - src: url('fonts/icomoon.eot?hdnbak#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?hdnbak') format('truetype'), - url('fonts/icomoon.woff?hdnbak') format('woff'), - url('fonts/icomoon.svg?hdnbak#icomoon') format('svg'); + src: url('fonts/icomoon.eot?rdm62r'); + src: url('fonts/icomoon.eot?rdm62r#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?rdm62r') format('truetype'), + url('fonts/icomoon.woff?rdm62r') format('woff'), + url('fonts/icomoon.svg?rdm62r#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -35,6 +35,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-file:before { + content: "\e905"; + color: #1b3e6f; +} .icon-action-back:before { content: "\e904"; color: #1b3e6f; diff --git a/cds-ui/designer-client/src/assets/img/icon-error.sketch b/cds-ui/designer-client/src/assets/img/icon-error.sketch Binary files differdeleted file mode 100644 index 0a17404bc..000000000 --- a/cds-ui/designer-client/src/assets/img/icon-error.sketch +++ /dev/null diff --git a/cds-ui/designer-client/src/assets/img/icon-error.svg b/cds-ui/designer-client/src/assets/img/icon-error.svg new file mode 100644 index 000000000..e26cad3f9 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-error.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>signs</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="signs" fill-rule="nonzero"> + <path d="M256,0 C114.835938,0 0,114.835938 0,256 C0,397.164062 114.835938,512 256,512 C397.164062,512 512,397.164062 512,256 C512,114.835938 397.164062,0 256,0 Z" id="Path" fill="#FF6469"></path> + <path d="M277.332031,384 C277.332031,395.78125 267.78125,405.332031 256,405.332031 C244.21875,405.332031 234.667969,395.78125 234.667969,384 C234.667969,372.21875 244.21875,362.667969 256,362.667969 C267.78125,362.667969 277.332031,372.21875 277.332031,384 Z" id="Path" fill="#ECEFF1"></path> + <path d="M277.332031,298.667969 C277.332031,310.441406 267.777344,320 256,320 C244.222656,320 234.667969,310.441406 234.667969,298.667969 L234.667969,128 C234.667969,116.222656 244.222656,106.667969 256,106.667969 C267.777344,106.667969 277.332031,116.222656 277.332031,128 L277.332031,298.667969 Z" id="Path" fill="#FAFAFA"></path> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index a705b2744..164a459c3 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -74,6 +74,7 @@ body{ .toast-error{ border-left: solid 5px #FF6469 !important; background: url(/assets/img/icon-error.svg) 12px center #fff no-repeat !important; + background-size: 18px !important; } /*ICONS*/ .icon-menuDots{ @@ -555,12 +556,15 @@ height: 40px; border: solid 1px #D7E7F9 !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important; } +.addPaackage-card .card-body img{ + width: 30%; +} .addPaackage-card a{ margin: 0; padding: 7px 15px; font-weight: bold; font-size: 12px; - border-radius: 2px; + border-radius: 18px; border-width: 0px; border-style: solid; background-position: 15px center; @@ -1152,7 +1156,7 @@ height: 40px; } .btn-create-package, .btn-import-package{ - width: 145px; + width: auto; } .btn-create-package{ margin-bottom: 6px !important; @@ -1235,9 +1239,7 @@ height: 40px; background: #1B3E6F; box-shadow: none; } -.package-version{ - /* color: #C3CDDB !important; */ -} + .package-version::before{ content: "|"; margin-left: 8px; |