Tech/3727/view encapsulation buttons

visualization/app/codeCharta/codeCharta.component.scss

@@ -42,7 +42,6 @@ cc-code-charta {
     cc-attribute-side-bar .side-bar-container,
     cc-legend-panel .block-wrapper,
     cc-legend-panel .panel-button,
-    cc-view-cube,
     unfocus-button-component {
         transition: right 0.3s ease;
     }

visualization/app/codeCharta/state/effects/nodeContextMenu/excludeButton/excludeButton.component.ts

@@ -1,12 +1,12 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { addBlacklistItemsIfNotResultsInEmptyMap } from "../../../store/fileSettings/blacklist/blacklist.actions"
 
 @Component({
     selector: "cc-exclude-button",
     templateUrl: "./excludeButton.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["../nodeContextMenuButton.component.scss"]
 })
 export class ExcludeButtonComponent {
     @Input() codeMapNode: Pick<CodeMapNode, "path" | "type">

visualization/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.component.ts

@@ -1,12 +1,12 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { addBlacklistItem, removeBlacklistItem } from "../../../store/fileSettings/blacklist/blacklist.actions"
 
 @Component({
     selector: "cc-flatten-buttons",
     templateUrl: "./flattenButtons.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["../nodeContextMenuButton.component.scss"]
 })
 export class FlattenButtonsComponent {
     @Input() codeMapNode: Pick<CodeMapNode, "path" | "type" | "isFlattened">

visualization/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { map } from "rxjs"
 
@@ -10,7 +10,7 @@ import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedN
 @Component({
     selector: "cc-focus-buttons",
     templateUrl: "./focusButtons.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["../nodeContextMenuButton.component.scss"]
 })
 export class FocusButtonsComponent {
     @Input() codeMapNode: Pick<CodeMapNode, "path">

visualization/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.ts

@@ -1,12 +1,12 @@
-import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from "@angular/core"
+import { Component, Input, OnChanges, SimpleChanges } from "@angular/core"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { IdToBuildingService } from "../../../../services/idToBuilding/idToBuilding.service"
 import { ThreeSceneService } from "../../../../ui/codeMap/threeViewer/threeSceneService"
 
 @Component({
     selector: "cc-highlight-buttons",
     templateUrl: "./highlightButtons.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["../nodeContextMenuButton.component.scss"]
 })
 export class HighlightButtonsComponent implements OnChanges {
     @Input() codeMapNode: Pick<CodeMapNode, "id">

visualization/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/markFolderRow.component.scss

@@ -1,4 +1,4 @@
-cc-mark-folder-row {
+:host {
     .row {
         display: flex;
     }

visualization/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/markFolderRow.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { markPackages, unmarkPackage } from "../../../store/fileSettings/markedPackages/markedPackages.actions"
 import { markFolderItemsSelector } from "./selectors/markFolderItems.selector"
 import { CcState } from "../../../../codeCharta.model"
@@ -8,8 +8,7 @@ import { Store } from "@ngrx/store"
 @Component({
     selector: "cc-mark-folder-row",
     templateUrl: "./markFolderRow.component.html",
-    styleUrls: ["./markFolderRow.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./markFolderRow.component.scss"]
 })
 export class MarkFolderRowComponent {
     markFolderItems$ = this.store.select(markFolderItemsSelector)

visualization/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuButton.component.scss

@@ -0,0 +1,22 @@
+button {
+    width: 100%;
+    text-align: left;
+    margin: 0;
+    justify-content: left;
+    line-height: 30px;
+    min-height: 30px;
+
+    i {
+        min-width: 15px;
+    }
+
+    .png-icon {
+        width: 17px;
+        height: 17px;
+        margin: 5px auto auto;
+        padding: 0;
+        display: inline-block;
+        background-repeat: no-repeat no-repeat;
+        pointer-events: none;
+    }
+}

visualization/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.scss

@@ -7,27 +7,4 @@
         gap: 6px;
         width: 100%;
     }
-
-    .png-icon {
-        width: 17px;
-        height: 17px;
-        margin: 5px auto auto;
-        padding: 0;
-        display: inline-block;
-        background-repeat: no-repeat no-repeat;
-        pointer-events: none;
-    }
-
-    [mat-button] {
-        width: 100%;
-        text-align: left;
-        margin: 0;
-        justify-content: left;
-        line-height: 30px;
-        min-height: 30px;
-
-        i {
-            min-width: 15px;
-        }
-    }
 }

visualization/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.ts

@@ -1,13 +1,12 @@
-import { Component, OnInit, ViewEncapsulation } from "@angular/core"
+import { Component, OnInit } from "@angular/core"
 import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.selector"
 import { Observable } from "rxjs"
 import { CodeMapNode, CcState } from "../../../../codeCharta.model"
 import { Store } from "@ngrx/store"
 
 @Component({
     templateUrl: "./nodeContextMenuCard.component.html",
-    styleUrls: ["./nodeContextMenuCard.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./nodeContextMenuCard.component.scss"]
 })
 export class NodeContextMenuCardComponent implements OnInit {
     codeMapNode$: Observable<CodeMapNode>

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

@@ -3,17 +3,6 @@ cc-code-map {
         display: none;
     }
 
-    cc-view-cube {
-        position: absolute;
-        z-index: 11;
-        right: 0px;
-        top: 10px;
-
-        &.sideBarVisible {
-            right: 350px;
-        }
-    }
-
     unfocus-button-component {
         &.sideBarVisible {
             right: 390px;

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

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

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

@@ -1,11 +1,11 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog/addCustomConfigDialog.component"
 
 @Component({
     selector: "cc-add-custom-config-button",
     templateUrl: "./addCustomConfigButton.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["../customConfigButtons.scss"]
 })
 export class AddCustomConfigButtonComponent {
     constructor(private dialog: MatDialog) {}

visualization/app/codeCharta/ui/customConfigs/customConfigButtons.scss

@@ -0,0 +1,23 @@
+@use "variables";
+
+button {
+    margin: 0 3px;
+    min-width: 12%;
+    height: 48px;
+    width: 48px;
+    border-radius: 100%;
+    line-height: 48px;
+    background-color: #ffffff;
+    color: variables.$cc-primary-color;
+
+    &:disabled,
+    &[disabled] {
+        background-color: #e6e6e6;
+        color: variables.$cc-disabled-color;
+    }
+
+    i.fa {
+        font-size: 12px;
+        margin-left: 0;
+    }
+}

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.scss

@@ -1,11 +1,12 @@
-cc-apply-custom-config-button {
+:host {
     display: flex;
     flex: 1;
 
     button {
         flex-direction: row;
         width: 100%;
         margin: 0;
+        background-color: transparent;
 
         &:disabled {
             cursor: default;

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 import { CustomConfigItem } from "../../../customConfigs.component"
 import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
 import { ThreeCameraService } from "../../../../codeMap/threeViewer/threeCamera.service"
@@ -9,8 +9,7 @@ import { ThreeRendererService } from "../../../../codeMap/threeViewer/threeRende
 @Component({
     selector: "cc-apply-custom-config-button",
     templateUrl: "./applyCustomConfigButton.component.html",
-    styleUrls: ["./applyCustomConfigButton.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./applyCustomConfigButton.component.scss"]
 })
 export class ApplyCustomConfigButtonComponent {
     @Input() customConfigItem: CustomConfigItem

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

@@ -1,5 +1,9 @@
 @for (customConfigItemGroup of customConfigItemGroups | keyvalue; track customConfigItemGroup) {
-    <mat-expansion-panel #matExpansionPanel [expanded]="isGroupExpanded(customConfigItemGroup.key) || searchTerm.length > 0">
+    <mat-expansion-panel
+        #matExpansionPanel
+        class="custom-config-item-group"
+        [expanded]="isGroupExpanded(customConfigItemGroup.key) || searchTerm.length > 0"
+    >
         <mat-expansion-panel-header (click)="toggleGroupExpansion(customConfigItemGroup.key)">
             <mat-panel-title class="custom-config-item-group-title">
                 Custom View(s) in

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.scss

@@ -1,38 +1,50 @@
 @use "variables";
 
-cc-custom-config-item-group {
-    .custom-config-item-group-title {
-        color: variables.$cc-font-color;
-        display: inline-block;
-    }
+.custom-config-item-group-title {
+    color: variables.$cc-font-color;
+    display: inline-block;
+}
 
-    div {
-        .metrics-box {
-            margin-top: 10px;
-        }
+.metrics-box {
+    margin-top: 10px;
+}
 
-        .custom-config-note {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            margin-top: 5px;
-        }
+.custom-config-note {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 5px;
+}
 
-        .custom-config-action-buttons {
-            display: flex;
-            align-items: center;
-            margin-bottom: 5px;
-        }
+.custom-config-action-buttons {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+p {
+    font-size: 15px;
+    margin: 0;
+    white-space: pre-line;
+
+    &.custom-config-note-content {
+        margin-right: 7px;
+        font-size: 13px;
     }
+}
+
+button {
+    background-color: transparent;
 
-    p {
-        font-size: 15px;
+    &.remove-button {
+        font-size: 16px;
+        padding: 8px 10px;
         margin: 0;
-        white-space: pre-line;
 
-        &.custom-config-note-content {
-            margin-right: 7px;
-            font-size: 13px;
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+            color: variables.$cc-primary-color;
+            border-radius: 50%;
         }
     }
 }

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from "@angular/core"
+import { Component, Input, OnChanges, SimpleChanges, ViewChild } from "@angular/core"
 import { CustomConfigHelper } from "../../../../util/customConfigHelper"
 import { CustomConfigItemGroup } from "../../customConfigs.component"
 import { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.service"
@@ -10,8 +10,7 @@ import { ThreeRendererService } from "../../../codeMap/threeViewer/threeRenderer
 @Component({
     selector: "cc-custom-config-item-group",
     templateUrl: "./customConfigItemGroup.component.html",
-    styleUrls: ["./customConfigItemGroup.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./customConfigItemGroup.component.scss"]
 })
 export class CustomConfigItemGroupComponent implements OnChanges {
     @Input() customConfigItemGroups: Map<string, CustomConfigItemGroup>