change: Use IconProvider to create the selection overflow menu icon

personalizedrefrigerator · Jan 3, 2025 · 4c228d5 · 4c228d5
1 parent f454484
commit 4c228d5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/js-draw/src/tools/SelectionTool/Selection.ts b/packages/js-draw/src/tools/SelectionTool/Selection.ts
@@ -115,6 +115,7 @@ export default class Selection {
 		const menuToggleButton = new SelectionMenuShortcut(
 			this,
 			this.editor.viewport,
+			this.editor.icons.makeOverflowIcon(),
 			showContextMenu,
 			this.editor.localization,
 		);

diff --git a/packages/js-draw/src/tools/SelectionTool/SelectionMenuShortcut.ts b/packages/js-draw/src/tools/SelectionTool/SelectionMenuShortcut.ts
@@ -22,6 +22,7 @@ export default class SelectionMenuShortcut implements SelectionBoxChild {
 	public constructor(
 		private readonly parent: Selection,
 		private readonly viewport: Viewport,
+		private readonly icon: Element,
 		showContextMenu: OnShowContextMenu,
 		private localization: ToolLocalization,
 	) {
@@ -40,7 +41,8 @@ export default class SelectionMenuShortcut implements SelectionBoxChild {
 
 	private initUI() {
 		const button = document.createElement('button');
-		button.textContent = '...';
+		this.icon.classList.add('icon');
+		button.replaceChildren(this.icon);
 		button.ariaLabel = this.localization.selectionMenu__show;
 		button.title = button.ariaLabel;
 

diff --git a/packages/js-draw/src/tools/SelectionTool/SelectionTool.scss b/packages/js-draw/src/tools/SelectionTool/SelectionTool.scss
@@ -85,14 +85,17 @@
 	> button {
 		max-height: var(--vertical-offset);
 		background-color: var(--background-color-1);
+
+		width: 24px;
+		height: 24px;
+		padding: 6px;
 		font-size: 14px;
 		user-select: none;
 		-webkit-user-select: none;
 
 		color: var(--foreground-color-1);
 		border: 0.5px solid var(--foreground-color-1);
 		border-radius: 3px;
-		padding: 3px;
 		opacity: 0.8;
 
 		&:hover,
@@ -104,6 +107,11 @@
 		}
 
 		transition: 0.2s ease opacity;
+
+		> .icon {
+			width: 100%;
+			height: 100%;
+		}
 	}
 }