Skip to content

Commit 6ed1a45

Browse files
rweisserweisse
authored
Merge pull request #11 from openbcl/dev
UI / Usability optimizations
2 parents 9d9a5b1 + 726a778 commit 6ed1a45

20 files changed

+231
-135
lines changed

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "elogger",
3-
"version": "0.9.6",
3+
"version": "0.9.7",
44
"homepage": "https://github.com/openbcl/eLogger",
55
"author": "Robert Weiße",
66
"scripts": {

‎src/app/components/app/app.component.html

+18-4
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,26 @@
1111

1212
<p-menubar class="fixed w-full top-0 left-0 z-5" [model]="navitems">
1313
<ng-template pTemplate="start">
14-
<button pButton pRipple type="button" icon="pi pi-chevron-left" [disabled]="!this.navigating && navigations <= 0" class="p-button-rounded p-button-primary el-back-button" iconPos="right" (click)="navigateBack()"></button>
14+
<button pButton pRipple type="button" icon="pi pi-chevron-left" [disabled]="!this.navigating && navigations <= 0" class="p-button-rounded p-button-primary mr-1 w-2rem h-2rem" iconPos="right" (click)="navigateBack()"></button>
1515
</ng-template>
1616
<ng-template pTemplate="end">
17-
<a routerLink="/">
18-
<img src="assets/icons/icon-512x512.png" height="40" class="p-mr-2">
19-
</a>
17+
<div class="flex align-items-center">
18+
<span class="cursor-pointer" routerLink="logs" routerLinkActive #logsLink="routerLinkActive">
19+
<p-tag *ngIf="logsLink.isActive" styleClass="mr-2" severity="success" [value]="navitems[0].label" [rounded]="true"></p-tag>
20+
</span>
21+
<span class="cursor-pointer" routerLink="templates" routerLinkActive #templatesLink="routerLinkActive">
22+
<p-tag *ngIf="templatesLink.isActive" styleClass="mr-2" severity="warning" [value]="navitems[1].label" [rounded]="true"></p-tag>
23+
</span>
24+
<span class="cursor-pointer" routerLink="info" routerLinkActive #infoLink="routerLinkActive">
25+
<p-tag *ngIf="infoLink.isActive" styleClass="mr-2" severity="primary" [value]="navitems[2].label" [rounded]="true"></p-tag>
26+
</span>
27+
<span class="cursor-pointer" routerLink="settings" routerLinkActive #settingsLink="routerLinkActive">
28+
<p-tag *ngIf="settingsLink.isActive" styleClass="mr-2" severity="info" [value]="navitems[3].label" [rounded]="true"></p-tag>
29+
</span>
30+
<a routerLink="/">
31+
<img src="assets/icons/icon-512x512.png" height="40" class="p-mr-2">
32+
</a>
33+
</div>
2034
</ng-template>
2135
</p-menubar>
2236
<router-outlet *ngrxLet="theme$"></router-outlet>

‎src/app/components/app/app.component.scss

-4
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@
99
}
1010
}
1111

12-
.el-back-button {
13-
margin-right: 0.5rem;
14-
}
15-
1612
router-outlet {
1713
margin-top: 4.25rem;
1814
}

‎src/app/components/app/app.component.ts

+28-1
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,14 @@ export class AppComponent {
4141
displayImportDialog = false;
4242
navigations = -1;
4343
navigating = false;
44+
wakeLock: any = null;
4445

4546
@HostListener('window:popstate', ['$event'])
4647
onPopState(event: any) {
4748
this.navigating = true;
48-
this.navigations = this.navigations - 2;
49+
if (this.navigations > -1) {
50+
this.navigations = this.navigations - 2;
51+
}
4952
}
5053

5154
navitems: MenuItem[] = [
@@ -130,6 +133,30 @@ export class AppComponent {
130133
filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY')
131134
).subscribe(() => window.location.reload());
132135
}
136+
this.enableWakeLock();
137+
}
138+
139+
enableWakeLock() {
140+
if ('wakeLock' in navigator && 'request' in (navigator as any)['wakeLock']) {
141+
const requestWakeLock = async () => {
142+
try {
143+
this.wakeLock = await (navigator as any)['wakeLock'].request('screen');
144+
this.wakeLock.addEventListener('release', () => {
145+
this.wakeLock = null;
146+
});
147+
} catch (err) {
148+
console.error(err);
149+
}
150+
};
151+
document.addEventListener('visibilitychange', () => {
152+
if (document.visibilityState === 'visible') {
153+
requestWakeLock()
154+
} else if (this.wakeLock !== null) {
155+
this.wakeLock.release();
156+
}
157+
});
158+
requestWakeLock();
159+
}
133160
}
134161

