diff --git a/visualization/CHANGELOG.md b/visualization/CHANGELOG.md
index ff9bb7e155..70cfb20d40 100644
--- 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
deleted file mode 100755
index 59a982e979..0000000000
--- a/visualization/app/codeCharta/codeCharta.component.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@use "variables";
-@import "../mixins.scss";
-
-cc-code-charta {
- #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;
- }
- }
-
- #codeMap {
- position: fixed;
- z-index: 0;
- top: 98px;
- left: 0;
- width: 100%;
- height: 100%;
- }
-
- .cc-shadow {
- box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
- }
-
- cc-attribute-side-bar .side-bar-container,
- cc-legend-panel .block-wrapper,
- cc-legend-panel .panel-button,
- unfocus-button-component {
- transition: right 0.3s ease;
- }
-
- .small-action-button {
- display: inline-block;
- height: 24px;
- width: 24px;
- vertical-align: top;
- }
-}
diff --git a/visualization/app/codeCharta/codeCharta.component.ts b/visualization/app/codeCharta/codeCharta.component.ts
index 1ee063f982..4db5616975 100755
--- 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
index 9ddb3271c6..ec749a0c79 100644
--- 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
index 0eca42339f..072bbab2f3 100644
--- 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/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html b/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html
index 6dd9cd55b0..39b7c474b2 100644
--- a/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html
+++ b/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html
@@ -6,7 +6,7 @@ Add Custom View
Save individual configurations for your map.
-
+
Config View Name
@if (customConfigName.invalid) {
{{ getErrorMessage() }}
@@ -20,7 +20,7 @@ Add Custom View
cdkAutosizeMinRows="8"
cdkTextareaAutosize
matInput
- class="custom-config-input"
+ class="cc-custom-config-input"
[(ngModel)]="customConfigNote"
required
>
@@ -30,7 +30,7 @@ Add Custom View
-
+
diff --git a/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.ts b/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.ts
index 066dff6e3a..d7a423f6ed 100644
--- a/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.ts
+++ b/visualization/app/codeCharta/ui/customConfigs/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/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.scss b/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.scss
index 997403d429..69a614272d 100644
--- a/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.scss
+++ b/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/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
index c25688544e..884343e416 100644
--- 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
diff --git a/visualization/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.ts b/visualization/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.ts
index 0a45751dd3..d4e8420ee4 100644
--- 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
index cc601a5bcb..0db68c9c6a 100644
--- 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
index 30bc3b8539..51431c0fce 100644
--- 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
index c38224c086..5d7f2ac41c 100644
--- 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
index 413a02da91..ba651daf82 100644
--- 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/visualization/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.scss b/visualization/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.scss
index e78b45e599..5d760a62a4 100644
--- a/visualization/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.scss
+++ b/visualization/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/visualization/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.ts b/visualization/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.ts
index 1f62ced61a..3718337574 100644
--- a/visualization/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.ts
+++ b/visualization/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
diff --git a/visualization/app/codeCharta/ui/logo/logo.component.scss b/visualization/app/codeCharta/ui/logo/logo.component.scss
new file mode 100644
index 0000000000..61412ace14
--- /dev/null
+++ 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
index db36238d14..2198ae1a84 100644
--- 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/visualization/app/codeCharta/ui/metricChooser/metricChooserType/metricChooserType.component.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooserType/metricChooserType.component.ts
index f263de1d52..7a800b54da 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooserType/metricChooserType.component.ts
+++ b/visualization/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/visualization/app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.ts b/visualization/app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.ts
index 35996a7e08..4991b3f0bd 100644
--- a/visualization/app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.ts
+++ b/visualization/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
index eada2f19f1..311c0d7114 100644
--- 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/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.scss b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.scss
new file mode 100644
index 0000000000..656beb22be
--- /dev/null
+++ b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/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;
+ }
+}
diff --git a/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.ts b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.ts
index 34ba3f0e0e..60a26c896b 100644
--- a/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.ts
+++ b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.ts
@@ -1,9 +1,9 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
@Component({
selector: "cc-map-tree-view-item-option-buttons",
templateUrl: "./mapTreeViewItemOptionButtons.component.html",
- encapsulation: ViewEncapsulation.None
+ styleUrls: ["./mapTreeViewItemOptionButtons.component.scss"]
})
export class MapTreeViewItemOptionButtonsComponent {
@Input() isFlattened: boolean
diff --git a/visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchBar/searchBar.component.scss b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchBar/searchBar.component.scss
index 83341ad2b1..cb2884c42b 100644
--- a/visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchBar/searchBar.component.scss
+++ b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchBar/searchBar.component.scss
@@ -47,16 +47,20 @@ cc-search-bar {
}
}
- .small-action-button {
- margin: 0 5px 0 5px;
- }
-
button {
background-color: transparent;
box-shadow: none;
margin-top: 2px;
font-size: 14px;
+ &.small-action-button {
+ margin: 0 5px 0 5px;
+ display: inline-block;
+ height: 24px;
+ width: 24px;
+ vertical-align: top;
+ }
+
&:hover {
background-color: lightgrey;
border-radius: 50%;
diff --git a/visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.scss b/visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.scss
index d85942ba35..9cf6e1fbe5 100644
--- a/visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.scss
+++ b/visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.scss
@@ -10,6 +10,10 @@ button {
color: white;
background-color: variables.$cc-primary-color;
+ &.cc-shadow {
+ box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
+ }
+
i {
margin-top: 2px;
}
diff --git a/visualization/app/material/attributeTypeSelector.scss b/visualization/app/material/attributeTypeSelector.scss
index 0742b06da0..714be87e5e 100644
--- a/visualization/app/material/attributeTypeSelector.scss
+++ b/visualization/app/material/attributeTypeSelector.scss
@@ -1,23 +1,25 @@
@use "variables";
-.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
- display: flex;
- align-items: center;
- height: 100%;
-}
+cc-attribute-type-selector {
+ .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
-button {
- align-items: center;
- height: 100%;
+ button {
+ align-items: center;
+ height: 100%;
- &:hover {
- background-color: rgba(0, 0, 0, 0.05);
- color: variables.$cc-primary-color;
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ color: variables.$cc-primary-color;
+ }
}
-}
-.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*="mat-elevation-z"]),
-.mat-button-toggle-group-appearance-standard:not([class*="mat-elevation-z"]) {
- height: 22px;
- border: 0.5px solid darkgrey;
+ .mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*="mat-elevation-z"]),
+ .mat-button-toggle-group-appearance-standard:not([class*="mat-elevation-z"]) {
+ height: 22px;
+ border: 0.5px solid darkgrey;
+ }
}
diff --git a/visualization/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.scss b/visualization/app/material/matChangeLogDialog.scss
similarity index 100%
rename from visualization/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.scss
rename to visualization/app/material/matChangeLogDialog.scss
diff --git a/visualization/app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.scss b/visualization/app/material/matConfirmResetMapDialog.scss
similarity index 100%
rename from visualization/app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.scss
rename to visualization/app/material/matConfirmResetMapDialog.scss
diff --git a/visualization/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.scss b/visualization/app/material/matConfirmationDialog.scss
similarity index 100%
rename from visualization/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.scss
rename to visualization/app/material/matConfirmationDialog.scss
diff --git a/visualization/app/material/matDialog.scss b/visualization/app/material/matDialog.scss
index 4a3a626c5c..b9a8cc0720 100644
--- a/visualization/app/material/matDialog.scss
+++ b/visualization/app/material/matDialog.scss
@@ -28,5 +28,11 @@ mat-dialog-container {
--mdc-text-button-label-text-color: #{variables.$cc-primary-color};
--mdc-filled-button-container-color: var(--mdc-filled-text-field-container-color);
--mdc-filled-button-disabled-container-color: var(--mdc-filled-text-field-container-color);
+
+ &.mat-mdc-dialog-actions.cc-add-custom-config {
+ &:has(cc-download-and-purge-configs) {
+ max-width: 600px;
+ }
+ }
}
}
diff --git a/visualization/app/material/material.scss b/visualization/app/material/material.scss
index b60f994c40..0201eed1f9 100644
--- a/visualization/app/material/material.scss
+++ b/visualization/app/material/material.scss
@@ -29,3 +29,6 @@
@import "./matCustomConfigList";
@import "./matCustomConfigItemGroup";
@import "./matExport3DMapDialog";
+@import "./matChangeLogDialog.scss";
+@import "./matConfirmResetMapDialog.scss";
+@import "./matConfirmationDialog";