diff --git a/src/app/pages/settings/settings.component.spec.ts b/src/app/pages/settings/settings.component.spec.ts
index 318143422..cd7e2f52a 100644
--- a/src/app/pages/settings/settings.component.spec.ts
+++ b/src/app/pages/settings/settings.component.spec.ts
@@ -59,8 +59,8 @@ describe('SettingsComponent', () => {
MatCardModule,
MatIconModule,
MatButtonModule,
+ SettingsComponent,
],
- declarations: [SettingsComponent],
providers: [
HttpClient,
HttpHandler,
diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
index b8b48a8eb..1aea33c8b 100644
--- a/src/app/pages/settings/settings.component.ts
+++ b/src/app/pages/settings/settings.component.ts
@@ -1,5 +1,13 @@
import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, FormArray, FormControl, AbstractControl } from '@angular/forms';
+import {
+ FormBuilder,
+ FormGroup,
+ FormArray,
+ FormControl,
+ AbstractControl,
+ FormsModule,
+ ReactiveFormsModule,
+} from '@angular/forms';
import { SettingsService } from '../../service/settings/settings.service';
import { GithubService, GithubReleaseInfo } from 'src/app/service/settings/github.service';
import { LoaderService } from 'src/app/service/loader/data-loader.service';
@@ -12,6 +20,18 @@ import {
import { dateStr, deepCopy } from 'src/app/util/util';
import { MetaStore } from 'src/app/model/meta-store';
import { ProgressStore } from 'src/app/model/progress-store';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatOptionModule } from '@angular/material/core';
+import { NgFor, NgIf } from '@angular/common';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+import { TopHeaderComponent } from '../../component/top-header/top-header.component';
interface RemoteReleaseInfo {
tagName: string;
@@ -39,6 +59,24 @@ interface ProgressDefinitionForm {
selector: 'app-settings',
templateUrl: './settings.component.html',
styleUrls: ['./settings.component.css'],
+ standalone: true,
+ imports: [
+ TopHeaderComponent,
+ MatCardModule,
+ MatFormFieldModule,
+ MatSelectModule,
+ FormsModule,
+ NgFor,
+ MatOptionModule,
+ MatSliderModule,
+ NgIf,
+ MatButtonModule,
+ MatIconModule,
+ ReactiveFormsModule,
+ MatInputModule,
+ TextFieldModule,
+ MatProgressSpinnerModule,
+ ],
})
export class SettingsComponent implements OnInit {
meta!: MetaStore;
diff --git a/src/app/pages/teams/teams.component.css b/src/app/pages/teams/teams.component.css
index c31fc77b3..74f022523 100644
--- a/src/app/pages/teams/teams.component.css
+++ b/src/app/pages/teams/teams.component.css
@@ -77,19 +77,19 @@ h3 {
margin: 20px;
}
-.mat-cell, .mat-header-cell {
+.mat-mdc-cell, .mat-mdc-header-cell {
padding: 20px 10px;
/* width: 12.5%; */
/* max-width: 12.5%; */
word-wrap: break-word;
}
-.mat-header-cell {
+.mat-mdc-header-cell {
font-size: 16px;
font-weight: bold;
}
-td.mat-cell {
+td.mat-mdc-cell {
padding: 0 10px;
}
diff --git a/src/app/pages/teams/teams.component.html b/src/app/pages/teams/teams.component.html
index 36b295f1d..b611cffb6 100644
--- a/src/app/pages/teams/teams.component.html
+++ b/src/app/pages/teams/teams.component.html
@@ -15,22 +15,22 @@
{{ infoTitle }}
+ [value]="dateFormat(info[infoTitle]?.lastUpdated)"
+ [suffix]="info[infoTitle]?.lastUpdated ? '' : 'No activity registered'">
@@ -84,7 +84,7 @@
Activities in progress
|
- Currently no activities in progress for {{ info[infoTitle].teams.join(', ') }}
+ Currently no activities in progress for {{ info[infoTitle]?.teams?.join(', ') }}
|
diff --git a/src/app/pages/teams/teams.component.spec.ts b/src/app/pages/teams/teams.component.spec.ts
index 66e69baf1..9fd8b6b9e 100644
--- a/src/app/pages/teams/teams.component.spec.ts
+++ b/src/app/pages/teams/teams.component.spec.ts
@@ -2,7 +2,7 @@ import { HttpClientModule, HttpHandler } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { MatChip } from '@angular/material/chips';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { TeamsComponent } from './teams.component';
import { ModalMessageComponent } from 'src/app/component/modal-message/modal-message.component';
@@ -21,14 +21,13 @@ describe('TeamsComponent', () => {
/* eslint-disable */
// await mockLoaderService.load();
await TestBed.configureTestingModule({
- providers: [
+ providers: [
HttpClientTestingModule,
{ provide: ModalMessageComponent, useValue: {} },
{ provide: LoaderService, useValue: mockLoaderService },
- ],
- imports: [RouterTestingModule, HttpClientModule],
- declarations: [TeamsComponent, MatChip],
- }).compileComponents();
+ ],
+ imports: [RouterTestingModule, HttpClientModule, NoopAnimationsModule, TeamsComponent],
+}).compileComponents();
/* eslint-enable */
});
diff --git a/src/app/pages/teams/teams.component.ts b/src/app/pages/teams/teams.component.ts
index c16b10b6f..f0ea60f0a 100644
--- a/src/app/pages/teams/teams.component.ts
+++ b/src/app/pages/teams/teams.component.ts
@@ -1,6 +1,6 @@
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { sum } from 'd3';
import {
DialogInfo,
@@ -21,11 +21,29 @@ import { LoaderService } from 'src/app/service/loader/data-loader.service';
import { SettingsService } from 'src/app/service/settings/settings.service';
import { downloadYamlFile } from 'src/app/util/download';
import { isEmptyObj, perfNow, dateStr, uniqueCount } from 'src/app/util/util';
+import { MatIconModule } from '@angular/material/icon';
+import { KpiComponent } from '../../component/kpi/kpi.component';
+import { MatButtonModule } from '@angular/material/button';
+import { NgIf, NgFor } from '@angular/common';
+import { TeamsGroupsEditorComponent } from '../../component/teams-groups-editor/teams-groups-editor.component';
+import { TopHeaderComponent } from '../../component/top-header/top-header.component';
@Component({
selector: 'app-teams',
templateUrl: './teams.component.html',
styleUrls: ['./teams.component.css'],
+ standalone: true,
+ imports: [
+ TopHeaderComponent,
+ TeamsGroupsEditorComponent,
+ NgIf,
+ MatButtonModule,
+ KpiComponent,
+ MatTableModule,
+ MatSortModule,
+ MatIconModule,
+ NgFor,
+ ],
})
export class TeamsComponent implements OnInit, AfterViewInit {
dateStr = dateStr;
@@ -38,7 +56,7 @@ export class TeamsComponent implements OnInit, AfterViewInit {
// Info panel showing KPIs for teams and groups
infoTitle: string = '';
infoTeams: TeamNames = [];
- info: Record
= {};
+ info: Partial> = {};
dataSource: MatTableDataSource = new MatTableDataSource([]); // eslint-disable-line
allColumnNames: string[] = [];
diff --git a/src/app/pages/usage/usage.component.spec.ts b/src/app/pages/usage/usage.component.spec.ts
index 3fe84c5bb..90175de23 100644
--- a/src/app/pages/usage/usage.component.spec.ts
+++ b/src/app/pages/usage/usage.component.spec.ts
@@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
import { UsageComponent } from './usage.component';
import { ActivatedRoute } from '@angular/router';
@@ -10,7 +11,7 @@ describe('UsageComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [UsageComponent],
+ imports: [UsageComponent, HttpClientTestingModule],
}).compileComponents();
});
diff --git a/src/app/pages/usage/usage.component.ts b/src/app/pages/usage/usage.component.ts
index d19ca9905..8219a136b 100644
--- a/src/app/pages/usage/usage.component.ts
+++ b/src/app/pages/usage/usage.component.ts
@@ -1,11 +1,15 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { perfNow } from 'src/app/util/util';
+import { MarkdownViewerComponent } from '../../component/markdown-viewer/markdown-viewer.component';
+import { TopHeaderComponent } from '../../component/top-header/top-header.component';
@Component({
selector: 'app-usage',
templateUrl: './usage.component.html',
styleUrls: ['./usage.component.css'],
+ standalone: true,
+ imports: [TopHeaderComponent, MarkdownViewerComponent],
})
export class UsageComponent implements OnInit {
page: string = 'USAGE';
diff --git a/src/app/pages/userday/userday.component.spec.ts b/src/app/pages/userday/userday.component.spec.ts
index 231e6e33c..a2713feeb 100644
--- a/src/app/pages/userday/userday.component.spec.ts
+++ b/src/app/pages/userday/userday.component.spec.ts
@@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
import { UserdayComponent } from './userday.component';
@@ -8,7 +9,7 @@ describe('UserdayComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [UserdayComponent],
+ imports: [UserdayComponent, HttpClientTestingModule],
}).compileComponents();
});
diff --git a/src/app/pages/userday/userday.component.ts b/src/app/pages/userday/userday.component.ts
index 5b4f001a4..635171ec4 100644
--- a/src/app/pages/userday/userday.component.ts
+++ b/src/app/pages/userday/userday.component.ts
@@ -1,10 +1,14 @@
import { Component, OnInit } from '@angular/core';
import { perfNow } from 'src/app/util/util';
+import { MarkdownViewerComponent } from '../../component/markdown-viewer/markdown-viewer.component';
+import { TopHeaderComponent } from '../../component/top-header/top-header.component';
@Component({
selector: 'app-userday',
templateUrl: './userday.component.html',
styleUrls: ['./userday.component.css'],
+ standalone: true,
+ imports: [TopHeaderComponent, MarkdownViewerComponent],
})
export class UserdayComponent implements OnInit {
constructor() {}
diff --git a/src/app/pipe/to-string-value.pipe.ts b/src/app/pipe/to-string-value.pipe.ts
index fc283b5bd..2b4d94494 100644
--- a/src/app/pipe/to-string-value.pipe.ts
+++ b/src/app/pipe/to-string-value.pipe.ts
@@ -3,6 +3,7 @@ import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'ToStringValue',
pure: true,
+ standalone: true,
})
export class ToStringValuePipe implements PipeTransform {
transform(value: unknown): string {
diff --git a/src/custom-theme.scss b/src/custom-theme.scss
index b5209b7d8..3ce7333ef 100644
--- a/src/custom-theme.scss
+++ b/src/custom-theme.scss
@@ -20,12 +20,14 @@ $custom-dark-theme: (
link: #66bb6a,
);
-$custom-typography: mat.define-typography-level($font-family: montserrat,
- $font-weight: 400,
- $font-size: 1rem,
- $line-height: 1,
- $letter-spacing: normal);
-@include mat.core($custom-typography);
+$custom-typography: mat.define-typography-config(
+ $font-family: 'Roboto, Helvetica Neue, sans-serif'
+);
+
+// Core styles (ripple, overlay, etc.)
+@include mat.core();
+// Apply typography styles to all components + hierarchy classes (.mat-headline-1, etc.)
+@include mat.all-component-typographies($custom-typography);
// ----------------------------------------------
// Angular Material Palettes
@@ -39,13 +41,25 @@ $DSOMM-dark-primary: mat.define-palette(mat.$green-palette, 500);
// ----------------------------------------------
// Angular Material Themes
// ----------------------------------------------
-$DSOMM-light-theme: mat.define-light-theme((color: (primary: $DSOMM-primary,
- accent: $DSOMM-accent,
- warn: $DSOMM-warn )));
-
-$DSOMM-dark-theme: mat.define-dark-theme((color: (primary: $DSOMM-dark-primary,
- accent: $DSOMM-accent,
- warn: $DSOMM-warn )));
+$DSOMM-light-theme: mat.define-light-theme((
+ color: (
+ primary: $DSOMM-primary,
+ accent: $DSOMM-accent,
+ warn: $DSOMM-warn
+ ),
+ typography: $custom-typography,
+ density: 0
+));
+
+$DSOMM-dark-theme: mat.define-dark-theme((
+ color: (
+ primary: $DSOMM-dark-primary,
+ accent: $DSOMM-accent,
+ warn: $DSOMM-warn
+ ),
+ typography: $custom-typography,
+ density: 0
+));
// ----------------------------------------------
// Base Theme Mixin
@@ -102,7 +116,7 @@ body {
--dependency-predecessor-fill: #deeedeff;
--dependency-successor-fill: #fdfdfdff;
- @include mat.all-component-themes($DSOMM-light-theme);
+ @include mat.all-component-colors($DSOMM-light-theme);
}
// ----------------------------------------------
@@ -110,7 +124,7 @@ body {
// ----------------------------------------------
body.dark-theme {
@include apply-theme($custom-dark-theme);
- @include mat.all-component-themes($DSOMM-dark-theme);
+ @include mat.all-component-colors($DSOMM-dark-theme);
--background-base: #323436;
/* page background */
@@ -178,7 +192,7 @@ body.dark-theme {
//cards and panels
mat-card,
- .mat-card {
+ .mat-mdc-card {
background-color: var(--background-primary);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
@@ -222,7 +236,7 @@ body.dark-theme {
}
//Tables
- .mat-table,
+ .mat-mdc-table,
table[mat-table] {
background-color: var(--background-primary);
border: 1px solid var(--border-subtle);
@@ -230,17 +244,17 @@ body.dark-theme {
overflow: hidden;
}
- .mat-header-row {
+ .mat-mdc-header-row {
background-color: var(--background-secondary);
border-bottom: 1px solid var(--border-medium);
}
- .mat-header-cell {
+ .mat-mdc-header-cell {
color: var(--text-primary);
font-weight: 600;
}
- .mat-row {
+ .mat-mdc-row {
background-color: var(--background-primary);
border-bottom: 1px solid var(--border-subtle);
transition: background-color 0.15s ease;
@@ -250,12 +264,12 @@ body.dark-theme {
}
}
- .mat-cell {
+ .mat-mdc-cell {
color: var(--text-primary);
}
// Dialog styling
- .mat-dialog-container {
+ .mat-mdc-dialog-container {
background-color: var(--background-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-medium);
@@ -282,7 +296,7 @@ body.dark-theme {
}
//chips
- .mat-chip.mat-standard-chip {
+ .mat-mdc-chip.mat-mdc-standard-chip {
background-color: var(--background-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
@@ -295,31 +309,37 @@ body.dark-theme {
}
}
-
+ .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-selected,
+ .mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--selected {
+ background-color: var(--primary-color) !important;
+ }
+
// Form fields and inputs
- .mat-form-field-appearance-outline .mat-form-field-outline {
- color: var(--border-medium);
+ .mat-mdc-form-field .mdc-notched-outline__leading,
+ .mat-mdc-form-field .mdc-notched-outline__notch,
+ .mat-mdc-form-field .mdc-notched-outline__trailing {
+ border-color: var(--border-medium);
}
-
- .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
- color: #66bb6a;
+ .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
+ .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
+ .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
+ border-color: #66bb6a;
}
- .mat-input-element {
+ .mat-mdc-input-element {
color: var(--text-primary);
caret-color: #66bb6a;
}
-
- .mat-form-field-label {
+ .mat-mdc-floating-label {
color: var(--text-secondary);
}
// Buttons
- .mat-icon-button:hover {
+ .mat-mdc-icon-button:hover {
background-color: var(--background-hover);
}
- .mat-raised-button {
+ .mat-mdc-raised-button {
background-color: var(--background-secondary);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
@@ -337,7 +357,6 @@ body.dark-theme {
border: 1px solid var(--border-medium);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-
mat-card {
background-color: transparent;
border: none;
@@ -362,7 +381,7 @@ body.dark-theme {
}
// List items and nav
- .mat-list-item,
+ .mat-mdc-list-item,
.mat-nav-list .mat-list-item {
color: var(--text-secondary);
border-radius: 8px;
@@ -380,15 +399,15 @@ body.dark-theme {
}
//select and menu
- .mat-select-panel,
- .mat-menu-panel {
+ .mat-mdc-select-panel,
+ .mat-mdc-menu-panel {
background-color: var(--background-tertiary);
border: 1px solid var(--border-medium);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
- .mat-option {
+ .mat-mdc-option {
color: var(--text-primary);
&:hover,
@@ -418,4 +437,19 @@ svg .cursors #hover {
svg .cursors #selected {
stroke: var(--heatmap-cursor-selected, black);
stroke-width: 4px;
+}
+
+mat-expansion-panel-header {
+ height: 48px !important;
+ padding: 0 16px;
+}
+
+.mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
+ padding-top: 16px;
+ padding-bottom: 8px;
+ min-height: 56px;
+}
+
+.mat-mdc-button, .mdc-button{
+ letter-spacing: 0.1px;
}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 345453bdf..40790870b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,16 +3,50 @@ document.body.classList.remove('light-theme', 'dark-theme');
document.body.classList.add(`${savedTheme}-theme`);
console.log('[main.ts] Theme set to:', savedTheme); //
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from './app/app-routing.module';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { ModalMessageComponent } from './app/component/modal-message/modal-message.component';
+import { LoaderService } from './app/service/loader/data-loader.service';
if (environment.production) {
enableProdMode();
}
-platformBrowserDynamic()
- .bootstrapModule(AppModule)
- .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(
+ BrowserModule,
+ AppRoutingModule,
+ MatDialogModule,
+ ReactiveFormsModule,
+ MatToolbarModule,
+ MatMenuModule,
+ MatSidenavModule,
+ MatIconModule,
+ MatButtonModule,
+ FormsModule,
+ MatTooltipModule
+ ),
+ LoaderService,
+ ModalMessageComponent,
+ { provide: MAT_DIALOG_DATA, useValue: {} },
+ { provide: MatDialogRef, useValue: { close: (dialogResult: any) => {} } },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.error(err));
diff --git a/src/styles.css b/src/styles.css
index 27b6af733..065016e96 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -20,25 +20,22 @@ h1, h2, h3 {
font-weight: 400;
}
-.mat-typography h1.mat-display-1 {
+.mat-typography h1.mat-headline-4 {
margin: 0;
}
-/* Slider styling */
-.mat-slider-track-background {
+/* Slider styling (MDC) */
+.mat-mdc-slider .mdc-slider__track--inactive {
background-color: var(--slider-track) !important;
}
-.mat-slider-track-fill {
- background-color: var(--slider-primary) !important;
+.mat-mdc-slider .mdc-slider__track--active_fill {
+ border-color: var(--slider-primary) !important;
}
-.mat-slider-thumb {
- background-color: var(--slider-thumb) !important;
-}
-
-.mat-slider-thumb-label {
+.mat-mdc-slider .mdc-slider__thumb-knob {
background-color: var(--slider-thumb) !important;
+ border-color: var(--slider-thumb) !important;
}
.userday table :is(td, th) {
diff --git a/src/test.ts b/src/test.ts
index 2d43ea3ee..abdde12c7 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -7,21 +7,5 @@ import {
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
-declare const require: {
- context(
- path: string,
- deep?: boolean,
- filter?: RegExp
- ): {
- (id: string): T;
- keys(): string[];
- };
-};
-
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/tsconfig.json b/tsconfig.json
index ff06eae10..1407cb6e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,12 +16,13 @@
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "es2020",
+ "target": "ES2022",
"module": "es2020",
"lib": [
"es2020",
"dom"
- ]
+ ],
+ "useDefineForClassFields": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,