feat(devtools): migrate to new theme of @scion/components

SchweizerischeBundesbahnen · Oct 26, 2023 · 88f4ce5 · 88f4ce5
1 parent ad93e99
commit 88f4ce5
Show file tree

Hide file tree

Showing 42 changed files with 434 additions and 493 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -114,7 +114,17 @@
         "plugin:@angular-eslint/template/recommended",
         "plugin:@angular-eslint/template/accessibility"
       ],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/template/label-has-associated-control": [
+          "error",
+          {
+            "controlComponents": [
+              "sci-checkbox",
+              "sci-toggle-button"
+            ]
+          }
+        ]
+      }
     }
   ]
 }
diff --git a/apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.html b/apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.html
@@ -89,7 +89,7 @@
             Disabled
           </span>
           <ng-template #scopeCheckEnabled>
-            <span class="chip" title="Scope check is enabled for this application. This application cannot interact with private capabilities of other applications.">
+            <span class="chip default" title="Scope check is enabled for this application. This application cannot interact with private capabilities of other applications.">
               Default (enabled)
             </span>
           </ng-template>
@@ -100,7 +100,7 @@
           <span class="description">
             Controls whether this application can register and unregister intentions dynamically at runtime. Enabling this API is strongly discouraged. By default, this API is disabled.
           </span>
-          <span class="chip" *ngIf="application.intentionRegisterApiDisabled; else intentionRegisterApiEnabled" title="Intention register API is disabled for this application. This application has to declare intentions in its manifest.">
+          <span class="chip default" *ngIf="application.intentionRegisterApiDisabled; else intentionRegisterApiEnabled" title="Intention register API is disabled for this application. This application has to declare intentions in its manifest.">
             Default (disabled)
           </span>
           <ng-template #intentionRegisterApiEnabled>
@@ -119,7 +119,7 @@
             Disabled
           </span>
           <ng-template #intentionCheckEnabled>
-            <span class="chip" title="Intention check is enabled for this application. This application can only issue intents for which it has declared an intention in its manifest.">
+            <span class="chip default" title="Intention check is enabled for this application. This application can only issue intents for which it has declared an intention in its manifest.">
               Default (enabled)
             </span>
           </ng-template>

