diff options
author | 2020-10-19 13:06:09 +0000 | |
---|---|---|
committer | 2020-10-19 13:06:09 +0000 | |
commit | 75946c76fe61ff7f773288335eea314efa245fad (patch) | |
tree | 8e8e3ea345a4b8cc0ed2b9acd1c99a4b9dd74c2e /cds-ui/designer-client/src | |
parent | 2798e38a91475a7853f5c66840bf312f82ee9525 (diff) | |
parent | b72d631ca318edcc48629c896e318b4da41a6dbd (diff) |
Merge "Apply style to mat-table in Mapping"
Diffstat (limited to 'cds-ui/designer-client/src')
2 files changed, 137 insertions, 102 deletions
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 be84e7127..70b1644ab 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 @@ -130,33 +130,32 @@ </div> <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2"> - - <mat-form-field> - <mat-label>Filter</mat-label> - <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input> - </mat-form-field> - - <div class="btn-group mapping-editBar" role="group"> - <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> - <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" - id="customCheck1" - [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> - <label class="custom-control-label" for="customCheck1"></label> - </div> - <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" - tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> - <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()" - tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button> - <div style="line-height: 35px;font-size: 10px;"> - <span>{{selectedProps.size}} selected </span> - <span>({{resourceDictionaryRes.length}} attributes in total)</span> - </div> - </div> - <div class="mat-elevation-z8"> + <!--Edit Buttons--> + <div class="btn-group mapping-editBar" role="group"> + <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> + <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" + id="customCheck1" + [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> + <label class="custom-control-label" for="customCheck1"></label> + </div> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" + tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" + (click)="removeProps()" tooltip="Remove" placement="bottom"><i + class="icon-delete-sm"></i></button> + <div style="line-height: 35px;font-size: 10px;"> + <span>{{selectedProps.size}} selected </span> + <span>({{resourceDictionaryRes.length}} attributes in total)</span> + </div> + </div> + <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> + <mat-form-field class="tableFilter float-right"> + <mat-label>Filter</mat-label> + <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input> + </mat-form-field> <table mat-table [dataSource]="initDataSource" matSort> - - <!-- Required Column --> + <!-- select Column --> <ng-container matColumnDef="select"> <th mat-header-cell *matHeaderCellDef> </th> <td mat-cell *matCellDef="let dict"> @@ -180,8 +179,7 @@ </div> </td> </ng-container> - - <!-- Name Column --> + <!-- Template Input Column --> <ng-container matColumnDef="Template Input"> <th mat-header-cell *matHeaderCellDef> Template Input </th> <td mat-cell *matCellDef="let dict"> @@ -193,19 +191,17 @@ </div> </td> </ng-container> - - <!-- Weight Column --> + <!-- Parameter Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - <!-- Weight Column --> + <!-- Dictionary Name Column --> <ng-container matColumnDef="Dictionary Name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Dictionary Source Column --> <ng-container matColumnDef="dictionary-source"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th> <td mat-cell *matCellDef="let dict"> @@ -217,23 +213,19 @@ </select> </td> </ng-container> - - - <!-- Symbol Column --> + <!-- Dependancies Column --> <ng-container matColumnDef="dependencies"> <th mat-header-cell *matHeaderCellDef> Dependancies </th> <td mat-cell *matCellDef="let dict"> <input type="text" class="form-control" [ngModel]="getValue(dict.name)"> </td> </ng-container> - - <!-- Symbol Column --> + <!-- Default Column --> <ng-container matColumnDef="default"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th> <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.default }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Velocity Column --> <ng-container matColumnDef="Velocity"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th> <td mat-cell *matCellDef="let dict"> @@ -244,43 +236,34 @@ </ng-container> - - <!-- Symbol Column --> + <!-- Data Type Column --> <ng-container matColumnDef="Data Type"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th> <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.type }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Entry Schema Column --> <ng-container matColumnDef="Entry Schema"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th> <td mat-cell *matCellDef="let dict"> {{dict.definition?.property['entry_schema']}} </td> </ng-container> - <tr mat-header-row *matHeaderRowDef="initColumn"></tr> <tr mat-row *matRowDef="let row; columns: initColumn;"></tr> - <!-- Row shown when there is no matching data. --> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> </tr> </table> - - <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> </div> </div> <!------ View Table-------> <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> - - - <mat-form-field> - <mat-label>Filter</mat-label> - <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> - </mat-form-field> - <div class="mat-elevation-z8"> + <mat-form-field class="tableFilter float-right"> + <mat-label>Filter</mat-label> + <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> + </mat-form-field> + <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> <table mat-table [dataSource]="dataSource" matSort> - <!-- Required Column --> <ng-container matColumnDef="Required"> <th mat-header-cell *matHeaderCellDef> Required </th> @@ -289,8 +272,7 @@ <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg"> </td> </ng-container> - - <!-- Name Column --> + <!-- Template Input Column --> <ng-container matColumnDef="Template Input"> <th mat-header-cell *matHeaderCellDef> Template Input </th> <td mat-cell *matCellDef="let dict"> @@ -298,19 +280,17 @@ <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg"> </td> </ng-container> - - <!-- Weight Column --> + <!-- Parameter Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - <!-- Weight Column --> + <!-- Dictionary Name Column --> <ng-container matColumnDef="Dictionary Name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Dictionary Source Column --> <ng-container matColumnDef="dictionary-source"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th> <td mat-cell *matCellDef="let dict"> @@ -318,23 +298,19 @@ disabled> </td> </ng-container> - - - <!-- Symbol Column --> + <!-- Dependancies Column --> <ng-container matColumnDef="dependencies"> <th mat-header-cell *matHeaderCellDef> Dependancies </th> <td mat-cell *matCellDef="let dict"> <input type="text" class="form-control" [value]="dict['dependencies']" disabled> </td> </ng-container> - - <!-- Symbol Column --> + <!-- default Column --> <ng-container matColumnDef="default"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th> <td mat-cell *matCellDef="let dict"> {{dict['property']['default']}} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Velocity Column --> <ng-container matColumnDef="Velocity"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th> <td mat-cell *matCellDef="let dict"> @@ -347,39 +323,27 @@ </ng-container> - - <!-- Symbol Column --> + <!-- Data Type Column --> <ng-container matColumnDef="Data Type"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th> <td mat-cell *matCellDef="let dict"> {{ dict['property']['type'] }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Entry Schema Column --> <ng-container matColumnDef="Entry Schema"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th> <td mat-cell *matCellDef="let dict"> {{dict['property']['entry_schema']}} </td> </ng-container> - <tr mat-header-row *matHeaderRowDef="resColumns"></tr> <tr mat-row *matRowDef="let row; columns: resColumns;"></tr> - <!-- Row shown when there is no matching data. --> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> </tr> </table> - - <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> </div> - </div> - - </div> - - </div> - </div> </div> diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 8d4ee8e29..6c315ea3a 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -21,6 +21,9 @@ body{ .custom-control-input:checked ~ .custom-control-label::before{ border-color: transparent !important; } +.btn{ + transition: all .2s ease-out !important; +} .btn-outline-danger{ background: #fff !important; border: solid 1px #ECEDF2 !important; @@ -29,6 +32,10 @@ body{ .btn:disabled:hover{ cursor: default; } +.btn.disabled, +.btn:disabled{ + opacity: .5 !important; +} .custom-control-label::before{ border: solid 1px #C3CDDB !important; border-radius: 0 !important; @@ -3039,7 +3046,16 @@ padding: 0 10px 0 0; background: transparent; } .mapping-editBar{ - margin-bottom: 1rem; + margin-top: 6px; +} +.mapping-editBar .selectedAttributes{ + margin-left: 6px; + line-height: 35px; + font-size: 10px; + font-weight: bold; +} +.selectedAttributes .totalAtt{ + color: #C4CEDB; } .mapping-editBar .custom-checkbox, .mapping-editBar .btn{ @@ -3062,11 +3078,11 @@ padding: 0 10px 0 0; .mapping-editBar .btn i{ color: #1B3E6F; font-size: 18px; - opacity: .5; + /* opacity: .5; */ } .mapping-editBar .custom-checkbox:hover, .mapping-editBar .btn:hover i{ - opacity: 1; + opacity: .8; } .template-mapping-list{ background: #F4F9FE; @@ -3239,10 +3255,7 @@ margin-right: 5px; .template-mapping-action .btn-outline-secondary{ background:#fff !important ; border-color:#ECEDF2 !important ; - color: #C3CDDB !important ; -} -.template-mapping-action .btn-outline-secondary:hover{ - color: #1B3E6F !important; + color: #1B3E6F !important ; } .table-container{ width: 100%; @@ -3267,14 +3280,63 @@ margin-right: 5px; font-size: 13px; /* font-weight: bold; */ } - +/*Mat Table*/ +.mat-elevation-z8{ + box-shadow: none !important; +} +.mat-table, +.mat-paginator{ + background: #fff !important; + color: #1B3E6F !important; +} +.mat-table{ + border-top: solid 1px #ECEDF2; +} +.mat-paginator{ + /* display: inline-block; */ + width: 36%; + float: right; +} +.mat-input-element{ + font-size: 13px !important; + line-height: 20px !important; +} +tr.mat-header-row{ + background: #f4f9fe; + border-bottom: 1px solid #ecedf2; +} +.mat-sort-header-button{ + text-align: left; +} +.mat-cell, .mat-footer-cell{ + color: #1B3E6F !important; +} +.mat-form-field-appearance-legacy .mat-form-field-wrapper{ + padding-bottom: 0; +} +.mat-paginator-page-size-select .mat-form-field-wrapper{ + padding-bottom: 14px; +} +.mat-form-field-infix, .dataTables_filter input{ color: #1B3E6F; - background: url(../src/assets/img/icon-search.svg) 9px center no-repeat; - padding: 4px 9px 4px 24px !important; - border: solid 1px #ECEDF2; + padding: 4px 9px !important; + border: solid 1px #ECEDF2 !important; border-radius: 4px; } +.mat-focused .mat-form-field-infix{ + border-bottom: 0 !important; +} +.tableFilter{ + margin-top: 9px; +} +.tableFilter .mat-form-field-wrapper{ + padding-bottom: 0; +} +.tableFilter .mat-form-field-infix{ + background: url(../src/assets/img/icon-search.svg) 9px center no-repeat; + padding-left: 24px !important; +} .dataTables_filter input:focus{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } @@ -3290,11 +3352,25 @@ margin-right: 5px; padding-left: 20px !important; } .mapping-table thead th{ + padding: 4px 20px 4px 0 !important; border-bottom-color: #ECEDF2 !important; + color: #1B3E6F; + font-weight: bold; + font-size: 12px; } .mapping-table tbody tr:hover{ background-color: #F4F9FE !important; } +.mat-form-field-label{ + color: #1B3E6F !important; + font-size: 13px !important; + padding-left: 26px; + line-height: 20px !important; +} +.mat-select-value, +.mat-select-arrow{ + color: #1B3E6F !important; +} .mapping-table th{ padding-top: 10px !important; padding-bottom: 10px !important; @@ -3307,6 +3383,9 @@ table.dataTable.no-footer{ margin-bottom: 9px; border-bottom: solid 1px #ECEDF2 !important; } +.mat-paginator-container{ + padding-right: 0; +} .dataTables_info{ padding-top: 12px; color: #1B3E6F !important; @@ -3520,11 +3599,3 @@ for simplicity .mat-icon-button[disabled]{ color: rgba(224, 232, 242, .5) !important; } - - - - - - - - |