chore(visualization): View encapsulation for global configuration dialog, file panel, ribbon bar

visualization/CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Chore 👨‍💻 👩‍💻
 
 - 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)
 
 ## [1.127.1] - 2024-08-12
 

visualization/app/app.module.ts

@@ -28,7 +28,7 @@ import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/
 import { appReducers, setStateMiddleware } from "./codeCharta/state/store/state.manager"
 import { ChangelogDialogModule } from "./codeCharta/ui/dialogs/changelogDialog/changelogDialog.module"
 import { dialogs } from "./codeCharta/ui/dialogs/dialogs"
-import { BlacklistSearchPatternEffect } from "./codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect"
+import { BlacklistSearchPatternEffect } from "./codeCharta/ui/ribbonBar/searchPanel/searchBar/blacklistSearchPattern.effect"
 import { MaterialModule } from "./material/material.module"
 
 @NgModule({

visualization/app/codeCharta/codeCharta.component.scss

@@ -53,49 +53,4 @@ cc-code-charta {
         width: 24px;
         vertical-align: top;
     }
-
-    .state-selector-button {
-        height: 22px;
-        vertical-align: bottom;
-        width: 30px;
-        min-height: 0;
-        min-width: 0;
-        margin: 0;
-        padding: 0;
-        font-size: 9pt;
-        text-transform: none;
-        background-color: rgba(230, 230, 230, 0.96);
-
-        &:hover {
-            background-color: rgb(200, 200, 200) !important;
-        }
-
-        i {
-            vertical-align: middle;
-            height: 26px;
-        }
-
-        &.left {
-            border-radius: 5px 0 0 5px;
-        }
-
-        &.middle {
-            border-radius: 0;
-            border-left: 1px solid rgba(255, 255, 255, 1);
-            border-right: 1px solid rgba(255, 255, 255, 1);
-        }
-
-        &.right {
-            border-radius: 0 5px 5px 0;
-        }
-
-        &.current {
-            background-color: rgb(0, 150, 136);
-            color: #ffffff;
-        }
-
-        &.current:hover {
-            background-color: variables.$cc-emphasized-color !important;
-        }
-    }
 }

visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigButton.component.html

@@ -1,3 +1,2 @@
-<button class="cc-ribbon-bar-menu-button" title="Create new Custom View" (click)="showAddCustomConfigDialog()">
-    <i class="fa fa-plus"></i>
-</button>
+<cc-ribbon-bar-menu-button icon="fa-plus" [title]="'Create new Custom View'" (click)="showAddCustomConfigDialog()">
+</cc-ribbon-bar-menu-button>

visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigButton.module.ts

@@ -6,9 +6,17 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"
 import { CommonModule } from "@angular/common"
 import { DownloadAndPurgeConfigsComponent } from "./addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component"
 import { CustomConfigNoteDialogButtonModule } from "../customConfigNoteDialogButton/customConfigNoteDialogButton.module"
+import { RibbonBarMenuButtonModule } from "../../ribbonBar/ribbonBarMenuButton/ribbonBarMenuButton.module"
 
 @NgModule({
-    imports: [MaterialModule, ReactiveFormsModule, FormsModule, CommonModule, CustomConfigNoteDialogButtonModule],
+    imports: [
+        MaterialModule,
+        ReactiveFormsModule,
+        FormsModule,
+        CommonModule,
+        CustomConfigNoteDialogButtonModule,
+        RibbonBarMenuButtonModule
+    ],
     declarations: [AddCustomConfigButtonComponent, AddCustomConfigDialogComponent, DownloadAndPurgeConfigsComponent],
     exports: [AddCustomConfigButtonComponent]
 })

visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.scss

@@ -6,11 +6,11 @@
     display: block;
     text-align: left;
     padding: 0 16px;
-    color: var(--exceed-local-storage-message-text-color);
+    color: #b02929;
 }
 
 .exceed-local-storage-button {
     margin-right: 89px;
-    color: var(--exceed-local-storage-button-text-color);
-    background-color: var(--exceed-local-storage-button-background-color);
+    color: #ffffff;
+    background-color: #b02929;
 }

visualization/app/codeCharta/ui/customConfigs/customConfigs.component.html

@@ -1,6 +1,6 @@
 <div class="custom-configs-panel-buttons">