diff --git a/apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.scss b/apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.scss
@@ -1,9 +1,8 @@
-@use '@scion/components.internal' as sci-ɵcomponents;
+@use '@scion/components.internal/design' as sci-design;
 
 :host {
   display: flex;
   flex-direction: column;
-  padding: 1em;
 
   > section.properties {
     flex: none;
@@ -33,21 +32,23 @@
     }
 
     sci-sashbox.dependencies {
+      --sci-sashbox-gap: 10px;
+
       section {
         display: flex;
         flex-direction: column;
 
         > header {
           margin-top: 0;
           margin-bottom: .5em;
-          color: var(--sci-color-P800);
           font-weight: bold;
+          color: var(--app-color-text-strong);
         }
 
         > span.description {
           font-size: smaller;
           margin-bottom: 1em;
-          color: var(--sci-color-P600);
+          color: var(--sci-color-text-subtlest);
         }
 
         > devtools-required-capabilities, > devtools-dependent-intentions {
@@ -67,25 +68,29 @@
           grid-column: 1 / 2;
           grid-row: 1 / 2;
           margin: 0;
-          color: var(--sci-color-P800);
           font-weight: bold;
+          color: var(--app-color-text-strong);
         }
 
         > span.description {
           grid-column: 1 / 2;
           grid-row: 2 / 3;
           font-size: smaller;
-          color: var(--sci-color-P700);
+          color: var(--sci-color-text-subtlest);
           margin-top: .25em;
         }
 
         > span.chip {
           grid-column: 2 / 3;
           grid-row: 1 / 3;
-          @include sci-ɵcomponents.theme-chip(var(--sci-color-accent), #FFFFFF, var(--sci-color-accent));
           margin: auto;
           min-width: 100px;
           text-align: center;
+          @include sci-design.style-chip(var(--sci-color-accent), null, var(--sci-color-accent));
+
+          &.default {
+            @include sci-design.style-chip(var(--sci-color-border), null, var(--sci-color-text-subtlest));
+          }
         }
       }
     }

diff --git a/apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.html b/apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.html
@@ -1,5 +1,5 @@
 <span class="app-name">{{application.name}}</span>
-<span class="app-symbolic-name" title="symbolic name">{{application.symbolicName}}</span>
+<span class="app-symbolic-name" title="Symbolic Name">{{application.symbolicName}}</span>
 <a [href]="application.baseUrl" target="_blank">{{application.baseUrl}}</a>
 
 <section class="chips">
@@ -26,3 +26,7 @@
     v{{version}}
   </a>
 </section>
+
+<span class="action-indicator" sciMaterialIcon>
+  keyboard_arrow_right
+</span>
diff --git a/apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.scss b/apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.scss
@@ -1,4 +1,4 @@
-@use '@scion/components.internal' as sci-ɵcomponents;
+@use '@scion/components.internal/design' as sci-design;
 
 :host {
   display: grid;
@@ -7,26 +7,28 @@
   grid-row-gap: .5em;
   grid-template-rows: auto;
   align-items: start;
-  cursor: pointer;
+  padding: 1em 1.75em 1em 1em;
+  position: relative; // positioning context for hover action
 
   > span.app-name {
     grid-column: 1/2;
     grid-row: 1/2;
     font-weight: bold;
-    color: var(--sci-color-A800);
+    color: var(--app-color-text-strong);
   }
 
   > span.app-symbolic-name {
     grid-column: 1/2;
     grid-row: 2/3;
+    justify-self: start;
     font-size: smaller;
     font-style: italic;
   }
 
   > a {
-    justify-self: start;
     grid-column: 1/-1;
     grid-row: 3/4;
+    justify-self: start;
     font-size: smaller;
   }
 
@@ -38,11 +40,26 @@
     justify-content: flex-end;
 
     > a.chip {
-      @include sci-ɵcomponents.theme-chip(var(--sci-color-P200), transparent, var(--sci-color-P700));
+      @include sci-design.style-chip(var(--sci-color-gray-300), null, var(--sci-color-text-subtle));
 
       &.version {
         font-family: monospace;
       }
     }
   }
+
+  > span.action-indicator {
+    position: absolute;
+    justify-self: end;
+    align-self: center;
+    color: var(--sci-color-accent);
+  }
+
+  &:not(.active) {
+    cursor: pointer;
+  }
+
+  :is(&.active, &:not(:hover)) > span.action-indicator {
+    display: none;
+  }
 }
diff --git a/apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.ts b/apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.ts
@@ -14,6 +14,7 @@ import {map} from 'rxjs/operators';
 import {DevToolsManifestService} from '../dev-tools-manifest.service';
 import {Router} from '@angular/router';
 import {AsyncPipe, NgIf} from '@angular/common';
+import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 
 @Component({
   selector: 'devtools-app-list-item',
@@ -24,6 +25,7 @@ import {AsyncPipe, NgIf} from '@angular/common';
   imports: [
     NgIf,
     AsyncPipe,
+    SciMaterialIconDirective,
   ],
 })
 export class AppListItemComponent implements OnInit {

diff --git a/apps/microfrontend-platform-devtools/src/app/app-list/app-list.component.html b/apps/microfrontend-platform-devtools/src/app/app-list/app-list.component.html
@@ -1,6 +1,6 @@
 <sci-list (filter)="onAppFilter($event)" filterPosition="top">
   <ng-container *ngFor="let application of applications$ | async; trackBy: trackByFn">
-    <ng-template sciListItem [key]="application.symbolicName" [actions]="action">
+    <ng-template sciListItem [key]="application.symbolicName">
       <!-- TODO [Angular 17] Replace with the following code when resolved issue https://github.com/angular/angular/issues/50611 -->
       <!-- <devtools-app-list-item [application]="application"-->
       <!--                         [routerLink]="[{outlets: {details: [application.symbolicName]}}]"-->
@@ -12,15 +12,5 @@
                               routerLinkActive="active">
       </devtools-app-list-item>
     </ng-template>
-
-    <ng-template #action>
-      <!-- TODO [Angular 17] Replace with the following code when resolved issue https://github.com/angular/angular/issues/50611 -->
-      <!-- <span class="material-icons action" [routerLink]="[{outlets: {details: [application.symbolicName]}}]">keyboard_arrow_right</span> -->
-      <span [routerLink]="['apps', {outlets: {details: [application.symbolicName]}}]"
-            [relativeTo]="null"
-            class="material-icons action">
-        keyboard_arrow_right
-      </span>
-    </ng-template>
   </ng-container>
 </sci-list>
diff --git a/apps/microfrontend-platform-devtools/src/app/app-list/app-list.component.scss b/apps/microfrontend-platform-devtools/src/app/app-list/app-list.component.scss
@@ -2,24 +2,16 @@
   display: flex;
 
   > sci-list {
-    padding: 1em;
     flex: auto;
+    --sci-list-item-padding: 0;
 
     devtools-app-list-item {
       outline: none;
-      padding-left: 10px;
+      border-left: 5px solid transparent;
 
       &.active {
-        padding-left: 7px;
-        border-left: 3px solid var(--sci-color-accent);
+        border-left-color: var(--sci-color-accent);
       }
     }
-
-    span.action {
-      outline: none;
-      margin-top: 2em;
-      color: var(--sci-color-A800);
-      cursor: pointer;
-    }
   }
 }
diff --git a/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.html b/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.html
@@ -4,7 +4,7 @@
        routerLinkActive="active"
        (click)="onMenuItemClick($event)"
        href="">
-      <span class="material-icons">apps</span>
+      <span class="icon" sciMaterialIcon>apps</span>
       <section>
         <header>Applications</header>
         <span class="description">Browse registered micro applications.</span>
@@ -13,7 +13,7 @@
     <a [routerLink]="['/find-capabilities', {outlets: {details: ['filter-results']}}]"
        routerLinkActive="active"
        (click)="onMenuItemClick($event)">
-      <span class="material-icons">extension</span>
+      <span class="icon" sciMaterialIcon>extension</span>
       <section>
         <header>Capability Browser</header>
         <span class="description">Browse registered capabilities.</span>
@@ -34,5 +34,4 @@
   </section>
 
 </sci-viewport>
-<div class="backdrop" (click)="onBackdropClick()"></div> <!-- eslint-disable-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
 
diff --git a/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.scss b/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.scss
@@ -3,13 +3,15 @@ $menu-width: 350px;
 :host {
   display: flex;
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
 
   > sci-viewport {
     width: $menu-width;
-    background: linear-gradient(to bottom, var(--sci-color-A900), var(--sci-color-accent));
-    border-right: 1px solid var(--sci-color-A900);
-    box-shadow: 4px 0 13px 0 var(--sci-color-P900);
+    background-color: var(--sci-color-background-elevation);
+    box-shadow: var(--sci-elevation) var(--sci-static-color-black);
+    border-right: 1px solid var(--sci-color-border);
     box-sizing: content-box;
 
     &::part(content) {
@@ -29,21 +31,18 @@ $menu-width: 350px;
         align-items: center;
         gap: 1em;
         padding: 1em .5em;
-        background-color: var(--sci-color-accent);
-        color: var(--sci-color-P50);
-        border-bottom: 1px solid var(--sci-color-A900);
         cursor: pointer;
 
         &.active {
-          background-color: var(--sci-color-P50);
-          color: var(--sci-color-A700);
+          background-color: var(--sci-color-accent);
+          color: var(--sci-color-accent-inverse);
         }
 
-        &:hover > span.material-icons {
-          transform: scale(1.05);
+        &:hover:not(.active) {
+          background-color: var(--sci-color-background-elevation-hover);
         }
 
-        > span.material-icons {
+        > span.icon {
           font-size: 3em;
           margin-left: .25em;
           margin-right: .25em;
@@ -71,12 +70,10 @@ $menu-width: 350px;
     > section.about {
       display: flex;
       align-items: center;
-      margin: .5em 1em;
+      gap: 1em;
       padding: 1em;
-      border-radius: 4px;
-      border: 1px solid var(--sci-color-A500);
-      background-color: var(--sci-color-A800);
-      box-shadow: 4px 0 13px 0 var(--sci-color-A500);
+      background-color: var(--sci-color-background-secondary);
+      border-top: 1px solid var(--sci-color-border);
 
       > img.logo {
         width: 42px;
@@ -87,20 +84,14 @@ $menu-width: 350px;
 
       > ul {
         padding-left: 0;
-        margin: 0 0 0 1em;
+        margin: 0;
         list-style-type: none;
 
         > li > a {
-          color: var(--sci-color-P50);
+          color: var(--sci-color-text);
           line-height: 1.5;
         }
       }
     }
   }
-
-  > div.backdrop {
-    flex: auto;
-    background-color: var(--sci-color-P400);
-    opacity: .5;
-  }
 }