diff --git a/.eslintrc.json b/.eslintrc.json index 198daa48..a654529d 100644 --- 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 index 3c51d7d7..e0c496d1 100644 --- 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 - + Default (enabled) @@ -100,7 +100,7 @@ Controls whether this application can register and unregister intentions dynamically at runtime. Enabling this API is strongly discouraged. By default, this API is disabled. - + Default (disabled) @@ -119,7 +119,7 @@ Disabled - + Default (enabled) 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 index af736825..5979ed2f 100644 --- 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,6 +32,8 @@ } sci-sashbox.dependencies { + --sci-sashbox-gap: 10px; + section { display: flex; flex-direction: column; @@ -40,14 +41,14 @@ > 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 index ef20123b..f9eb82af 100644 --- 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 @@ {{application.name}} -{{application.symbolicName}} +{{application.symbolicName}} {{application.baseUrl}}
@@ -26,3 +26,7 @@ v{{version}}
+ + + keyboard_arrow_right + 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 index 71ac9610..a8274405 100644 --- 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 index a8c1af34..74251369 100644 --- 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 index ad031f9a..b0fdc39d 100644 --- 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 @@ - + @@ -12,15 +12,5 @@ routerLinkActive="active"> - - - - - - keyboard_arrow_right - - 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 index 4f920871..671721e5 100644 --- 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 index fd85d22e..8e7d73ad 100644 --- 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=""> - apps + apps
Applications
Browse registered micro applications. @@ -13,7 +13,7 @@ - extension + extension
Capability Browser
Browse registered capabilities. @@ -34,5 +34,4 @@
-
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 index 9c454bd1..74b12674 100644 --- 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; - } } diff --git a/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.ts b/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.ts index 88813644..51d2716c 100644 --- a/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.ts +++ b/apps/microfrontend-platform-devtools/src/app/app-menu/app-menu.component.ts @@ -11,6 +11,7 @@ import {ChangeDetectionStrategy, Component, EventEmitter, HostListener, Output} import {animate, AnimationMetadata, style, transition, trigger} from '@angular/animations'; import {RouterLink, RouterLinkActive} from '@angular/router'; import {SciViewportComponent} from '@scion/components/viewport'; +import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; @Component({ selector: 'devtools-app-menu', @@ -22,6 +23,7 @@ import {SciViewportComponent} from '@scion/components/viewport'; RouterLink, RouterLinkActive, SciViewportComponent, + SciMaterialIconDirective, ], animations: [ trigger('openCloseMenu', provideMenuAnimation()), @@ -33,7 +35,17 @@ export class AppMenuComponent { public close = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native @HostListener('document:keydown.escape') - public onBackdropClick(): void { + public onEscape(): void { + this.close.emit(); + } + + @HostListener('mousedown', ['$event']) + public onHostCloseEvent(event: Event): void { + event.stopPropagation(); // Prevent closing this overlay if emitted from a child of this overlay. + } + + @HostListener('document:mousedown') + public onDocumentCloseEvent(): void { this.close.emit(); } diff --git a/apps/microfrontend-platform-devtools/src/app/app.component.html b/apps/microfrontend-platform-devtools/src/app/app.component.html index cac075a3..1a50c58d 100644 --- a/apps/microfrontend-platform-devtools/src/app/app.component.html +++ b/apps/microfrontend-platform-devtools/src/app/app.component.html @@ -1,34 +1,36 @@ - + -
+
+ -
+
- - + + {{detailsTitle$ | async}}
-
+ - -
+ +
Welcome to SCION Microfrontend Platform DevTools

Embed SCION DevTools as microfrontend in your application to inspect micro applications and their dependencies.

-

DevTools could not connect to the Microfrontend Platform Host. +

DevTools could not connect to the Microfrontend Platform host. Did you forget to register the DevTools application in the platform? For more information, please visit our Developer Guide.

diff --git a/apps/microfrontend-platform-devtools/src/app/app.component.scss b/apps/microfrontend-platform-devtools/src/app/app.component.scss index 03f28e5f..dcc4266a 100644 --- a/apps/microfrontend-platform-devtools/src/app/app.component.scss +++ b/apps/microfrontend-platform-devtools/src/app/app.component.scss @@ -2,66 +2,54 @@ display: grid; position: absolute; inset: 0; - - router-outlet { - position: absolute; // take router outlet out of the document flow - } + padding: 0 .75em .5em .75em; > sci-sashbox { - --sci-sashbox-gap: 0; + --sci-sashbox-gap: .75em; - section { + aside, main { display: grid; - grid-template-rows: max-content 1fr; + grid-template-rows: auto 1fr; + row-gap: 1em; > header { display: flex; align-items: center; - background-color: var(--sci-color-P100); height: 2.5em; + white-space: nowrap; + font-weight: bold; + color: var(--app-color-text-strong); + font-size: 1.1em; user-select: none; + } - > :where(button.title) { // Use the where selector to set the specificity to 0 to allow overrides. - all: unset; - } + > router-outlet { + position: absolute; // take router outlet out of the document flow + } + } - > button { - cursor: pointer; - } + aside > header { + > button.menu { + all: unset; + flex: auto; + display: flex; + align-items: center; + gap: 1em; + cursor: pointer; - > button, > span.title { - font-weight: bold; - white-space: nowrap; + &:hover { color: var(--sci-color-accent); - - &.title { - font-size: 1.1em; - flex: auto; - padding: .5em; - margin-left: .5em; - } - - &.material-icons { - flex: none; - cursor: pointer; - padding: .25em; - font-size: 1.75em; - - &.menu { - padding-left: .5em; - font-weight: normal; - } - } - - &:hover { - color: var(--sci-color-A800); - } } } + + > button.collapse { + position: relative; + right: -.25em; + } } } - > section.usage-message { + > section.welcome { display: flex; flex-direction: column; align-items: center; @@ -70,6 +58,7 @@ margin: .5em 0; font-size: 1.5em; font-weight: bold; + color: var(--app-color-text-strong); } > img.logo { diff --git a/apps/microfrontend-platform-devtools/src/app/app.component.ts b/apps/microfrontend-platform-devtools/src/app/app.component.ts index dac452cf..f90f09d0 100644 --- a/apps/microfrontend-platform-devtools/src/app/app.component.ts +++ b/apps/microfrontend-platform-devtools/src/app/app.component.ts @@ -7,15 +7,18 @@ * * SPDX-License-Identifier: EPL-2.0 */ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, inject} from '@angular/core'; import {Observable} from 'rxjs'; import {ShellService} from './shell.service'; -import {MicrofrontendPlatformClient} from '@scion/microfrontend-platform'; -import {AsyncPipe, NgIf} from '@angular/common'; +import {ContextService, MicrofrontendPlatformClient} from '@scion/microfrontend-platform'; +import {AsyncPipe, DOCUMENT, NgIf} from '@angular/common'; import {RouterOutlet} from '@angular/router'; import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox'; import {AppMenuComponent} from './app-menu/app-menu.component'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {Beans} from '@scion/toolkit/bean-manager'; +import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; +import {filter} from 'rxjs/operators'; @Component({ selector: 'devtools-root', @@ -30,6 +33,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; SciSashboxComponent, SciSashDirective, AppMenuComponent, + SciMaterialIconDirective, ], }) export class AppComponent { @@ -39,8 +43,9 @@ export class AppComponent { public menuOpen = false; public readonly connnectedToHost = MicrofrontendPlatformClient.isConnected(); - constructor(private _shellService: ShellService, private _cdRef: ChangeDetectorRef) { + constructor(private _shellService: ShellService, private _cd: ChangeDetectorRef) { this.installNavigationEndListener(); + this.installThemeSwitcher(); } private installNavigationEndListener(): void { @@ -54,7 +59,7 @@ export class AppComponent { this.showPrimaryOutlet = true; } - this._cdRef.markForCheck(); + this._cd.markForCheck(); }); } @@ -86,4 +91,20 @@ export class AppComponent { public onMenuClose(): void { this.menuOpen = false; } + + /** + * Subscribes to color scheme changes of the embedding context and applies either the 'scion-dark' or 'scion-light' theme. + */ + private installThemeSwitcher(): void { + const documentRoot = inject(DOCUMENT).documentElement; + + Beans.opt(ContextService)?.observe$<'light' | 'dark' | null>('color-scheme') + .pipe( + filter(Boolean), + takeUntilDestroyed(), + ) + .subscribe(colorScheme => { + documentRoot.setAttribute('sci-theme', colorScheme === 'dark' ? 'scion-dark' : 'scion-light'); + }); + } } diff --git a/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.html b/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.html index 75fea26c..be8e213e 100644 --- a/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.html +++ b/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.html @@ -1,12 +1,9 @@ -
- visibility - visibility_off - -
+visibility +visibility_off +
- - + + {{appSymbolicName}} + +
diff --git a/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.scss b/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.scss index 416492e0..5c95b92e 100644 --- a/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.scss +++ b/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.scss @@ -1,28 +1,32 @@ -@use '@scion/components.internal' as sci-ɵcomponents; - :host { - display: grid; - justify-content: space-between; - grid-template-columns: auto auto; - grid-template-rows: auto; - grid-column-gap: 1em; + display: flex; user-select: none; + align-items: center; + gap: 1em; + + > span.visibility { + &.private { + color: var(--sci-color-text-subtlest) + } + + &.public { + color: var(--sci-color-accent) + } + } - > div.qualifier, > div.actions { + > div.actions { + flex: auto; display: flex; + gap: 1em; + justify-content: flex-end; align-items: center; - gap: .5em; - color: var(--sci-color-accent); - &.actions { - > button.app-symbolic-name { - all: unset; - @include sci-ɵcomponents.theme-chip(var(--sci-color-accent), null, var(--sci-color-accent)); - font-weight: bold; - display: flex; - gap: .5em; - align-items: center; - } + > a.app-symbolic-name { + font-size: smaller; + } + + > button.copy-to-clipboard { + font-size: 1.5em; } } } diff --git a/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.ts b/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.ts index f6b9ecac..84975322 100644 --- a/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.ts +++ b/apps/microfrontend-platform-devtools/src/app/capability-accordion-item/capability-accordion-item.component.ts @@ -12,7 +12,8 @@ import {Clipboard} from '@angular/cdk/clipboard'; import {Capability} from '@scion/microfrontend-platform'; import {Router} from '@angular/router'; import {NgIf} from '@angular/common'; -import {QualifierChipListComponent} from '../qualifier-chip-list/qualifier-chip-list.component'; +import {SciQualifierChipListComponent} from '@scion/components.internal/qualifier-chip-list'; +import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; @Component({ selector: 'devtools-capability-accordion-item', @@ -22,7 +23,8 @@ import {QualifierChipListComponent} from '../qualifier-chip-list/qualifier-chip- standalone: true, imports: [ NgIf, - QualifierChipListComponent, + SciQualifierChipListComponent, + SciMaterialIconDirective, ], }) export class CapabilityAccordionItemComponent { @@ -38,6 +40,7 @@ export class CapabilityAccordionItemComponent { public onOpenAppClick(event: MouseEvent, appSymbolicName: string): void { event.stopPropagation(); + event.preventDefault(); this._router.navigate(['/apps', {outlets: {details: [appSymbolicName]}}]); } diff --git a/apps/microfrontend-platform-devtools/src/app/capability-accordion-panel/capability-accordion-panel.component.scss b/apps/microfrontend-platform-devtools/src/app/capability-accordion-panel/capability-accordion-panel.component.scss index 84d3d42f..2c3f1d4e 100644 --- a/apps/microfrontend-platform-devtools/src/app/capability-accordion-panel/capability-accordion-panel.component.scss +++ b/apps/microfrontend-platform-devtools/src/app/capability-accordion-panel/capability-accordion-panel.component.scss @@ -3,10 +3,10 @@ > sci-tabbar { section.tab { - border: 1px solid var(--sci-color-P400); - border-radius: 5px; + border: 1px solid var(--sci-color-border); + border-radius: var(--sci-corner); padding: 1em; - background-color: #FFFFFF; + background-color: var(--app-accordion-panel-container-background-color); font-size: .9em; &.general { @@ -16,7 +16,7 @@ > span.description { grid-column: 1/-1; - color: var(--sci-color-P600); + color: var(--sci-color-text-subtle); margin-bottom: 1em; } } @@ -25,7 +25,7 @@ > span.explanation { display: inline-block; margin-bottom: 1.5em; - color: var(--sci-color-P600); + color: var(--sci-color-text-subtle); } } @@ -36,7 +36,7 @@ > span.explanation { margin-bottom: .75em; - color: var(--sci-color-P600); + color: var(--sci-color-text-subtle); grid-column: 1/-1; } @@ -44,7 +44,7 @@ display: flex; justify-content: space-between; grid-column: 1/3; - border-bottom: 1px solid var(--sci-color-P300); + border-bottom: 1px solid var(--sci-color-border); padding-bottom: .5em; margin-bottom: .5em; height: 2.5em; @@ -56,6 +56,7 @@ > span.name { font-size: 1.1em; font-weight: bold; + color: var(--app-color-text-strong); align-self: flex-end; &.deprecated { @@ -65,7 +66,7 @@ > span.required { border: 1px solid var(--sci-color-accent); - border-radius: 5px; + border-radius: var(--sci-corner); padding: .25em .5em; color: var(--sci-color-accent); } @@ -90,7 +91,7 @@ > span.explanation { display: inline-block; margin-bottom: 1.5em; - color: var(--sci-color-P600); + color: var(--sci-color-text-subtle); } > ul { @@ -103,7 +104,7 @@ > a.self { pointer-events: none; - color: var(--sci-color-P500); + color: var(--sci-color-text-subtlest); } } } diff --git a/apps/microfrontend-platform-devtools/src/app/capability-filter-result/capability-filter-result.component.scss b/apps/microfrontend-platform-devtools/src/app/capability-filter-result/capability-filter-result.component.scss index 317e39ab..9ae0148d 100644 --- a/apps/microfrontend-platform-devtools/src/app/capability-filter-result/capability-filter-result.component.scss +++ b/apps/microfrontend-platform-devtools/src/app/capability-filter-result/capability-filter-result.component.scss @@ -1,7 +1,6 @@ :host { display: flex; flex-direction: column; - padding: 1em; > sci-filter-field { flex: none; diff --git a/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.html b/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.html index 72112d45..8e46450d 100644 --- a/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.html +++ b/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.html @@ -3,15 +3,14 @@
- {{intentionsByApp.key | devtoolsAppName}} - + {{intentionsByApp.key | devtoolsAppName}} +
- - + + diff --git a/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.scss b/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.scss index 0f17a90b..964fa7a2 100644 --- a/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.scss +++ b/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.scss @@ -14,11 +14,15 @@ flex-direction: row; align-items: center; justify-content: space-between; - color: var(--sci-color-A900); } - devtools-qualifier-chip-list:not(:last-child) { - margin-bottom: .5em; + sci-qualifier-chip-list { + --sci-qualifier-chip-list-type-background-color: var(--app-accordion-panel-chip-primary-background-color); + --sci-qualifier-chip-list-qualifier-background-color: var(--app-accordion-panel-chip-secondary-background-color); + + &:not(:last-child) { + margin-bottom: .5em; + } } } } diff --git a/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.ts b/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.ts index 061dd73a..d259601e 100644 --- a/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.ts +++ b/apps/microfrontend-platform-devtools/src/app/dependent-intentions/dependent-intentions.component.ts @@ -18,9 +18,10 @@ import {Maps} from '@scion/toolkit/util'; import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; import {AsyncPipe, KeyValue, KeyValuePipe, NgFor} from '@angular/common'; import {AppNamePipe} from '../common/app-name.pipe'; -import {QualifierChipListComponent} from '../qualifier-chip-list/qualifier-chip-list.component'; +import {SciQualifierChipListComponent} from '@scion/components.internal/qualifier-chip-list'; import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/components.internal/accordion'; import {SciFilterFieldComponent} from '@scion/components.internal/filter-field'; +import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; @Component({ selector: 'devtools-dependent-intentions', @@ -37,7 +38,8 @@ import {SciFilterFieldComponent} from '@scion/components.internal/filter-field'; SciAccordionComponent, SciAccordionItemDirective, AppNamePipe, - QualifierChipListComponent, + SciQualifierChipListComponent, + SciMaterialIconDirective, ], }) export class DependentIntentionsComponent implements OnInit, OnChanges { diff --git a/apps/microfrontend-platform-devtools/src/app/find-capabilities/filter-field/filter-field.component.html b/apps/microfrontend-platform-devtools/src/app/find-capabilities/filter-field/filter-field.component.html index 7948d06a..f206732b 100644 --- a/apps/microfrontend-platform-devtools/src/app/find-capabilities/filter-field/filter-field.component.html +++ b/apps/microfrontend-platform-devtools/src/app/find-capabilities/filter-field/filter-field.component.html @@ -1,26 +1,26 @@
{{title}} - - + +
-
- - - - - - - - - -
- -
- +
+
+ + + + + + + + +
- + + + +
  • + {{capabilitiesByApp.key | devtoolsAppName}} +
    - - + +
    diff --git a/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.scss b/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.scss index 65ed161c..39606c9b 100644 --- a/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.scss +++ b/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.scss @@ -13,21 +13,30 @@ display: flex; align-items: center; justify-content: space-between; - color: var(--sci-color-A900); } section.panel { display: flex; + overflow: hidden; > section.capability-list { display: flex; flex-direction: column; - > devtools-qualifier-chip-list { + > sci-qualifier-chip-list { cursor: pointer; + --sci-qualifier-chip-list-type-background-color: var(--app-accordion-panel-chip-primary-background-color); + --sci-qualifier-chip-list-qualifier-background-color: var(--app-accordion-panel-chip-secondary-background-color); &:not(:last-child) { - margin-bottom: 0.5em; + margin-bottom: .5em; + } + + &.selected { + --sci-color-border: var(--sci-color-accent); + --sci-color-text: var(--sci-color-accent); + --sci-color-text-subtle: var(--sci-color-accent); + --sci-color-text-subtlest: var(--sci-color-accent); } } } @@ -39,10 +48,10 @@ min-width: 180px; > section { - border: 1px solid var(--sci-color-P500); - border-radius: 5px; + border: 1px solid var(--sci-color-border); + border-radius: var(--sci-corner); padding: 1em; - background-color: #FFFFFF; + background-color: var(--app-accordion-panel-container-background-color); font-size: 12px; > header { @@ -50,7 +59,7 @@ margin-top: 0; margin-bottom: 1em; font-weight: bold; - color: black + color: var(--app-color-text-strong); } &:not(:first-child) { diff --git a/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.ts b/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.ts index fbe54b14..be50af9b 100644 --- a/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.ts +++ b/apps/microfrontend-platform-devtools/src/app/required-capabilities/required-capabilities.component.ts @@ -18,13 +18,14 @@ import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; import {Maps} from '@scion/toolkit/util'; import {AsyncPipe, KeyValue, KeyValuePipe, NgFor, NgIf} from '@angular/common'; import {AppNamePipe} from '../common/app-name.pipe'; -import {QualifierChipListComponent} from '../qualifier-chip-list/qualifier-chip-list.component'; +import {SciQualifierChipListComponent} from '@scion/components.internal/qualifier-chip-list'; import {ParamsFilterPipe} from '../common/params-filter.pipe'; import {NullIfEmptyPipe} from '../common/null-if-empty.pipe'; import {JoinPipe} from '../common/join.pipe'; import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/components.internal/accordion'; import {SciFilterFieldComponent} from '@scion/components.internal/filter-field'; import {SciKeyValueComponent} from '@scion/components.internal/key-value'; +import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; @Component({ selector: 'devtools-required-capabilities', @@ -42,8 +43,9 @@ import {SciKeyValueComponent} from '@scion/components.internal/key-value'; SciAccordionComponent, SciAccordionItemDirective, SciKeyValueComponent, + SciMaterialIconDirective, + SciQualifierChipListComponent, AppNamePipe, - QualifierChipListComponent, ParamsFilterPipe, NullIfEmptyPipe, JoinPipe, diff --git a/apps/microfrontend-platform-devtools/src/styles.scss b/apps/microfrontend-platform-devtools/src/styles.scss index 027a1d4d..4e99947d 100644 --- a/apps/microfrontend-platform-devtools/src/styles.scss +++ b/apps/microfrontend-platform-devtools/src/styles.scss @@ -1,37 +1,47 @@ -@use '@scion/components.internal/theme' with ( - $theme: ( - accent: ( - 50 : #e4eef1, - 100 : #BCD6DD, - 200 : #8FBAC6, - 300 : #629EAF, - 400 : #418A9D, - 500 : #1F758C, - 600 : #1B6D84, - 700 : #176279, - 800 : #12586F, - 900 : #0A455C, - default: 600, - lighter: 400, - darker: 800, - ), +@use '@angular/cdk'; +@use '@scion/components' with ( + $themes: ( + scion-light: ( + // Use as the text color for bold texts + --app-color-text-strong: var(--sci-color-text), + // Use as the background color for primary chips displayed on an accordion panel (e.g., type chip in qualifier list) + --app-accordion-panel-chip-primary-background-color: color-mix(in srgb, transparent 95%, var(--sci-static-color-black)), + // Use as the background color for secondary chips displayed on an accordion panel (e.g., qualifier chip in qualifier list) + --app-accordion-panel-chip-secondary-background-color: var(--sci-color-background-primary), + // Use as the background color for a container displayed on an accordion panel + --app-accordion-panel-container-background-color: var(--sci-color-background-primary), + ), + scion-dark: ( + // Use as the text color for bold texts + --app-color-text-strong: var(--sci-color-gray-800), + // Use as the background color for primary chips displayed on an accordion panel (e.g., type chip in qualifier list) + --app-accordion-panel-chip-primary-background-color: color-mix(in srgb, transparent 50%, var(--sci-color-background-primary)), + // Use as the background color for secondary chips displayed on an accordion panel (e.g., qualifier chip in qualifier list) + --app-accordion-panel-chip-secondary-background-color: color-mix(in srgb, transparent 25%, var(--sci-color-background-primary)), + // Use as the background color for a container displayed on an accordion panel + --app-accordion-panel-container-background-color: color-mix(in srgb, transparent 25%, var(--sci-color-background-primary)), + ) ) ); +@use '@scion/components.internal/design' as sci-design; -* { - box-sizing: border-box; -} +@import url('https://fonts.googleapis.com/css?family=Roboto:normal,bold,italic,bolditalic|Roboto+Mono'); +@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded'); html { font-size: 14px; // defines 1rem as 14px + width: 100vw; + height: 100vh; } body { + display: grid; font-family: Roboto, Arial, sans-serif; - color: var(--sci-color-foreground); - background-color: var(--sci-color-background); + color: var(--sci-color-text); + background-color: var(--sci-color-background-primary); + width: 100vw; + height: 100vh; margin: 0; - display: grid; > devtools-root section.welcome { display: flex; @@ -42,6 +52,7 @@ body { margin: .5em 0; font-size: 1.5em; font-weight: bold; + color: var(--app-color-text-strong); } > img.logo { @@ -50,3 +61,23 @@ body { } } } + +* { + box-sizing: border-box; +} + +a { + @include sci-design.style-link(); +} + +button[class*="material-icons"], button[class*="material-symbols"] { + @include sci-design.style-mat-icon-button(); +} + +button:not([class*="material-icons"]):not([class*="material-symbols"]) { + @include sci-design.style-button(); +} + +// Install Angular CDK styles +@include cdk.a11y-visually-hidden(); +@include cdk.overlay(); diff --git a/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.adoc b/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.adoc index 2f14c23d..269f89cf 100644 --- a/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.adoc +++ b/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.adoc @@ -62,3 +62,14 @@ include::dev-tools.snippets.ts[tags=dev-tools:integrate-via-url] ---- -- +*** + +SCION DevTools is available with a light and dark color scheme. By default, the user's preferred OS color scheme is used. To customize, set the `color-scheme` context value on the router outlet into which loaded the SCION DevTools. Supported color schemes are `light` and `dark`. + +[source,typescript] +---- +include::dev-tools.snippets.ts[tags=dev-tools:color-scheme] +---- +<1> Get a reference to the router outlet into which loaded the SCION DevTools +<2> Set the color scheme; can be `light` or `dark`. + diff --git a/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.snippets.ts b/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.snippets.ts index 46ecfef1..6e50c07a 100644 --- a/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.snippets.ts +++ b/docs/adoc/microfrontend-platform-developer-guide/chapters/miscellaneous/dev-tools/dev-tools.snippets.ts @@ -48,3 +48,10 @@ import {Beans} from '@scion/toolkit/bean-manager'; } // end::dev-tools:intention-declaration[] `; + +` +// tag::dev-tools:color-scheme[] + const devToolsRouterOutlet: SciRouterOutletElement = document.querySelector('sci-router-outlet'); // <1> + devToolsRouterOutlet.setContextValue('color-scheme', 'dark'); // <2> +// end::dev-tools:color-scheme[] +`; diff --git a/package-lock.json b/package-lock.json index 2925a46e..d2f7c8a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,8 +19,8 @@ "@angular/platform-browser": "16.0.4", "@angular/platform-browser-dynamic": "16.0.4", "@angular/router": "16.0.4", - "@scion/components": "16.1.0", - "@scion/components.internal": "16.2.0", + "@scion/components": "16.2.0", + "@scion/components.internal": "16.3.1", "@scion/toolkit": "1.4.1", "rxjs": "7.8.1", "tslib": "2.5.3", @@ -4279,8 +4279,9 @@ } }, "node_modules/@scion/components": { - "version": "16.1.0", - "license": "EPL-2.0", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/@scion/components/-/components-16.2.0.tgz", + "integrity": "sha512-T+qb2BO/DKcoloBfRAP+9CFWg35sAC3iOlRVsI9A7d249/ROSOAUjtpjDNlw4/8FPCVNFpgRZGyBWjOQpgGZmg==", "dependencies": { "tslib": "^2.5.0" }, @@ -4293,9 +4294,9 @@ } }, "node_modules/@scion/components.internal": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/@scion/components.internal/-/components.internal-16.2.0.tgz", - "integrity": "sha512-Xb6SWdQdvL8+jrLx6xnsWCjhVEqt+LESlnWzoHiFiKfzc0au9rf8vSRLD3/41Qq3DXosFwOmmVoaEMr2++sDSg==", + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/@scion/components.internal/-/components.internal-16.3.1.tgz", + "integrity": "sha512-623nbBW3HR1hfSVZrpDNACBJe6DM/Qi0bH/sudEebLCVbByuenrhAVuhDPs2anulGNZg0YgNK6sWz/WfYb0Rrw==", "dependencies": { "tslib": "^2.5.0" }, diff --git a/package.json b/package.json index 1d0f56c3..ecb14daa 100644 --- a/package.json +++ b/package.json @@ -69,8 +69,8 @@ "@angular/platform-browser": "16.0.4", "@angular/platform-browser-dynamic": "16.0.4", "@angular/router": "16.0.4", - "@scion/components": "16.1.0", - "@scion/components.internal": "16.2.0", + "@scion/components": "16.2.0", + "@scion/components.internal": "16.3.1", "@scion/toolkit": "1.4.1", "rxjs": "7.8.1", "tslib": "2.5.3", diff --git a/projects/scion/microfrontend-platform.e2e/src/@scion/components.internal/checkbox.po/checkbox.po.ts b/projects/scion/microfrontend-platform.e2e/src/@scion/components.internal/checkbox.po/checkbox.po.ts index be4be03c..c3c022f5 100644 --- a/projects/scion/microfrontend-platform.e2e/src/@scion/components.internal/checkbox.po/checkbox.po.ts +++ b/projects/scion/microfrontend-platform.e2e/src/@scion/components.internal/checkbox.po/checkbox.po.ts @@ -15,17 +15,22 @@ import {Locator} from '@playwright/test'; */ export class SciCheckboxPO { - private readonly _inputLocator: Locator; + private _inputLocator: Locator; - constructor(sciCheckboxLocator: Locator) { - this._inputLocator = sciCheckboxLocator.locator('input[type="checkbox"]'); + constructor(private _locator: Locator) { + this._inputLocator = this._locator.locator('input[type="checkbox"]'); } public async toggle(check: boolean): Promise { const isChecked = await this.isChecked(); + // We cannot use `Locator.check` or `Locator.uncheck` because the checkbox is not visible. + // Ensure the value of the checkbox to be `false` when it is unchecked. + await this._locator.click(); + await this._locator.click(); + if (check !== isChecked) { - await this._inputLocator.click(); + await this._locator.click(); } } diff --git a/tsconfig.json b/tsconfig.json index f541433e..a28c26ba 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -118,6 +118,12 @@ // // "@scion/components.internal/tabbar": [ // // "../scion-toolkit/projects/scion/components.internal/tabbar/src/public_api" // // ], + // // "@scion/components.internal/toggle-button": [ + // // "../scion-toolkit/projects/scion/components.internal/toggle-button/src/public_api" + // // ], + // // "@scion/components.internal/material-icon": [ + // // "../scion-toolkit/projects/scion/components.internal/material-icon/src/public_api" + // // ], // "@angular/*": [ // "../scion-microfrontend-platform/node_modules/@angular/*" // ],