Skip to content

Commit 0624210

Browse files
RyCarpenterRyCarpenter
committed
Switch Nav Bar to new concept and upgrade to Angular 14
1 parent da63887 commit 0624210

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1382
-420
lines changed

‎plugins/sftp/web/projects/main/src/public-api.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const MAGE_WEB_HOOKS: PluginHooks = {
1313
adminTab: {
1414
title: 'SFTP',
1515
icon: {
16-
path: 'assets/drive_file_move_black_24dp.svg'
16+
className: 'fa fa-folder-open'
1717
},
1818
tabContentComponent: ConfigurationComponent
1919
}

‎web-app/admin/src/app/admin/admin-breadcrumb/admin-breadcrumb.component.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
11
<div class="admin-breadcrumbs mat-elevation-z1">
22
<ng-container *ngFor="let breadcrumb of breadcrumbs; index as i">
3-
<mat-icon *ngIf="breadcrumb.icon">{{breadcrumb.icon}}</mat-icon>
3+
<mat-icon *ngIf="breadcrumb.icon">{{ breadcrumb.icon }}</mat-icon>
4+
<i
5+
*ngIf="breadcrumb.iconClass"
6+
[ngClass]="breadcrumb.iconClass.split(' ')"
7+
aria-hidden="true"
8+
></i>
49
<div>
5-
<span class="admin-breadcrumb" [ngClass]="{'admin-breadcrumb--active': breadcrumb.state === undefined}" (click)="goToBreadcrumb(breadcrumb)">{{breadcrumb.title}}</span>
10+
<span
11+
class="admin-breadcrumb"
12+
[ngClass]="{
13+
'admin-breadcrumb--active': breadcrumb.state === undefined
14+
}"
15+
(click)="goToBreadcrumb(breadcrumb)"
16+
>
17+
{{ breadcrumb.title }}
18+
</span>
619
</div>
720
<div *ngIf="i < breadcrumbs.length - 1">
821
<span class="admin-breadcrumb__separator">/</span>

‎web-app/admin/src/app/admin/admin-breadcrumb/admin-breadcrumb.component.scss‎

Lines changed: 53 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,60 @@
11
@use '@angular/material' as mat;
2-
@import "variables.scss";
3-
4-
.admin-breadcrumbs {
5-
position: sticky;
6-
top: 0;
7-
display: flex;
8-
flex-direction: row;
9-
align-items: center;
10-
padding: 16px;
11-
background-color: white;
12-
z-index: 100;
13-
}
2+
@import 'variables.scss';
143