135162
}

‎src/app/components/dialogs/exportlogsdialog/exportlogsdialog.component.html

+19-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</span>
55
<p-table
66
styleClass="p-datatable-striped mt-3"
7-
breakpoint="{{breakpoint}}px"
7+
breakpoint="545px"
88
selectionMode="multiple"
99
(selectionChange)="this.form.patchValue({ logs: $event })"
1010
[selection]="form.value.logs"
@@ -24,15 +24,25 @@
2424
<td>
2525
<p-tableCheckbox [pSelectableRow]="log" [value]="log"></p-tableCheckbox>
2626
</td>
27-
<td>{{ log.title }}</td>
28-
<td>{{ log.desc }}</td>
29-
<td class="flex-wrap">
30-
<span class="text-overflow-anywhere">{{ log.templateId | templateTitle: templates }}</span>
31-
<ng-container *ngIf="log.templateId | templateDesc: templates as desc">
32-
<span class="text-overflow-anywhere font-light text-500">&nbsp;({{ desc }})&nbsp;</span>
33-
</ng-container>
27+
<td class="justify-content-between">
28+
<span class="p-column-title font-light">{{cols[0].header}}</span>
29+
<span class="text-right">{{ log.title }}</span>
30+
</td>
31+
<td class="justify-content-between">
32+
<span class="p-column-title font-light">{{cols[1].header}}</span>
33+
<span class="text-right">{{ log.desc }}</span>
34+
</td>
35+
<td class="justify-content-between">
36+
<span class="p-column-title font-light">{{cols[2].header}}</span>
37+
<span class="flex-wrap text-right">
38+
<span class="text-overflow-anywhere">
39+
{{ log.templateId | templateTitle: templates }}
40+
</span>
41+
<ng-container *ngIf="log.templateId | templateDesc: templates as desc">
42+
<span class="text-overflow-anywhere font-light text-500">({{ desc }})</span>
43+
</ng-container>
44+
</span>
3445
</td>
35-
<td class="text-center">{{ log.recordsCount }}</td>
3646
</tr>
3747
</ng-template>
3848
</p-table>

‎src/app/components/dialogs/exportlogsdialog/exportlogsdialog.component.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Log, Template } from '../../../models';
44
import { FormBuilder, Validators } from '@angular/forms';
55
import { AppValidators, isQRcodeCompatibleError } from '../../../utils/validators';
66
import { BaseDialogComponent } from '../../basedialog/basedialog.component';
7-
import { descCol, recordsCol, titleCol, typeCol } from '../../../utils/lib';
7+
import { descCol, titleCol, typeCol } from '../../../utils/lib';
88

