fix: display icons in the toolbox for extension categories (#47)

scratchfoundation · Apr 26, 2024 · b53eadd · b53eadd
1 parent 49663ed
commit b53eadd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/core/css.js b/core/css.js
@@ -1275,6 +1275,12 @@ const styles = `
   .scratchCategoryMenuItem:hover {
     color: $colour_toolboxHover !important;
   }
+
+  .categoryIconBubble {
+    margin: 0 auto 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
 `;
 
 Blockly.Css.register(styles);
diff --git a/src/scratch_continuous_category.js b/src/scratch_continuous_category.js
@@ -3,11 +3,18 @@ import {ContinuousCategory} from '@blockly/continuous-toolbox';
 
 class ScratchContinuousCategory extends ContinuousCategory {
   createIconDom_() {
-    const icon = super.createIconDom_();
-    icon.style.border = `1px solid ${this.toolboxItemDef_['secondaryColour']}`;
-    return icon;
+    if (this.toolboxItemDef_.iconURI) {
+      const icon = document.createElement('img');
+      icon.src = this.toolboxItemDef_.iconURI;
+      icon.className = 'categoryIconBubble';
+      return icon;
+    } else {
+      const icon = super.createIconDom_();
+      icon.style.border = `1px solid ${this.toolboxItemDef_['secondaryColour']}`;
+      return icon;
+    }
   }
-  
+
   setSelected(isSelected) {
     super.setSelected(isSelected);
     // Prevent hardcoding the background color to grey.