Merge branch 'master' into OZG-4527-aktenzeichen-manuell-eingeben-dark-mode

alfa-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss

@@ -43,7 +43,7 @@ body.mat-typography ozgcloud-expansion-panel {
 	h3 {
 		margin-bottom: 0;
 		font-weight: 500;
-		margin-left: 16px;
+		margin-left: 8px;
 		font-size: 16px;
 	}
 

alfa-client/libs/ui/src/lib/ui/ozgcloud-button/shared/ozgcloud-button-content/ozgcloud-button-content.component.html

 <mat-icon *ngIf="icon" data-test-class="icon"
+		[class.with-text]="text"
 		[style.visibility]="isDisabled ? 'hidden' : 'visible'">
 	{{ icon }}
 </mat-icon>
 
 <mat-icon *ngIf="svgIcon" data-test-class="icon"
+		[class.with-text]="text"
 		[svgIcon]="svgIcon"
 		[style.visibility]="isDisabled ? 'hidden' : 'visible'">
 </mat-icon>

alfa-client/libs/ui/src/lib/ui/ozgcloud-button/shared/ozgcloud-button-content/ozgcloud-button-content.component.scss

@@ -6,7 +6,7 @@ $rightMargin: 8px;
 	justify-content: center;
 }
 
-mat-icon {
+mat-icon.with-text {
 	margin-right: $rightMargin;
 }
 

alfa-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang/user-profile-button-container/user-profile-button-container.component.scss

@@ -25,7 +25,7 @@
 	border: 0;
 	background-color: transparent;
 	margin: 0;
-	padding: 0 0 8px 0;
+	padding: 0;
 	display: block;
 	outline: 0;
 	cursor: pointer;

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html

@@ -24,7 +24,7 @@
 
 -->
 <div class="horizontal">
-	<h1 alfa-aktenzeichen [vorgang]="vorgang" data-test-id="aktenzeichen"></h1>
+	<div alfa-aktenzeichen class="ellipsis" [vorgang]="vorgang" data-test-id="aktenzeichen"></div>
 	<ng-container *ngIf="vorgang | hasLink: linkRel.SET_AKTENZEICHEN">
 		<ozgcloud-icon-button-primary svgIcon="edit" tooltip="Aktenzeichen bearbeiten" (clickEmitter)="onEdit()"></ozgcloud-icon-button-primary>
 	</ng-container>

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.scss

@@ -25,14 +25,18 @@
 .horizontal {
 	display: flex;
 	align-items: center;
+	font-size: 16px;
+	font-weight: 300;
 }
 
-h1 {
-	margin: 0;
-	line-height: 1.4;
-	font-size: 1.5rem;
-	font-weight: 400;
+.ellipsis {
+	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-	text-overflow:ellipsis;
+}
+
+// Workaround Material's fixed 48px height
+:host ::ng-deep ozgcloud-icon-button-primary button {
+	position: absolute;
+	top: -24px;
 }
\ No newline at end of file

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss

@@ -56,14 +56,7 @@
 
 .section {
 	width: auto;
-	padding: 0 16px;
-
-	&:first-child {
-		padding-left: 0.75rem;
-	}
-	&:last-child {
-		margin-right: 8px;
-	}
+	padding: 0 16px 16px 16px;
 }
 
 .two-column {

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html

@@ -23,23 +23,23 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<alfa-vorgang-status-dot [status]="vorgangWithEingang.status" class="status-dot"></alfa-vorgang-status-dot>
+<alfa-vorgang-status-dot [status]="vorgang.status" class="status-dot"></alfa-vorgang-status-dot>
 
-<alfa-vorgang-status-text [status]="vorgangWithEingang.status" data-test-id="status-text"
+<alfa-vorgang-status-text [status]="vorgang.status" data-test-id="status-text"
 	class="status-text"></alfa-vorgang-status-text>
 
-<div class="initial-date" data-test-id="created-at">{{ vorgangWithEingang.createdAt | date : 'EEEE, d. LLLL y, H:mm'}}</div>
+<div class="initial-date" data-test-id="created-at">{{ vorgang.createdAt | date : 'EEEE, d. LLLL y, H:mm'}}</div>
 
-<alfa-vorgang-nummer class="vorgang-nummer big" [vorgang]="vorgangWithEingang"></alfa-vorgang-nummer>
+<alfa-vorgang-nummer class="vorgang-nummer big" [vorgang]="vorgang"></alfa-vorgang-nummer>
 
-<div class="aktenzeichen">
+<div class="aktenzeichen" [class.aktenzeichen--active]="hasAktenzeichen">
 	<mat-icon svgIcon="az"></mat-icon>
-	<alfa-aktenzeichen-editable class="aktenzeichen-editable" [vorgang]="vorgangWithEingang"></alfa-aktenzeichen-editable>
+	<alfa-aktenzeichen-editable class="aktenzeichen-editable" [vorgang]="vorgang"></alfa-aktenzeichen-editable>
 </div>
 
-<h2 data-test-id="name" class="name">{{ vorgangWithEingang.name }}</h2>
+<div data-test-id="name" class="name">{{ vorgang.name }}</div>
 
-<alfa-user-profile-in-vorgang-container *ngIf="vorgangWithEingang | hasLink: linkRel.ASSIGN" data-test-id="vorgang-header-user-icon"
-	[vorgang]="vorgangWithEingang"
+<alfa-user-profile-in-vorgang-container *ngIf="vorgang | hasLink: linkRel.ASSIGN" data-test-id="vorgang-header-user-icon"
+	[vorgang]="vorgang"
 	class="user">
 </alfa-user-profile-in-vorgang-container>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.scss

@@ -27,60 +27,23 @@
 
 :host {
 	display: grid;
-	row-gap: 0.5rem;
-	min-width: 22rem;
+	row-gap: 10px;
 	align-items: center;
-	grid-template-columns: 8% 80% 12%;
+	grid-template-columns: 48px 1fr 8%;
 	grid-template-areas:
 		"status-dot status-text initial-date"
-		". vorgang-nummer vorgang-nummer"
-		". aktenzeichen aktenzeichen"
-		". name user";
-
-	@include media('>desktop') {
-		grid-template-columns: 5% 20% 52% 23%;
-		grid-template-areas:
-			"status-dot status-text name initial-date"
-			". vorgang-nummer vorgang-nummer vorgang-nummer"
-			". aktenzeichen aktenzeichen user";
-
-		.name {
-			margin-right: 5rem;
-		}
-		.user {
-			margin-top: -0.25rem;
-		}
-		.vorgang-nummer {
-			align-self: start;
-		}
-	}
-
-	@include media('>xxlDesktop') {
-		grid-template-columns: 4% 13% 34% 34% 15%;
-		grid-template-areas:
-			"status-dot status-text name name initial-date"
-			". vorgang-nummer vorgang-nummer aktenzeichen user";
-
-		.aktenzeichen, .vorgang-nummer, .user {
-			align-self: center;
-		}
-	}
+		". name user"
+		". vorgang-nummer user"
+		". aktenzeichen aktenzeichen";
 
 	padding: 1rem 1.5rem;
 }
 
-h1 {
-	margin: 0;
-	line-height: 1.4;
-	font-size: 1.5rem;
-	font-weight: 400;
-}
-
-h2 {
+.name {
 	line-height: 1.4;
-	margin: 0;
-	font-size: 1rem;
-	font-weight: 400;
+	margin: 8px 0 4px 0;
+	font-size: 16px;
+	font-weight: 500;
 }
 
 .ellipsis {
@@ -116,9 +79,14 @@ mat-icon {
 	margin-left: -2px;
 	display: flex;
 	align-items: center;
+	color: #c2c2c2;
+
+	&--active {
+		color: unset;
+	}
 
 	.aktenzeichen-editable {
-		width: calc(100% - 48px);
+		width: calc(100% - 82px);
 	}
 }
 
@@ -136,5 +104,4 @@ mat-icon {
 	grid-area: user;
 	align-self: start;
 	justify-self: end;
-	margin-top: -1.5rem;
 }

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.spec.ts

@@ -24,14 +24,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
-import { EnumToLabelPipe, HasLinkPipe } from '@alfa-client/tech-shared';
+import { EMPTY_STRING, EnumToLabelPipe, HasLinkPipe } from '@alfa-client/tech-shared';
 import { VorgangHeaderLinkRel } from '@alfa-client/vorgang-shared';
-import { AktenzeichenComponent, VorgangNummerComponent, VorgangStatusDotComponent, VorgangStatusTextComponent } from '@alfa-client/vorgang-shared-ui';
+import { VorgangNummerComponent, VorgangStatusDotComponent, VorgangStatusTextComponent } from '@alfa-client/vorgang-shared-ui';
 import { UserProfileInVorgangContainerComponent } from 'libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang-container.component';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
 import { VorgangDetailHeaderComponent } from './vorgang-detail-header.component';
 import { AktenzeichenEditableComponent } from '@alfa-client/vorgang-detail';
+import { getDebugElementFromFixtureByCss } from '@alfa-client/test-utils';
+import { DebugElement } from '@angular/core';
 
 describe('VorgangDetailHeaderComponent', () => {
 	let component: VorgangDetailHeaderComponent;
@@ -67,7 +69,7 @@ describe('VorgangDetailHeaderComponent', () => {
 
 	it('should create', () => {
 		expect(component).toBeTruthy();
-	});
+	})
 
 	describe('bearbeiter/user icon', () => {
 
@@ -89,4 +91,41 @@ describe('VorgangDetailHeaderComponent', () => {
 			expect(userElement).not.toBeInstanceOf(HTMLElement);
 		})
 	})
+
+	describe('set vorgangWithEingang', () => {
+
+		it('should have Aktenzeichen', () => {
+			expect(component.hasAktenzeichen).toBeTruthy();
+		})
+
+		it.each([null, EMPTY_STRING])('should NOT have aktenzeichen for %s', (aktenzeichen: string) => {
+			const vorgangWithEingang = createVorgangWithEingangResource();
+			vorgangWithEingang.aktenzeichen = aktenzeichen;
+			component.vorgangWithEingang = vorgangWithEingang;
+
+			expect(component.hasAktenzeichen).toBeFalsy();
+		})
+
+		it('should set class aktenzeichen--active for aktenzeichen', () => {
+			fixture.detectChanges();
+
+			const element = getDebugElementFromFixtureByCss(fixture, 'div.aktenzeichen--active');
+
+			expect(element).toBeInstanceOf(DebugElement);
+		})
+
+		it.each([null, EMPTY_STRING])('should NOT set class aktenzeichen--active for aktenzeichen %s', (aktenzeichen: string) => {
+			const vorgangWithEingang = createVorgangWithEingangResource();
+			vorgangWithEingang.aktenzeichen = aktenzeichen;
+			component.vorgangWithEingang = vorgangWithEingang;
+
+			fixture.detectChanges();
+
+			const element = getDebugElementFromFixtureByCss(fixture, 'div.aktenzeichen--active');
+
+			expect(element).not.toBeInstanceOf(DebugElement);
+		})
+
+	})
+
 });

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.ts

@@ -23,6 +23,8 @@
  */
 import { Component, Input } from '@angular/core';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { isNotEmpty } from '@alfa-client/tech-shared';
+import { createVorgangWithEingangResource } from '../../../../../../vorgang-shared/test/vorgang';
 
 @Component({
 	selector: 'alfa-vorgang-detail-header',
@@ -31,7 +33,13 @@ import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-cli
 })
 export class VorgangDetailHeaderComponent {
 
-	@Input() vorgangWithEingang: VorgangWithEingangResource;
-
 	readonly linkRel = VorgangWithEingangLinkRel;
+
+	vorgang = createVorgangWithEingangResource();
+	hasAktenzeichen = false;
+
+	@Input('vorgangWithEingang') set vorgangWithEingang(vorgangWithEingang: VorgangWithEingangResource) {
+		this.vorgang = vorgangWithEingang;
+		this.hasAktenzeichen = isNotEmpty(vorgangWithEingang.aktenzeichen);
+	}
 }

alfa-client/libs/vorgang-shared-ui/src/lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb/vorgang-in-postfach-breadcrumb.component.html

@@ -23,8 +23,8 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<h1 *ngIf="vorgangStateResource.resource as vorgang">
+<span *ngIf="vorgangStateResource.resource as vorgang">
 	<a routerLink='/vorgang/{{ vorgang | toResourceUri }}' alfa-aktenzeichen [vorgang]="vorgang"></a>
 	<span>/</span>
 	<span>Nachrichten</span>
-</h1>
\ No newline at end of file
+</span>
\ No newline at end of file

alfa-client/libs/vorgang-shared-ui/src/lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb/vorgang-in-postfach-breadcrumb.component.scss

@@ -43,12 +43,4 @@
 			background-color: rgba(#777, 0.16);
 		}
 	}
-
-	h1 {
-		font-size: inherit;
-		font-weight: inherit;
-		display: inline-block;
-		margin: 0 4px;
-		padding: 0;
-	}
 }

alfa-client/libs/vorgang-shared-ui/src/lib/vorgang-nummer/_vorgang-nummer.component.theme.scss

@@ -44,9 +44,8 @@ alfa-vorgang-nummer {
 
 	&.big {
 		div {
-			line-height: 1.4;
-			font-size: 1.5rem;
-			font-weight: 400;
+			font-size: 16px;
+			font-weight: 300;
 		}
 		mat-icon {
 			margin-right: 0.5rem;

alfa-client/libs/vorgang-shared-ui/src/lib/vorgang-util.ts

@@ -23,7 +23,7 @@
  */
 import { Vorgang } from "@alfa-client/vorgang-shared";
 
-export const VORGANG_KEIN_AKTENZEICHEN_ZUGEWIESEN = 'kein Aktenzeichen zugewiesen';
+export const VORGANG_KEIN_AKTENZEICHEN_ZUGEWIESEN = 'kein Aktenzeichen';
 
 export function getAktenzeichenText(vorgang: Vorgang): string {
 	return vorgang.aktenzeichen || VORGANG_KEIN_AKTENZEICHEN_ZUGEWIESEN;

alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-breadcrumb-container/wiedervorlage-breadcrumb/wiedervorlage-breadcrumb.component.html

@@ -27,4 +27,4 @@
 <span>/</span>
 <span>Wiedervorlagen</span>
 <span>/</span>
-<h1>{{ betreff }}</h1>
+<span>{{ betreff }}</span>

alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-breadcrumb-container/wiedervorlage-breadcrumb/wiedervorlage-breadcrumb.component.scss

@@ -43,12 +43,4 @@
 			background-color: rgba(#777, 0.16);
 		}
 	}
-
-	h1 {
-		font-size: inherit;
-		font-weight: inherit;
-		display: inline-block;
-		margin: 0 4px;
-		padding: 0;
-	}
 }
\ No newline at end of file