Skip to content

Commit 77aad54

Browse files
bodnaraHejdaJakub
bodnara
authored and
HejdaJakub
committed
feat: Migration to MDC
* radio - no changes * select - changed with to fit whole text * slide toggle - no changes * slider - not used * snack bar - not used * table - added bottom border to last row * tabs - removed stretch and added bottom border to header
1 parent 1b29d93 commit 77aad54

File tree

27 files changed

+100
-45
lines changed

27 files changed

+100
-45
lines changed

‎apps/admin-gui/src/_styles.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1691,3 +1691,11 @@ table .mdc-text-field--outlined {
16911691
.mat-mdc-slide-toggle label {
16921692
padding-top: 0 !important;
16931693
}
1694+
1695+
.mat-mdc-tab-header {
1696+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
1697+
}
1698+
1699+
.mdc-data-table__cell {
1700+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
1701+
}

‎apps/admin-gui/src/app/admin/pages/admin-page/admin-searcher/admin-searcher.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h1 class="page-subtitle">{{'ADMIN.SEARCHER.TITLE' | translate}}</h1>
2-
<mat-tab-group (selectedIndexChange)="tabChanged($event)">
2+
<mat-tab-group mat-stretch-tabs="false" (selectedIndexChange)="tabChanged($event)">
33
<mat-tab class="mb-2">
44
<ng-template matTabLabel>
55
{{'ADMIN.SEARCHER.TAB_USERS' | translate}}

‎apps/admin-gui/src/app/facilities/pages/facility-detail-page/facility-attributes/facility-attributes.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div>
22
<h1 class="page-subtitle">{{'FACILITY_DETAIL.SETTINGS.ATTRIBUTES.TITLE' | translate}}</h1>
3-
<mat-tab-group>
3+
<mat-tab-group mat-stretch-tabs="false">
44
<mat-tab>
55
<ng-template matTabLabel>
66
{{'FACILITY_DETAIL.ENTITY' | translate}}

‎apps/admin-gui/src/app/facilities/pages/resource-detail-page/resource-attributes/resource-attributes.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div>
22
<h1 class="page-subtitle">{{'RESOURCE_DETAIL.SETTINGS.ATTRIBUTES.TITLE' | translate}}</h1>
3-
<mat-tab-group>
3+
<mat-tab-group mat-stretch-tabs="false">
44
<mat-tab>
55
<ng-template matTabLabel>
66
{{'RESOURCE_DETAIL.ENTITY' | translate}}

‎apps/admin-gui/src/app/shared/components/dialogs/add-edit-notification-dialog/add-edit-notification-dialog.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h1 mat-dialog-title>{{'DIALOGS.NOTIFICATIONS_ADD_EDIT_MAIL.TITLE_EDIT' | transl
1717
>{{'DIALOGS.NOTIFICATIONS_ADD_EDIT_MAIL.INVALID_NOTIFICATION' | translate}}</perun-web-apps-alert
1818
>
1919
</div>
20-
<mat-tab-group color="primary">
20+
<mat-tab-group color="primary" mat-stretch-tabs="false">
2121
<mat-tab label="{{'DIALOGS.NOTIFICATIONS_ADD_EDIT_MAIL.BASIC_SETTINGS' | translate}}">
2222
<div class="mt-3 d-flex">
2323
<span class="w-25 m-auto font-weight-bold"
@@ -122,7 +122,7 @@ <h1 mat-dialog-title>{{'DIALOGS.NOTIFICATIONS_ADD_EDIT_MAIL.TITLE_EDIT' | transl
122122
<perun-web-apps-alert alert_type="info" *ngIf="!htmlAuth">
123123
{{'DIALOGS.NOTIFICATIONS_ADD_EDIT_MAIL.FORMAT_INFO_NOT_AUTHORIZED' | translate}}
124124
</perun-web-apps-alert>
125-
<mat-tab-group color="primary">
125+
<mat-tab-group color="primary" mat-stretch-tabs="false">
126126
<mat-tab *ngFor="let format of formats" [disabled]="format === 'html' && !htmlAuth">
127127
<ng-template mat-tab-label>
128128
<span [ngClass]="{'disabled-label': format === 'html' && !htmlAuth}">

‎apps/admin-gui/src/app/shared/components/dialogs/assign-service-to-resource-dialog/assign-service-to-resource-dialog.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div *perunWebAppsLoader="loading; indicator: spinner">
66
<h1 mat-dialog-title>{{'DIALOGS.ASSIGN_SERVICE_TO_RESOURCE.TITLE' | translate}}</h1>
77
<div mat-dialog-content>
8-
<mat-tab-group (selectedTabChange)="tabChanged()">
8+
<mat-tab-group (selectedTabChange)="tabChanged()" mat-stretch-tabs="false">
99
<mat-tab
1010
[disabled]="loading"
1111
label="{{'DIALOGS.ASSIGN_SERVICE_TO_RESOURCE.SELECT_SERVICE' | translate}}">

‎apps/admin-gui/src/app/shared/components/dialogs/audit-message-detail-dialog/audit-message-detail-dialog.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h1 mat-dialog-title>
77
{{'DIALOGS.AUDIT_MESSAGE_DETAIL.ACTOR' | translate}}: {{actor}},
88
{{'DIALOGS.AUDIT_MESSAGE_DETAIL.CREATED_AT' | translate}}: {{createdAt}}
99
</div>
10-
<mat-tab-group (selectedTabChange)="tabChanged($event)">
10+
<mat-tab-group (selectedTabChange)="tabChanged($event)" mat-stretch-tabs="false">
1111
<mat-tab>
1212
<ng-template matTabLabel>
1313
{{'DIALOGS.AUDIT_MESSAGE_DETAIL.OBJECTS' | translate}}

‎apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-dialog.component.html

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ <h1 mat-dialog-title>
88
{{this.applicationFormItem.shortname}}
99
</h1>
1010
<div class="dialog-container" mat-dialog-content>
11-
<mat-tab-group color="primary">
11+
<mat-tab-group color="primary" mat-stretch-tabs="false">
1212
<mat-tab label="{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.BASIC_SETTINGS' | translate}}">
1313
<app-edit-application-form-item-line
1414
[description]="'DIALOGS.APPLICATION_FORM_EDIT_ITEM.SHORT_NAME_DESCRIPTION' | translate"
@@ -29,7 +29,7 @@ <h1 mat-dialog-title>
2929
<mat-checkbox
3030
[ngModel]="this.applicationFormItem.applicationTypes.includes('INITIAL')"
3131
(change)="onChangingType('INITIAL')"
32-
class="mr-2">
32+
class="me-2">
3333
{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.INITIAL' | translate}}
3434
</mat-checkbox>
3535
<mat-checkbox
@@ -223,20 +223,18 @@ <h1 mat-dialog-title>
223223

224224
<div
225225
*ngIf="isApplicationFormItemOfType(['RADIO', 'COMBOBOX', 'CHECKBOX', 'SELECTIONBOX'])">
226-
<div class="font-weight-bold">
227-
{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.OPTIONS' | translate}}:
228-
</div>
226+
<div class="fw-bold">{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.OPTIONS' | translate}}:</div>
229227
<div class="text-muted font-italic">
230228
{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.OPTIONS_DESCRIPTION' | translate}}
231229
</div>
232230

233231
<div class="d-flex mt-2 mb-2">
234-
<button (click)="sortOptionsAZ(lang)" class="ml-auto mr-2" mat-flat-button>
232+
<button (click)="sortOptionsAZ(lang)" class="ms-auto me-2" mat-flat-button>
235233
<i class="material-icons">arrow_downward</i>
236234
{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.SORT_BY_LABEL_AZ' | translate}}
237235
</button>
238236

239-
<button (click)="sortOptionsZA(lang)" class="mr-auto" mat-flat-button>
237+
<button (click)="sortOptionsZA(lang)" class="me-auto" mat-flat-button>
240238
<i class="material-icons">arrow_upward</i>
241239
{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.SORT_BY_LABEL_ZA' | translate}}
242240
</button>
@@ -260,15 +258,15 @@ <h1 mat-dialog-title>
260258
</button>
261259
</div>
262260

263-
<button (click)="addOption(lang)" class="mr-2" color="accent" mat-flat-button>
261+
<button (click)="addOption(lang)" class="me-2" color="accent" mat-flat-button>
264262
{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.ADD_OPTION' | translate}}
265263
</button>
266264
</div>
267265
</mat-tab>
268266
</mat-tab-group>
269267
</div>
270268
<div class="d-flex mt-auto" mat-dialog-actions>
271-
<button (click)="cancel()" class="ml-auto mt-auto" mat-flat-button>
269+
<button (click)="cancel()" class="ms-auto mt-auto" mat-flat-button>
272270
{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.CANCEL_BUTTON' | translate}}
273271
</button>
274272
<div
@@ -279,7 +277,7 @@ <h1 mat-dialog-title>
279277
matTooltip="{{'DIALOGS.APPLICATION_FORM_EDIT_ITEM.SUBMIT_BUTTON_DISABLED_TOOLTIP' | translate}}">
280278
<button
281279
mat-flat-button
282-
class="ml-2 mt-auto"
280+
class="ms-2 mt-auto"
283281
color="accent"
284282
data-cy="edit-form-item-button-dialog"
285283
[disabled]="loading || (applicationFormItem.required &&

‎apps/admin-gui/src/app/shared/components/dialogs/edit-email-footer-dialog/edit-email-footer-dialog.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ <h1 mat-dialog-title>{{'DIALOGS.NOTIFICATIONS_EDIT_FOOTER.TITLE' | translate}}</
88
<perun-web-apps-alert alert_type="info" *ngIf="plainEdithAuth && !htmlEditAuth">
99
{{'DIALOGS.NOTIFICATIONS_EDIT_FOOTER.FORMAT_HTML_NOT_AUTHORIZED' | translate}}
1010
</perun-web-apps-alert>
11-
<mat-tab-group color="primary">
11+
<mat-tab-group color="primary" mat-stretch-tabs="false">
1212
<mat-tab *ngFor="let format of formats" [disabled]="format === 'html' && !htmlEditAuth">
1313
<ng-template mat-tab-label>
1414
<span [ngClass]="{'disabled-label': format === 'html' && !htmlEditAuth}">

‎apps/admin-gui/src/app/shared/components/managers-page/managers-page.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ <h1 class="page-subtitle">
22
{{'SHARED.COMPONENTS.MANAGERS_PAGE.TITLE' | translate}}
33
</h1>
44

5-
<mat-tab-group (selectedTabChange)="tabChanged($event)">
5+
<mat-tab-group (selectedTabChange)="tabChanged($event)" mat-stretch-tabs="false">
66
<mat-tab>
77
<ng-template matTabLabel>
88
{{'SHARED.COMPONENTS.MANAGERS_PAGE.USER' | translate}}

‎apps/admin-gui/src/app/users/pages/user-detail-page/user-accounts/user-accounts.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ <h1 class="page-title">{{'USER_DETAIL.ACCOUNTS.TITLE' | translate}}</h1>
88
(voSelected)="loadMember($event)">
99
</perun-web-apps-vo-search-select>
1010
</div>
11-
<mat-tab-group *ngIf="!(initLoading || vos.length === 0)">
11+
<mat-tab-group *ngIf="!(initLoading || vos.length === 0)" mat-stretch-tabs="false">
1212
<mat-tab>
1313
<ng-template matTabLabel>
1414
{{'USER_DETAIL.ACCOUNTS.STATUS' | translate}}

‎apps/admin-gui/src/app/users/pages/user-detail-page/user-attributes/user-attributes.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h1 class="page-subtitle">{{'USER_DETAIL.SETTINGS.ATTRIBUTES.TITLE' | translate}}</h1>
2-
<mat-tab-group>
2+
<mat-tab-group mat-stretch-tabs="false">
33
<mat-tab class="mb-2">
44
<ng-template matTabLabel>
55
{{'ADMIN_USER.ENTITY' | translate}}

‎apps/admin-gui/src/app/users/pages/user-detail-page/user-bans/user-bans.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ <h1 class="page-subtitle">
22
{{'USER_DETAIL.BANS.TITLE' | translate}}
33
</h1>
44

5-
<mat-tab-group class="mt-3" (selectedTabChange)="refresh($event)">
5+
<mat-tab-group class="mt-3" (selectedTabChange)="refresh($event)" mat-stretch-tabs="false">
66
<mat-tab>
77
<ng-template matTabLabel>
88
{{'USER_DETAIL.BANS.VO' | translate}}

‎apps/admin-gui/src/app/users/pages/user-detail-page/user-overview/user-overview.component.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,20 @@ <h1 class="page-subtitle">{{'USER_DETAIL.OVERVIEW.GENERAL_SETTINGS' | translate}
66
</mat-card-title>
77
</mat-card-header>
88
<mat-card-content>
9-
<table [dataSource]="mailDataSource" class="w-100" mat-table>
9+
<table [dataSource]="mailDataSource" mat-table>
1010
<ng-container matColumnDef="name">
1111
<th *matHeaderCellDef mat-header-cell></th>
1212
<td *matCellDef="let attribute" class="fw-bold" mat-cell>{{attribute.displayName}}:</td>
1313
</ng-container>
1414
<ng-container matColumnDef="value">
1515
<th *matHeaderCellDef mat-header-cell></th>
1616
<td *matCellDef="let attribute" mat-cell>
17-
{{attribute.value}}
18-
<button (click)="changeEmail()" class="ms-3" mat-icon-button>
19-
<mat-icon>edit</mat-icon>
20-
</button>
17+
<div class="d-flex align-items-center">
18+
{{attribute.value}}
19+
<button (click)="changeEmail()" class="ms-3" mat-icon-button>
20+
<mat-icon>edit</mat-icon>
21+
</button>
22+
</div>
2123
</td>
2224
</ng-container>
2325

‎apps/admin-gui/src/app/vos/pages/group-detail-page/group-attributes/group-attributes.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div>
22
<h1 class="page-subtitle">{{'GROUP_DETAIL.SETTINGS.ATTRIBUTES.TITLE' | translate}}</h1>
3-
<mat-tab-group>
3+
<mat-tab-group mat-stretch-tabs="false">
44
<mat-tab>
55
<ng-template matTabLabel>
66
{{'GROUP_DETAIL.ENTITY' | translate}}

‎apps/admin-gui/src/app/vos/pages/member-detail-page/member-attributes/member-attributes.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div>
22
<h1 class="page-subtitle">{{'MEMBER_DETAIL.SETTINGS.ATTRIBUTES.TITLE' | translate}}</h1>
3-
<mat-tab-group>
3+
<mat-tab-group mat-stretch-tabs="false">
44
<mat-tab>
55
<ng-template matTabLabel>
66
{{'MEMBER_DETAIL.ENTITY' | translate}}

‎apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-resources/vo-resources-states/vo-resources-states.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ <h1 class="page-subtitle">{{'VO_DETAIL.RESOURCES.STATES.TITLE' | translate}}</h1
33
<mat-tab-group
44
(selectedIndexChange)="selectedIndex = $event"
55
[selectedIndex]="selectedIndex"
6-
animationDuration="0ms">
6+
animationDuration="0ms"
7+
mat-stretch-tabs="false">
78
<mat-tab>
89
<ng-template mat-tab-label>
910
{{'VO_DETAIL.RESOURCES.STATES.ERROR_RESOURCES' | translate}}

‎apps/password-reset/src/_styles.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,3 +165,20 @@ mat-form-field mat-icon {
165165
white-space: nowrap !important;
166166
letter-spacing: normal;
167167
}
168+
169+
// Proper mat icon inside button
170+
.mat-mdc-outlined-button > .mat-icon {
171+
margin-left: 0 !important;
172+
margin-right: 0 !important;
173+
height: 1.5rem !important;
174+
width: 1.5rem !important;
175+
font-size: 1.5rem !important;
176+
}
177+
178+
.mat-mdc-tab-header {
179+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
180+
}
181+
182+
.mdc-data-table__cell {
183+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
184+
}

‎apps/publications/src/_styles.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -445,3 +445,11 @@ mat-form-field mat-icon {
445445
.mat-mdc-slide-toggle label {
446446
padding-top: 0 !important;
447447
}
448+
449+
.mat-mdc-tab-header {
450+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
451+
}
452+
453+
.mdc-data-table__cell {
454+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
455+
}

‎apps/publications/src/app/pages/create-publication-page/create-single-publication-page/create-single-publication-page.component.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,10 @@ <h5 class="ms-auto me-auto mt-1 fw-bold">
127127
</div>
128128
</perun-web-apps-alert>
129129

130-
<mat-tab-group *ngIf="!innerLoading && !duplicateCheck" #similarPublicationTabs>
130+
<mat-tab-group
131+
*ngIf="!innerLoading && !duplicateCheck"
132+
#similarPublicationTabs
133+
mat-stretch-tabs="false">
131134
<mat-tab>
132135
<ng-template matTabLabel>{{'CREATE_SINGLE_PUBLICATION.CHECK' | translate}}</ng-template>
133136
<ng-template matTabContent>

‎apps/user-profile/src/_styles.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,3 +335,20 @@ mat-list-item .mat-mdc-form-field-subscript-wrapper {
335335
.mat-mdc-slide-toggle label {
336336
padding-top: 0 !important;
337337
}
338+
339+
// Proper mat icon inside button
340+
.mat-mdc-outlined-button > .mat-icon {
341+
margin-left: 0 !important;
342+
margin-right: 0 !important;
343+
height: 1.5rem !important;
344+
width: 1.5rem !important;
345+
font-size: 1.5rem !important;
346+
}
347+
348+
.mat-mdc-tab-header {
349+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
350+
}
351+
352+
.mdc-data-table__cell {
353+
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
354+
}

‎libs/perun/components/src/lib/attribute-rights-tab-group/attribute-rights-tab-group.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mat-tab-group>
1+
<mat-tab-group mat-stretch-tabs="false">
22
<mat-tab *ngFor="let action of actionTabs">
33
<ng-template matTabLabel>
44
{{'SHARED_LIB.PERUN.COMPONENTS.ATTRIBUTE_RIGHTS.' + action | translate}}

‎libs/perun/components/src/lib/audit-log-search-select/audit-log-search-select.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="w-450">
1+
<div class="w-550">
22
<perun-web-apps-entity-search-select
33
[entities]="auditLogs"
44
[searchFunction]="searchFunction"

‎libs/perun/components/src/lib/audit-log-search-select/audit-log-search-select.component.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.w-450 {
2-
width: 450px;
1+
.w-550 {
2+
width: 550px;
33
}

‎libs/perun/components/src/lib/entity-search-select/entity-search-select.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,6 @@
5555
<perun-web-apps-deselect-button
5656
class="ms-2"
5757
*ngIf="visibleDeselectButton"
58-
(deselect)="deselectEvent()"></perun-web-apps-deselect-button>
58+
(deselect)="deselectEvent()">
59+
</perun-web-apps-deselect-button>
5960
</div>

‎libs/perun/facility-services-config/src/lib/service-configurator/service-configurator.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--The min-height is a hack to prevent page scrolling on tab switching-->
22
<div class="min-height">
3-
<mat-tab-group [dynamicHeight]="true" [(selectedIndex)]="showTab">
3+
<mat-tab-group [dynamicHeight]="true" [(selectedIndex)]="showTab" mat-stretch-tabs="false">
44
<mat-tab [label]="facility.name + ' (facility)'">
55
<button mat-flat-button class="me-2 mt-3" color="accent" (click)="onAddAttFacility()">
66
{{'SHARED_LIB.PERUN.SERVICES_CONFIGURATIONS.ADD' | translate}}

‎package-lock.json

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)