99
@Component({
1010
selector: 'el-export-logs-dialog',
@@ -16,15 +16,13 @@ export class ExportLogsDialogComponent extends BaseDialogComponent {
1616
isQRcodeCompatibleError = isQRcodeCompatibleError;
1717
displayQRcodeDialog = false;
1818

19-
breakpoint = 500;
20-
2119
@Input()
2220
logs: Log[];
2321

2422
@Input()
2523
templates: Template[];
2624

27-
cols: any[] = [ titleCol, descCol, typeCol, recordsCol ];
25+
cols: any[] = [ titleCol, descCol, typeCol ];
2826

2927
form = this.fb.group({ logs: [[], Validators.required] }, {
3028
validators: [AppValidators.isQRcodeCompatible('logs')]

‎src/app/components/dialogs/exporttemplatesdialog/exporttemplatesdialog.component.html

+13-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</span>
55
<p-table
66
styleClass="p-datatable-striped mt-3"
7-
breakpoint="{{breakpoint}}px"
7+
breakpoint="650px"
88
selectionMode="multiple"
99
(selectionChange)="this.form.patchValue({ templates: $event })"
1010
[selection]="form.value.templates"
@@ -24,9 +24,18 @@
2424
<td>
2525
<p-tableCheckbox [pSelectableRow]="template" [value]="template"></p-tableCheckbox>
2626
</td>
27-
<td>{{ template.title }}</td>
28-
<td>{{ template.desc }}</td>
29-
<td>{{ template.revision | date : 'medium' }}</td>
27+
<td class="justify-content-between">
28+
<span class="p-column-title font-light">{{cols[0].header}}</span>
29+
<span class="text-right">{{ template.title }}</span>
30+
</td>
31+
<td class="justify-content-between">
32+
<span class="p-column-title font-light">{{cols[1].header}}</span>
33+
<span class="text-right">{{ template.desc }}</span>
34+
</td>
35+
<td class="justify-content-between">
36+
<span class="p-column-title font-light">{{cols[2].header}}</span>
37+
<span class="text-right">{{ template.revision | date : 'medium' }}</span>
38+
</td>
3039
</tr>
3140
</ng-template>
3241
</p-table>

‎src/app/components/dialogs/exporttemplatesdialog/exporttemplatesdialog.component.ts

-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ export class ExportTemplatesDialogComponent extends BaseDialogComponent {
1616
isQRcodeCompatibleError = isQRcodeCompatibleError;
1717
displayQRcodeDialog = false;
1818

19-
breakpoint = 500;
20-
2119
@Input()
2220
templates: Template[];
2321

‎src/app/logs/components/dialogs/photorecorddialog/photorecorddialog.component.html

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<p-dialog i18n-header="Dialog headline@@PhotoRecordDialogComponent:header" #cameraDialog header="Photo Event" (onShow)="showDialogMaximized(cameraDialog, true)" [resizable]="false" [maximizable]="!isPWA()" [visible]="visible" (visibleChange)="close()" [modal]="true" [closeOnEscape]="true">
32
<form [formGroup]="form">
43
<div class="grid">

‎src/app/logs/components/dialogs/sharelogsdialog/sharelogsdialog.component.html

+23-9
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<ng-container *ngrxLet="templates$ as templates">
66
<p-table
77
styleClass="p-datatable-striped mt-3"
8-
breakpoint="{{breakpoint}}px"
8+
breakpoint="730px"
99
selectionMode="multiple"
1010
(selectionChange)="this.form.patchValue({ logs: $event })"
1111
[selection]="form.value.logs"
@@ -25,15 +25,29 @@
2525
<td>
2626
<p-tableCheckbox [pSelectableRow]="log" [value]="log"></p-tableCheckbox>
2727
</td>
28-
<td>{{ log.title }}</td>
29-
<td>{{ log.desc }}</td>
30-
<td class="flex-wrap">
31-
<span class="text-overflow-anywhere">{{ log.templateId | templateTitle: templates }}</span>
32-
<ng-container *ngIf="log.templateId | templateDesc: templates as desc">
33-
<span class="text-overflow-anywhere font-light text-500">&nbsp;({{ desc }})&nbsp;</span>
34-
</ng-container>
28+
<td class="justify-content-between">
29+
<span class="p-column-title font-light">{{cols[0].header}}</span>
30+
<span class="text-right">{{ log.title }}</span>
31+
</td>
32+
<td class="justify-content-between">
33+
<span class="p-column-title font-light">{{cols[1].header}}</span>
34+
<span class="text-right">{{ log.desc }}</span>
35+
</td>
36+
<td class="justify-content-between">
37+
<span class="p-column-title font-light">{{cols[2].header}}</span>
38+
<span class="flex-wrap text-right">
39+
<span class="text-overflow-anywhere">
40+
{{ log.templateId | templateTitle: templates }}
41+
</span>
42+
<ng-container *ngIf="log.templateId | templateDesc: templates as desc">
43+
<span class="text-overflow-anywhere font-light text-500">({{ desc }})</span>
44+
</ng-container>
45+
</span>
46+
</td>
47+
<td class="justify-content-between text-center">
48+
<span class="p-column-title font-light">{{cols[3].header}}</span>
49+
<span class="text-right">{{ log.recordsCount }}</span>
3550
</td>
36-
<td class="text-center">{{ log.recordsCount }}</td>
3751
</tr>
3852
</ng-template>
3953
</p-table>

‎src/app/logs/components/dialogs/sharelogsdialog/sharelogsdialog.component.ts

-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ import { titleCol, descCol, typeCol, recordsCol } from '../../../../utils/lib';
1616
})
1717
export class ShareLogsDialogComponent extends BaseDialogComponent {
1818

19-
breakpoint = 500;
20-
2119
logs$ = this.store.pipe(select(logsSelector), map(logs => [ ...logs ]));
2220
templates$ = this.store.pipe(select(templatesSelector));
2321

‎src/app/logs/components/logs/logs.component.html

+22-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
#dt
44
styleClass="p-datatable-striped"
55
dataKey="id"
6-
breakpoint="500px"
6+
breakpoint="685px"
77
[rowHover]="true"
88
[reorderableColumns]="true"
99
(onRowReorder)="onRowReorder(dt.value)"
@@ -37,17 +37,29 @@
3737
<button pButton pRipple [disabled]="index === 0" type="button" icon="pi pi-chevron-up" class="p-button-secondary p-button-rounded mr-2" (click)="move(index, -1, dt.value)"></button>
3838
<button pButton pRipple [disabled]="index === dt.value.length - 1" type="button" icon="pi pi-chevron-down" class="p-button-secondary p-button-rounded mr-2" (click)="move(index, 1, dt.value)"></button>
3939
</td>
40-
<td [routerLink]="[log.id]">{{ log.title }}</td>
41-
<td [routerLink]="[log.id]">{{ log.desc }}</td>
42-
<td [routerLink]="[log.id]" class="flex-wrap">
43-
<span [ngClass]="{'p-error': !(log.templateId | templateExists: templates)}" class="text-overflow-anywhere ">
44-
{{ log.templateId | templateTitle: templates }}
40+
<td [routerLink]="[log.id]" class="justify-content-between">
41+
<span class="p-column-title font-light">{{cols[0].header}}</span>
42+
<span class="text-right">{{ log.title }}</span>
43+
</td>
44+
<td [routerLink]="[log.id]" class="justify-content-between">
45+
<span class="p-column-title font-light">{{cols[1].header}}</span>
46+
<span class="text-right">{{ log.desc }}</span>
47+
</td>
48+
<td [routerLink]="[log.id]" class="justify-content-between">
49+
<span class="p-column-title font-light">{{cols[2].header}}</span>
50+
<span class="flex-wrap text-right">
51+
<span [ngClass]="{'p-error': !(log.templateId | templateExists: templates)}" class="text-overflow-anywhere ">
52+
{{ log.templateId | templateTitle: templates }}
53+
</span>
54+
<ng-container *ngIf="log.templateId | templateDesc: templates as desc">
55+
<span class="text-overflow-anywhere font-light text-500">({{ desc }})</span>
56+
</ng-container>
4557
</span>
46-
<ng-container *ngIf="log.templateId | templateDesc: templates as desc">
47-
<span class="text-overflow-anywhere font-light text-500">&nbsp;({{ desc }})&nbsp;</span>
48-
</ng-container>
4958
</td>
50-
<td class="text-center" [routerLink]="[log.id]">{{ log.recordsCount }}</td>
59+
<td [routerLink]="[log.id]" class="justify-content-between text-center">
60+
<span class="p-column-title font-light">{{cols[3].header}}</span>
61+
<span class="text-right">{{ log.recordsCount }}</span>
62+
</td>
5163
</tr>
5264
</ng-template>
5365
<ng-template pTemplate="emptymessage" let-columns>

0 commit comments

Comments
 (0)