diff options
Diffstat (limited to 'cds-ui/designer-client')
8 files changed, 177 insertions, 42 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 9e1c9b709..86243ebb2 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 @@ -131,7 +131,7 @@ <div class="modal-body"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false"> - <div class="carousel-inner" style="height: 450px"> + <div class="carousel-inner" style="height: 480px"> <!--OPTIONS SLIDE--> <div class="carousel-item active"> <h1>Let’s create the 1st Action</h1> @@ -207,6 +207,11 @@ </a> </div> </div> + <div class="row"> + <div class="col text-center"> + <button class="btn skip-btn">Skip to Designer Canvas</button> + </div> + </div> </div> <!--Custom Action Form--> <div class="carousel-item"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index 6622f6700..50d9eea08 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -50,7 +50,7 @@ <div class="model-note-container error-message">{{errorMessage}}</div> </div> <div class="single-line-model"> - <label class="label-name">Description</label> + <label class="label-name">Description <span>*</span></label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package"> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 8cdd9c560..164f0ac73 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -1,4 +1,13 @@ -<h6 class="create-title">CREATE</h6> + +<div class="row template-mapping-action"> + <div class="col"> + <h6 class="create-title">Create Template</h6> + </div> + <div class="col text-right"> + <button (click)="cancel()" [disabled]="fileName?.length <=0" class="btn btn-outline-secondary">Cancel</button> + <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Finish</button> + </div> +</div> <div class="card creat-card"> <div class="single-line-model"> <label class="label-name">Name @@ -201,11 +210,7 @@ </div> - <div class="template-mapping-action"> - <button (click)="cancel()" [disabled]="fileName?.length <=0" - class="btn btn-outline-secondary">Cancel</button> - <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Submit</button> - </div> + </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index 8c92f0dc2..6ae5c1122 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -25,7 +25,11 @@ [ngClass]="{'active':currentFile == file}">{{file}} <span *ngIf="getValue(file).isMapping">Mapping</span> <span *ngIf="getValue(file).isTemplate">Template</span> + <button type="button" class="deleteTemplate" title="Delete Template"> + <i class="icon-delete-sm"></i> + </button> </a> + </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html index 07c192d2c..c65d08e77 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -1,6 +1,6 @@ <div class="dropdown packagesFilter w-100"> <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">Filter By Tags {{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div> + <div class="dropdown-text">Filter By Tags <span class="fillteredTags">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</span></div> <ul class="dropdown-content w-100"> <li> <div class="form-group"> 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 c2bfd9779..9c789941d 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 @@ -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">{{bluePrint.artifactVersion}}</span> + <span class="package-version">version {{bluePrint.artifactVersion}}</span> </a> </div> @@ -107,15 +107,16 @@ </div> <div class="card-footer"> <div class="row"> + + <div class="col"> + <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i + class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button> + </div> <div class="col"> <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology" aria-hidden="true"></i>Designer Mode </button> </div> - <div class="col"> - <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i - class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button> - </div> </div> </div> </div> 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 differnew file mode 100644 index 000000000..0a17404bc --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-error.sketch diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 1996baa5a..a705b2744 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -18,6 +18,9 @@ body{ transition: 0.3s !important; } /*Bootstrap*/ +.btn:disabled:hover{ + cursor: default; +} .custom-control-label::before{ border: solid 1px #C3CDDB !important; border-radius: 0 !important; @@ -45,6 +48,33 @@ body{ width: 14px !important; height: 14px; } +.card-header .btn[aria-expanded="true"], +.card-header .btn[aria-expanded="false"]{ + padding-left: 25px !important; + padding-right: 25px !important; + border-radius: 0 !important; +} +.card-header .btn[aria-expanded="true"]{ + background-color:#F4F9FE; +} +.card-header .btn[aria-expanded="false"]{ + background-color:#fff; +} +/*NGX-TOASTR*/ +.ngx-toastr{ + border-radius: 2px !important; + color: #1B3E6F !important; + font-size: 13px !important; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; +} +.toast-success{ + border-left: solid 5px #66BB00 !important; + background: url(/assets/img/icon-required-yes.svg) 12px center #fff no-repeat !important; +} +.toast-error{ + border-left: solid 5px #FF6469 !important; + background: url(/assets/img/icon-error.svg) 12px center #fff no-repeat !important; +} /*ICONS*/ .icon-menuDots{ font-size: 3px !important; @@ -330,6 +360,7 @@ background-color: #333; font-size: 12px; } .import-container-all .accordion .card-header{ + padding: 0 !important; background: #fff !important; border-bottom: 0 !important; } @@ -338,6 +369,9 @@ background-color: #333; } .import-container-all .card-header .accordion-delete{ display: none; + position: absolute; + right: 15px; + background: #F4F9FE; } .import-container-all .card-header:hover .accordion-delete{ display: inline; @@ -468,6 +502,9 @@ height: 40px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } +.packages-card .card:hover .packageName{ + color: #1273EB !important; +} .packages-card .card-title{ margin-bottom: 0 !important; font-size: 13px; @@ -484,12 +521,14 @@ height: 40px; color: #D0D7E4; } .packages-card p.package-desc{ + margin-top: 6px; font-size: 13px; text-align: left; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; + color: #1B3E6F; } .packages-card p.package-desc:hover{ color: #1B3E6F !important; @@ -518,7 +557,7 @@ height: 40px; } .addPaackage-card a{ margin: 0; - padding: 8px 15px; + padding: 7px 15px; font-weight: bold; font-size: 12px; border-radius: 2px; @@ -656,6 +695,9 @@ height: 40px; width: 240px; border-bottom: solid 1px #C3CDDB; } +.searchBox:hover > .searchInput::placeholder{ + color: #C3CDDB; +} .searchBox > .searchInput:focus{ border-bottom: solid 1px #1B3E6F !important; -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); @@ -844,7 +886,7 @@ height: 40px; animation-direction: alternate; } */ .card-body{ - padding: 20px !important; + padding: 10px 20px 20px !important; } /*Main Container*/ @@ -971,6 +1013,13 @@ height: 40px; font-size: 13px !important; text-indent: 6px !important; } +.fillteredTags{ + margin-left: 3px; + padding: 3px 3px; + background: #1B3E6F; + color: #fff; + border-radius: 4px; +} /**Packages Sort**/ .sort-packages{ font-size: 12px; @@ -1061,7 +1110,7 @@ height: 40px; margin-bottom: 0; display: inline-block; width: auto; - max-width: 76%; + max-width: 64%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1078,6 +1127,7 @@ height: 40px; padding-bottom: 0 !important; } .packages-card .card-footer .col{ + padding-left: 3px !important; text-align: left; } @@ -1100,8 +1150,12 @@ height: 40px; .addPaackage-card .card-footer .col:last-child{ text-align: left; } +.btn-create-package, +.btn-import-package{ + width: 145px; +} .btn-create-package{ - margin-bottom: 9px !important; + margin-bottom: 6px !important; } .btn-import-package{ margin-bottom: 4px !important; @@ -1161,6 +1215,7 @@ height: 40px; .packages-card .dropdown-content a:hover{ background-color: #172B4D; text-decoration: unset; + color: #fff; } .packages-card .dropdown-content:hover, .packages-card .dropdown-toggle:focus ~ .dropdown-content{ @@ -1181,7 +1236,7 @@ height: 40px; box-shadow: none; } .package-version{ - color: #C3CDDB !important; + /* color: #C3CDDB !important; */ } .package-version::before{ content: "|"; @@ -1192,7 +1247,7 @@ height: 40px; /***Contributers***/ ul.package-contributers{ - /*margin-bottom: 0 !important;*/ + margin-bottom: 9px !important; padding-left: 0 !important; } .package-contributers li{ @@ -1373,6 +1428,15 @@ ul.package-contributers{ text-align: center; font-weight: normal; } +.createActionModal .skip-btn{ + float: unset; + width: auto; + color: #1273EB; + font-weight: normal !important; + font-size: 13px; + border: solid 1px #F1F2FA; + border-radius: 2px; +} .actionType, .actionType:hover{ text-align: center; @@ -1387,7 +1451,7 @@ ul.package-contributers{ } .actionType h3{ text-transform: uppercase; - font-size: 14px; + font-size: 13px; font-weight: bold; } .actionType p{ @@ -1888,9 +1952,8 @@ padding-left: 20px !important; margin-top: 6px; } .package-view-button .btn{ - padding: 6px 12px; - border-radius: 2px; - font-weight: bold; + padding: 6px 21px; + border-radius: 18px; } .package-view-button .btn:hover{ opacity: .9; @@ -2052,6 +2115,18 @@ padding-left: 20px !important; color: #1B3E6F; transition: all 250ms ease-out; } +.label-input input:focus{ + border-bottom: solid 1px #1B3E6F; + background: transparent !important; + -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); + text-shadow: none; +} +.label-input input:disabled{ + background: #fff; + opacity: .5; +} .label-input input[type=radio]{ width: auto; } @@ -2202,6 +2277,9 @@ hr{ .action-button.save{ color: #1273EB !important; } +.action-button.save:hover{ + opacity: .9; +} .action-button.delete i{ color: #BABBC3; } @@ -2242,6 +2320,7 @@ hr{ padding: .7rem 1.5rem !important; } .modal-footer{ + padding-top: 0 !important; border-top: 0 !important; } .modal-footer .btn{ @@ -2315,9 +2394,11 @@ hr{ font-size: 12px; } .create-title{ - margin-bottom: 15px; + margin-bottom: 0; font-size: 14px; font-weight: bold; + /* text-transform: uppercase; */ + line-height: 32px; } .folder-upload-text{ margin-top: 10px; @@ -2354,6 +2435,10 @@ hr{ font-weight: normal; font-size: 13px; } +.upload-table .table thead th:first-child{ + width: 24px; + padding-right: 0; +} .upload-table tr:last-child th{ border-bottom: 0 !important; } @@ -2456,6 +2541,11 @@ hr{ .template-mapping-accordion{ width: 100%; } +.template-mapping-accordion .accordian-title{ + color: #C3CDDB !important; + font-size: 12px !important; + font-weight: normal !important; +} .card{ border-radius: 2px; border: 0; @@ -2484,6 +2574,9 @@ hr{ margin-bottom: 0px !important; border-top: 1px solid #ECEDF2 !important; } +.accordion > .card > .card-header{ + padding: 0 !important; +} .template-mapping-accordion .card{ margin-bottom: 25px !important; } @@ -2625,7 +2718,8 @@ padding: 0 10px 0 0; color: #1B3E6F; font-size: 10px; font-weight: bold; - display: inline-table; + display: inline-block; + vertical-align: top; margin-top: 20px; margin-bottom: 10px; margin:15px 30px 20px; @@ -2654,6 +2748,15 @@ padding: 0 10px 0 0; color:#C3CDDB ; font-size: 8px; } +.mapping-source-load.hover-disable{ + opacity: .5; +} +.mapping-source-load.hover-disable:hover span{ + color: #1B3E6F; +} +.mapping-source-load.hover-disable:hover i{ + background: transparent; +} .template-mapping-list{ background: #F4F9FE; border: 1px solid #E9F3FF; @@ -2664,12 +2767,13 @@ padding: 0 10px 0 0; margin-bottom: 20px; color: #1B3E6F; } -.template-mapping-list:hover, .template-mapping-list.active { - background: #1B3E6F; +.template-mapping-list:hover, +.template-mapping-list.active { + /* background: #1B3E6F; */ text-decoration: none; - color: #fff !important; + /* color: #fff !important; */ border-radius: 4px; - + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.3); } .template-mapping-list:hover{ opacity: .9; @@ -2677,13 +2781,30 @@ padding: 0 10px 0 0; .template-mapping-list span{ background: #fff; + border: solid 1px #E9F3FF; color: #2A81ED; font-size: 8px; float: right; border-radius: 50px; - padding: 4px 10px; + padding: 3px 10px; margin-left: 5px; - +} +.template-mapping-list:hover span{ + display: none; +} +.deleteTemplate{ + display: none; + position: absolute; + right: 21px; + top: 7px; + border: 0; + background: transparent; +} +.deleteTemplate i{ + color: #FF6469; +} +.template-mapping-list:hover .deleteTemplate{ + display: inline; } .max-height-list{ max-height: 232px; @@ -2691,11 +2812,12 @@ padding: 0 10px 0 0; overflow: auto; } .create-template-mapping-button{ -background: #C3CDDB; -border-radius: 50px; -font-size: 12px; -padding: 10px 20px; -margin-bottom: 20px; + background: #C3CDDB; + border-radius: 50px; + font-size: 12px; + font-weight: bold; + padding: 10px 20px; + margin-bottom: 20px; display: inline-block; cursor: pointer; } @@ -2780,13 +2902,11 @@ margin-right: 5px; height: 20px; } .template-mapping-action{ - width: 100%; - text-align: center; - margin-bottom: 30px; + margin-bottom: 20px; } .template-mapping-action button{ border-radius: 50px; - padding: 6px 20px; + padding: 4px 20px; font-size: 14px; } .template-mapping-action .btn-primary{ @@ -2820,7 +2940,7 @@ margin-right: 5px; margin-bottom: 6px; color: #1B3E6F !important; font-size: 13px; - font-weight: bold; + /* font-weight: bold; */ } .dataTables_filter input{ |