Add material theming to thumbTack sortingButton

Change className to NgClass to avoid overriding styling classes when intilized #3459
MaibornWolff · Jan 19, 2024 · 206834e · 206834e
1 parent 39bf39b
commit 206834e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
@@ -1,3 +1,5 @@
+@use "../../../material/theme";
+
 cc-search-panel {
 	.search-panel-card {
 		border-left: none;
@@ -18,4 +20,12 @@ cc-search-panel {
 			pointer-events: none;
 		}
 	}
+
+	.submenu-button {
+		border: 2px solid theme.$cc-primary-color;
+
+		&:hover {
+			border: 2px solid theme.$cc-emphasized-color;
+		}
+	}
 }
diff --git a/visualization/app/codeCharta/ui/searchPanel/sortingButton/sortingButton.component.html b/visualization/app/codeCharta/ui/searchPanel/sortingButton/sortingButton.component.html
@@ -1,5 +1,5 @@
 <button
-	class="box-rounded"
+	class="box-rounded submenu-button"
 	(click)="onClick()"
 	title="Toggle sort order (currently {{ (sortingOrderAscending$ | async) ? 'ascending' : 'descending' }})"
 >

diff --git a/visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.html b/visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.html
@@ -1,3 +1,8 @@
-<button class="box-rounded" (click)="onClick()" title="Pin file explorer" [className]="(isSearchPanelPinned$ | async) ? 'pinned' : ''">
+<button
+	class="box-rounded submenu-button"
+	(click)="onClick()"
+	title="Pin file explorer"
+	[ngClass]="(isSearchPanelPinned$ | async) ? 'pinned' : ''"
+>
 	<i class="fa fa-thumb-tack"></i>
 </button>