Fix/2856/action icon

visualization/app/app.module.ts

@@ -58,6 +58,7 @@ import { UpdateEdgePreviewsEffect } from "./codeCharta/state/effects/updateEdgeP
 import { ChangelogDialogModule } from "./codeCharta/ui/dialogs/changelogDialog/changelogDialog.module"
 import { VersionService } from "./codeCharta/services/version/version.service"
 import { HoveredNodePathPanelModule } from "./codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.module"
+import { ActionIconModule } from "./codeCharta/ui/actionIcon/actionIcon.module"
 
 @NgModule({
 	imports: [
@@ -98,7 +99,9 @@ import { HoveredNodePathPanelModule } from "./codeCharta/ui/toolBar/hoveredNodeP
 		MetricChooserModule,
 		RibbonBarModule,
 		ChangelogDialogModule,
-		HoveredNodePathPanelModule
+		HoveredNodePathPanelModule,
+		ChangelogDialogModule,
+		ActionIconModule
 	],
 	providers: [
 		threeSceneServiceProvider,

visualization/app/codeCharta/ui/actionIcon/actionIcon.component.html

@@ -0,0 +1 @@
+<i role="button" [class]="icon"></i>

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

@@ -0,0 +1,23 @@
+@use "../../../material/theme";
+
+cc-action-icon {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	width: 24px;
+	height: 24px;
+	border-radius: 100%;
+	background-color: theme.$cc-primary-color;
+	font-size: 16px;
+
+	&:hover {
+		background-color: rgb(0, 124, 112);
+	}
+
+	i,
+	i.fa {
+		margin: auto;
+		line-height: 1.5;
+		color: white;
+	}
+}

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

@@ -0,0 +1,10 @@
+import "./actionIcon.component.scss"
+import { Component, Input } from "@angular/core"
+
+@Component({
+	selector: "cc-action-icon",
+	template: require("./actionIcon.component.html")
+})
+export class ActionIconComponent {
+	@Input() icon: string
+}

visualization/app/codeCharta/ui/actionIcon/actionIcon.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { ActionIconComponent } from "./actionIcon.component"
+
+@NgModule({
+	imports: [CommonModule],
+	declarations: [ActionIconComponent],
+	exports: [ActionIconComponent],
+	entryComponents: [ActionIconComponent]
+})
+export class ActionIconModule {}

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

@@ -1,9 +1 @@
-<button
-	mat-mini-fab
-	class="export-3d-button"
-	aria-label="3d print map"
-	(click)="downloadStlFile()"
-	title="Download stl file for 3D printing"
->
-	<mat-icon class="button-icon">view_in_ar</mat-icon>
-</button>
+<cc-action-icon icon="fa fa-cube" title="Download stl file for 3D printing" (click)="downloadStlFile()"></cc-action-icon>

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

@@ -1,20 +1,3 @@
 cc-export-threed-map-button {
 	margin-left: 8px;
-	.button-icon {
-		font-size: 16px;
-		line-height: 1.3;
-	}
-	span {
-		padding: 0;
-		margin: 0;
-	}
-	.mat-mini-fab {
-		height: 25px;
-		width: 25px;
-
-		.mat-button-wrapper {
-			display: block;
-			padding: 0;
-		}
-	}
 }

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

@@ -1,6 +1,6 @@
 import { TestBed } from "@angular/core/testing"
 import { Export3DMapButtonComponent } from "./export3DMapButton.component"
-import { fireEvent, render } from "@testing-library/angular"
+import { fireEvent, render, screen } from "@testing-library/angular"
 import { Export3DMapButtonModule } from "./export3DMapButton.module"
 import { FileDownloader } from "../../util/fileDownloader"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
@@ -35,24 +35,23 @@ describe("Export3DMapButtonComponent", () => {
 	})
 
 	it("should start download on click", async function () {
-		const { container } = await render(Export3DMapButtonComponent, { excludeComponentDeclaration: true })
+		const { fixture } = await render(Export3DMapButtonComponent, { excludeComponentDeclaration: true })
 		// mock download and therefore only verify the Angular binding.
 		// A better approach would be, if the component would only fire an action
 		// and an https://ngrx.io/guide/effects would do the side effect and logic.
 		// Then we could test the logic in the effect without mocking a lot
 		// and the component wouldn't need to know anything about store values
-		// @ts-ignore
-		const mockedDownload = jest.spyOn(ng.probe(container).componentInstance, "downloadStlFile").mockImplementation(() => null)
+		const mockedDownload = jest.spyOn(fixture.componentInstance, "downloadStlFile").mockImplementation(() => null)
 
-		const downloadButton = container.querySelector(".export-3d-button")
+		const downloadButton = screen.getByRole("button")
 		expect(downloadButton).not.toBe(null)
 
 		fireEvent.click(downloadButton)
 		expect(mockedDownload).toHaveBeenCalledTimes(1)
 	})
 	it("should download STL file with the right file name", async function () {
-		const { container } = await render(Export3DMapButtonComponent, { excludeComponentDeclaration: true })
-		const downloadButton = container.querySelector(".export-3d-button")
+		await render(Export3DMapButtonComponent, { excludeComponentDeclaration: true })
+		const downloadButton = screen.getByRole("button")
 
 		const downloadData = jest.spyOn(FileDownloader, "downloadData").mockImplementation(() => null)
 		ThreeSceneService.mapMeshInstance = { getThreeMesh: jest.fn() } as unknown as CodeMapMesh

visualization/app/codeCharta/ui/export3DMapButton/export3DMapButton.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
 import { Export3DMapButtonComponent } from "./export3DMapButton.component"
-import { MaterialModule } from "../../../material/material.module"
+import { ActionIconModule } from "../actionIcon/actionIcon.module"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule],
+	imports: [CommonModule, ActionIconModule],
 	declarations: [Export3DMapButtonComponent],
 	exports: [Export3DMapButtonComponent]
 })

visualization/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.html

@@ -1,3 +1,3 @@
 <button (click)="showGlobalConfiguration()" title="Global Configuration">
-	<span>Global Configuration</span> <i class="fa fa-cog cc-shadow"></i>
+	<span>Global Configuration</span> <cc-action-icon icon="fa fa-cog"></cc-action-icon>
 </button>

visualization/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.scss

@@ -1,16 +1,13 @@
 @use "../../../../material/theme";
 
 cc-global-configuration-button button {
-	display: inline-flex;
-	align-items: center;
 	margin: 0;
 
-	i {
-		background-color: theme.$cc-primary-color;
-		color: white;
-		border-radius: 100%;
-		padding: 5px;
-		font-size: 14px;
+	&:hover cc-action-icon {
+		background-color: rgb(0, 124, 112);
+	}
+
+	cc-action-icon {
 		margin-left: 4px;
 	}
 }

visualization/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.module.ts

@@ -1,13 +1,14 @@
 import { NgModule } from "@angular/core"
 import { MaterialModule } from "../../../../material/material.module"
+import { ActionIconModule } from "../../actionIcon/actionIcon.module"
 import { ResetSettingsButtonModule } from "../../resetSettingsButton/resetSettingsButton.module"
 import { GlobalConfigurationButtonComponent } from "./globalConfigurationButton.component"
 import { DisplayQualitySelectionModule } from "./globalConfigurationDialog/displayQualitySelection/displayQualitySelection.module"
 import { GlobalConfigurationDialogComponent } from "./globalConfigurationDialog/globalConfigurationDialog.component"
 import { MapLayoutSelectionModule } from "./globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.module"
 
 @NgModule({
-	imports: [MaterialModule, ResetSettingsButtonModule, MapLayoutSelectionModule, DisplayQualitySelectionModule],
+	imports: [MaterialModule, ResetSettingsButtonModule, MapLayoutSelectionModule, DisplayQualitySelectionModule, ActionIconModule],
 	declarations: [GlobalConfigurationButtonComponent, GlobalConfigurationDialogComponent],
 	exports: [GlobalConfigurationButtonComponent],
 	entryComponents: [GlobalConfigurationButtonComponent, GlobalConfigurationDialogComponent]

visualization/app/material/material.module.ts

@@ -5,7 +5,6 @@ import { MatMenuModule } from "@angular/material/menu"
 import { MatButtonModule } from "@angular/material/button"
 import { MatDividerModule } from "@angular/material/divider"
 import { MatTooltipModule } from "@angular/material/tooltip"
-import { MatIconModule } from "@angular/material/icon"
 import { MatButtonToggleModule } from "@angular/material/button-toggle"
 import { MatDialogModule } from "@angular/material/dialog"
 import { MatCardModule } from "@angular/material/card"
@@ -25,7 +24,6 @@ const materialModules = [
 	MatButtonModule,
 	MatDividerModule,
 	MatTooltipModule,
-	MatIconModule,
 	MatDialogModule,
 	MatCardModule,
 	MatButtonToggleModule,

visualization/app/material/material.scss

@@ -10,7 +10,6 @@
 @include mat.menu-theme(theme.$cc-theme);
 @include mat.dialog-theme(theme.$cc-theme);
 @include mat.tooltip-theme(theme.$cc-theme);
-@include mat.icon-theme(theme.$cc-theme);
 @include mat.checkbox-theme(theme.$cc-theme);
 @include mat.toolbar-theme(theme.$cc-theme);
 @include mat.input-theme(theme.$cc-theme);