-    <button class="cc-ribbon-bar-menu-button" title="Open your saved Custom Views" (click)="openCustomConfigDialog()">
-        <i class="fa fa-cogs"></i>
-    </button>
+    <cc-ribbon-bar-menu-button icon="fa-cogs" [title]="'Open your saved Custom Views'" (click)="openCustomConfigDialog()">
+    </cc-ribbon-bar-menu-button>
+
     <cc-add-custom-config-button></cc-add-custom-config-button>
 </div>

visualization/app/codeCharta/ui/customConfigs/customConfigs.module.ts

@@ -15,6 +15,7 @@ import { FormsModule } from "@angular/forms"
 import { CustomConfigNoteDialogButtonModule } from "./customConfigNoteDialogButton/customConfigNoteDialogButton.module"
 import { TruncateTextPipeModule } from "../../util/pipes/TruncateTextPipeModule"
 import { FilterCustomConfigDataBySearchTermPipe } from "./customConfigList/customConfigItemGroup/customConfigDescription/filterCustomConfigDataBySearchTerm.pipe"
+import { RibbonBarMenuButtonModule } from "../ribbonBar/ribbonBarMenuButton/ribbonBarMenuButton.module"
 
 @NgModule({
     imports: [
@@ -25,7 +26,8 @@ import { FilterCustomConfigDataBySearchTermPipe } from "./customConfigList/custo
         AddCustomConfigButtonModule,
         DownloadCustomConfigButtonModule,
         FormsModule,
-        TruncateTextPipeModule
+        TruncateTextPipeModule,
+        RibbonBarMenuButtonModule
     ],
     declarations: [
         CustomConfigsComponent,

visualization/app/codeCharta/ui/fileExtensionBar/distributionMetricChooser/distributionMetricChooser.component.scss

@@ -0,0 +1,9 @@
+:host {
+    width: 210px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    gap: 6px;
+    margin-left: 5px;
+    margin-right: 5px;
+}

visualization/app/codeCharta/ui/fileExtensionBar/distributionMetricChooser/distributionMetricChooser.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { CcState } from "../../../codeCharta.model"
 import { setDistributionMetric } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.actions"
@@ -7,7 +7,7 @@ import { distributionMetricSelector } from "../../../state/store/dynamicSettings
 @Component({
     selector: "cc-distribution-metric-chooser",
     templateUrl: "./distributionMetricChooser.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./distributionMetricChooser.component.scss"]
 })
 export class DistributionMetricChooserComponent {
     distributionMetric$ = this.store.select(distributionMetricSelector)

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

@@ -11,15 +11,6 @@ cc-file-extension-bar {
         display: flex;
         height: 17px;
 
-        cc-distribution-metric-chooser {
-            width: 210px;
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            gap: 6px;
-            padding-left: 6px;
-        }
-
         .cc-bar {
             flex: 1;
 

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

@@ -1,73 +1,10 @@
 @use "variables";
 
-cc-file-panel {
+:host {
     display: flex;
     gap: inherit;
 
     &.hidden {
         display: none;
     }
-
-    .state-selector-button {
-        &.mode-selector {
-            height: 24px;
-            width: 66px;
-            background-color: #ffffff;
-
-            &.middle {
-                border-left: 1px solid rgba(230, 230, 230, 0.96);
-                border-right: 1px solid rgba(230, 230, 230, 0.96);
-            }
-
-            &.current {
-                background-color: variables.$cc-primary-color;
-                color: #ffffff;
-            }
-
-            &.current:hover {
-                background-color: variables.$cc-primary-color;
-            }
-        }
-    }
-
-    .reference-comparison-switch {
-        background-color: variables.$cc-primary-color;
-        margin: 0;
-        height: 24px;
-        width: 36px;
-        border-radius: 5px;
-
-        &[disabled] {
-            background-color: variables.$cc-disabled-color;
-        }
-
-        &:hover {
-            background-color: variables.$cc-emphasized-color;
-
-            &[disabled] {
-                background-color: variables.$cc-disabled-color;
-            }
-        }
-
-        .fa {
-            vertical-align: middle;
-            color: rgb(255, 255, 255);
-        }
-    }
-
-    .pictogram {
-        display: inline-flex;
-        width: 10px;
-        margin-right: 5px;
-        margin-left: 5px;
-        height: 22px;
-        border-radius: 2px;
-        align-self: center;
-        vertical-align: bottom;
-    }
-
-    .standard-select,
-    .delta-select {
-        width: 200px;
-    }
 }

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

@@ -1,13 +1,12 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { CcState } from "../../codeCharta.model"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
 
 @Component({
     selector: "cc-file-panel",
     templateUrl: "./filePanel.component.html",
-    styleUrls: ["./filePanel.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./filePanel.component.scss"]
 })
 export class FilePanelComponent {
     isDeltaState$ = this.store.select(isDeltaStateSelector)

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

@@ -1,5 +1,10 @@
 <div class="delta-select-wrapper">
-    <mat-select class="delta-select" [value]="referenceFile$ | async" (selectionChange)="handleDeltaReferenceFileChange($event.value)">
+    <mat-select
+        class="delta-select"
+        [value]="referenceFile$ | async"
+        (selectionChange)="handleDeltaReferenceFileChange($event.value)"
+        panelClass="cc-file-select"
+    >
         @for (file of files$ | async; track file) {
             <mat-option [value]="file.file">
                 {{ file.file.fileMeta.fileName | removeExtension }}
@@ -19,6 +24,7 @@
         class="delta-select"
         placeholder="select comparison file"
         [value]="comparisonFile$ | async"
+        panelClass="cc-file-select"
         (selectionChange)="handleDeltaComparisonFileChange($event.value)"
     >
         @for (file of possibleComparisonFiles$ | async; track file) {

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

@@ -1,6 +1,46 @@
-cc-file-panel-delta-selector {
-    .delta-select-wrapper {
-        display: flex;
-        gap: 12px;
+@use "variables";
+
+.delta-select-wrapper {
+    display: flex;
+    gap: 12px;
+}
+
+.reference-comparison-switch {
+    background-color: variables.$cc-primary-color;
+    margin: 0;
+    height: 24px;
+    width: 36px;
+    border-radius: 5px;
+
+    &[disabled] {
+        background-color: variables.$cc-disabled-color;
+    }
+
+    &:hover {
+        background-color: variables.$cc-emphasized-color;
+
+        &[disabled] {
+            background-color: variables.$cc-disabled-color;
+        }
+    }
+
+    .fa {
+        vertical-align: middle;
+        color: rgb(255, 255, 255);
     }
 }
+
+.pictogram {
+    display: inline-flex;
+    width: 10px;
+    margin-right: 5px;
+    margin-left: 5px;
+    height: 22px;
+    border-radius: 2px;
+    align-self: center;
+    vertical-align: bottom;
+}
+
+.delta-select {
+    width: 200px;
+}

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

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { map } from "rxjs"
 import { CCFile, CcState } from "../../../codeCharta.model"
@@ -11,8 +11,7 @@ import { pictogramBackgroundSelector } from "./pictogramBackground.selector"
 @Component({
     selector: "cc-file-panel-delta-selector",
     templateUrl: "./filePanelDeltaSelector.component.html",
-    styleUrls: ["./filePanelDeltaSelector.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./filePanelDeltaSelector.component.scss"]
 })
 export class FilePanelDeltaSelectorComponent {
     files$ = this.store.select(filesSelector)

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

@@ -1,18 +1,18 @@
 <mat-select
-    panelClass="file-select"
+    panelClass="cc-file-select"
     [(value)]="selectedFilesInUI"
     (selectionChange)="handleSelectedFilesChanged($event.value)"
     (openedChange)="handleOpenedChanged($event)"
-    class="standard-select"
+    class="cc-standard-select"
     multiple
 >
-    <div class="file-selection-actions">
-        <button class="file-select-action-button" (click)="handleSelectAllFiles()">All</button>
-        <button class="file-select-action-button" (click)="handleSelectZeroFiles()">None</button>
-        <button class="file-select-action-button" (click)="handleInvertSelectedFiles()">Invert</button>
+    <div class="cc-file-selection-actions">
+        <button class="cc-file-select-action-button" (click)="handleSelectAllFiles()">All</button>
+        <button class="cc-file-select-action-button" (click)="handleSelectZeroFiles()">None</button>
+        <button class="cc-file-select-action-button" (click)="handleInvertSelectedFiles()">Invert</button>
     </div>
     @for (file of fileStates; track file) {
-        <mat-option class="filenames" [value]="file.file">
+        <mat-option class="cc-file-name" [value]="file.file">
             {{ file.file.fileMeta.fileName | removeExtension }}
             @if (fileStates.length > 1) {
                 <cc-remove-file-button [filename]="file.file.fileMeta.fileName"></cc-remove-file-button>