Story #13488: Improve shadows

ProgrammeVitam · Oct 7, 2024 · b5af608 · b5af608
1 parent 879ba41
commit b5af608
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 104 deletions.
diff --git a/ui/ui-frontend/projects/design-system/src/app/app.module.ts b/ui/ui-frontend/projects/design-system/src/app/app.module.ts
@@ -64,7 +64,6 @@ import { ArraysModule } from './components/arrays/arrays.module';
 import { BreadcrumbModule } from './components/breadcrumb/breadcrumb.module';
 import { ButtonsModule } from './components/buttons/buttons.module';
 import { ColorsModule } from './components/colors/colors.module';
-import { ElevationModule } from './components/elevations/elevations.module';
 import { IconsModule } from './components/icons/icons.module';
 import { InputsModule } from './components/inputs/inputs.module';
 import { MiscellaneousModule } from './components/miscellaneous/miscellaneous.module';
@@ -98,7 +97,6 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa
     ChipsModule,
     ColorsModule,
     DesignSystemModule,
-    ElevationModule,
     IconsModule,
     InputsModule,
     LoggerModule.forRoot(),

diff --git a/...i-frontend/projects/design-system/src/app/components/elevations/elevations.component.html b/...i-frontend/projects/design-system/src/app/components/elevations/elevations.component.html
@@ -1,45 +1,15 @@
 <h2>{{ 'ELEVATIONS.TITLE' | translate }}</h2>
 
