@@ -25,7 +23,7 @@
-
+
-
+
-
+
| _id |
{{ row.id }} |
-
+
Administration & Configuration
-
+
Warning: This section is intended for system administrators only. Make sure
you know what you are doing.
-
+
Utility Functions
-
+
@@ -52,7 +52,6 @@ Export
>
Download whole database (.csv)
-
@@ -74,7 +73,7 @@ Application Configuration
@@ -98,10 +97,18 @@ Debug the PouchDB
-Alert Log
-
-
- | {{ alert.type }} |
- {{ alert.message }} |
-
+Alert Log
+
+
+ | Timestamp |
+ Type |
+ Message |
+
+
+
+ | {{alert.timestamp | date: "medium"}} |
+ {{ alert.type }} |
+ {{ alert.message }} |
+
+
diff --git a/src/app/core/admin/admin/admin.component.scss b/src/app/core/admin/admin/admin.component.scss
index e69de29bb2..4e8db6f191 100644
--- a/src/app/core/admin/admin/admin.component.scss
+++ b/src/app/core/admin/admin/admin.component.scss
@@ -0,0 +1,29 @@
+@use "@angular/material" as mat;
+
+.admin-table {
+
+ border-collapse: collapse;
+ width: 100%;
+
+ > thead > th {
+ padding: 10px 12px;
+ text-align: left;
+ vertical-align: bottom;
+ font-weight: 400;
+ color: mat.get-color-from-palette(mat.$grey-palette, 700);
+ text-transform: uppercase;
+ }
+
+ > tbody > tr > td {
+ padding: 10px 12px;
+ vertical-align: top;
+ }
+
+ > tbody > tr {
+ border-top: 1px solid mat.get-color-from-palette(mat.$grey-palette, 400);
+ }
+}
+
+.shrink-width {
+ width: 15%;
+}
diff --git a/src/app/core/admin/admin/admin.component.ts b/src/app/core/admin/admin/admin.component.ts
index 196ea7b7be..33cd070def 100644
--- a/src/app/core/admin/admin/admin.component.ts
+++ b/src/app/core/admin/admin/admin.component.ts
@@ -1,6 +1,5 @@
import { Component, OnInit } from "@angular/core";
import { AlertService } from "../../alerts/alert.service";
-import { Alert } from "../../alerts/alert";
import { BackupService } from "../services/backup.service";
import { ConfirmationDialogService } from "../../confirmation-dialog/confirmation-dialog.service";
import { MatSnackBar } from "@angular/material/snack-bar";
@@ -10,6 +9,7 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
import { readFile } from "../../../utils/utils";
import { RouteTarget } from "../../../app.routing";
import { Database } from "../../database/database";
+import { ExtendedAlertConfig } from "../../alerts/alert-config";
/**
* Admin GUI giving administrative users different options/actions.
@@ -23,7 +23,7 @@ import { Database } from "../../database/database";
})
export class AdminComponent implements OnInit {
/** all alerts */
- alerts: Alert[];
+ alerts: ExtendedAlertConfig[] = [];
constructor(
private alertService: AlertService,
diff --git a/src/app/core/alerts/_alert-style-classes.scss b/src/app/core/alerts/_alert-style-classes.scss
new file mode 100644
index 0000000000..46347f8129
--- /dev/null
+++ b/src/app/core/alerts/_alert-style-classes.scss
@@ -0,0 +1,17 @@
+@use "@angular/material" as mat;
+@use "src/styles/variables/ndb-light-theme" as theme;
+
+.ndb-alert {
+
+ white-space: pre-wrap;
+
+ // There is no `ndb-alert--info` class since `info` has the default styling.
+
+ &--warning {
+ background-color: mat.get-color-from-palette(mat.$orange-palette, 800) !important;
+ }
+
+ &--danger {
+ background-color: mat.get-color-from-palette(mat.$red-palette, 800) !important;
+ }
+}
diff --git a/src/app/core/alerts/alerts/alert.component.ts b/src/app/core/alerts/alert-config.ts
similarity index 51%
rename from src/app/core/alerts/alerts/alert.component.ts
rename to src/app/core/alerts/alert-config.ts
index c33003c85d..0d6c0eb624 100644
--- a/src/app/core/alerts/alerts/alert.component.ts
+++ b/src/app/core/alerts/alert-config.ts
@@ -15,27 +15,24 @@
* along with ndb-core. If not, see .
*/
-import { Component, Inject } from "@angular/core";
+import { AlertDisplay } from "./alert-display";
-import { Alert } from "../alert";
-import { MAT_SNACK_BAR_DATA } from "@angular/material/snack-bar";
+export interface AlertConfig {
+ /** The text of the message */
+ message: string;
-/**
- * Display an {@link Alert} with basic formatting and UI controls.
- */
-@Component({
- templateUrl: "./alert.component.html",
- styleUrls: ["./alert.component.scss"],
-})
-export class AlertComponent {
- /** the displayed alert */
- alert: Alert;
-
- /**
- * This component is created through MatSnackBar which provides the required data during creation.
- * @param data The alert instance to be displayed
+ /** The type of the message
+ *
+ * - Info messages provide feedback or information to the user without any required action
+ * - Warning messages provide feedback about unexpected or potentially unintended events
+ * - Danger messages inform about errors or critical conditions that the user should not overlook
*/
- constructor(@Inject(MAT_SNACK_BAR_DATA) private data: any) {
- this.alert = data;
- }
+ type: "info" | "warning" | "danger";
+
+ /** The display style (e.g. whether the alert has to be actively dismissed by the user) */
+ display: AlertDisplay;
+}
+
+export interface ExtendedAlertConfig extends AlertConfig {
+ timestamp: Date;
}
diff --git a/src/app/core/alerts/alert.service.spec.ts b/src/app/core/alerts/alert.service.spec.ts
index a061afc7ae..5861cb812d 100644
--- a/src/app/core/alerts/alert.service.spec.ts
+++ b/src/app/core/alerts/alert.service.spec.ts
@@ -16,66 +16,41 @@
*/
import { AlertService } from "./alert.service";
-import { Alert } from "./alert";
-import { LogLevel } from "../logging/log-level";
-import { LoggingService } from "../logging/logging.service";
-import { AlertDisplay } from "./alert-display";
-
-class MockLoggingService extends LoggingService {
- public log(_message: string, _logLevel: LogLevel) {}
-
- public debug(_message: string) {}
-
- public info(_message: string) {}
-
- public warn(_message: string) {}
-
- public error(_message: string) {}
-}
+import { TestBed } from "@angular/core/testing";
+import { AlertsModule } from "./alerts.module";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
describe("AlertService", () => {
- let alertService: AlertService;
- let snackBarMock;
- let loggingService: MockLoggingService;
+ let service: AlertService;
+
beforeEach(() => {
- loggingService = new MockLoggingService();
- snackBarMock = jasmine.createSpyObj(["openFromComponent"]);
- alertService = new AlertService(snackBarMock);
+ TestBed.configureTestingModule({
+ imports: [AlertsModule, NoopAnimationsModule],
+ });
+ service = TestBed.inject(AlertService);
});
- it("add info alert", function () {
+ it("adds an info alert", function () {
const message = "info alert";
- alertService.addInfo(message);
+ service.addInfo(message);
- expect(alertService.alerts[0].message).toEqual(message);
- expect(alertService.alerts[0].type).toEqual("info");
+ expect(service.alerts[0].message).toEqual(message);
+ expect(service.alerts[0].type).toEqual("info");
});
- it("add warning alert", function () {
+ it("adds a warning alert", function () {
const message = "warning alert";
- alertService.addWarning(message);
+ service.addWarning(message);
- expect(alertService.alerts[0].message).toEqual(message);
- expect(alertService.alerts[0].type).toEqual("warning");
+ expect(service.alerts[0].message).toEqual(message);
+ expect(service.alerts[0].type).toEqual("warning");
});
- it("add danger alert", function () {
+ it("adds a danger alert", function () {
const message = "danger alert";
- alertService.addDanger(message);
-
- expect(alertService.alerts[0].message).toEqual(message);
- expect(alertService.alerts[0].type).toEqual("danger");
- });
-
- it("removes alert", function () {
- const alert = new Alert(
- "test message",
- Alert.DANGER,
- AlertDisplay.PERSISTENT
- );
- alertService.addAlert(alert);
- alertService.removeAlert(alert);
+ service.addDanger(message);
- expect(alertService.alerts).toBeEmpty();
+ expect(service.alerts[0].message).toEqual(message);
+ expect(service.alerts[0].type).toEqual("danger");
});
});
diff --git a/src/app/core/alerts/alert.service.ts b/src/app/core/alerts/alert.service.ts
index 4fd245133d..ee333df616 100644
--- a/src/app/core/alerts/alert.service.ts
+++ b/src/app/core/alerts/alert.service.ts
@@ -16,10 +16,9 @@
*/
import { Injectable } from "@angular/core";
-import { MatSnackBar } from "@angular/material/snack-bar";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
-import { Alert } from "./alert";
-import { AlertComponent } from "./alerts/alert.component";
+import { AlertConfig, ExtendedAlertConfig } from "./alert-config";
import { AlertDisplay } from "./alert-display";
/**
@@ -30,28 +29,31 @@ import { AlertDisplay } from "./alert-display";
*
* If you want to log technical details and problems, use {@link LoggingService} instead!
* This service is for user facing messages.
+ *
+ * You can also use the {@link MatSnackBar} when you want to have more control over what you
+ * want to display to the user.
*/
@Injectable()
export class AlertService {
/** All alerts currently to be displayed */
- alerts: Alert[] = [];
+ alerts: ExtendedAlertConfig[] = [];
+
+ private static ALERT_BASE_CLASS = "ndb-alert";
- constructor(public snackBar: MatSnackBar) {}
+ constructor(private snackBar: MatSnackBar) {}
/**
* Display the given alert.
* @param alert The alert instance to be displayed
*/
- addAlert(alert: Alert) {
- this.alerts.push(alert);
+ addAlert(alert: AlertConfig) {
+ this.alerts.push({ ...alert, timestamp: new Date() });
this.displayAlert(alert);
}
- private displayAlert(alert: Alert) {
- const snackConfig = {
- data: alert,
+ private displayAlert(alert: AlertConfig) {
+ const snackConfig: MatSnackBarConfig = {
duration: 10000,
- panelClass: "alerts-snackbar",
};
switch (alert.display) {
@@ -65,21 +67,12 @@ export class AlertService {
break;
}
- alert.notificationRef = this.snackBar.openFromComponent(
- AlertComponent,
- snackConfig
- );
- }
+ snackConfig.panelClass = [
+ AlertService.ALERT_BASE_CLASS,
+ AlertService.ALERT_BASE_CLASS + "--" + alert.type,
+ ];
- /**
- * Remove an existing alert so that it is no longer displayed.
- * @param alert The alert to be removed
- */
- removeAlert(alert: Alert) {
- const index = this.alerts.indexOf(alert, 0);
- if (index > -1) {
- this.alerts.splice(index, 1);
- }
+ this.snackBar.open(alert.message, "dismiss", snackConfig);
}
/**
@@ -91,7 +84,7 @@ export class AlertService {
message: string,
display: AlertDisplay = AlertDisplay.TEMPORARY
) {
- this.addAlert(new Alert(message, Alert.INFO, display));
+ this.addAlert({ message, type: "info", display });
}
/**
@@ -103,7 +96,7 @@ export class AlertService {
message: string,
display: AlertDisplay = AlertDisplay.PERSISTENT
) {
- this.addAlert(new Alert(message, Alert.WARNING, display));
+ this.addAlert({ message, type: "warning", display });
}
/**
@@ -115,6 +108,6 @@ export class AlertService {
message: string,
display: AlertDisplay = AlertDisplay.PERSISTENT
) {
- this.addAlert(new Alert(message, Alert.DANGER, display));
+ this.addAlert({ message, type: "danger", display });
}
}
diff --git a/src/app/core/alerts/alert.ts b/src/app/core/alerts/alert.ts
deleted file mode 100644
index a6c142688d..0000000000
--- a/src/app/core/alerts/alert.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * This file is part of ndb-core.
- *
- * ndb-core is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * ndb-core is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with ndb-core. If not, see .
- */
-
-import { MatSnackBarRef } from "@angular/material/snack-bar";
-import { AlertComponent } from "./alerts/alert.component";
-import { AlertDisplay } from "./alert-display";
-
-/**
- * An Alert message to be displayed to the user through the {@link AlertService}.
- */
-export class Alert {
- /** Info messages provide feedback or information to the user without any required action */
- static INFO = "info";
- /** Warning messages provide feedback about unexpected or potentially unintended events */
- static WARNING = "warning";
- /** Danger messages inform about errors or critical conditions that the user should not overlook */
- static DANGER = "danger";
-
- /** reference to the ui displaying the message */
- public notificationRef: MatSnackBarRef;
-
- /**
- * Create a container of a new Alert message.
- * @param message The text of the message
- * @param type The type of the message
- * @param display The display style (e.g. whether the alert has to be actively dismissed by the user)
- */
- constructor(
- public message: string,
- public type: string,
- public display: AlertDisplay
- ) {}
-}
diff --git a/src/app/core/alerts/alerts.module.ts b/src/app/core/alerts/alerts.module.ts
index 35a3439e9f..2676ba0c5a 100644
--- a/src/app/core/alerts/alerts.module.ts
+++ b/src/app/core/alerts/alerts.module.ts
@@ -18,26 +18,14 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
-import { AlertComponent } from "./alerts/alert.component";
import { AlertService } from "./alert.service";
-import { MatButtonModule } from "@angular/material/button";
-import { MatCardModule } from "@angular/material/card";
import { MatSnackBarModule } from "@angular/material/snack-bar";
-import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
/**
* Show alert message to the user informing about events or errors.
*/
@NgModule({
- imports: [
- CommonModule,
- MatSnackBarModule,
- MatCardModule,
- MatButtonModule,
- FontAwesomeModule,
- ],
- declarations: [AlertComponent],
- exports: [AlertComponent],
+ imports: [CommonModule, MatSnackBarModule],
providers: [AlertService],
})
export class AlertsModule {}
diff --git a/src/app/core/alerts/alerts/alert.component.html b/src/app/core/alerts/alerts/alert.component.html
deleted file mode 100644
index 53ac476638..0000000000
--- a/src/app/core/alerts/alerts/alert.component.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
- {{ alert.message }}
-
- Coming Soon
-
- Sorry, this feature isn't quite ready yet. We are working hard to make this
- available for you. Let us know below if you need this functionality.
-
+
+ Coming Soon
+
+ Sorry, this feature isn't quite ready yet. We are working hard to make this
+ available for you. Let us know below if you need this functionality.
+
-
+
-
-
-
- 
+
+ I can tell you about my use case
+
Highlight me!
+ * ```
+ * or via a class with a name:
+ * ```html
+ * Highlight me!
+ * ```
+ */
+@Directive({
+ selector: "[appBorderHighlight]",
+})
+export class BorderHighlightDirective {
+ readonly CLASS_NAME = "border-left-highlight";
+
+ @HostBinding("class")
+ elementClass = this.CLASS_NAME;
+
+ @HostBinding("style.border-color")
+ borderColor: string | boolean = "transparent";
+
+ @Input("appBorderHighlight") set color(value: string | undefined) {
+ if (value) {
+ this.borderColor = value;
+ this.elementClass = this.CLASS_NAME;
+ }
+ }
+
+ @Input() set borderClass(value: string | undefined) {
+ if (value) {
+ this.elementClass = this.CLASS_NAME + " " + value;
+ this.borderColor = false;
+ }
+ }
+}
diff --git a/src/app/core/common-components/common-components.module.ts b/src/app/core/common-components/common-components.module.ts
index 056cb770f7..5cf39b1b50 100644
--- a/src/app/core/common-components/common-components.module.ts
+++ b/src/app/core/common-components/common-components.module.ts
@@ -2,10 +2,29 @@ import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { TemplateTooltipDirective } from "./template-tooltip/template-tooltip.directive";
import { TemplateTooltipComponent } from "./template-tooltip/template-tooltip.component";
+import { BorderHighlightDirective } from "./border-highlight/border-highlight.directive";
+import { PillComponent } from "./pill/pill.component";
+import { DialogCloseComponent } from "./dialog-close/dialog-close.component";
+import { AddNewButtonComponent } from "./add-new-button/add-new-button.component";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { MatButtonModule } from "@angular/material/button";
@NgModule({
- declarations: [TemplateTooltipDirective, TemplateTooltipComponent],
- imports: [CommonModule],
- exports: [TemplateTooltipDirective],
+ declarations: [
+ TemplateTooltipDirective,
+ TemplateTooltipComponent,
+ BorderHighlightDirective,
+ PillComponent,
+ DialogCloseComponent,
+ AddNewButtonComponent,
+ ],
+ imports: [CommonModule, FontAwesomeModule, MatButtonModule],
+ exports: [
+ TemplateTooltipDirective,
+ BorderHighlightDirective,
+ PillComponent,
+ DialogCloseComponent,
+ AddNewButtonComponent,
+ ],
})
export class CommonComponentsModule {}
diff --git a/src/app/core/common-components/dialog-close/dialog-close.component.html b/src/app/core/common-components/dialog-close/dialog-close.component.html
new file mode 100644
index 0000000000..4d091c1ef6
--- /dev/null
+++ b/src/app/core/common-components/dialog-close/dialog-close.component.html
@@ -0,0 +1,3 @@
+
diff --git a/src/app/core/common-components/dialog-close/dialog-close.component.scss b/src/app/core/common-components/dialog-close/dialog-close.component.scss
new file mode 100644
index 0000000000..54dcce79b6
--- /dev/null
+++ b/src/app/core/common-components/dialog-close/dialog-close.component.scss
@@ -0,0 +1,9 @@
+/**
+ * Positions the 'x' button that is shown for an overlay to
+ * the top-right of the overlay
+ */
+.overlay-close-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
diff --git a/src/app/core/common-components/dialog-close/dialog-close.component.spec.ts b/src/app/core/common-components/dialog-close/dialog-close.component.spec.ts
new file mode 100644
index 0000000000..c80de4679f
--- /dev/null
+++ b/src/app/core/common-components/dialog-close/dialog-close.component.spec.ts
@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { DialogCloseComponent } from "./dialog-close.component";
+import { DialogModule } from "@angular/cdk/dialog";
+import { MatButtonModule } from "@angular/material/button";
+
+describe("DialogCloseComponent", () => {
+ let component: DialogCloseComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [DialogCloseComponent],
+ imports: [DialogModule, MatButtonModule],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DialogCloseComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it("should create", () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/core/common-components/dialog-close/dialog-close.component.ts b/src/app/core/common-components/dialog-close/dialog-close.component.ts
new file mode 100644
index 0000000000..7db8e08717
--- /dev/null
+++ b/src/app/core/common-components/dialog-close/dialog-close.component.ts
@@ -0,0 +1,15 @@
+import { AfterViewChecked, Component, ViewChild } from "@angular/core";
+import { MatButton } from "@angular/material/button";
+
+@Component({
+ selector: "app-dialog-close",
+ templateUrl: "./dialog-close.component.html",
+ styleUrls: ["./dialog-close.component.scss"],
+})
+export class DialogCloseComponent implements AfterViewChecked {
+ @ViewChild("button") button: MatButton;
+
+ ngAfterViewChecked() {
+ (this.button._elementRef.nativeElement).blur();
+ }
+}
diff --git a/src/app/core/common-components/pill/pill.component.html b/src/app/core/common-components/pill/pill.component.html
new file mode 100644
index 0000000000..6dbc743063
--- /dev/null
+++ b/src/app/core/common-components/pill/pill.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/core/common-components/pill/pill.component.scss b/src/app/core/common-components/pill/pill.component.scss
new file mode 100644
index 0000000000..a81ed130b7
--- /dev/null
+++ b/src/app/core/common-components/pill/pill.component.scss
@@ -0,0 +1,10 @@
+@use "src/styles/variables/sizes";
+@use "src/styles/variables/ndb-light-theme" as theme;
+@use "@angular/material" as mat;
+
+:host {
+ padding: sizes.$small sizes.$regular;
+ border-radius: 100vmax;
+ width: max-content;
+ display: inline-block;
+}
diff --git a/src/app/core/common-components/pill/pill.component.spec.ts b/src/app/core/common-components/pill/pill.component.spec.ts
new file mode 100644
index 0000000000..53c9fd236c
--- /dev/null
+++ b/src/app/core/common-components/pill/pill.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { PillComponent } from "./pill.component";
+
+describe("PillComponent", () => {
+ let component: PillComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [PillComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(PillComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it("should create", () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/core/common-components/pill/pill.component.ts b/src/app/core/common-components/pill/pill.component.ts
new file mode 100644
index 0000000000..6823d672d7
--- /dev/null
+++ b/src/app/core/common-components/pill/pill.component.ts
@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector: "app-pill",
+ templateUrl: "./pill.component.html",
+ styleUrls: ["./pill.component.scss"],
+})
+export class PillComponent {}
diff --git a/src/app/core/common-components/template-tooltip/template-tooltip.component.html b/src/app/core/common-components/template-tooltip/template-tooltip.component.html
deleted file mode 100644
index cdcef1ccae..0000000000
--- a/src/app/core/common-components/template-tooltip/template-tooltip.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
diff --git a/src/app/core/common-components/template-tooltip/template-tooltip.component.scss b/src/app/core/common-components/template-tooltip/template-tooltip.component.scss
index 8555bf1d65..12df74c865 100644
--- a/src/app/core/common-components/template-tooltip/template-tooltip.component.scss
+++ b/src/app/core/common-components/template-tooltip/template-tooltip.component.scss
@@ -1,8 +1,10 @@
@use "@angular/material" as mat;
-.tooltip-wrapper {
+:host {
background-color: mat.get-color-from-palette(mat.$light-theme-background-palette, card);
border-radius: 4px;
border: 1px solid mat.get-color-from-palette(mat.$grey-palette, 400);
transform-origin: center 0;
+ display: block;
+ @include mat.elevation(3);
}
diff --git a/src/app/core/common-components/template-tooltip/template-tooltip.component.ts b/src/app/core/common-components/template-tooltip/template-tooltip.component.ts
index b91a41de21..b71d381681 100644
--- a/src/app/core/common-components/template-tooltip/template-tooltip.component.ts
+++ b/src/app/core/common-components/template-tooltip/template-tooltip.component.ts
@@ -1,6 +1,8 @@
import {
Component,
EventEmitter,
+ HostBinding,
+ HostListener,
Input,
Output,
TemplateRef,
@@ -25,7 +27,7 @@ import {
*/
@Component({
selector: TemplateTooltipComponent.SELECTOR,
- templateUrl: "./template-tooltip.component.html",
+ template: '',
styleUrls: ["./template-tooltip.component.scss"],
animations: [
trigger("appear", [
@@ -59,4 +61,16 @@ export class TemplateTooltipComponent {
@Output() hide = new EventEmitter();
@Output() show = new EventEmitter();
+
+ @HostListener("mouseenter")
+ onMouseEnter() {
+ this.show.emit();
+ }
+
+ @HostListener("mouseleave")
+ onMouseLeave() {
+ this.hide.emit();
+ }
+
+ @HostBinding("@appear") animation = true;
}
diff --git a/src/app/core/common-components/template-tooltip/template-tooltip.directive.spec.ts b/src/app/core/common-components/template-tooltip/template-tooltip.directive.spec.ts
index 799b67742e..739869598c 100644
--- a/src/app/core/common-components/template-tooltip/template-tooltip.directive.spec.ts
+++ b/src/app/core/common-components/template-tooltip/template-tooltip.directive.spec.ts
@@ -6,7 +6,6 @@ import {
tick,
} from "@angular/core/testing";
import { Component } from "@angular/core";
-import { expect } from "@angular/flex-layout/_private-utils/testing";
import { CommonModule } from "@angular/common";
import { OverlayModule } from "@angular/cdk/overlay";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
diff --git a/src/app/core/configurable-enum/configurable-enum-ordering.spec.ts b/src/app/core/configurable-enum/configurable-enum-ordering.spec.ts
index e0c012fc1a..7e46380a3f 100644
--- a/src/app/core/configurable-enum/configurable-enum-ordering.spec.ts
+++ b/src/app/core/configurable-enum/configurable-enum-ordering.spec.ts
@@ -1,6 +1,5 @@
import { ConfigurableEnumValue } from "./configurable-enum.interface";
import { Ordering } from "./configurable-enum-ordering";
-import { expect } from "@angular/flex-layout/_private-utils/testing";
describe("Configurable Enum Ordering", () => {
function mockEnumValues(): ConfigurableEnumValue[] {
diff --git a/src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.scss b/src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.ts b/src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.ts
index 36b8fb2dca..e350b95c1c 100644
--- a/src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.ts
+++ b/src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.ts
@@ -12,7 +12,6 @@ import { compareEnums } from "../../../utils/utils";
@Component({
selector: "app-edit-configurable-enum",
templateUrl: "./edit-configurable-enum.component.html",
- styleUrls: ["./edit-configurable-enum.component.scss"],
})
export class EditConfigurableEnumComponent extends EditComponent {
enumId: string;
diff --git a/src/app/core/confirmation-dialog/confirmation-dialog.module.ts b/src/app/core/confirmation-dialog/confirmation-dialog.module.ts
index 4f3805a6d8..e8ed01c08d 100644
--- a/src/app/core/confirmation-dialog/confirmation-dialog.module.ts
+++ b/src/app/core/confirmation-dialog/confirmation-dialog.module.ts
@@ -7,6 +7,7 @@ import { ConfirmationDialogService } from "./confirmation-dialog.service";
import { MatIconModule } from "@angular/material/icon";
import { MatRippleModule } from "@angular/material/core";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { CommonComponentsModule } from "../common-components/common-components.module";
/**
* A helper utility module helping to display configurable confirmation dialog boxes
@@ -22,6 +23,7 @@ import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
MatIconModule,
MatRippleModule,
FontAwesomeModule,
+ CommonComponentsModule,
],
declarations: [ConfirmationDialogComponent],
providers: [ConfirmationDialogService],
diff --git a/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.html b/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.html
index 4c6d16e7c9..d2d6f90002 100644
--- a/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.html
@@ -1,10 +1,4 @@
-
-
+
{{ data.title }}
{{ data.text }}
diff --git a/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.scss b/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.scss
deleted file mode 100644
index 392753eb13..0000000000
--- a/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.mat-dialog-actions button {
- margin-right: 4px;
-}
-
-.cancel-icon {
- cursor: pointer;
- position: absolute;
- top: 0;
- right: 0;
- // padding applied on all sides for ripples
- padding: 12px;
-}
diff --git a/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.ts b/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.ts
index 28f03c5962..83100f5947 100644
--- a/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/app/core/confirmation-dialog/confirmation-dialog/confirmation-dialog.component.ts
@@ -8,7 +8,6 @@ import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
@Component({
selector: "app-confirmation-dialog",
templateUrl: "./confirmation-dialog.component.html",
- styleUrls: ["./confirmation-dialog.component.scss"],
})
export class ConfirmationDialogComponent {
/**
diff --git a/src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.html b/src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.html
index 6719033db2..6edfe0d7ea 100644
--- a/src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.html
+++ b/src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.html
@@ -4,41 +4,33 @@
subtitle="Quick actions"
i18n-subtitle="Title of dashboard widget that shows a list of certain actions a user can click on"
>
-
-
-
-
-
- | Icon |
- Label |
-
-
-
-
- |
-
+
+
+
+
+ | Icon |
+ Label |
+
+
+
+
+ |
+
-
-
- {{row.label}}
- |
-
+
+ {{row.label}} |
+
- |
-
-
-
+ |
+
diff --git a/src/app/core/dashboard/dashboard-widget-base.scss b/src/app/core/dashboard/dashboard-widget-base.scss
index f93578c587..9cecf68c28 100644
--- a/src/app/core/dashboard/dashboard-widget-base.scss
+++ b/src/app/core/dashboard/dashboard-widget-base.scss
@@ -1,50 +1,13 @@
-.dashboard-table-row {
- border-bottom: 1px solid #c8c8c8;
- padding-left: 8px;
- padding-right: 8px;
-}
-
-.dashboard-table {
- margin-right: 10px;
- margin-left: 10px;
+.mat-table {
+ background: none;
+ width: 100%;
border-collapse: collapse;
- table-layout: fixed;
-}
-.dashboard-table tr:first-child {
- border-top: none;
-}
-
-.dashboard-table-cell {
- padding: 12px;
-}
-.dashboard-table-first-cell {
- white-space: nowrap;
- overflow: hidden;
-}
-.dashboard-table-last-cell {
- width: 108px;
- text-align: right;
-}
-
-.link-content {
- display: flex;
- justify-content: center;
- font-size: xx-large;
- place-self: center;
- flex-grow: 1;
-}
-
-.clickable {
- cursor: pointer;
-}
-
-.content-button {
- margin: 8px 30px;
- display: flex;
- justify-content: center;
- padding: 25px;
- flex-grow: 1;
+ tr {
+ border-bottom: 1px solid #c8c8c8;
+ padding-left: 8px;
+ padding-right: 8px;
+ }
}
.mat-paginator {
@@ -56,19 +19,9 @@
margin-right: 10px;
}
-.mat-table {
- background: none;
- width: 100%;
- border-collapse: collapse;
-}
-
-.mat-table tr:first-child {
- border-top: none;
-}
-
.headline {
height: 100%;
display: flex;
- place-content: center;
- place-items: center;
+ justify-content: center;
+ align-items: center;
}
diff --git a/src/app/core/dashboard/dashboard-widget/dashboard-widget.component.html b/src/app/core/dashboard/dashboard-widget/dashboard-widget.component.html
index 6e7f6dde71..c440875254 100644
--- a/src/app/core/dashboard/dashboard-widget/dashboard-widget.component.html
+++ b/src/app/core/dashboard/dashboard-widget/dashboard-widget.component.html
@@ -1,19 +1,15 @@
-
-
- |