Tech/3715/view-encapsulation-toolbar (#3717)

* feat(visualization): enable ViewEncapsulation for the toolbar and improve styling

* chore(visualization): update changelog

* chore(visualization): update changelog

visualization/CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 - Bump node version from 18 to 20 [#3690](https://github.com/MaibornWolff/codecharta/pull/3690)
 - Enabled view encapsulation for Global Configuration dialog, Ribbon Bar and File Panel [#3712](https://github.com/MaibornWolff/codecharta/pull/3712)
 - Enabled view encapsulation for Slider [#3713](https://github.com/MaibornWolff/codecharta/pull/3713)
+- Enabled view encapsulation for the Toolbar [#3713](https://github.com/MaibornWolff/codecharta/pull/3717)
 
 ## [1.127.1] - 2024-08-12
 

visualization/app/codeCharta/ui/actionIcon/actionIcon.component.scss

@@ -1,6 +1,6 @@
 @use "variables";
 
-cc-action-icon {
+:host {
     display: inline-flex;
     align-items: center;
     cursor: pointer;
@@ -23,5 +23,9 @@ cc-action-icon {
         margin: auto;
         line-height: 1.5;
         color: white;
+
+        &.fa-folder-open {
+            padding-left: 1px;
+        }
     }
 }

visualization/app/codeCharta/ui/actionIcon/actionIcon.component.ts

@@ -1,10 +1,9 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 
 @Component({
     selector: "cc-action-icon",
     templateUrl: "./actionIcon.component.html",
-    styleUrls: ["./actionIcon.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./actionIcon.component.scss"]
 })
 export class ActionIconComponent {
     @Input() icon: string

visualization/app/codeCharta/ui/copyToClipboardButton/copyToClipboardButton.component.ts

@@ -1,10 +1,9 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { CopyToClipboardService } from "./copyToClipboard.service"
 
 @Component({
     selector: "cc-copy-to-clipboard-button",
-    templateUrl: "./copyToClipboardButton.component.html",
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./copyToClipboardButton.component.html"
 })
 export class CopyToClipboardButtonComponent {
     constructor(private copyToClipboardService: CopyToClipboardService) {}

visualization/app/codeCharta/ui/export3DMapButton/export3DMapButton.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { Export3DMapDialogComponent } from "./export3DMapDialog/export3DMapDialog.component"
 import { State, Store } from "@ngrx/store"
@@ -10,8 +10,7 @@ import { setColorMode } from "../../state/store/dynamicSettings/colorMode/colorM
 
 @Component({
     selector: "cc-export-3d-map-button",
-    templateUrl: "./export3DMapButton.component.html",
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./export3DMapButton.component.html"
 })
 export class Export3DMapButtonComponent {
     constructor(

visualization/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.scss

@@ -5,6 +5,11 @@
     gap: 12px;
 }
 
+.delta-select {
+    width: 200px;
+    font-size: 10pt;
+}
+
 .reference-comparison-switch {
     background-color: variables.$cc-primary-color;
     margin: 0;
@@ -40,7 +45,3 @@
     align-self: center;
     vertical-align: bottom;
 }
-
-.delta-select {
-    width: 200px;
-}

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss

@@ -2,4 +2,5 @@
 
 .cc-standard-select {
     width: 200px;
+    font-size: 10pt;
 }

visualization/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.scss

@@ -6,6 +6,7 @@
     margin: 0;
     padding: 0;
     background-color: #ffffff;
+    font-size: 10pt;
 
     &:hover {
         background-color: rgba(230, 230, 230, 0.96);

visualization/app/codeCharta/ui/resetMapButton/resetMapButton.component.ts

@@ -1,11 +1,10 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { ConfirmResetMapDialogComponent } from "./confirmResetMapDialog/confirmResetMapDialog.component"
 
 @Component({
     selector: "cc-reset-map-button",
-    templateUrl: "./resetMapButton.component.html",
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./resetMapButton.component.html"
 })
 export class ResetMapButtonComponent {
     constructor(private dialog: MatDialog) {}

visualization/app/codeCharta/ui/screenshotButton/screenshotButton.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { State, Store } from "@ngrx/store"
 import hotkeys from "hotkeys-js"
 import html2canvas from "html2canvas"
@@ -14,8 +14,7 @@ import { FileState } from "../../model/files/files"
 
 @Component({
     selector: "cc-screenshot-button",
-    templateUrl: "./screenshotButton.component.html",
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./screenshotButton.component.html"
 })
 export class ScreenshotButtonComponent {
     TITLE_FILE_BUTTON: string

visualization/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.scss

@@ -11,3 +11,7 @@ button {
         background-color: variables.$cc-emphasized-color;
     }
 }
+
+span {
+    font-size: 10pt;
+}

visualization/app/codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.component.scss

@@ -1,4 +1,4 @@
-cc-loading-map-progress-spinner {
+:host {
     display: inline-block;
     vertical-align: middle;
 }

visualization/app/codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { Observable } from "rxjs"
 import { CcState } from "../../../codeCharta.model"
@@ -7,8 +7,7 @@ import { isLoadingMapSelector } from "../../../state/store/appSettings/isLoading
 @Component({
     selector: "cc-loading-map-progress-spinner",
     templateUrl: "./loadingMapProgressSpinner.component.html",
-    styleUrls: ["./loadingMapProgressSpinner.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./loadingMapProgressSpinner.component.scss"]
 })
 export class LoadingMapProgressSpinnerComponent {
     isLoadingMap$: Observable<boolean>

visualization/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.html

@@ -3,7 +3,8 @@
     (change)="setPresentationModeEnabled($event)"
     [title]="(isPresentationModeEnabled$ | async) ? 'Disable flashlight hover effect' : 'Enable flashlight hover effect'"
     aria-label="Presentation Mode Toggle"
+    class="cc-presentation-mode-button"
 >
     <i class="presentation-mode-icon fa fa-television"></i>
-    Presentation Mode
+    <span>Presentation Mode</span>
 </mat-slide-toggle>

visualization/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.scss

@@ -1,7 +1,3 @@
-cc-presentation-mode-button {
-    mat-slide-toggle.mat-mdc-slide-toggle div.mdc-form-field {
-        font-size: 10pt;
-        flex-direction: row-reverse;
-        gap: 12px;
-    }
+i {
+    margin-right: 4px;
 }

visualization/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewEncapsulation } from "@angular/core"
+import { Component, ElementRef } from "@angular/core"
 import { MatSlideToggleChange } from "@angular/material/slide-toggle"
 import { Store } from "@ngrx/store"
 import { CcState } from "../../../codeCharta.model"
@@ -8,8 +8,7 @@ import { isPresentationModeSelector } from "../../../state/store/appSettings/isP
 @Component({
     selector: "cc-presentation-mode-button",
     templateUrl: "./presentationModeButton.component.html",
-    styleUrls: ["./presentationModeButton.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./presentationModeButton.component.scss"]
 })
 export class PresentationModeButtonComponent {
     isPresentationModeEnabled$ = this.store.select(isPresentationModeSelector)

visualization/app/codeCharta/ui/toolBar/toolBar.component.scss

@@ -1,4 +1,4 @@
-cc-tool-bar {
+:host {
     display: flex;
     gap: 8px;
     padding-left: 8px;
@@ -15,8 +15,4 @@ cc-tool-bar {
         width: 400px;
         justify-content: space-between;
     }
-
-    span {
-        font-size: 10pt;
-    }
 }

visualization/app/codeCharta/ui/toolBar/toolBar.component.ts

@@ -1,18 +1,15 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
-import { experimentalFeaturesEnabledSelector } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.selector"
 import { Store } from "@ngrx/store"
 import { CcState } from "../../codeCharta.model"
 
 @Component({
     selector: "cc-tool-bar",
     templateUrl: "./toolBar.component.html",
-    styleUrls: ["./toolBar.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./toolBar.component.scss"]
 })
 export class ToolBarComponent {
     hoveredNodeId$ = this.store.select(hoveredNodeIdSelector)
-    experimentalFeaturesEnabled$ = this.store.select(experimentalFeaturesEnabledSelector)
 
     constructor(private store: Store<CcState>) {}
 }

visualization/app/codeCharta/ui/toolBar/uploadFilesButton/uploadFilesButton.component.ts

@@ -1,11 +1,9 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { UploadFilesService } from "./uploadFiles.service"
 
 @Component({
     selector: "cc-upload-files-button",
-    templateUrl: "./uploadFilesButton.component.html",
-    styleUrls: ["./uploadFilesButton.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./uploadFilesButton.component.html"
 })
 export class UploadFilesButtonComponent {
     constructor(private uploadFilesService: UploadFilesService) {}

visualization/app/material/matSlideTogglePresentationMode.scss

@@ -0,0 +1,9 @@
+mat-slide-toggle.mat-mdc-slide-toggle.cc-presentation-mode-button div.mdc-form-field {
+    font-size: 10pt;
+    flex-direction: row-reverse;
+    gap: 12px;
+
+    .mdc-label {
+        text-wrap: nowrap;
+    }
+}

visualization/app/material/material.scss

@@ -23,3 +23,4 @@
 @import "./matDialog";
 @import "./matSelect";
 @import "./slider";
+@import "./matSlideTogglePresentationMode";