-<h3>{{ 'ELEVATIONS.DARK' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation dark-1">2dp-dark</div>
-  <div class="elevation-box elevation dark-2">4dp-dark</div>
-  <div class="elevation-box elevation dark-3">8dp-dark</div>
-  <div class="elevation-box elevation dark-4">16dp-dark</div>
-  <div class="elevation-box elevation dark-5">32dp-dark</div>
-  <div class="elevation-box elevation dark-6">64p-dark</div>
-  <div class="elevation-box elevation dark-7">128dp-dark</div>
-</div>
-
-<h3>{{ 'ELEVATIONS.PRIMARY' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation primary-1">2dp-primary</div>
-  <div class="elevation-box elevation primary-2">4dp-primary</div>
-  <div class="elevation-box elevation primary-3">8dp-primary</div>
-  <div class="elevation-box elevation primary-4">16dp-primary</div>
-  <div class="elevation-box elevation primary-5">32dp-primary</div>
-  <div class="elevation-box elevation primary-6">64dp-primary</div>
-  <div class="elevation-box elevation primary-7">128dp-primary</div>
-</div>
-
-<h3>{{ 'ELEVATIONS.SECONDARY' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation secondary-1">2dp-secondary</div>
-  <div class="elevation-box elevation secondary-2">4dp-secondary</div>
-  <div class="elevation-box elevation secondary-3">8dp-secondary</div>
-  <div class="elevation-box elevation secondary-4">16dp-secondary</div>
-  <div class="elevation-box elevation secondary-5">32dp-secondary</div>
-  <div class="elevation-box elevation secondary-6">64dp-secondary</div>
-  <div class="elevation-box elevation secondary-7">128dp-secondary</div>
-</div>
-
-<h3>{{ 'ELEVATIONS.TERTIARY' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation tertiary-1">2dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-2">4dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-3">8dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-4">16dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-5">32dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-6">64dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-7">128dp-tertiary</div>
-</div>
+@for (color of colors; track color) {
+  <h3>{{ 'ELEVATIONS.' + (color | uppercase) | translate }}</h3>
+  <div class="d-flex mb-5 overflow-auto">
+    @for (elevation of elevations; track elevation) {
+      <div #element class="elevation-box elevation {{ color }}-{{ elevation }}">
+        <strong>{{ name(elevation, color) }}</strong>
+        @for (part of getBoxShadow(element); track part) {
+          <div class="text-nowrap">{{ part }}</div>
+        }
+      </div>
+    }
+  </div>
+}
diff --git a/...i-frontend/projects/design-system/src/app/components/elevations/elevations.component.scss b/...i-frontend/projects/design-system/src/app/components/elevations/elevations.component.scss
@@ -5,9 +5,21 @@ div {
   padding: 20px;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
+.text-nowrap {
+  text-wrap: nowrap;
+}
+
 .elevation-box {
   border-radius: 10px;
-  margin-right: 20px;
+  margin: 50px;
+
+  div {
+    padding: 0;
+  }
 
   &.dark-1 {
     @include elevation-1-dark;

diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts
@@ -1,8 +1,24 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { UpperCasePipe } from '@angular/common';
 
 @Component({
   selector: 'design-system-elevations',
   templateUrl: './elevations.component.html',
   styleUrls: ['./elevations.component.scss'],
+  imports: [TranslateModule, UpperCasePipe],
+  standalone: true,
 })
-export class ElevationComponent {}
+export class ElevationComponent {
+  colors = ['dark', 'primary', 'secondary', 'tertiary'];
+  elevations = Array.from({ length: 7 }, (_, i) => i + 1);
+  name = (elevation: number, color: string) => `${Math.pow(2, elevation)}dp-${color}`;
+
+  getBoxShadow(element: HTMLElement) {
+    return element
+      .computedStyleMap()
+      .get('box-shadow')
+      .toString()
+      .match(/rgba([^)]+)[^,]+/g);
+  }
+}
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.module.ts b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.module.ts
diff --git a/ui/ui-frontend/projects/vitamui-library/ng-package.json b/ui/ui-frontend/projects/vitamui-library/ng-package.json
@@ -4,6 +4,7 @@
   "assets": ["./src/sass"],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "cssUrl": "inline"
+    "cssUrl": "inline",
+    "styleIncludePaths": ["src/sass"]
   }
 }
diff --git a/...nd/projects/vitamui-library/src/app/modules/components/accordion/accordion.component.scss b/...nd/projects/vitamui-library/src/app/modules/components/accordion/accordion.component.scss
@@ -28,9 +28,7 @@
 }
 
 .header {
-  box-shadow:
-    0 0 2px 0 rgba(33, 33, 33, 0.2),
-    0 1px 4px 0 rgba(33, 33, 33, 0.05);
+  @include shadow-2dp-dark;
   min-height: 50px;
   padding: 0px 16px;
   border-radius: 5px;

diff --git a/...src/app/modules/components/logbook-operation-facet/logbook-operation-facet.component.scss b/...src/app/modules/components/logbook-operation-facet/logbook-operation-facet.component.scss
@@ -1,3 +1,5 @@
+@import 'mixins/elevation';
+
 .clickable {
   cursor: pointer;
 }
@@ -25,9 +27,7 @@
   height: 100%;
   min-height: 70px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
   order: 0;
   padding: 2px;
@@ -67,8 +67,6 @@
   width: 100%;
   height: 60px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
 }
diff --git a/...modules/components/multiple-options-datepicker/multiple-options-datepicker.component.scss b/...modules/components/multiple-options-datepicker/multiple-options-datepicker.component.scss
@@ -1,4 +1,5 @@
 @import '../../../../sass/variables/colors';
+@import '../../../../sass/mixins/elevation';
 
 :host {
   &.ng-invalid:not(.ng-pristine) .vitamui-input {
@@ -24,9 +25,7 @@ mat-datepicker-toggle mat-icon {
 }
 
 ::ng-deep .mat-datepicker-content {
-  box-shadow:
-    0 0.2px 0.6px 0 rgba(117, 117, 117, 1),
-    0 0.6px 2px 0 rgba(33, 33, 33, 0.2) !important;
+  @include shadow-8dp-dark;
 
   .mat-calendar {
     height: fit-content !important;

diff --git a/...cts/vitamui-library/src/app/modules/components/vitamui-facet/vitamui-facet.component.scss b/...cts/vitamui-library/src/app/modules/components/vitamui-facet/vitamui-facet.component.scss
@@ -1,3 +1,5 @@
+@import 'mixins/elevation';
+
 .clickable {
   cursor: pointer;
 }
@@ -52,9 +54,7 @@
   height: 100%;
   min-height: 90px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
   order: 0;
   padding: 2px;
@@ -95,8 +95,6 @@
   width: 100%;
   height: 60px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
 }