Tech/3731/view encapsulation export 3d map

visualization/CHANGELOG.md

@@ -30,6 +30,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 - Enabled view encapsulation for the Toolbar [#3717](https://github.com/MaibornWolff/codecharta/pull/3717)
 - Enabled view encapsulation for the Legend Panel [#3720](https://github.com/MaibornWolff/codecharta/pull/3720)
 - 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)
 
 ## [1.127.1] - 2024-08-12
 

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

@@ -1,11 +1,5 @@
-cc-code-map {
+:host {
     .hidden {
         display: none;
     }
-
-    unfocus-button-component {
-        &.sideBarVisible {
-            right: 390px;
-        }
-    }
 }

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

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ElementRef, OnDestroy, ViewEncapsulation } from "@angular/core"
+import { Component, AfterViewInit, ElementRef, OnDestroy } from "@angular/core"
 import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
 import { ThreeViewerService } from "./threeViewer/threeViewer.service"
 import { sharpnessModeSelector } from "../../state/store/appSettings/sharpnessMode/sharpnessMode.selector"
@@ -11,8 +11,7 @@ import { CcState } from "../../codeCharta.model"
 @Component({
     selector: "cc-code-map",
     templateUrl: "./codeMap.component.html",
-    styleUrls: ["./codeMap.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./codeMap.component.scss"]
 })
 export class CodeMapComponent implements AfterViewInit, OnDestroy {
     isLoadingFile$ = this.store.select(isLoadingFileSelector)

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

@@ -1,12 +1,12 @@
-<div class="custom-config-note-dialog-container">
-    <div mat-dialog-content class="note-input-container">
+<div class="cc-custom-config-note-dialog-container">
+    <div mat-dialog-content class="cc-note-input-container">
         <mat-form-field class="note-input" appearance="fill">
             <mat-label>Custom Note</mat-label>
             <textarea matInput cdkAutosizeMinRows="10" cdkTextareaAutosize [(ngModel)]="data"></textarea>
         </mat-form-field>
     </div>
-    <div mat-dialog-actions class="note-dialog-action-buttons">
-        <button [mat-dialog-close]>Cancel</button>
-        <button [mat-dialog-close]="data">Ok</button>
+    <div mat-dialog-actions class="cc-note-dialog-action-buttons">
+        <button mat-flat-button [mat-dialog-close]>Cancel</button>
+        <button mat-flat-button [mat-dialog-close]="data">Ok</button>
     </div>
 </div>

visualization/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.scss

@@ -1,17 +1,17 @@
 @use "variables";
 
-cc-custom-config-note-dialog {
-    .custom-config-note-dialog-container {
+:host {
+    .cc-custom-config-note-dialog-container {
         padding: 20px 24px;
 
-        .note-input-container {
+        .cc-note-input-container {
             padding: 0;
 
             .note-input {
                 width: 100%;
             }
         }
-        .note-dialog-action-buttons {
+        .cc-note-dialog-action-buttons {
             justify-content: flex-end;
             padding: 0;
         }

visualization/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.ts

@@ -1,11 +1,10 @@
-import { Component, Inject, ViewEncapsulation } from "@angular/core"
+import { Component, Inject } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
     selector: "cc-custom-config-note-dialog",
     templateUrl: "./customConfigNoteDialog.component.html",
-    styleUrls: ["./customConfigNoteDialog.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./customConfigNoteDialog.component.scss"]
 })
 export class CustomConfigNoteDialogComponent {
     constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}

visualization/app/codeCharta/ui/export3DMapButton/export3DMapDialog/export3DMapDialog.component.html

@@ -46,7 +46,7 @@
         <mat-card appearance="outlined">
             <mat-card-header>Second row center text</mat-card-header>
 
-            <mat-card-content class="ManualVisibilityContent">
+            <mat-card-content class="cc-manual-visibility-content">
                 <mat-slide-toggle
                     data-testid="secondRowToggle"
                     [checked]="secondRow.isVisible"
@@ -63,7 +63,7 @@
 
         <mat-card appearance="outlined">
             <mat-card-header>QR-Code</mat-card-header>
-            <mat-card-content class="ManualVisibilityContent">
+            <mat-card-content class="cc-manual-visibility-content">
                 <mat-slide-toggle data-testid="qrCodeToggle" [checked]="qrCode.isVisible" (change)="onQrCodeVisibilityChange($event)">
                     Show QR-Code
                 </mat-slide-toggle>
@@ -77,7 +77,7 @@
         <mat-card appearance="outlined">
             <mat-card-header>Bottom left logo (SVG):</mat-card-header>
             <mat-card-content>
-                <input #fileInput type="file" (change)="onFileSelected($event)" accept=".svg" />
+                <input #fileInput type="file" class="cc-file-input" (change)="onFileSelected($event)" accept=".svg" />
 
                 <button (click)="onRemoveLogo()" [hidden]="!isFileSelected" mat-button title="Remove Logo Button">
                     <span><i class="fa fa-times"></i> Remove Logo</span>

visualization/app/codeCharta/ui/export3DMapButton/export3DMapDialog/export3DMapDialog.component.scss

@@ -1,45 +1,7 @@
-@use "../../../../material/theme";
-
-.cc-export-3D-map-dialog .mat-mdc-dialog-container {
-    width: 36vw;
-    min-width: 600px;
-    max-height: 95vh;
-
-    .cc-export-3D-map-dialog-content {
-        display: flex;
-        flex-direction: column;
-        padding: 16px 16px;
-        gap: 16px;
-        overflow-y: auto;
-        max-height: calc(70vh - 200px);
-        flex-grow: 1;
-    }
-
-    .ManualVisibilityContent {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        margin-top: 16px;
-
-        mat-form-field {
-            display: flex;
-            flex-direction: column;
-        }
-    }
-
-    mat-slider {
-        width: 95%;
-    }
-
-    mat-form-field {
-        margin-bottom: -24px;
-    }
-
-    input[type="file"] {
-        margin-top: 16px;
-    }
-}
-
 .cc-printer-specs {
     color: #888888;
 }
+
+.cc-file-input {
+    margin-top: 16px;
+}

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

@@ -3,7 +3,7 @@ import { accumulatedDataSelector } from "../../../state/selectors/accumulatedDat
 import { FileNameHelper } from "../../../util/fileNameHelper"
 import { getVisibleFileStates, isDeltaState } from "../../../model/files/files.helper"
 import { FileDownloader } from "../../../util/fileDownloader"
-import { Component, ElementRef, Input, ViewChild, ViewEncapsulation } from "@angular/core"
+import { Component, ElementRef, Input, ViewChild } from "@angular/core"
 import { State } from "@ngrx/store"
 import { CcState, NodeMetricData } from "../../../codeCharta.model"
 import { ThreeSceneService } from "../../codeMap/threeViewer/threeSceneService"
@@ -36,10 +36,9 @@ interface ManualVisibilityItem {
 }
 
 @Component({
-    selector: "export3DMapDialog.component",
+    selector: "cc-export-3D-map-dialog",
     templateUrl: "./export3DMapDialog.component.html",
-    styleUrls: ["./export3DMapDialog.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./export3DMapDialog.component.scss"]
 })
 export class Export3DMapDialogComponent {
     @ViewChild("rendererContainer") rendererContainer: ElementRef

visualization/app/material/matExport3DMapDialog.scss

@@ -0,0 +1,35 @@
+.cc-export-3D-map-dialog .mat-mdc-dialog-container {
+    width: 36vw;
+    min-width: 600px;
+    max-height: 95vh;
+
+    .cc-export-3D-map-dialog-content {
+        display: flex;
+        flex-direction: column;
+        padding: 16px 16px;
+        gap: 16px;
+        overflow-y: auto;
+        max-height: calc(70vh - 200px);
+        flex-grow: 1;
+    }
+
+    .cc-manual-visibility-content {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        margin-top: 16px;
+
+        mat-form-field {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    mat-slider {
+        width: 95%;
+    }
+
+    mat-form-field {
+        margin-bottom: -24px;
+    }
+}

visualization/app/material/material.scss

@@ -28,3 +28,4 @@
 @import "./attributeTypeSelector";
 @import "./matCustomConfigList";
 @import "./matCustomConfigItemGroup";
+@import "./matExport3DMapDialog";