Skip to content

Commit bcdcd8e

Browse files
Mutugiiidogi
Mutugiii
and
dogi
authored
all: smoother tables responsive layout handling (fixes #9777) (#9846)
Co-authored-by: dogi <dogi@users.noreply.github.com>
1 parent fc26e51 commit bcdcd8e

23 files changed

Lines changed: 141 additions & 95 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "planet",
33
"license": "AGPL-3.0",
4-
"version": "0.22.50",
4+
"version": "0.22.51",
55
"myplanet": {
66
"latest": "v0.53.33",
77
"min": "v0.51.90"

‎src/app/feedback/feedback.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
</mat-toolbar>
6868

6969
<div class="view-container view-full-height view-table">
70-
<mat-table #table [dataSource]="feedback" matSort [matSortDisableClear]="true">
70+
<mat-table #table class="responsive-table" [dataSource]="feedback" matSort [matSortDisableClear]="true">
7171
<!-- Title Column -->
7272
<ng-container matColumnDef="title">
7373
<mat-header-cell *matHeaderCellDef mat-sort-header="title" i18n>Title</mat-header-cell>

‎src/app/health/health.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ <h4 class="primary-text-color" i18n>Notes</h4>
100100
<ng-container *ngIf="events.length > 0">
101101
<h3 class="full-width examinations-header" i18n>Examinations</h3>
102102
<div class="full-width table-container" #examsTable>
103-
<mat-table [dataSource]="eventTable" *ngIf="events.length > 0">
103+
<mat-table class="responsive-table" [dataSource]="eventTable" *ngIf="events.length > 0">
104104
<ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column" [sticky]="column === 'label'">
105105
<mat-header-cell *matHeaderCellDef class="table-column" [ngClass]="{ 'cursor-pointer': column !== 'label' }" (click)="examClick(column)">
106106
<div class="header-items">

‎src/app/manager-dashboard/reports/myplanet/logs-myplanet.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535
<mat-expansion-panel-header>
3636
<mat-panel-title>{{planet.nameDoc?.name || planet.doc?.name}} ({{planet.children.length}})</mat-panel-title>
3737
</mat-expansion-panel-header>
38-
<planet-myplanet-table dataType="logs" [data]="planet.children"></planet-myplanet-table>
38+
<div class="responsive-table">
39+
<planet-myplanet-table dataType="logs" [data]="planet.children"></planet-myplanet-table>
40+
</div>
3941
<button mat-raised-button color="accent" (click)="exportSingle(planet)" style="margin-right: 2rem;" *ngIf="!isEmpty">
4042
<span i18n>Export</span>
4143
</button>

‎src/app/manager-dashboard/reports/myplanet/reports-myplanet.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
[disableShowAllTime]="isDefaultTimeFilter"
1212
(versionChange)="onVersionChange($event)"
1313
(timeFilterChange)="onTimeFilterChange($event)"
14-
(searchChange)="filterData($event)"
14+
(searchChange)="filterData($event)"
1515
(clear)="clearFilters()"
1616
(resetDateFilter)="resetDateFilter()"
1717
></planet-myplanet-toolbar>
@@ -31,13 +31,15 @@
3131
<mat-expansion-panel-header>
3232
<mat-panel-title>{{planet.nameDoc?.name || planet.doc?.name}} ({{planet.children.length}})</mat-panel-title>
3333
</mat-expansion-panel-header>
34-
<planet-myplanet-table [data]="planet.children"></planet-myplanet-table>
34+
<div class="responsive-table">
35+
<planet-myplanet-table [data]="planet.children"></planet-myplanet-table>
36+
</div>
3537
<button mat-raised-button color="accent" (click)="exportSingle(planet)" style="margin-right: 2rem;" *ngIf="!isEmpty">
3638
<span i18n>Export</span>
3739
</button>
3840
</mat-expansion-panel>
3941
</ng-container>
40-
<planet-loading-spinner *ngIf="isLoading" text="Loading reports..." i18n-text></planet-loading-spinner>
42+
<planet-loading-spinner *ngIf="isLoading" text="Loading reports..." i18n-text></planet-loading-spinner>
4143
<ng-container *ngIf="!isLoading && isEmpty">
4244
<mat-panel-title i18n>No record was found</mat-panel-title>
4345
</ng-container>

‎src/app/manager-dashboard/reports/reports-detail-activities.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mat-table #table [dataSource]="activities" [matSortDisableClear]="true" matSort [matSortActive]="matSortActive" matSortDirection="asc">
1+
<mat-table #table class="responsive-table" [dataSource]="activities" [matSortDisableClear]="true" matSort [matSortActive]="matSortActive" matSortDirection="asc">
22
<ng-container matColumnDef="title">
33
<mat-header-cell *matHeaderCellDef mat-sort-header="title" i18n>Title</mat-header-cell>
44
<mat-cell *matCellDef="let element">{{element?.max?.title}}</mat-cell>

‎src/app/manager-dashboard/reports/reports-detail.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ <h1 class="mat-headline-6" i18n>Courses</h1>
278278
</mat-toolbar>
279279
<planet-loading-spinner *ngIf="comparisonLoading || summaryLoading" text="Loading comparison data..." i18n-text></planet-loading-spinner>
280280
<div *ngIf="!comparisonLoading && !summaryLoading && comparisonTableData.length > 0" class="comparison-table-container">
281-
<table mat-table [dataSource]="comparisonTableData" class="mat-elevation-z2 full-width">
281+
<table mat-table [dataSource]="comparisonTableData" class="mat-elevation-z2 full-width responsive-table">
282282
<ng-container matColumnDef="metric">
283283
<th mat-header-cell *matHeaderCellDef i18n>Metric</th>
284284
<td mat-cell *matCellDef="let row">{{row.metric}}</td>

‎src/app/manager-dashboard/reports/reports-pending.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
<mat-expansion-panel-header>
2020
<mat-panel-title>{{planet.name}} ({{planet.children.length}})</mat-panel-title>
2121
</mat-expansion-panel-header>
22-
<planet-pending-table [data]="planet.children" (requestUpdate)="getCommunityList()"></planet-pending-table>
22+
<div class="responsive-table">
23+
<planet-pending-table [data]="planet.children" (requestUpdate)="getCommunityList()"></planet-pending-table>
24+
</div>
2325
</mat-expansion-panel>
2426
</div>
2527
</div>

‎src/app/manager-dashboard/reports/reports.component.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,23 @@
2020
<mat-panel-title>{{hub.name}}</mat-panel-title>
2121
<a mat-button *ngIf="hub.hubPlanetDoc" class="margin-lr-10" (click)="viewReport(hub.hubPlanetDoc, $event)" i18n>Report</a>
2222
</mat-expansion-panel-header>
23-
<planet-reports-table [planets]="hub.children"></planet-reports-table>
23+
<div class="responsive-table">
24+
<planet-reports-table [planets]="hub.children"></planet-reports-table>
25+
</div>
2426
</mat-expansion-panel>
2527
<mat-expansion-panel>
2628
<mat-expansion-panel-header>
2729
<mat-panel-title i18n>Sandbox</mat-panel-title>
2830
</mat-expansion-panel-header>
29-
<planet-reports-table [planets]="sandboxPlanets"></planet-reports-table>
31+
<div class="responsive-table">
32+
<planet-reports-table [planets]="sandboxPlanets"></planet-reports-table>
33+
</div>
3034
</mat-expansion-panel>
3135
</ng-container>
3236
<ng-template #singleTable>
33-
<planet-reports-table [planets]="sandboxPlanets"></planet-reports-table>
37+
<div class="responsive-table">
38+
<planet-reports-table [planets]="sandboxPlanets"></planet-reports-table>
39+
</div>
3440
</ng-template>
3541
</div>
3642
</div>

‎src/app/manager-dashboard/requests/requests-table.component.html‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mat-table #table [dataSource]="communities" matSort [matSortDisableClear]="true">
1+
<mat-table #table class="responsive-table" [dataSource]="communities" matSort [matSortDisableClear]="true">
22
<ng-container matColumnDef="name">
33
<mat-header-cell *matHeaderCellDef mat-sort-header="name" i18n>Name</mat-header-cell>
44
<mat-cell *matCellDef="let element">{{element.nameDoc?.name || element.doc.name}}</mat-cell>
@@ -18,34 +18,46 @@
1818
<ng-container matColumnDef="action">
1919
<mat-header-cell *matHeaderCellDef i18n>Actions</mat-header-cell>
2020
<mat-cell *matCellDef="let element">
21-
<button mat-raised-button color="primary" (click)="view(element.doc)"><mat-icon>visibility</mat-icon> <span i18n>View</span></button>
21+
<button mat-raised-button color="primary" (click)="view(element.doc)" i18n-matTooltip matTooltip="View" [matTooltipDisabled]="!isMobile">
22+
<mat-icon>visibility</mat-icon>
23+
<label *ngIf="!isMobile" i18n>View</label>
24+
</button>
2225
<ng-container *ngIf="element.doc.registrationRequest === 'accepted'">
23-
<button *ngIf="element.doc.planetType === 'nation'" mat-raised-button color="primary" (click)="getChildPlanet(element.doc.localDomain)" i18n>
24-
Communities
26+
<button *ngIf="element.doc.planetType === 'nation'" mat-raised-button color="primary" (click)="getChildPlanet(element.doc.localDomain)" i18n-matTooltip matTooltip="Communities" [matTooltipDisabled]="!isMobile">
27+
<mat-icon>groups</mat-icon>
28+
<label *ngIf="!isMobile" i18n>Communities</label>
2529
</button>
26-
<button mat-raised-button color="primary" i18n [matMenuTriggerFor]="hubMenu" *ngIf="(hub==='sandbox' && hubs.length > 0) || hubs.length > 1">
27-
{ hub, select,
28-
sandbox {Add to { planetType, select, nation {Network} center {Region} }}
29-
other {Move { planetType, select, nation {Networks} center {Regions} }}
30-
}
30+
<button mat-raised-button color="primary" [matMenuTriggerFor]="hubMenu" *ngIf="(hub==='sandbox' && hubs.length > 0) || hubs.length > 1"
31+
i18n-matTooltip matTooltip="{ hub, select, sandbox {Add to { planetType, select, nation {Network} center {Region} }} other {Move { planetType, select, nation {Networks} center {Regions} }} }"
32+
[matTooltipDisabled]="!isMobile">
33+
<mat-icon>hub</mat-icon>
34+
<label *ngIf="!isMobile" i18n>
35+
{ hub, select,
36+
sandbox {Add to { planetType, select, nation {Network} center {Region} }}
37+
other {Move { planetType, select, nation {Networks} center {Regions} }}
38+
}
39+
</label>
3140
</button>
3241
<mat-menu #hubMenu="matMenu">
3342
<ng-container *ngFor="let h of hubs">
3443
<button *ngIf="h.name!==hub.name" (click)="addHubClick(element.doc.code, h.name)" mat-menu-item>{{h.name}}</button>
3544
</ng-container>
3645
<button (click)="removeHubClick(element.doc.code)" *ngIf="hub!=='sandbox'" mat-menu-item i18n>Sandbox</button>
3746
</mat-menu>
38-
<button mat-raised-button color="primary" (click)="openEditChildNameDialog(element)" i18n>
39-
Edit Name
47+
<button mat-raised-button color="primary" (click)="openEditChildNameDialog(element)" i18n-matTooltip matTooltip="Edit Name" [matTooltipDisabled]="!isMobile">
48+
<mat-icon>edit</mat-icon>
49+
<label *ngIf="!isMobile" i18n>Edit Name</label>
4050
</button>
4151
</ng-container>
4252
<ng-container *ngIf="element.doc.registrationRequest === 'pending'">
43-
<button mat-raised-button color="primary" (click)="updateClick(element, 'accept')">
44-
<mat-icon>link</mat-icon> <span i18n>Accept</span>
53+
<button mat-raised-button color="primary" (click)="updateClick(element, 'accept')" i18n-matTooltip matTooltip="Accept" [matTooltipDisabled]="!isMobile">
54+
<mat-icon>link</mat-icon>
55+
<label *ngIf="!isMobile" i18n>Accept</label>
4556
</button>
4657
</ng-container>
47-
<button mat-raised-button color="warn" (click)="updateClick(element, 'delete')">
48-
<mat-icon>delete</mat-icon> <span i18n>Delete</span>
58+
<button mat-raised-button color="warn" (click)="updateClick(element, 'delete')" i18n-matTooltip matTooltip="Delete" [matTooltipDisabled]="!isMobile">
59+
<mat-icon>delete</mat-icon>
60+
<label *ngIf="!isMobile" i18n>Delete</label>
4961
</button>
5062
</mat-cell>
5163
</ng-container>

0 commit comments

Comments
 (0)