From 13f303ad19e1a8f7da87ee77cab9120e7586f4ee Mon Sep 17 00:00:00 2001
From: Oliver Schmidt <kontakt@webkreation.de>
Date: Tue, 25 Feb 2025 15:28:33 +0100
Subject: [PATCH] OZG-6185-OZG-7716 fix styling, change buttons, opt zomm
layout
---
...zard-antrag-bescheiden-form.component.html | 2 +-
.../bescheid-wizard.component.html | 2 +-
...ard-cancel-dialog-container.component.html | 29 ++++-------
...-cancel-dialog-container.component.spec.ts | 51 +++++++++++--------
.../step-content-layout.component.html | 6 +--
.../libs/bescheid/src/lib/bescheid.module.ts | 2 +
.../src/lib/button/button.component.ts | 2 +-
.../date-editor/date-editor.component.html | 2 +-
8 files changed, 51 insertions(+), 45 deletions(-)
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/antrag-bescheiden/form/bescheid-wizard-antrag-bescheiden-form.component.html b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/antrag-bescheiden/form/bescheid-wizard-antrag-bescheiden-form.component.html
index 8861db5df5..2843835f2a 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/antrag-bescheiden/form/bescheid-wizard-antrag-bescheiden-form.component.html
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/antrag-bescheiden/form/bescheid-wizard-antrag-bescheiden-form.component.html
@@ -42,7 +42,7 @@
><ods-close-icon size="large" class="fill-abgelehnt"></ods-close-icon>
</ods-radio-button-card>
</div>
- <div class="flex w-full">
+ <div class="flex">
<ozgcloud-date-editor
[formControlName]="formServiceClass.FIELD_BESCHIEDEN_AM"
label="am"
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/bescheid-wizard.component.html b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/bescheid-wizard.component.html
index 178a0f5745..9a8e66f72e 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/bescheid-wizard.component.html
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/bescheid-wizard.component.html
@@ -31,7 +31,7 @@
></ozgcloud-spinner>
<form [formGroup]="formService.form" class="h-full">
- <div class="grid h-full">
+ <div class="h-full">
@switch (activeStep) {
@case (bescheidWizardStep.AntragBescheiden) {
<alfa-bescheid-wizard-antrag-bescheiden-container
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.html b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.html
index b9789fd188..9d885f59c0 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.html
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.html
@@ -23,39 +23,32 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
-<div
- class="relative m-6 max-w-2xl rounded-lg bg-modalBg p-6 shadow-xl"
- data-test-id="bescheid-close-dialog"
->
+<div class="relative m-6 max-w-2xl rounded-lg bg-modalBg p-6 shadow-xl" data-test-id="bescheid-close-dialog">
<div class="flex flex-col gap-6">
<div>
<h4 class="text-lg font-medium text-primary">Bescheiderstellung abbrechen</h4>
</div>
<div class="grow">
- <p class="text-base">
- Soll der Bescheid-Entwurf zur späteren Bearbeitung gespeichert oder verworfen werden?
- </p>
+ <p class="text-base">Soll der Bescheid-Entwurf zur späteren Bearbeitung gespeichert oder verworfen werden?</p>
</div>
<div class="flex gap-4">
- <ozgcloud-stroked-button-with-spinner
+ <ods-button-with-spinner
[stateResource]="saveStateResource$ | async"
(clickEmitter)="save()"
- data-test-id="bescheiderstellung-abbrechen-entwurf-speichern"
+ dataTestId="bescheiderstellung-abbrechen-entwurf-speichern"
text="Entwurf speichern"
- type="submit"
- icon="check"
>
- </ozgcloud-stroked-button-with-spinner>
- <ozgcloud-stroked-button-with-spinner
+ <ods-check-icon class="fill-whitetext" icon></ods-check-icon>
+ </ods-button-with-spinner>
+ <ods-button-with-spinner
[stateResource]="deleteStateResource$ | async"
(clickEmitter)="cancel()"
- data-test-id="bescheiderstellung-abbrechen-entwurf-verwerfen"
+ variant="outline"
+ dataTestId="bescheiderstellung-abbrechen-entwurf-verwerfen"
text="Verwerfen"
- color=""
- icon="clear"
- type="submit"
>
- </ozgcloud-stroked-button-with-spinner>
+ <ods-close-icon class="fill-primary" icon></ods-close-icon>
+ </ods-button-with-spinner>
</div>
</div>
</div>
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.spec.ts b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.spec.ts
index 5dfde26e4d..47aa453fd3 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.spec.ts
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/cancel-dialog-container/bescheid-wizard-cancel-dialog-container.component.spec.ts
@@ -23,28 +23,40 @@
*/
import { CommandResource } from '@alfa-client/command-shared';
import { createErrorStateResource, StateResource } from '@alfa-client/tech-shared';
-import { createDialogRefMock, DialogRefMock, existsAsHtmlElement, getElementComponentFromFixtureByCss, Mock, mock, triggerEvent, } from '@alfa-client/test-utils';
-import { OzgcloudStrokedButtonWithSpinnerComponent } from '@alfa-client/ui';
+import {
+ createDialogRefMock,
+ DialogRefMock,
+ existsAsHtmlElement,
+ getElementComponentFromFixtureByCss,
+ Mock,
+ mock,
+ triggerEvent,
+} from '@alfa-client/test-utils';
import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { expect } from '@jest/globals';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { CheckIconComponent, CloseIconComponent } from '@ods/system';
+import { BescheidService2 } from 'libs/bescheid-shared/src/lib/bescheid2.service';
+import { createBescheidResource } from 'libs/bescheid-shared/src/test/bescheid';
+import { createCommandStateResource, createSuccessfullyDoneCommandStateResource } from 'libs/command-shared/test/command';
+import { getDataTestIdAttributeOf } from 'libs/tech-shared/test/data-test';
+import { createApiError } from 'libs/tech-shared/test/error';
+import { singleColdCompleted } from 'libs/tech-shared/test/marbles';
import { MockComponent } from 'ng-mocks';
import { EMPTY, of } from 'rxjs';
-import { BescheidService2 } from '../../../../../../bescheid-shared/src/lib/bescheid2.service';
-import { createBescheidResource } from '../../../../../../bescheid-shared/src/test/bescheid';
-import { createCommandStateResource, createSuccessfullyDoneCommandStateResource, } from '../../../../../../command-shared/test/command';
-import { getDataTestIdOf } from '../../../../../../tech-shared/test/data-test';
-import { createApiError } from '../../../../../../tech-shared/test/error';
-import { singleColdCompleted } from '../../../../../../tech-shared/test/marbles';
import { BescheidFormService } from '../../bescheid.formservice';
-import { BescheidWizardCancelDialogContainerComponent, CancelWizardDialogData, } from './bescheid-wizard-cancel-dialog-container.component';
+import {
+ BescheidWizardCancelDialogContainerComponent,
+ CancelWizardDialogData,
+} from './bescheid-wizard-cancel-dialog-container.component';
describe('BescheidWizardCancelDialogContainerComponent', () => {
let component: BescheidWizardCancelDialogContainerComponent;
let fixture: ComponentFixture<BescheidWizardCancelDialogContainerComponent>;
- const speichernButton: string = getDataTestIdOf('bescheiderstellung-abbrechen-entwurf-speichern');
- const verwerfenButton: string = getDataTestIdOf('bescheiderstellung-abbrechen-entwurf-verwerfen');
+ const speichernButton: string = getDataTestIdAttributeOf('bescheiderstellung-abbrechen-entwurf-speichern');
+ const verwerfenButton: string = getDataTestIdAttributeOf('bescheiderstellung-abbrechen-entwurf-verwerfen');
const dialogData: CancelWizardDialogData = {
bescheidResource: createBescheidResource(),
@@ -64,7 +76,12 @@ describe('BescheidWizardCancelDialogContainerComponent', () => {
async function configureTestingModule(dialogData: CancelWizardDialogData) {
await TestBed.configureTestingModule({
- declarations: [BescheidWizardCancelDialogContainerComponent, MockComponent(OzgcloudStrokedButtonWithSpinnerComponent)],
+ declarations: [
+ BescheidWizardCancelDialogContainerComponent,
+ MockComponent(ButtonWithSpinnerComponent),
+ MockComponent(CheckIconComponent),
+ MockComponent(CloseIconComponent),
+ ],
providers: [
{
provide: BescheidService2,
@@ -233,10 +250,7 @@ describe('BescheidWizardCancelDialogContainerComponent', () => {
const commandStateResource: StateResource<CommandResource> = createCommandStateResource();
component.saveStateResource$ = of(commandStateResource);
- const elementComponent: OzgcloudStrokedButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(
- fixture,
- speichernButton,
- );
+ const elementComponent: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, speichernButton);
fixture.detectChanges();
@@ -263,10 +277,7 @@ describe('BescheidWizardCancelDialogContainerComponent', () => {
const commandStateResource: StateResource<CommandResource> = createCommandStateResource();
component.deleteStateResource$ = of(commandStateResource);
- const elementComponent: OzgcloudStrokedButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(
- fixture,
- verwerfenButton,
- );
+ const elementComponent: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, verwerfenButton);
fixture.detectChanges();
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/step-content-layout/step-content-layout.component.html b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/step-content-layout/step-content-layout.component.html
index 43b8946ab2..5151ccc668 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/step-content-layout/step-content-layout.component.html
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard/step-content-layout/step-content-layout.component.html
@@ -24,17 +24,17 @@
-->
<div class="flex h-full gap-11">
- <div class="flex w-1/2 flex-row gap-7">
+ <div class="flex flex-1 flex-row gap-7 overflow-y-auto">
<alfa-bescheid-wizard-stepper
[activeStep]="activeStep"
(stepChange)="stepChange.emit($event)"
data-test-id="wizard-stepper"
/>
- <div class="mt-2 flex flex-1 flex-col">
+ <div class="mr-2 mt-2 flex flex-1 flex-col">
<ng-content select="[stepPanel]" />
</div>
</div>
- <div class="flex w-1/2">
+ <div class="flex flex-1">
<alfa-bescheid-wizard-summary headline="Bescheid" data-test-id="wizard-summary">
<ng-content select="[summary]" />
</alfa-bescheid-wizard-summary>
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid.module.ts b/alfa-client/libs/bescheid/src/lib/bescheid.module.ts
index b8f0eb5daf..e4e7092380 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid.module.ts
+++ b/alfa-client/libs/bescheid/src/lib/bescheid.module.ts
@@ -65,6 +65,7 @@ import {
BescheidWrapperComponent,
ButtonCardComponent,
ButtonComponent,
+ CheckIconComponent,
CloseIconComponent,
RadioButtonCardComponent,
SaveIconComponent,
@@ -140,6 +141,7 @@ import { BescheidWizardWeiterButtonComponent } from './bescheid-wizard-container
FileUploadEditorComponent,
SendIconComponent,
SaveIconComponent,
+ CheckIconComponent,
TextEditorComponent,
TextareaEditorComponent,
ConvertForDataTestPipe,
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts
index 15a9b7efdc..040648040f 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.component.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts
@@ -30,7 +30,7 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
export const buttonVariants = cva(
[
- 'flex items-center gap-4 rounded-lg text-sm font-medium box-border',
+ 'flex items-center gap-3 rounded-lg text-sm font-medium box-border',
'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
],
{
diff --git a/alfa-client/libs/ui/src/lib/ui/editor/date-editor/date-editor.component.html b/alfa-client/libs/ui/src/lib/ui/editor/date-editor/date-editor.component.html
index 33cd2c5156..3a5337cbab 100644
--- a/alfa-client/libs/ui/src/lib/ui/editor/date-editor/date-editor.component.html
+++ b/alfa-client/libs/ui/src/lib/ui/editor/date-editor/date-editor.component.html
@@ -23,7 +23,7 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
-<mat-form-field>
+<mat-form-field class="max-w-48">
<mat-label>{{ label }}</mat-label>
<input
matInput
--
GitLab