♻️ Make icon div creation a common function

kando-menu · Mar 9, 2024 · 305f333 · 305f333
1 parent 8d400b3
commit 305f333
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 46 deletions.
diff --git a/src/renderer/editor/common/themed-icon.ts b/src/renderer/editor/common/themed-icon.ts
@@ -0,0 +1,35 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//   _  _ ____ _  _ ___  ____                                                           //
+//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
+//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/menu/kando           //
+//                                                                                      //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
+// SPDX-License-Identifier: MIT
+
+/**
+ * This method creates a div which contains an icon. The icon is created using the
+ * 'material-symbols-rounded' or 'simple-icons' font.
+ *
+ * @param icon The name of the icon to create.
+ * @param theme The name of the icon theme to use.
+ * @returns A HTML element which contains the icon.
+ */
+export function createDiv(icon: string, theme: string) {
+  const containerDiv = document.createElement('div');
+  containerDiv.classList.add('icon-container');
+
+  const iconDiv = document.createElement('i');
+  containerDiv.appendChild(iconDiv);
+
+  if (theme === 'material-symbols-rounded') {
+    iconDiv.classList.add(theme);
+    iconDiv.innerHTML = icon;
+  } else if (theme === 'simple-icons') {
+    iconDiv.classList.add('si');
+    iconDiv.classList.add('si-' + icon);
+  }
+
+  return containerDiv;
+}
diff --git a/src/renderer/editor/editor.scss b/src/renderer/editor/editor.scss
@@ -58,3 +58,19 @@ $toolbar-padding: 10px;
     pointer-events: all;
   }
 }
+
+#kando-editor-container .icon-container {
+  container-type: size;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  i {
+    position: absolute;
+    font-size: 75cqi;
+    color: white;
+  }
+}
diff --git a/src/renderer/editor/preview/preview.scss b/src/renderer/editor/preview/preview.scss
@@ -89,22 +89,6 @@
         }
       }
 
-      .kando-menu-preview-icon-container {
-        container-type: size;
-        width: 100%;
-        aspect-ratio: 1 / 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        i {
-          position: absolute;
-          font-size: 75cqi;
-          color: white;
-        }
-      }
-
       .kando-menu-preview-lock {
         position: absolute;
         width: $preview-lock-size;

diff --git a/src/renderer/editor/preview/preview.ts b/src/renderer/editor/preview/preview.ts
@@ -12,6 +12,7 @@ import Handlebars from 'handlebars';
 import { EventEmitter } from 'events';
 
 import * as math from '../../math';
+import * as themedIcon from '../common/themed-icon';
 import * as utils from './utils';
 import { IEditorNode } from '../editor-node';
 import { ItemDragger } from '../common/item-dragger';
@@ -483,7 +484,7 @@ export class Preview extends EventEmitter {
       this.backlink = document.createElement('div');
       this.backlink.classList.add('kando-menu-preview-backlink');
       this.backlink.appendChild(
-        utils.createIcon('arrow_back', 'material-symbols-rounded')
+        themedIcon.createDiv('arrow_back', 'material-symbols-rounded')
       );
       container.appendChild(this.backlink);
 

diff --git a/src/renderer/editor/preview/utils.ts b/src/renderer/editor/preview/utils.ts
@@ -9,6 +9,7 @@
 // SPDX-License-Identifier: MIT
 
 import * as math from '../../math';
+import * as themedIcon from '../common/themed-icon';
 import { IEditorNode } from '../editor-node';
 
 /**
@@ -167,32 +168,6 @@ export function computeItemAnglesWithDropIndex(
   return { itemAngles, dropAngle };
 }
 
-/**
- * This method creates a div which contains an icon. The icon is created using the
- * 'material-symbols-rounded' or 'simple-icons' font.
- *
- * @param icon The name of the icon to create.
- * @param theme The name of the icon theme to use.
- * @returns A HTML element which contains the icon.
- */
-export function createIcon(icon: string, theme: string) {
-  const containerDiv = document.createElement('div');
-  containerDiv.classList.add('kando-menu-preview-icon-container');
-
-  const iconDiv = document.createElement('i');
-  containerDiv.appendChild(iconDiv);
-
-  if (theme === 'material-symbols-rounded') {
-    iconDiv.classList.add(theme);
-    iconDiv.innerHTML = icon;
-  } else if (theme === 'simple-icons') {
-    iconDiv.classList.add('si');
-    iconDiv.classList.add('si-' + icon);
-  }
-
-  return containerDiv;
-}
-
 /**
  * This method creates the big center div which shows the icon of the currently selected
  * menu.
@@ -202,7 +177,7 @@ export function createIcon(icon: string, theme: string) {
 export function createCenterDiv(node: IEditorNode) {
   const div = document.createElement('div');
   div.classList.add('kando-menu-preview-center');
-  div.appendChild(this.createIcon(node.icon, node.iconTheme));
+  div.appendChild(themedIcon.createDiv(node.icon, node.iconTheme));
   return div;
 }
 
@@ -217,7 +192,7 @@ export function createChildDiv(node: IEditorNode) {
   div.classList.add('kando-menu-preview-child');
 
   // Add the icon of the child.
-  div.appendChild(this.createIcon(node.icon, node.iconTheme));
+  div.appendChild(themedIcon.createDiv(node.icon, node.iconTheme));
 
   // If the child can have children, we add container for the grandchildren. The actual
   // grandchildren divs are added on demand as their number may change if items are
@@ -263,7 +238,7 @@ export function createLockDiv(
     div.classList.add('locked');
   }
 
-  const icon = this.createIcon(
+  const icon = themedIcon.createDiv(
     initiallyLocked ? 'lock' : 'lock_open',
     'material-symbols-rounded'
   );