From d69a78ac338e970262a43b64b87774e385e7b18e Mon Sep 17 00:00:00 2001 From: "lisa.walter" Date: Wed, 11 Sep 2024 14:09:21 +0200 Subject: [PATCH 01/14] chore(visualization): enable view encapsulation in error dialog --- .../ui/dialogs/errorDialog/errorDialog.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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( From 608d015dbbe7e54aecdedf576ac4fb563c4d5eca Mon Sep 17 00:00:00 2001 From: "lisa.walter" Date: Wed, 11 Sep 2024 14:30:14 +0200 Subject: [PATCH 02/14] chore(visualization): enable view encapsulation in change log dialog --- .../dialogs/changelogDialog/changelogDialog.component.ts | 7 +++---- .../matChangeLogDialog.scss} | 0 visualization/app/material/material.scss | 1 + 3 files changed, 4 insertions(+), 4 deletions(-) rename visualization/app/{codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.scss => material/matChangeLogDialog.scss} (100%) 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/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/material/material.scss b/visualization/app/material/material.scss index b60f994c40..4007846e27 100644 --- a/visualization/app/material/material.scss +++ b/visualization/app/material/material.scss @@ -29,3 +29,4 @@ @import "./matCustomConfigList"; @import "./matCustomConfigItemGroup"; @import "./matExport3DMapDialog"; +@import "./matChangeLogDialog.scss"; From 9ac3a8c9620cc4ce81500ed755abaef40339508b Mon Sep 17 00:00:00 2001 From: "lisa.walter" Date: Wed, 11 Sep 2024 15:04:47 +0200 Subject: [PATCH 03/14] chore(visualization): enable view encapsulation in confirm reset map dialog --- .../confirmResetMapDialog.component.ts | 7 +++---- .../matConfirmResetMapDialog.scss} | 0 visualization/app/material/material.scss | 1 + 3 files changed, 4 insertions(+), 4 deletions(-) rename visualization/app/{codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.scss => material/matConfirmResetMapDialog.scss} (100%) 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/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/material/material.scss b/visualization/app/material/material.scss index 4007846e27..6ce9280e14 100644 --- a/visualization/app/material/material.scss +++ b/visualization/app/material/material.scss @@ -30,3 +30,4 @@ @import "./matCustomConfigItemGroup"; @import "./matExport3DMapDialog"; @import "./matChangeLogDialog.scss"; +@import "./matConfirmResetMapDialog.scss"; From 0bdb84a88884bbbb4faf78eb02646ca5636f20b2 Mon Sep 17 00:00:00 2001 From: "lisa.walter" Date: Wed, 11 Sep 2024 16:17:38 +0200 Subject: [PATCH 04/14] chore(visualization): enable view encapsulation in confirmation dialog --- .../confirmationDialog/confirmationDialog.component.ts | 7 +++---- .../matConfirmationDialog.scss} | 0 visualization/app/material/material.scss | 1 + 3 files changed, 4 insertions(+), 4 deletions(-) rename visualization/app/{codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.scss => material/matConfirmationDialog.scss} (100%) 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/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/material.scss b/visualization/app/material/material.scss index 6ce9280e14..0201eed1f9 100644 --- a/visualization/app/material/material.scss +++ b/visualization/app/material/material.scss @@ -31,3 +31,4 @@ @import "./matExport3DMapDialog"; @import "./matChangeLogDialog.scss"; @import "./matConfirmResetMapDialog.scss"; +@import "./matConfirmationDialog"; From 9ecafa9b2bc583d9bb6b428785dcf2907e7da3ff Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 10:31:03 +0200 Subject: [PATCH 05/14] refactor(visualization): add selector and renaming --- .../addCustomConfigDialog.component.html | 4 ++-- .../addCustomConfigDialog/addCustomConfigDialog.component.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) 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..9376990d4b 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 > 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 { From 839538d3997bf8b10e10ee05681740c19ccf66a0 Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 11:21:38 +0200 Subject: [PATCH 06/14] refactor(visualization): improve styling for downloadAndPurgeConfigs component inside addCustomConfigDialog --- .../addCustomConfigDialog.component.html | 2 +- .../downloadAndPurgeConfigs.component.scss | 8 +++++++- visualization/app/material/matDialog.scss | 6 ++++++ 3 files changed, 14 insertions(+), 2 deletions(-) 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 9376990d4b..39b7c474b2 100644 --- a/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html +++ b/visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html @@ -30,7 +30,7 @@

Add Custom View

- + 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/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; + } + } } } From cb5b4476677db05e6c96b582e0fde64ab05bba5f Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 12:19:51 +0200 Subject: [PATCH 07/14] chore(visualization): enable View Encapsulation for CodeChartaChomponent and split styling --- .../app/codeCharta/codeCharta.component.scss | 55 ------------------- .../app/codeCharta/codeCharta.component.ts | 6 +- .../attributeSideBar.component.scss | 5 ++ .../ui/codeMap/codeMap.component.scss | 9 +++ .../ui/legendPanel/legendPanel.component.scss | 2 + .../codeCharta/ui/logo/logo.component.scss | 23 ++++++++ .../app/codeCharta/ui/logo/logo.component.ts | 4 +- .../mapTreeView/mapTreeView.component.scss | 19 ------- ...apTreeViewItemOptionButtons.component.scss | 23 ++++++++ .../mapTreeViewItemOptionButtons.component.ts | 1 + .../searchBar/searchBar.component.scss | 4 ++ .../centerMapButton.component.scss | 4 ++ 12 files changed, 75 insertions(+), 80 deletions(-) delete mode 100755 visualization/app/codeCharta/codeCharta.component.scss create mode 100644 visualization/app/codeCharta/ui/logo/logo.component.scss create mode 100644 visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.scss 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/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/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/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..fbfe870496 --- /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: 24px; + 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..1c1c308506 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 @@ -3,6 +3,7 @@ import { Component, Input, ViewEncapsulation } from "@angular/core" @Component({ selector: "cc-map-tree-view-item-option-buttons", templateUrl: "./mapTreeViewItemOptionButtons.component.html", + styleUrls: ["./mapTreeViewItemOptionButtons.component.scss"], encapsulation: ViewEncapsulation.None }) export class MapTreeViewItemOptionButtonsComponent { 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..607cc027c0 100644 --- a/visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchBar/searchBar.component.scss +++ b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchBar/searchBar.component.scss @@ -49,6 +49,10 @@ cc-search-bar { .small-action-button { margin: 0 5px 0 5px; + display: inline-block; + height: 24px; + width: 24px; + vertical-align: top; } button { 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; } From 79e36e6c78596459019f7907b2c2533f1f02fa5a Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 12:21:37 +0200 Subject: [PATCH 08/14] chore(visualization): enable View Encapsulation for File Extension Bar --- .../ui/fileExtensionBar/fileExtensionBar.component.scss | 2 +- .../ui/fileExtensionBar/fileExtensionBar.component.ts | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) 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 From 266077428b5122d20076eca6a44e989aad013968 Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 12:22:59 +0200 Subject: [PATCH 09/14] fix(visualization): add selector to prevent the styling from being applied to other components --- .../app/material/attributeTypeSelector.scss | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) 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; + } } From 89b1df97aca84ee441c505961de1215304904310 Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 12:29:08 +0200 Subject: [PATCH 10/14] chore(visualization): enable View Encapsulation for LoadingFileProgressSpinnerComponent --- .../loadingFileProgressSpinner.component.scss | 2 +- .../loadingFileProgressSpinner.component.ts | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) 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 From 4090e0912cb2b7f83b92896a8f2803a3372df6a7 Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 12:34:36 +0200 Subject: [PATCH 11/14] chore(visualization): enable View Encapsulation for MetricChooserTypeComponent --- .../metricChooserType/metricChooserType.component.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) 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 From 424fb754ec21a67ecee43f7ba346b91116878107 Mon Sep 17 00:00:00 2001 From: Polina Schoenfeld Date: Thu, 12 Sep 2024 13:53:49 +0200 Subject: [PATCH 12/14] chore(visualization): enable View Encapsulation for MapTreeViewItemOptionButtonsComponent and improve styling --- .../mapTreeViewItemOptionButtons.component.ts | 5 ++--- .../searchBar/searchBar.component.scss | 16 ++++++++-------- 2 files changed, 10 insertions(+), 11 deletions(-) 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 1c1c308506..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,10 +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", - styleUrls: ["./mapTreeViewItemOptionButtons.component.scss"], - 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 607cc027c0..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,20 +47,20 @@ cc-search-bar { } } - .small-action-button { - margin: 0 5px 0 5px; - display: inline-block; - height: 24px; - width: 24px; - vertical-align: top; - } - 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%; From 8ff13273622fee0bd3305a6cbc955907fc354dfd Mon Sep 17 00:00:00 2001 From: "lisa.walter" Date: Thu, 12 Sep 2024 14:19:44 +0200 Subject: [PATCH 13/14] chore(visualization): improve styling --- .../mapTreeViewItemOptionButtons.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index fbfe870496..656beb22be 100644 --- a/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.scss +++ b/visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.scss @@ -2,7 +2,7 @@ button { display: inline-block; - height: 24px; + height: 19px; width: 24px; min-height: 0; margin: 0; From f6b167c56f5d8f47701ed21a5e0bde60be96da32 Mon Sep 17 00:00:00 2001 From: "lisa.walter" Date: Thu, 12 Sep 2024 15:00:24 +0200 Subject: [PATCH 14/14] chore(visualization): update changelog --- visualization/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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