fix styling issues

porscheinformatik · Jul 17, 2023 · 71fbf05 · 71fbf05
1 parent df59c7b
commit 71fbf05
Show file tree

Hide file tree

Showing 17 changed files with 1,031 additions and 13,108 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,4 +79,4 @@
       "git add"
     ]
   }
-}
+}
diff --git a/projects/material-addons/src/themes/common/styles.scss b/projects/material-addons/src/themes/common/styles.scss
@@ -1,17 +1,9 @@
 @use '@angular/material' as mat;
 @use '@angular/material/theming' as theming;
 
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
 @include mat.all-component-typographies();
+@include mat.all-component-densities(-2);
 @include mat.core();
-
 $contrast: (
   50: theming.$dark-primary-text,
   100: theming.$dark-primary-text,
@@ -45,14 +37,26 @@ $contrast: (
   @return map-get($color-scheme, background-color);
 }
 
+
+
 @mixin build-custom-theme($primary-palette, $warn-palette: mat.$red-palette, $theme-name: 'undefined') {
   $material-addons-colors-primary: mat.define-palette($primary-palette);
   $material-addons-colors-warn: mat.define-palette($warn-palette);
-  $material-addons-theme: mat.define-light-theme($material-addons-colors-primary, $material-addons-colors-primary, $material-addons-colors-warn);
+  //$material-addons-theme: mat.define-light-theme($material-addons-colors-primary, $material-addons-colors-primary, $material-addons-colors-warn);
+
+  $material-addons-theme: mat.define-light-theme((
+    color: (
+      primary: $material-addons-colors-primary,
+      accent: $material-addons-colors-primary,
+      warn: $material-addons-colors-warn,
+    )
+  ));
 
   $hover-color: mat.define-palette($primary-palette, 50);
 
   @include mat.all-component-themes($material-addons-theme);
+  //setting the density for the components
+  //@include mat.form-field-density(-5);
 
   @if variable-exists(table-hover-color) {
     .clickable-table-row:hover,
@@ -64,8 +68,7 @@ $contrast: (
   }
 
   @if variable_exists(warn-color) {
-    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-    .mat-form-field-required-marker {
+    .mat-mdc-form-field-required-marker {
       color: $warn-color;
     }
 
@@ -78,8 +81,7 @@ $contrast: (
   }
 
   @if variable_exists(main-primary) {
-    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
-    .mat-chip-selected {
+    .mat-mdc-chip-selected {
       border: 1px solid $main-primary !important;
       color: $main-primary !important;
     }
@@ -96,7 +98,7 @@ $contrast: (
     @warn 'variable $main-primary  in theme #{$theme-name} is not defined';
   }
   /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
-  .mat-chip-selected {
+  .mat-mdc-chip-selected {
     background-color: white !important;
   }
 }
@@ -124,18 +126,15 @@ table {
   color: black;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
-.mat-select-disabled .mat-select-value {
+.mat-mdc-select-disabled .mat-select-value {
   color: black;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
 .mat-mdc-form-field .mat-mdc-select.mat-select-disabled .mat-select-arrow {
   color: white;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
-.mat-checkbox-disabled .mat-checkbox-label {
+.mat-mdc-checkbox-disabled .mat-checkbox-label {
   color: black;
 }
 
@@ -223,8 +222,7 @@ mad-link-button {
   overflow: hidden;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
-.mat-select-disabled {
+.mat-mdc-select-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
@@ -291,8 +289,7 @@ mad-link-button {
   justify-content: flex-end;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
-.mat-card-header-text {
+.mat-md-card-header-text {
   margin: 0 !important;
 }
 
@@ -313,7 +310,6 @@ mad-link-button {
     width: 0 !important;
     height: 0 !important;
   }
-  /* TODO(mdc-migration): The following rule targets internal classes of paginator that may no longer apply for the MDC version.*/
   mat-paginator {
     display: none !important;
     height: 0 !important;
@@ -345,8 +341,7 @@ mad-link-button {
   async-autocomplete mat-icon {
     display: none !important;
   }
-  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-  .mat-tab-label:not(.mat-tab-label-active) {
+  .mat-mdc-tab-label:not(.mat-tab-label-active) {
     display: none !important;
   }
 }
diff --git a/projects/material-addons/src/themes/pbv.scss b/projects/material-addons/src/themes/pbv.scss
@@ -19,6 +19,10 @@ $primary-palette: (
   A700: #0071ee,
   contrast: $contrast,
   background-color: #fafafa,
+  warn-color: #AD7600,
+  error-color: #C21D00,
+  info-color: #00648F,
+  success-color: #3C8500
 );
 
 $warn-palette: (
@@ -45,6 +49,9 @@ $table-hover-color: get-table-hover-color($main-primary);
 $background-color: get-background-color($primary-palette);
 
 $warn-color: get-main-color($warn-palette);
+$error-color: map-get($primary-palette, error-color);
+$info-color: map-get($primary-palette, info-color);
+$success-color: map-get($primary-palette, success-color);
 
 :root {
   --main-primary: #{$main-primary};
@@ -54,4 +61,6 @@ $warn-color: get-main-color($warn-palette);
   --background-color: #{$background-color};
 }
 
+
 @include build-custom-theme($primary-palette, $warn-palette, $theme-name);
+
diff --git a/projects/material-addons/src/themes/poa.scss b/projects/material-addons/src/themes/poa.scss
@@ -19,7 +19,10 @@ $primary-palette: (
   A700: #16f7ff,
   contrast: $contrast,
   background-color: #fafafa,
-  warn-color: red,
+  warn-color: #AD7600,
+  error-color: #C21D00,
+  info-color: #00648F,
+  success-color: #3C8500
 );
 
 $main-primary: get-main-color($primary-palette);
@@ -28,6 +31,10 @@ $table-hover-color: get-table-hover-color($main-primary);
 $background-color: get-background-color($primary-palette);
 
 $warn-color: map-get($primary-palette, warn-color);
+$error-color: map-get($primary-palette, error-color);
+$info-color: map-get($primary-palette, info-color);
+$success-color: map-get($primary-palette, success-color);
+
 
 :root {
   --main-primary: #{$main-primary};

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -17,7 +17,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
@@ -220,7 +220,9 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     MatSlideToggleModule,
     DataTableDevModule,
   ],
-  providers: [],
+  providers: [
+    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/components/navigation/main-navigation.component.html b/src/app/components/navigation/main-navigation.component.html
@@ -37,7 +37,7 @@
     <mat-nav-list class="top-icon-list">
       <a routerLink="/home" *ngIf="isHandset$ | async">
         <mat-list-item (click)="collapseAll()">
-          <mat-icon matListItemAvatar>home</mat-icon>
+          <mat-icon class="list-item-avatar" matListItemAvatar>home</mat-icon>
           <div matListItemTitle>{{ 'moduleSwitcher' | translate }}</div>
         </mat-list-item>
       </a>
@@ -47,7 +47,7 @@
       <div *ngIf="currentModule">
         <a [routerLink]="currentModule.homeRoute">
           <mat-list-item (click)="collapseAll()">
-            <mat-icon matListItemAvatar class="mat-mdc-list-item-avatar-title">{{ currentModule.matIcon }}</mat-icon>
+            <mat-icon matListItemAvatar class="list-item-avatar">{{ currentModule.matIcon }}</mat-icon>
             <a matListItemTitle>{{ currentModule.i18n | translate }}</a>
           </mat-list-item>
         </a>

diff --git a/src/app/components/navigation/main-navigation.component.scss b/src/app/components/navigation/main-navigation.component.scss
@@ -166,10 +166,10 @@
   border-width: 0;
 }
 
-.mat-mdc-list-item-avatar {
-  padding-top: 6px;
+.list-item-avatar {
+  padding-top: 10px;
 }
 
 .mat-mdc-list-item-avatar-title {
-  padding-top: 16px;
+  padding-top: 18px;
 }
diff --git a/src/app/components/navigation/nav-entry/nav-child/nav-child.component.html b/src/app/components/navigation/nav-entry/nav-child/nav-child.component.html
@@ -1,8 +1,8 @@
 <ng-container *ngIf="entry.route">
   <a [routerLink]="entry.route" routerLinkActive="active-link">
     <mat-list-item>
-      <div matListItemAvatar>
-        <mat-icon [ngStyle]="{ 'margin-left': sublevel * 8 + 'px' }">{{ entry.matIcon }}</mat-icon>
+      <div matListItemAvatar >
+        <mat-icon class="mat-mdc-list-item-avatar" [ngStyle]="{ 'margin-left': sublevel * 8 + 'px' }">{{ entry.matIcon }}</mat-icon>
       </div>
       <span matListItemTitle> {{ entry.i18n | translate }}</span>
     </mat-list-item>
@@ -12,8 +12,8 @@
 <!-- Entries without a route are disabled -->
 <ng-container *ngIf="!entry.route">
   <mat-list-item [disableRipple]="true">
-    <div matListItemAvatar>
-      <mat-icon [ngStyle]="{ 'margin-left': sublevel * 8 + 'px' }">{{ entry.matIcon }}</mat-icon>
+    <div matListItemAvatar >
+      <mat-icon class="mat-mdc-list-item-avatar" [ngStyle]="{ 'margin-left': sublevel * 8 + 'px' }">{{ entry.matIcon }}</mat-icon>
     </div>
     <span matListItemTitle> {{ entry.i18n | translate }}</span>
   </mat-list-item>

diff --git a/src/app/components/navigation/nav-entry/nav-entry.component.html b/src/app/components/navigation/nav-entry/nav-entry.component.html
@@ -12,13 +12,13 @@
       (click)="toggleChildren(entry)"
       #isRouteActive="routerLinkActive"
     >
-      <div matListItemAvatar>
-        <mat-icon [ngStyle]="{ 'margin-left': sublevel * 8 + 'px' }">{{ entry.matIcon }}</mat-icon>
-      </div>
+      <span matListItemAvatar >
+        <mat-icon class="list-item-avatar" [ngStyle]="{ 'margin-left': sublevel * 8 + 'px' }">{{ entry.matIcon }}</mat-icon>
+      </span>
       <a matListItemTitle> {{ entry.i18n | translate }}
-        <span class="arrow-icons">
-          <mat-icon *ngIf="!isOpen(entry, isRouteActive.isActive)">keyboard_arrow_right</mat-icon>
-          <mat-icon *ngIf="isOpen(entry, isRouteActive.isActive)">keyboard_arrow_down</mat-icon>
+        <span>
+          <mat-icon class="arrow-icons" *ngIf="!isOpen(entry, isRouteActive.isActive)">keyboard_arrow_right</mat-icon>
+          <mat-icon class="arrow-icons" *ngIf="isOpen(entry, isRouteActive.isActive)">keyboard_arrow_down</mat-icon>
         </span>
       </a>
     </mat-list-item>

diff --git a/src/app/components/navigation/nav-entry/nav-entry.component.scss b/src/app/components/navigation/nav-entry/nav-entry.component.scss
@@ -23,6 +23,6 @@
   vertical-align: middle;
 }
 
-.mat-mdc-list-item-avatar {
-  padding-top: 6px;
+.list-item-avatar {
+  padding-top: 10px;
 }
diff --git a/src/app/example-components/numeric-field-wrapper/numeric-field-wrapper.component.html b/src/app/example-components/numeric-field-wrapper/numeric-field-wrapper.component.html
@@ -22,7 +22,7 @@
         matInput
         unit="€"
         [autofillDecimals]="true"
-        textAlign="left"
+        textAlign="right"
         madNumericField/>
       <mat-error *ngIf="!form.get('moneyAmount').valid">
         Please enter a value greater than or equal to 0

diff --git a/src/app/example-components/read-only-field-error/read-only-field-error.component.html b/src/app/example-components/read-only-field-error/read-only-field-error.component.html
@@ -1,2 +1,2 @@
-<mad-readonly-form-field [value]="" label="IBAN" errorMessage="Please enter a value for IBAN"></mad-readonly-form-field>
+<mad-readonly-form-field [value]="" label="IBAN"></mad-readonly-form-field>
 
diff --git a/src/app/example-components/read-only-field/read-only-field.component.html b/src/app/example-components/read-only-field/read-only-field.component.html
@@ -7,7 +7,7 @@
 <mad-readonly-form-field [value]="zeroValue" [label]="'Zero value'"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="nullValue" [label]="'Null value'"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="undefinedValue" [label]="'Undefined value'"></mad-readonly-form-field>
-<mad-readonly-form-field [value]="" label="First name" errorMessage="Please enter a value for first name"></mad-readonly-form-field>
+<mad-readonly-form-field [value]="" label="First name"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="demoText" [multiline]="true" label="Text with multiple lines"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="nullValue" [multiline]="true" [rows]="4" [shrinkIfEmpty]="true" label="This text is defined to have 4 lines, but is shrank to one line, because it's empty"></mad-readonly-form-field>
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,4 +79,4 @@ @@
           "git add"
         ]
       }
-    }
+    }
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,2 @@
		<mad-readonly-form-field [value]="" label="IBAN" errorMessage="Please enter a value for IBAN"></mad-readonly-form-field>
		<mad-readonly-form-field [value]="" label="IBAN"></mad-readonly-form-field>