Tech/3733/view encapsulation dialogs (#3736)

* chore(visualization): enable view encapsulation in error dialog * chore(visualization): enable view encapsulation in change log dialog * chore(visualization): enable view encapsulation in confirm reset map dialog * chore(visualization): enable view encapsulation in confirmation dialog * refactor(visualization): add selector and renaming * refactor(visualization): improve styling for downloadAndPurgeConfigs component inside addCustomConfigDialog * chore(visualization): enable View Encapsulation for CodeChartaChomponent and split styling * chore(visualization): enable View Encapsulation for File Extension Bar * fix(visualization): add selector to prevent the styling from being applied to other components * chore(visualization): enable View Encapsulation for LoadingFileProgressSpinnerComponent * chore(visualization): enable View Encapsulation for MetricChooserTypeComponent * chore(visualization): enable View Encapsulation for MapTreeViewItemOptionButtonsComponent and improve styling * chore(visualization): improve styling * chore(visualization): update changelog --------- Co-authored-by: lisa.walter <lisa.walter@maibornwolff.de> Co-authored-by: Polina Schoenfeld <polina.schoenfeld@maibornwolff.de>
MaibornWolff · Sep 13, 2024 · 2f9a552 · 2f9a552
1 parent 857aeb1
commit 2f9a552
Show file tree

Hide file tree

Showing 31 changed files with 141 additions and 134 deletions.
diff --git a/visualization/CHANGELOG.md b/visualization/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 - Enabled view encapsulation for the Attribute Side Bar [#3726](https://github.com/MaibornWolff/codecharta/pull/3726)
 - Enabled view encapsulation for Buttons [#3729](https://github.com/MaibornWolff/codecharta/pull/3729)
 - Enabled view encapsulation for the Export 3D Map Dialog [#3732](https://github.com/MaibornWolff/codecharta/pull/3732)
+- Enabled view encapsulation for Dialogs [#3736](https://github.com/MaibornWolff/codecharta/pull/3736)
 
 ## [1.127.1] - 2024-08-12
 

diff --git a/visualization/app/codeCharta/codeCharta.component.scss b/visualization/app/codeCharta/codeCharta.component.scss
diff --git a/visualization/app/codeCharta/codeCharta.component.ts b/visualization/app/codeCharta/codeCharta.component.ts
@@ -1,13 +1,11 @@
-import { Component, OnInit, ViewEncapsulation } from "@angular/core"
+import { Component, OnInit } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { LoadInitialFileService } from "./services/loadInitialFile/loadInitialFile.service"
 import { setIsLoadingFile } from "./state/store/appSettings/isLoadingFile/isLoadingFile.actions"
 
 @Component({
     selector: "cc-code-charta",
-    templateUrl: "./codeCharta.component.html",
-    styleUrls: ["./codeCharta.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./codeCharta.component.html"
 })
 export class CodeChartaComponent implements OnInit {
     isInitialized = false

diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.scss b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.scss
@@ -1,5 +1,6 @@
 :host {
     .side-bar-container {
+        transition: right 0.3s ease;
         width: 350px;
         height: calc(100% - 98px); // canvas overflow (ribbonBar height)
         padding: 8px;
@@ -13,6 +14,10 @@
             right: 0;
         }
 
+        &.cc-shadow {
+            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
+        }
+
         &:before {
             content: "";
             height: 100%;

diff --git a/visualization/app/codeCharta/ui/codeMap/codeMap.component.scss b/visualization/app/codeCharta/ui/codeMap/codeMap.component.scss
@@ -2,4 +2,13 @@
     .hidden {
         display: none;
     }
+
+    #codeMap {
+        position: fixed;
+        z-index: 0;
+        top: 98px;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 }
diff --git a/...mConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html b/...mConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html
@@ -6,7 +6,7 @@ <h2>Add Custom View</h2>
     <p>
         <mat-form-field>
             <mat-label>Save individual configurations for your map.</mat-label>
-            <input matInput class="custom-config-input" [formControl]="customConfigName" required />
+            <input matInput class="cc-custom-config-input" [formControl]="customConfigName" required />
             <mat-hint>Config View Name</mat-hint>
             @if (customConfigName.invalid) {
                 <mat-error>{{ getErrorMessage() }}</mat-error>
@@ -20,7 +20,7 @@ <h2>Add Custom View</h2>
                 cdkAutosizeMinRows="8"
                 cdkTextareaAutosize
                 matInput
-                class="custom-config-input"
+                class="cc-custom-config-input"
                 [(ngModel)]="customConfigNote"
                 required
             >
@@ -30,7 +30,7 @@ <h2>Add Custom View</h2>
     </p>
 </mat-dialog-content>
 
-<mat-dialog-actions>
+<mat-dialog-actions class="cc-add-custom-config">
     <cc-download-and-purge-configs></cc-download-and-purge-configs>
 
     <button mat-flat-button mat-dialog-close (click)="addCustomConfig()" [disabled]="customConfigName.invalid">ADD</button>

diff --git a/...tomConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.ts b/...tomConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.ts
@@ -9,6 +9,7 @@ import { CcState } from "../../../../codeCharta.model"
 import { State } from "@ngrx/store"
 
 @Component({
+    selector: "cc-add-custom-config-dialog",
     templateUrl: "./addCustomConfigDialog.component.html"
 })
 export class AddCustomConfigDialogComponent implements OnInit {

diff --git a/...tton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.scss b/...tton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.scss
@@ -1,5 +1,8 @@
 :host {
     text-align: right;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 .exceed-local-storage-message {
@@ -10,7 +13,10 @@
 }
 
 .exceed-local-storage-button {
-    margin-right: 89px;
     color: #ffffff;
     background-color: #b02929;
+
+    &:hover {
+        background-color: #8c1f1f;
+    }
 }
diff --git a/visualization/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.ts b/visualization/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.ts
@@ -1,12 +1,11 @@
 import markdownFile from "../../../../../CHANGELOG.md"
-import { Component, Inject, ViewEncapsulation } from "@angular/core"
+import { Component, Inject } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 import { marked } from "marked"
 
 @Component({
-    templateUrl: "./changelogDialog.component.html",
-    styleUrls: ["./changelogDialog.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    selector: "cc-change-log-dialog",
+    templateUrl: "./changelogDialog.component.html"
 })
 export class ChangelogDialogComponent {
     changes: Record<string, string>

diff --git a/visualization/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.ts b/visualization/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.ts
@@ -1,10 +1,9 @@
-import { Component, Inject, ViewEncapsulation } from "@angular/core"
+import { Component, Inject } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
-    templateUrl: "./confirmationDialog.component.html",
-    styleUrls: ["./confirmationDialog.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    selector: "cc-confirmation-dialog",
+    templateUrl: "./confirmationDialog.component.html"
 })
 export class ConfirmationDialogComponent {
     constructor(@Inject(MAT_DIALOG_DATA) public data: { title: string; message: string }) {}

diff --git a/visualization/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.ts b/visualization/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.ts
@@ -1,9 +1,9 @@
-import { Component, Inject, ViewEncapsulation } from "@angular/core"
+import { Component, Inject } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
-    templateUrl: "./errorDialog.component.html",
-    encapsulation: ViewEncapsulation.None
+    selector: "cc-error-dialog",
+    templateUrl: "./errorDialog.component.html"
 })
 export class ErrorDialogComponent {
     constructor(

diff --git a/visualization/app/codeCharta/ui/fileExtensionBar/fileExtensionBar.component.scss b/visualization/app/codeCharta/ui/fileExtensionBar/fileExtensionBar.component.scss
@@ -3,7 +3,7 @@
     top: 98px;
 }
 
-cc-file-extension-bar {
+:host {
     z-index: 30;
     background-color: white;
 

diff --git a/visualization/app/codeCharta/ui/fileExtensionBar/fileExtensionBar.component.ts b/visualization/app/codeCharta/ui/fileExtensionBar/fileExtensionBar.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { MetricDistribution, FileExtensionCalculator } from "./selectors/fileExtensionCalculator"
 import { metricDistributionSelector } from "./selectors/metricDistribution.selector"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
@@ -8,8 +8,7 @@ import { CcState } from "../../codeCharta.model"
 @Component({
     selector: "cc-file-extension-bar",
     templateUrl: "./fileExtensionBar.component.html",
-    styleUrls: ["./fileExtensionBar.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./fileExtensionBar.component.scss"]
 })
 export class FileExtensionBarComponent {
     showAbsoluteValues = false

diff --git a/visualization/app/codeCharta/ui/legendPanel/legendPanel.component.scss b/visualization/app/codeCharta/ui/legendPanel/legendPanel.component.scss
@@ -27,6 +27,7 @@ $fixedHeight: 35;
         bottom: ($fixedHeight + 20) + px;
         width: 88px;
         font-size: 10pt;
+        transition: right 0.3s ease;
     }
 
     .block-wrapper {
@@ -40,6 +41,7 @@ $fixedHeight: 35;
         border-radius: 5px;
         min-width: 200px;
         max-width: 30%;
+        transition: right 0.3s ease;
 
         &.isAttributeSideBarVisible {
             right: 390px;

diff --git a/...on/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.scss b/...on/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.scss
@@ -1,4 +1,4 @@
-cc-loading-file-progress-spinner #loading-gif-file {
+#loading-gif-file {
     position: fixed;
     left: 0;
     top: 0;

diff --git a/...tion/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.ts b/...tion/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.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 { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFi
 @Component({
     selector: "cc-loading-file-progress-spinner",
     templateUrl: "./loadingFileProgressSpinner.component.html",
-    styleUrls: ["./loadingFileProgressSpinner.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./loadingFileProgressSpinner.component.scss"]
 })
 export class LoadingFileProgressSpinnerComponent {
     isLoadingFile$: Observable<boolean>

diff --git a/visualization/app/codeCharta/ui/logo/logo.component.scss b/visualization/app/codeCharta/ui/logo/logo.component.scss
@@ -0,0 +1,23 @@
+#logo {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 2em;
+    bottom: 1em;
+    z-index: 1;
+
+    img {
+        object-fit: contain;
+        max-width: 100%;
+        height: auto;
+    }
+
+    h2 {
+        color: #5a585a;
+        font-weight: bold;
+        font-size: 10px;
+        text-align: center;
+        margin: 0;
+        z-index: -1;
+    }
+}
diff --git a/visualization/app/codeCharta/ui/logo/logo.component.ts b/visualization/app/codeCharta/ui/logo/logo.component.ts
@@ -1,10 +1,10 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import packageJson from "../../../../package.json"
 
 @Component({
     selector: "cc-logo",
     templateUrl: "./logo.component.html",
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./logo.component.scss"]
 })
 export class LogoComponent {
     version = packageJson.version

diff --git a/...lization/app/codeCharta/ui/metricChooser/metricChooserType/metricChooserType.component.ts b/...lization/app/codeCharta/ui/metricChooser/metricChooserType/metricChooserType.component.ts
@@ -1,15 +1,14 @@
-import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core"
+import { Component, Input, OnInit } from "@angular/core"
 import { Store } from "@ngrx/store"
-import { Observable, map } from "rxjs"
-import { PrimaryMetrics, CcState, Node, CodeMapNode, AttributeTypes } from "../../../codeCharta.model"
+import { map, Observable } from "rxjs"
+import { AttributeTypes, CcState, CodeMapNode, Node, PrimaryMetrics } from "../../../codeCharta.model"
 import { createAttributeTypeSelector } from "./createAttributeTypeSelector.selector"
 import { NodeSelectionService } from "../nodeSelection.service"
 import { isLeaf } from "../../../util/codeMapHelper"
 
 @Component({
     selector: "cc-metric-chooser-type",
-    templateUrl: "./metricChooserType.component.html",
-    encapsulation: ViewEncapsulation.None
+    templateUrl: "./metricChooserType.component.html"
 })
 export class MetricChooserTypeComponent implements OnInit {
     @Input({ required: true }) metricFor: keyof PrimaryMetrics

diff --git a/...app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.ts b/...app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from "@angular/common/http"
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { first, tap } from "rxjs"
 import { CcState } from "../../../codeCharta.model"
@@ -13,9 +13,8 @@ import { defaultState } from "../../../state/store/state.manager"
 import { deleteCcState } from "../../../util/indexedDB/indexedDBWriter"
 
 @Component({
-    templateUrl: "./confirmResetMapDialog.component.html",
-    styleUrls: ["./confirmResetMapDialog.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    selector: "cc-confirm-reset-map-dialog",
+    templateUrl: "./confirmResetMapDialog.component.html"
 })
 export class ConfirmResetMapDialogComponent {
     private urlUtils = new UrlExtractor(this.httpClient)

diff --git a/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeView.component.scss b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeView.component.scss
@@ -66,25 +66,6 @@ cc-map-tree-view {
             i.flattened {
                 color: gray;
             }
-
-            .small-action-button button {
-                min-height: 0;
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                background-color: transparent;
-                box-shadow: none;
-
-                &:hover {
-                    background-color: #ddd;
-                }
-
-                i {
-                    position: absolute;
-                    top: 2px;
-                    left: 6px;
-                }
-            }
         }
     }
 

diff --git a/...anel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.scss b/...anel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.scss
@@ -0,0 +1,23 @@
+@use "variables";
+
+button {
+    display: inline-block;
+    height: 19px;
+    width: 24px;
+    min-height: 0;
+    margin: 0;
+    background-color: transparent;
+    box-shadow: none;
+    vertical-align: top;
+
+    &:hover {
+        background-color: #ddd;
+        color: variables.$cc-font-color;
+    }
+
+    i {
+        position: absolute;
+        top: 2px;
+        left: 6px;
+    }
+}