Tech/3718/View-Encapsulation-Legend-Panel

visualization/CHANGELOG.md

@@ -27,7 +27,8 @@ 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)
+- Enabled view encapsulation for the Toolbar [#3715](https://github.com/MaibornWolff/codecharta/pull/3717)
+- Enabled view encapsulation for the Legend Panel [#3718](https://github.com/MaibornWolff/codecharta/pull/3720)
 
 ## [1.127.1] - 2024-08-12
 

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

@@ -0,0 +1,3 @@
+color-chrome .chrome-hue {
+    margin-top: 10px;
+}

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

@@ -1,10 +1,9 @@
-import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core"
+import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild } from "@angular/core"
 import { MatMenuTrigger, MenuPositionX } from "@angular/material/menu"
 
 @Component({
     selector: "cc-color-picker",
-    templateUrl: "./colorPicker.component.html",
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./colorPicker.component.html"
 })
 export class ColorPickerComponent {
     @Input() hexColor: string

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

@@ -1,7 +1,7 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 import { Store } from "@ngrx/store"
 
-import { MapColors, CcState } from "../../codeCharta.model"
+import { CcState, MapColors } from "../../codeCharta.model"
 import { selectedColorMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/selectedColorMetricData.selector"
 import { setMapColors } from "../../state/store/appSettings/mapColors/mapColors.actions"
 import { mapColorsSelector } from "../../state/store/appSettings/mapColors/mapColors.selector"
@@ -10,8 +10,7 @@ import { colorMetricSelector } from "../../state/store/dynamicSettings/colorMetr
 
 @Component({
     selector: "cc-color-picker-for-map-color",
-    templateUrl: "./colorPickerForMapColor.component.html",
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./colorPickerForMapColor.component.html"
 })
 export class ColorPickerForMapColorComponent {
     @Input() mapColorFor: keyof Omit<MapColors, "labelColorAndAlpha" | "markingColors">

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

@@ -1,42 +1,46 @@
-cc-labelled-color-picker {
-    .cc-labelled-color-picker-container {
-        display: flex;
-        height: 40px;
-        align-items: center;
+.cc-labelled-color-picker-container {
+    display: flex;
+    height: 40px;
+    align-items: center;
 
-        &:hover {
-            cursor: pointer;
-        }
+    &:hover {
+        cursor: pointer;
+    }
 
-        .cc-color-swatch-container {
-            position: relative;
-            margin: 0px 11px; // Exactly 11px to match the mat-checkbox margin
-            width: 18px;
-            height: 18px;
+    .cc-color-swatch-container {
+        position: relative;
+        margin: 0 11px; // Exactly 11px to match the mat-checkbox margin
+        width: 18px;
+        height: 18px;
 
-            .cc-color-swatch {
-                display: inline-block;
-                width: inherit;
-                height: inherit;
-                border-radius: 2px;
-                border: 1px solid black;
-            }
+        .cc-color-swatch {
+            display: inline-block;
+            width: inherit;
+            height: inherit;
+            border-radius: 2px;
+            border: 1px solid black;
+        }
 
-            .cc-color-brush {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                opacity: 0; // handled by component
-            }
+        .cc-color-brush {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            opacity: 0; // handled by component
         }
     }
 }
 
-.mat-mdc-menu-panel.cc-color-picker-menu .mat-mdc-menu-content {
-    padding: 0;
-}
+.cc-labelled-color-picker-container > .cc-labelled-color-picker-label {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    /* This tricks the browser into cutting off the beginning instead of the end of the label. However,
+       changing the text direction has side effects, like moving punctuation around.  */
+    direction: rtl;
 
-color-chrome .chrome-hue {
-    margin-top: 10px;
+    span {
+        /* This should prevent the browser from moving punctuation around.  */
+        unicode-bidi: plaintext;
+    }
 }

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

@@ -1,10 +1,9 @@
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core"
+import { Component, EventEmitter, Input, Output } from "@angular/core"
 
 @Component({
     selector: "cc-labelled-color-picker",
     templateUrl: "./labelledColorPicker.component.html",
-    styleUrls: ["./labelledColorPicker.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./labelledColorPicker.component.scss"]
 })
 export class LabelledColorPickerComponent {
     @Input() hexColor: string

visualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.scss

@@ -0,0 +1,31 @@
+:host {
+    a:link,
+    a:visited {
+        text-decoration: none;
+        color: #000;
+    }
+
+    a:hover {
+        color: blue;
+        text-decoration: solid;
+        text-decoration-line: underline;
+    }
+
+    a:active {
+        color: red;
+    }
+
+    i.fa.fa-external-link {
+        font-size: 10px;
+        min-width: 10px;
+        text-align: center;
+    }
+
+    span {
+        display: inline-block;
+
+        &.bold {
+            font-weight: 600;
+        }
+    }
+}

visualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 import { CcState } from "../../../codeCharta.model"
 import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 import { Store } from "@ngrx/store"
@@ -7,7 +7,7 @@ import { metricTitles } from "../../../util/metric/metricTitles"
 @Component({
     selector: "cc-legend-block",
     templateUrl: "./legendBlock.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./legendBlock.component.scss"]
 })
 export class LegendBlockComponent {
     @Input() metricName: string

visualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.scss

@@ -1,4 +1,4 @@
-cc-legend-marked-packages {
+:host {
     cc-labelled-color-picker {
         display: block;
     }

visualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.ts

@@ -1,5 +1,5 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Observable, map } from "rxjs"
+import { Component } from "@angular/core"
+import { map, Observable } from "rxjs"
 import { KeyValue } from "@angular/common"
 import { legendMarkedPackagesSelector, MarkedPackagesMap } from "./legendMarkedPackages.selector"
 import { markPackages } from "../../../state/store/fileSettings/markedPackages/markedPackages.actions"
@@ -11,8 +11,7 @@ type MarkedPackagesMapKeyValue = KeyValue<keyof MarkedPackagesMap, MarkedPackage
 @Component({
     selector: "cc-legend-marked-packages",
     templateUrl: "./legendMarkedPackages.component.html",
-    styleUrls: ["./legendMarkedPackages.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./legendMarkedPackages.component.scss"]
 })
 export class LegendMarkedPackagesComponent {
     markedPackagesMap$: Observable<MarkedPackagesMap>

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

@@ -37,8 +37,8 @@
 </div>
 
 <button
+    mat-button
     id="legend-panel-button"
-    color="primary"
     class="panel-button"
     (click)="toggleIsLegendVisible()"
     [class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen"

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

@@ -1,7 +1,7 @@
 @use "variables";
 
 $fixedHeight: 35;
-cc-legend-panel {
+:host {
     .rotated-button {
         position: fixed;
         transform: rotate(90deg);
@@ -26,6 +26,7 @@ cc-legend-panel {
         margin: 6px 8px;
         bottom: ($fixedHeight + 20) + px;
         width: 88px;
+        font-size: 10pt;
     }
 
     .block-wrapper {
@@ -54,51 +55,5 @@ cc-legend-panel {
             border-bottom-style: none;
             color: #000;
         }
-
-        cc-legend-block {
-            a:link,
-            a:visited {
-                text-decoration: none;
-                color: #000;
-            }
-
-            a:hover {
-                color: blue;
-                text-decoration: solid;
-                text-decoration-line: underline;
-            }
-
-            a:active {
-                color: red;
-            }
-
-            i.fa.fa-external-link {
-                font-size: 10px;
-                min-width: 10px;
-                text-align: center;
-            }
-
-            span {
-                display: inline-block;
-            }
-        }
-
-        .bold {
-            font-weight: 600;
-        }
-
-        .cc-labelled-color-picker-container > .cc-labelled-color-picker-label {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-
-            /* This tricks the browser into cutting off the beginning instead of the end of the label. However,
-			   changing the text direction has side effects, like moving punctuation around.  */
-            direction: rtl;
-
-            span {
-                /* This should prevent the browser from moving punctuation around.  */
-                unicode-bidi: plaintext;
-            }
-        }
     }
 }

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

@@ -6,13 +6,12 @@ import { heightMetricSelector } from "../../state/store/dynamicSettings/heightMe
 import { areaMetricSelector } from "../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
 import { colorMetricSelector } from "../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
 import { edgeMetricSelector } from "../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 
 @Component({
     selector: "cc-legend-panel",
     templateUrl: "./legendPanel.component.html",
-    styleUrls: ["./legendPanel.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./legendPanel.component.scss"]
 })
 export class LegendPanelComponent {
     isLegendVisible = false

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

@@ -1,4 +1,4 @@
-cc-hovered-node-path-panel {
+:host {
     width: 100%;
     min-width: 400px;
     display: inline-block;

visualization/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.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 { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
 
 @Component({
     selector: "cc-hovered-node-path-panel",
     templateUrl: "./hoveredNodePathPanel.component.html",
-    styleUrls: ["./hoveredNodePathPanel.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./hoveredNodePathPanel.component.scss"]
 })
 export class HoveredNodePathPanelComponent {
     hoveredNodePathPanelData$ = this.store.select(hoveredNodePathPanelDataSelector)

visualization/app/material/colorPicker.scss

@@ -0,0 +1,7 @@
+color-chrome .chrome-hue {
+    margin-top: 10px;
+}
+
+.mat-mdc-menu-panel.cc-color-picker-menu .mat-mdc-menu-content {
+    padding: 0;
+}

visualization/app/material/material.scss

@@ -24,3 +24,4 @@
 @import "./matSelect";
 @import "./slider";
 @import "./matSlideTogglePresentationMode";
+@import "./colorPicker";