feat: Update to Bootstrap 5.3 (#380)

* updates to bootstrap 5.3 * removes a lot of custom SCSS in favor of use core Bootstrap styling * adds light/dark theme toggle * updates styling of various components to better match bootstrap styling
bluehalo · May 20, 2024 · 4b8d6bc · 4b8d6bc
1 parent 4b2eb65
commit 4b8d6bc
Show file tree

Hide file tree

Showing 130 changed files with 7,367 additions and 22,604 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,8 +29,9 @@
     "@angular/router": "^17.3.4",
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@ng-select/ng-select": "~12.0.7",
-    "@ng-web-apis/common": "^3.0.2",
-    "bootstrap": "4.6.1",
+    "@ng-web-apis/common": "^3.0.6",
+    "@ng-web-apis/storage": "^3.0.6",
+    "bootstrap": "^5.3.3",
     "lodash": "~4.17.21",
     "luxon": "~3.2.1",
     "ngx-bootstrap": "~12.0.0",

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,12 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { SiteContainerComponent } from './core/site-container/site-container.component';
+import { ThemingService } from './core/theming/theming.service';
 
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	standalone: true,
 	imports: [SiteContainerComponent, RouterOutlet]
 })
-export class AppComponent {}
+export class AppComponent {
+	private theming = inject(ThemingService);
+}
diff --git a/src/app/common/breadcrumb/breadcrumb.component.html b/src/app/common/breadcrumb/breadcrumb.component.html
@@ -1,16 +1,15 @@
-<div class="header">
-	@for (b of breadcrumbs; track b; let last = $last) {
-		<ng-container class="header-breadcrumb">
-			<span class="header-breadcrumb">
-				@if (!last) {
-					<a [routerLink]="[b.url]">{{ b?.label }}</a>
-				} @else {
-					{{ b?.label }}
-				}
-			</span>
-			@if (!last) {
-				<span class="header-breadcrumb-separator"> > </span>
-			}
-		</ng-container>
-	}
-</div>
+<nav aria-label="breadcrumb">
+	<ol class="breadcrumb">
+		@for (b of breadcrumbs; track b; let last = $last) {
+			<li class="breadcrumb-item">
+				<span>
+					@if (!last) {
+						<a [routerLink]="[b.url]">{{ b?.label }}</a>
+					} @else {
+						{{ b?.label }}
+					}
+				</span>
+			</li>
+		}
+	</ol>
+</nav>
diff --git a/src/app/common/breadcrumb/breadcrumb.component.scss b/src/app/common/breadcrumb/breadcrumb.component.scss
@@ -1,25 +1,16 @@
-@import '../../../styles/shared';
-@import '../../core/site-navbar/shared';
+@import "../../../styles/bootstrap/shared";
 