15-
.admin-breadcrumb {
16-
color: mat.get-color-from-palette($app-primary);
17-
cursor: pointer;
18-
}
4+
::ng-deep admin {
5+
display: block;
196

20-
.admin-breadcrumb:hover {
21-
color: mat.get-color-from-palette($app-primary);
22-
opacity: .6;
23-
}
7+
.admin-main{
8+
display: contents;
9+
}
2410

25-
.admin-breadcrumb--active,
26-
.admin-breadcrumb--active:hover {
27-
color: rgba(0, 0, 0, .6);
28-
cursor: unset;
29-
opacity: 1;
30-
}
11+
.breadcrumb-spacer {
12+
height: 55px;
13+
}
3114

32-
.admin-breadcrumb__separator {
33-
color: rgba(0, 0, 0, .4);
34-
margin: 0 8px;
35-
}
15+
.admin-breadcrumbs {
16+
position: sticky;
17+
top: 0;
18+
display: flex;
19+
flex-direction: row;
20+
align-items: center;
21+
padding: 16px 0px 16px 115px;
22+
background-color: white;
23+
z-index: 100;
24+
height: 55px;
25+
26+
.admin-breadcrumb {
27+
color: mat.get-color-from-palette($app-primary);
28+
cursor: pointer;
29+
}
30+
31+
.admin-breadcrumb:hover {
32+
color: mat.get-color-from-palette($app-primary);
33+
opacity: 0.6;
34+
}
35+
36+
.admin-breadcrumb--active,
37+
.admin-breadcrumb--active:hover {
38+
color: #000;
39+
cursor: unset;
40+
opacity: 1;
41+
}
42+
43+
.admin-breadcrumb__separator {
44+
color: rgba(0, 0, 0, 0.4);
45+
margin: 0 8px;
46+
}
47+
48+
mat-icon,
49+
i {
50+
color: mat.get-color-from-palette($app-primary);
51+
margin-right: 7px;
52+
margin-left: 7px;
53+
line-height: 55px;
54+
}
3655

37-
mat-icon {
38-
color: mat.get-color-from-palette($app-primary);
39-
margin-right: 4px;
56+
.icon-fix {
57+
font-size: 1.4em;
58+
}
59+
}
4060
}

‎web-app/admin/src/app/admin/admin-breadcrumb/admin-breadcrumb.component.spec.ts‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -110,36 +110,31 @@ describe('AdminBreadcrumbComponent', () => {
110110
});
111111

112112
it('should have one active and two inactive breadcrumb', () => {
113-
component.breadcrumbs = [{
114-
title: 'Title',
115-
icon: 'map',
116-
state: {
117-
name: 'name',
118-
params: {
119-
param1: 'toast'
120-
}
121-
}
122-
}, {
123-
title: 'Title2',
124-
state: {
125-
name: 'name2',
126-
params: {
127-
param1: 'toast2'
128-
}
129-
}
130-
}, {
131-
title: 'Inactive',
132-
icon: 'map'
133-
}]
113+
component.breadcrumbs = [
114+
{
115+
title: 'Title',
116+
icon: 'map',
117+
state: { name: 'name', params: { param1: 'toast' } },
118+
},
119+
{
120+
title: 'Title2',
121+
state: { name: 'name2', params: { param1: 'toast2' } },
122+
},
123+
{
124+
title: 'Inactive',
125+
icon: 'map',
126+
},
127+
];
134128
fixture.detectChanges();
129+
135130
const breadcrumbElements = element.querySelectorAll('.admin-breadcrumb');
136131
expect(breadcrumbElements.length).toEqual(3);
137132
expect(element.querySelectorAll('.admin-breadcrumb__separator').length).toEqual(2);
138133
expect(element.querySelectorAll('.admin-breadcrumb--active').length).toEqual(1);
139134
expect(element.querySelectorAll('mat-icon').length).toEqual(2);
140-
141-
expect(breadcrumbElements.item(0).innerHTML).toEqual(component.breadcrumbs[0].title);
142-
expect(breadcrumbElements.item(1).innerHTML).toEqual(component.breadcrumbs[1].title);
143-
expect(breadcrumbElements.item(2).innerHTML).toEqual(component.breadcrumbs[2].title);
135+
expect(breadcrumbElements.item(0).textContent.trim()).toEqual(component.breadcrumbs[0].title);
136+
expect(breadcrumbElements.item(1).textContent.trim()).toEqual(component.breadcrumbs[1].title);
137+
expect(breadcrumbElements.item(2).textContent.trim()).toEqual(component.breadcrumbs[2].title);
144138
});
139+
145140
});

