Merge branch 'master' of git.ozg-sh.de:mgm/goofy

goofy-client/angular.json

@@ -29,10 +29,10 @@
               },
               "apps/goofy/src/assets"
             ],
-            "styles": ["apps/goofy/src/styles.scss"],
+            "styles": ["apps/goofy/src/styles/main.scss"],
             "scripts": [],
 			"stylePreprocessorOptions": {
-			  "includePaths": [ "libs/ui/src/lib/styles" ]
+			  "includePaths": [ "apps/goofy/src/styles/abstracts" ]
 			},
 			"extractCss": true
           },

goofy-client/apps/goofy/src/app/app.component.scss

-@import 'variables';
+@import "breakpoints";
+@import "~include-media/dist/include-media";
 
 :host {
 	display: flex;
@@ -21,5 +22,9 @@ main {
 }
 
 section {
+	width: 40px;
+
+	@include media('>largeDesktop') {
 		width: 360px;
 	}
+}

goofy-client/apps/goofy/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { VorgangModule } from '@goofy-client/vorgang';
 import localeDe from '@angular/common/locales/de';
 import { registerLocaleData } from '@angular/common';
 import { NavigationComponent } from './navigation/navigation.component';
+import { SettingsComponent } from './header/settings/settings.component';
 registerLocaleData(localeDe);
 
 @NgModule({
@@ -24,7 +25,8 @@ registerLocaleData(localeDe);
 		AppComponent,
 		BuildInfoComponent,
 		HeaderComponent,
-		NavigationComponent
+		NavigationComponent,
+		SettingsComponent
 	],
 	imports: [
 		BrowserModule,

goofy-client/apps/goofy/src/app/build-info/build-info.component.html

-<p>Version: {{ apiRoot.version }} | BuildTime: {{ apiRoot.buildTime }}</p>
+<p>Version: {{ apiRoot.version }} | BuildTime: {{ apiRoot.buildTime | date: 'dd.MM.yy HH:mm:ss' }}</p>
 <!--p>JavaVersion: {{ apiRoot.javaVersion }}</p-->

goofy-client/apps/goofy/src/app/build-info/build-info.component.scss

@@ -4,10 +4,17 @@
 	bottom: 0;
 	font-size: 12px;
 	color: #999;
-	margin: 4px 8px;
+	padding: 4px 8px;
+	transform: rotate(-90deg) translate(100%, 0);
+	transform-origin: right bottom;
+
+	@media (min-width: 1240px) {
+		transform: initial;
+		padding: 4px 8px;
+	}
 }
 
 p {
-	margin: 4px 0;
+	margin: 0;
 	line-height: 1;
 }

goofy-client/apps/goofy/src/app/header/_header.theme.scss

+body.dark goofy-client-header {
+	header {
+		background-color: #292929;
+	}
+}

goofy-client/apps/goofy/src/app/header/header.component.html

@@ -10,8 +10,13 @@
 	<div class="middle"></div>
 
 	<div class="right">
-		<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>account_circle</mat-icon></button>
-		<mat-menu #menu="matMenu">
+
+		<goofy-client-settings></goofy-client-settings>
+
+		<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button">
+			<mat-icon>account_circle</mat-icon>
+		</button>
+		<mat-menu #accountMenu="matMenu">
 			<button mat-menu-item>
 				<mat-icon>logout</mat-icon>
 				<span>Logout</span>

goofy-client/apps/goofy/src/app/header/header.component.scss

@@ -9,7 +9,7 @@ header {
 	right: 0;
 	width: 100%;
 	z-index: 2;
-	background-color: #fff;
+	background-color: inherit;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -26,7 +26,7 @@ header {
 }
 
 img {
-	margin: 0.25rem 1rem;
+	margin: 0 14px;
 	height: 40px;
 	width: auto;
 }
@@ -44,7 +44,9 @@ img {
 	}
 }
 
-.right {
+.big-button {
+	margin-left: 20px;
+
 	::ng-deep .mat-icon {
 		transform: scale(1.5);
 	}

goofy-client/apps/goofy/src/app/header/header.component.ts

-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Inject, OnInit, Output, Renderer2 } from '@angular/core';
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { DOCUMENT } from '@angular/common';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'goofy-client-header',
@@ -11,8 +14,14 @@ export class HeaderComponent {
 
 	toggle: boolean;
 
+	constructor(
+
+	) {}
+
 	toggleMenu() {
 		this.toggle = !this.toggle;
 		this.toggleMenuEvent.emit(this.toggle)
 	}
+
+
 }

goofy-client/apps/goofy/src/app/header/settings/settings.component.html

+<button mat-icon-button [matMenuTriggerFor]="settingsMenu"><mat-icon>settings</mat-icon></button>
+<mat-menu #settingsMenu="matMenu" >
+	<div (click)="$event.stopPropagation()" class="menu-container">
+		<mat-slide-toggle (change)="switchColorTheme($event)" [checked]="isDarkMode" color="primary">Dark Mode</mat-slide-toggle>
+	</div>
+</mat-menu>

goofy-client/apps/goofy/src/app/header/settings/settings.component.scss

+.menu-container {
+	margin: 12px 16px;
+}

goofy-client/apps/goofy/src/app/header/settings/settings.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

goofy-client/apps/goofy/src/app/header/settings/settings.component.ts

+import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+  selector: 'goofy-client-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+	darkModeName = 'dark';
+	isDarkMode: boolean;
+
+  constructor(
+		@Inject(DOCUMENT) private document,
+		private renderer: Renderer2
+	) { }
+
+	ngOnInit() {
+		this.isDarkMode = JSON.parse(localStorage.getItem(this.darkModeName));
+		this.switchBodyClass();
+	}
+
+	switchBodyClass() {
+		this.isDarkMode ? this.renderer.addClass(document.body, 'dark') : this.renderer.removeClass(document.body, 'dark');
+	}
+
+	switchColorTheme($event: MatSlideToggleChange) {
+		this.isDarkMode = $event.checked;
+		localStorage.setItem(this.darkModeName, String(this.isDarkMode));
+		if (this.isDarkMode) {
+			this.renderer.addClass(document.body, this.darkModeName);
+		} else {
+			this.renderer.removeClass(document.body, this.darkModeName);
+		}
+	}
+}

goofy-client/apps/goofy/src/app/navigation/_navigation.theme.scss

+goofy-client-navigation nav a {
+	&:hover,
+	&:focus-within {
+		background-color: rgba(#000, 0.04);
+	}
+}
+
+body.dark goofy-client-navigation nav a {
+	&:hover,
+	&:focus-within {
+		background-color: rgba(#fff, 0.08);
+	}
+}

goofy-client/apps/goofy/src/app/navigation/navigation.component.html

 <nav [ngClass]="{ small: isSmall }">
-
+	<ul>
+		<li>
+			<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+				<mat-icon>apps</mat-icon>
+				<span>Alle Vorgänge</span>
+			</a>
+		</li>
+		<li>
+			<a href="#">
+				<mat-icon>star</mat-icon>
+				<span>Mir zugeordnet</span>
+			</a>
+		</li>
+		<li>
+			<a href="#">
+				<mat-icon>delete</mat-icon>
+				<span>Gelöscht</span>
+			</a>
+		</li>
+	</ul>
 </nav>

goofy-client/apps/goofy/src/app/navigation/navigation.component.scss

+@import "variables";
+
 nav {
 	width: 256px;
-	background-color: #fff;
+	background-color: inherit;
 	transition: width 0.3s ease-in-out;
+	transition-delay: 0s;
 
 	&.small {
 		width: 72px;
+		transition-delay: 0.2s;
+	}
+}
+
+ul {
+	display: flex;
+	flex-direction: column;
+	list-style: none;
+	margin: 24px 0;
+	padding: 0;
+	align-items: flex-start;
+
+	a {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		text-decoration: none;
+		height: 32px;
+		width: 240px;
+		padding: 0 24px;
+		margin: 2px 0;
+		border-radius: 0 16px 16px 0;
+		transition:
+			margin-left 0.3s ease-in-out,
+			padding-left 0.3s ease-in-out,
+			border-radius 0.3s ease-in-out,
+			width 0.3s ease-in-out;
+		transition-delay: 0.2s;
+		color: inherit;
+		outline: 0;
+		white-space: nowrap;
+
+		&.active {
+			background-color: mat-color($primaryPalette, 50);
+			color: mat-contrast($primaryPalette, 50);
+		}
+
+		span {
+			margin-left: 20px;
+			transition: opacity 0.5s;
+			transition-delay: 0.3s;
+		}
+	}
+}
+
+.small {
+	ul {
+		a {
+			border-radius: 16px;
+			margin-left: 20px;
+			padding-left: 4px;
+			transition-delay: 0s;
+			width: 32px;
+
+			&.active {
+				background-color: mat-color($primaryPalette, 50);
+			}
+		}
+
+		span {
+			opacity: 0;
+			transition-delay: 0s;
+		}
 	}
 }

goofy-client/apps/goofy/src/index.html

@@ -15,7 +15,7 @@
 	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body class="mat-typography">
+<body class="mat-typography mat-app-background">
 <goofy-client-root></goofy-client-root>
 </body>
 </html>

goofy-client/apps/goofy/src/styles.scss

-@import "variables";
-@include mat-core();
-@include angular-material-theme($goofy-theme);
-
-/* global styles */
-html { box-sizing: border-box; }
-*, *:before, *:after { 	box-sizing: inherit; }
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; color: #202124; }

goofy-client/apps/goofy/src/styles/abstracts/_breakpoints.scss

+$breakpoints: (
+	phone: 320px,
+	tablet: 768px,
+	desktop: 1024px,
+	largeDesktop: 1240px
+);

goofy-client/libs/ui/src/lib/styles/_variables.scss → goofy-client/apps/goofy/src/styles/abstracts/_variables.scss

@@ -3,8 +3,7 @@
 $primaryPalette: mat-palette($mat-blue, 600, 300, 900);
 $accentPalette: mat-palette($mat-yellow, 600, 300, 800);
 $warnPalette: mat-palette($mat-red, 600, 300, 900);
-
-$goofy-theme: mat-light-theme((
+$goofyTheme: mat-light-theme((
 	color: (
 		primary: $primaryPalette,
 		accent: $accentPalette,
@@ -15,3 +14,16 @@ $goofy-theme: mat-light-theme((
 $shadow-bottom: inset 0 -1px 0 rgba(#000, 0.08);
 $header-height: 64px;
 $navigation-width: 20px;
+
+
+// dark theme
+$primaryDarkPalette: mat-palette($mat-yellow, 700, 300, 900);
+$accentDarkPalette: mat-palette($mat-brown, 600, 300, 800);
+$warnPalette: mat-palette($mat-red, 600, 300, 900);
+$goofyDarkTheme: mat-dark-theme((
+	color: (
+		primary: $primaryDarkPalette,
+		accent: $accentDarkPalette,
+		warn: $warnPalette,
+	)
+));