-$breadcrumb-header-height: $nav-closed-width !default;
-$breadcrumb-font-size: $font-size !default;
-$breadcrumb-line-height: $font-line-height !default;
-$breadcrumb-item-padding-left: 0.5rem !default;
-$breadcrumb-first-item-padding-left: 1rem !default;
-
-.header {
+:host {
 	display: flex;
 	align-items: center;
-	@include font-bold($breadcrumb-font-size);
-	line-height: $breadcrumb-line-height;
-	background-color: $color-white;
-	height: $breadcrumb-header-height;
+	font-weight: bold;
+}
+
+.header-breadcrumb,
+.header-breadcrumb-separator {
+	padding-left: $spacer * .5;
 
-	.header-breadcrumb,
-	.header-breadcrumb-separator {
-		padding-left: $breadcrumb-item-padding-left;
-		&:first-child {
-			padding-left: $breadcrumb-first-item-padding-left;
-		}
+	&:first-child {
+		padding-left: 0
 	}
 }
diff --git a/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html b/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html
@@ -11,7 +11,7 @@
 	}
 	<form id="modalForm" #modalForm="ngForm">
 		@for (input of data.inputs; track input; let isFirst = $first) {
-			<div class="form-group">
+			<div class="mb-3">
 				<label [class.form-required]="input.required">{{ input.label }}</label>
 				@if (input.type === 'textarea') {
 					<textarea

diff --git a/src/app/common/flyout/flyout.component.html b/src/app/common/flyout/flyout.component.html
@@ -1,5 +1,5 @@
 <section class="flyout flyout-{{ placement }} d-flex" [ngClass]="{ 'flyout-open': isOpen }">
-	<button class="btn flyout-btn" data-inline="true" (click)="toggle()">
+	<button class="btn btn-primary flyout-btn" data-inline="true" (click)="toggle()">
 		{{ label }}
 		<span class="fa-solid fa-lg fa-angle-down" data-inline="true"></span>
 	</button>

diff --git a/src/app/common/flyout/flyout.component.scss b/src/app/common/flyout/flyout.component.scss
@@ -1,16 +1,12 @@
 @import '../../../styles/shared';
-@import '../../../styles/ngx-bootstrap/shared';
+@import '../../../styles/bootstrap/shared';
 
-$flyout-btn-color: $ux-color-white !default;
-$flyout-btn-bg-color: $ux-color-highlight !default;
-$flyout-content-border-top-color: $ux-color-highlight !default;
-$flyout-content-border-left-color: $ux-color-highlight !default;
 $flyout-border-top: 10px !default;
-$flyout-box-shadow: 0 0.25rem 0.5rem rgba($ux-color-black, 0.2) !default;
+$flyout-box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-body-bg-rgb), 0.2) !default;
 
-$flyout-right-top: 25px !default;
-$flyout-top-top: $font-line-height !default;
-$flyout-bottom-bottom: $font-line-height * 2 !default;
+$flyout-right-top: 24px !default;
+$flyout-top-top: 20px !default;
+$flyout-bottom-bottom: 20px * 2 !default;
 
 :host {
 	position: fixed;
@@ -21,28 +17,28 @@ $flyout-bottom-bottom: $font-line-height * 2 !default;
 
 	&[placement='left'] {
 		right: auto;
-		left: $ux-nav-open-width;
+		left: $nav-open-width;
 	}
 
 	&[placement='top'] {
 		right: auto;
 		top: $flyout-top-top;
-		left: $ux-nav-open-width;
+		left: $nav-open-width;
 	}
 
 	&[placement='bottom'] {
 		right: auto;
 		top: auto;
 		bottom: $flyout-bottom-bottom;
-		left: $ux-nav-open-width;
+		left: $nav-open-width;
 	}
 }
 
 .navbar-close {
 	:host[placement='left'],
 	:host[placement='top'],
 	:host[placement='bottom'] {
-		left: $ux-nav-closed-width;
+		left: $nav-closed-width;
 	}
 }
 
@@ -58,8 +54,12 @@ $flyout-bottom-bottom: $font-line-height * 2 !default;
 	&.flyout-bottom {
 		flex-direction: column;
 
-		.flyout-btn .fa-angle-down {
-			transform: rotate(180deg);
+		.flyout-btn {
+			border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
+
+			.fa-angle-down {
+				transform: rotate(180deg);
+			}
 		}
 
 		&.flyout-open {
@@ -78,12 +78,10 @@ $flyout-bottom-bottom: $font-line-height * 2 !default;
 
 .flyout-btn {
 	position: absolute;
-	color: $flyout-btn-color;
-	background-color: $flyout-btn-bg-color;
 	transform: rotate(90deg);
 	transform-origin: 0 0;
 
-	border-radius: 0 0 $border-radius $border-radius;
+	border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
 	box-shadow: none;
 
 	.flyout-left & {
@@ -108,16 +106,17 @@ $flyout-bottom-bottom: $font-line-height * 2 !default;
 }
 
 .flyout-content {
+	@include box-shadow(var(--bs-box-shadow));
+
 	overflow: auto;
-	border-top: $flyout-border-top solid $flyout-content-border-top-color;
-	box-shadow: $flyout-box-shadow;
+	border-top: $flyout-border-top solid var(--bs-primary);
 	max-height: calc(100vh - 80px);
 	width: 0;
 
 	.flyout-top &,
 	.flyout-bottom & {
 		border-top: none;
-		border-left: $flyout-border-top solid $flyout-content-border-left-color;
+		border-left: $flyout-border-top solid  var(--bs-primary);
 		width: auto;
 		height: 0;
 		max-height: calc(100vh - 100px);

diff --git a/src/app/common/loading-overlay/loading-overlay.component.scss b/src/app/common/loading-overlay/loading-overlay.component.scss
@@ -1,16 +1,13 @@
-@import '../../../styles/shared';
-
 // Added in z-index to these classes to bring them to the front of card pageable tables
 .overlay {
 	position: absolute;
 	height: 100%;
 	width: 100%;
-	background-color: rgba(255, 255, 255, 0.75);
+	background-color: rgba(var(--bs-body-bg-rgb), 0.75);
 	z-index: 9001;
 }
 
 .overlay-spinner {
-	color: $ux-color-black;
 	position: absolute;
 	top: 5%;
 	left: 50%;

diff --git a/src/app/common/loading-overlay/loading-overlay.component.spec.ts b/src/app/common/loading-overlay/loading-overlay.component.spec.ts
@@ -23,7 +23,7 @@ describe('LoadingOverlayComponent', () => {
 		fixture.detectChanges();
 		expect(rootHTMLElement.getElementsByClassName('overlay').length).toEqual(1);
 		expect(rootHTMLElement.getElementsByClassName('overlay-spinner').length).toEqual(1);
-		expect(rootHTMLElement.getElementsByClassName('notification-container').length).toEqual(0);
+		expect(rootHTMLElement.getElementsByClassName('alert').length).toEqual(0);
 	});
 
 	it('should display loading overlay and error message', () => {
@@ -32,14 +32,14 @@ describe('LoadingOverlayComponent', () => {
 		fixture.detectChanges();
 		expect(rootHTMLElement.getElementsByClassName('overlay').length).toEqual(1);
 		expect(rootHTMLElement.getElementsByClassName('overlay-spinner').length).toEqual(0);
-		expect(rootHTMLElement.getElementsByClassName('notification-container').length).toEqual(1);
+		expect(rootHTMLElement.getElementsByClassName('alert').length).toEqual(1);
 	});
 
 	it('should not display loading overlay', () => {
 		component.isLoading = false;
 		fixture.detectChanges();
 		expect(rootHTMLElement.getElementsByClassName('overlay').length).toEqual(0);
 		expect(rootHTMLElement.getElementsByClassName('overlay-spinner').length).toEqual(0);
-		expect(rootHTMLElement.getElementsByClassName('notification-container').length).toEqual(0);
+		expect(rootHTMLElement.getElementsByClassName('alert').length).toEqual(0);
 	});
 });
diff --git a/src/app/common/loading-spinner/loading-spinner.component.html b/src/app/common/loading-spinner/loading-spinner.component.html
@@ -1,4 +1,2 @@
-<div class="loading-container">
-	<div class="loading-spinner"></div>
-	<div class="loading-message">{{ message }}</div>
-</div>
+<span class="fa-solid fa-spinner fa-spin"></span>
+<span class="loading-message ms-3">{{ message() }}</span>
diff --git a/src/app/common/loading-spinner/loading-spinner.component.scss b/src/app/common/loading-spinner/loading-spinner.component.scss
@@ -1,44 +1,12 @@
-@use 'sass:map';
-@import '../../../styles/shared';
-
-$loading-spinner-border: 5px !default;
-$loading-spinner-color: map.get($color-primary, 'darker') !default;
-$loading-spinner-size: 42px !default;
-$loading-spinner-message-font-size: 24px !default;
-
-.loading-container {
-	.loading-spinner {
-		display: inline-block;
-		float: left;
-		width: $loading-spinner-size;
-		height: $loading-spinner-size;
-
-		&:after {
-			content: ' ';
-			display: block;
-			width: $loading-spinner-size;
-			height: $loading-spinner-size;
-			margin: 1px;
-			border-radius: 50%;
-			border: $loading-spinner-border solid $loading-spinner-color;
-			border-color: $loading-spinner-color transparent $loading-spinner-color transparent;
-			animation: loading-spinner 1.2s linear infinite;
-		}
-	}
-	.loading-message {
-		@include font-normal($loading-spinner-message-font-size);
-		@include font-color-dark($loading-spinner-color);
+:host {
+	display: flex;
+	align-items: center;
+}
 
-		line-height: $loading-spinner-size;
-		margin-left: $loading-spinner-size + 16px;
-	}
+.fa-spinner {
+	font-size: var(--loading-spinner-font-size, 48px);
 }
 
-@keyframes loading-spinner {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
+.loading-message {
+	font-size: var(--loading-spinner-message-font-size, 24px);
 }
diff --git a/src/app/common/loading-spinner/loading-spinner.component.ts b/src/app/common/loading-spinner/loading-spinner.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
 	selector: 'loading-spinner',
@@ -7,6 +7,5 @@ import { Component, Input } from '@angular/core';
 	standalone: true
 })
 export class LoadingSpinnerComponent {
-	@Input()
-	message = 'Loading...';
+	readonly message = input('Loading...');
 }
diff --git a/src/app/common/modal/modal/modal.component.html b/src/app/common/modal/modal/modal.component.html
@@ -3,9 +3,7 @@ <h2 class="modal-title">
 		{{ title }}
 	</h2>
 
-	<button class="close" type="button" aria-label="Cancel" (click)="cancel.emit()">
-		<span class="fa-solid fa-remove" aria-hidden="true"></span>
-	</button>
+	<button class="btn-close" type="button" aria-label="Cancel" (click)="cancel.emit()"></button>
 </section>
 
 <section class="modal-body">
@@ -14,11 +12,11 @@ <h2 class="modal-title">
 
 <section class="modal-footer">
 	@if (cancelText) {
-		<button class="btn btn-outline-secondary mr-2" (click)="cancel.emit()">
+		<button class="btn btn-outline-primary me-2" type="button" (click)="cancel.emit()">
 			{{ cancelText }}
 		</button>
 	}
-	<button class="btn btn-primary" [disabled]="disableOk" (click)="ok.emit()">
+	<button class="btn btn-primary" type="button" [disabled]="disableOk" (click)="ok.emit()">
 		{{ okText }}
 	</button>
 </section>
diff --git a/src/app/common/notification/notification.component.html b/src/app/common/notification/notification.component.html
@@ -1,9 +1,9 @@
-<div class="{{ notificationType }}-notification notification-container" [class.small]="small">
-	<div class="float-left" [class.action-text]="showActions">
+<div class="alert alert-{{ notificationType }} d-flex" [class.small]="small">
+	<div class="flex-grow-1" [class.action-text]="showActions">
 		{{ message }}
 	</div>
 	@if (showActions) {
-		<div class="table-actions d-flex flex-grow-1 float-right">
+		<div class="table-actions d-flex">
 			<ng-container *ngTemplateOutlet="actionTemplate"></ng-container>
 		</div>
 	}