‎web-app/admin/src/app/admin/admin-breadcrumb/admin-breadcrumb.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { StateService } from '@uirouter/angular';
99
})
1010
export class AdminBreadcrumbComponent {
1111
@Input() icon: string
12+
@Input() iconClass: string
1213
@Input() breadcrumbs: AdminBreadcrumb[]
1314

1415
constructor(private stateService: StateService) {}

‎web-app/admin/src/app/admin/admin-breadcrumb/admin-breadcrumb.model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { RawParams, StateOrName } from '@uirouter/angular';
33
export interface AdminBreadcrumb {
44
title: string
55
icon?: string
6+
iconClass?: string
67
state?: AdminBreadcrumbState
78
}
89

‎web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.html‎

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
<div class="admin-nav-gap">
2-
<mat-toolbar class="breadcrumbs-toolbar" color="transparent">
3-
<span>
4-
<mat-icon>dashboard</mat-icon>&nbsp;Dashboard
5-
</span>
6-
</mat-toolbar>
7-
</div>
1+
<admin-breadcrumb [breadcrumbs]="breadcrumbs"></admin-breadcrumb>
82

93
<div class="admin-content p-4">
104
<mat-card class="mb-4 top-card">
@@ -15,30 +9,54 @@
159
<mat-card-title>
1610
<span class="title-with-badge">
1711
Inactive Users
18-
<span matBadge="{{ count() || 0 }}" matBadgeColor="accent" matBadgeOverlap="false"
19-
class="inline-badge"></span>
12+
<span
13+
matBadge="{{ count() || 0 }}"
14+
matBadgeColor="accent"
15+
matBadgeOverlap="false"
16+
class="inline-badge"
17+
></span>
2018
</span>
2119
</mat-card-title>
2220
<div class="search-wrapper">
2321
<mat-form-field class="w-100 mb-3">
2422
<mat-label>Search</mat-label>
25-
<input matInput [(ngModel)]="userSearch" (ngModelChange)="search()" />
23+
<input
24+
matInput
25+
[(ngModel)]="userSearch"
26+
(ngModelChange)="search()"
27+
/>
2628
</mat-form-field>
2729
</div>
2830
<mat-list>
29-
<mat-list-item *ngFor="let user of inactiveUsers || []" (click)="gotoUser(user)" class="clickable">
31+
<mat-list-item
32+
*ngFor="let user of inactiveUsers || []"
33+
(click)="gotoUser(user)"
34+
class="clickable"
35+
>
3036
<mat-icon matListIcon>person</mat-icon>
3137
<div matLine>{{ user?.displayName || 'Unknown User' }}</div>
32-
<button mat-mini-button color="primary" *ngIf="hasPermission('UPDATE_USER')"
33-
(click)="activateUser($event, user)">
38+
<button
39+
mat-mini-button
40+
color="primary"
41+
*ngIf="hasPermission('UPDATE_USER')"
42+
(click)="activateUser($event, user)"
43+
>
3444
<mat-icon>check</mat-icon>
3545
<span>Activate</span>
3646
</button>
3747
</mat-list-item>
3848
</mat-list>
3949
<div class="pagination-controls">
40-
<button mat-button (click)="previous()" [disabled]="!hasPrevious()">← Previous User</button>
41-
<button mat-button (click)="next()" [disabled]="!hasNext()">Next User →</button>
50+
<button
51+
mat-button
52+
(click)="previous()"
53+
[disabled]="!hasPrevious()"
54+
>
55+
← Previous User
56+
</button>
57+
<button mat-button (click)="next()" [disabled]="!hasNext()">
58+
Next User →
59+
</button>
4260
</div>
4361
</mat-card>
4462
</div>
@@ -48,32 +66,64 @@
4866
<mat-card-title>
4967
<span class="title-with-badge">
5068
Unregistered Devices
51-
<span matBadge="{{ deviceCount() || 0 }}" matBadgeColor="accent" matBadgeOverlap="false"
52-
class="inline-badge"></span>
69+
<span
70+
matBadge="{{ deviceCount() || 0 }}"
71+
matBadgeColor="accent"
72+
matBadgeOverlap="false"
73+
class="inline-badge"
74+
></span>
5375
</span>
5476
</mat-card-title>
5577
<div class="search-wrapper">
5678
<mat-form-field class="w-100 mb-3">
5779
<mat-label>Search</mat-label>
58-
<input matInput [(ngModel)]="deviceSearch" (ngModelChange)="searchDevices()" />
80+
<input
81+
matInput
82+
[(ngModel)]="deviceSearch"
83+
(ngModelChange)="searchDevices()"
84+
/>
5985
</mat-form-field>
6086
</div>
6187
<mat-list>
62-
<mat-list-item *ngFor="let d of unregisteredDevices || []" (click)="gotoDevice(d)" class="clickable">
88+
<mat-list-item
89+
*ngFor="let d of unregisteredDevices || []"
90+
(click)="gotoDevice(d)"
91+
class="clickable"
92+
>
6393
<mat-icon matListIcon [ngClass]="iconClass(d)"></mat-icon>
6494
<div class="mat-line-horizontal">
65-
<span *ngIf="d?.user">{{ d.user?.displayName || 'Unknown User' }}</span>
66-
<span class="text-muted">({{ d?.uid || 'Unknown UID' }})</span>
95+
<span *ngIf="d?.user"
96+
>{{ d.user?.displayName || 'Unknown User' }}</span
97+
>
98+
<span class="text-muted"
99+
>({{ d?.uid || 'Unknown UID' }})</span
100+
>
67101
</div>
68-
<button mat-mini-button color="primary" *ngIf="hasPermission('UPDATE_DEVICE')"
69-
(click)="registerDevice($event, d)">
102+
<button
103+
mat-mini-button
104+
color="primary"
105+
*ngIf="hasPermission('UPDATE_DEVICE')"
106+
(click)="registerDevice($event, d)"
107+
>
70108
<mat-icon>check</mat-icon> Register
71109
</button>
72110
</mat-list-item>
73111
</mat-list>
74112
<div class="pagination-controls">
75-
<button mat-button (click)="previousDevice()" [disabled]="!hasPreviousDevice()">← Previous Device</button>
76-
<button mat-button (click)="nextDevice()" [disabled]="!hasNextDevice()">Next Device →</button>
113+
<button
114+
mat-button
115+
(click)="previousDevice()"
116+
[disabled]="!hasPreviousDevice()"
117+
>
118+
← Previous Device
119+
</button>
120+
<button
121+
mat-button
122+
(click)="nextDevice()"
123+
[disabled]="!hasNextDevice()"
124+
>
125+
Next Device →
126+
</button>
77127
</div>
78128
</mat-card>
79129
</div>
@@ -86,4 +136,4 @@
86136
<mage-logins [devices]="devices" [users]="users"></mage-logins>
87137
</div>
88138
</div>
89-
</div>
139+
</div>

0 commit comments

Comments
 (0)