Inline blocks for tutorial content: agent icon now showing up (#10271)

* fix the tabbing for has categories check * add support for image icons in inline blocks in tutorials
microsoft · Nov 18, 2024 · 79f23af · 79f23af
1 parent 6a40214
commit 79f23af
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/theme/tutorial.less b/theme/tutorial.less
@@ -281,6 +281,15 @@ span.docs.inlineblock {
         margin-right: 6px;
     }
 
+    span.image-icon {
+        background-image: var(--image-icon-url);
+        width: 20px;
+        height: 17px;
+        background-size: contain !important;
+        background-repeat: no-repeat !important;
+        display: inline-block;
+    }
+
     &.clickable {
         cursor: pointer;
 

diff --git a/webapp/src/marked.tsx b/webapp/src/marked.tsx
@@ -406,7 +406,8 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
                     inlineBlock.appendChild(inlineBlockDiv);
                     inlineBlockDiv.className = lev;
                     if (hasCategories) {
-                        const inlineBlockIcon = document.createElement('i');
+                        const inlineBlockIcon = document.createElement('span');
+                        inlineBlockIcon.setAttribute("role", "presentation");
                         inlineBlockDiv.append(inlineBlockIcon);
                     }
                     inlineBlockDiv.append(pxt.U.rlf(txt));
@@ -448,28 +449,42 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
                     }
 
                     if (hasCategories) {
-                            const isAdvanced = bi?.attributes?.advanced || ns === "arrays";
-                            inlineBlock.classList.add("clickable");
-                            inlineBlock.tabIndex = 0;
-                            inlineBlock.ariaLabel = lf("Toggle the {0} category", ns);
-                            inlineBlock.title = inlineBlock.ariaLabel;
-                            inlineBlock.children[0].append(bi?.attributes?.icon || pxt.toolbox.getNamespaceIcon(ns) || "");
-                            inlineBlock.addEventListener("click", e => {
-                                // need to filter out editors that are currently hidden as we leave toolboxes in dom
-                                const editorSelector = `#maineditor > div:not([style*="display:none"]):not([style*="display: none"])`;
-
-                                if (isAdvanced) {
-                                    // toggle advanced open first if it is collapsed.
-                                    const advancedSelector = `${editorSelector} .blocklyTreeRow[data-ns="advancedcollapsed"]`;
-                                    const advancedRow = document.querySelector<HTMLDivElement>(advancedSelector);
-                                    advancedRow?.click();
-                                }
-
-                                const toolboxSelector = `${editorSelector} .blocklyTreeRow[data-ns="${ns}"]`;
-                                const toolboxRow = document.querySelector<HTMLDivElement>(toolboxSelector);
-                                toolboxRow?.click();
-                            });
-                            inlineBlock.addEventListener("keydown", e => fireClickOnEnter(e as any))
+                        const isAdvanced = bi?.attributes?.advanced || ns === "arrays";
+                        inlineBlock.classList.add("clickable");
+                        inlineBlock.tabIndex = 0;
+                        inlineBlock.ariaLabel = lf("Toggle the {0} category", ns);
+                        inlineBlock.title = inlineBlock.ariaLabel;
+
+                        // handle adding the icon
+                        const iconContainer = inlineBlock.children[0];
+                        const currentIcon = bi?.attributes?.icon || pxt.toolbox.getNamespaceIcon(ns) || "";
+                        const isImageIcon = currentIcon.length > 1;  // It's probably an image icon, and not an icon code
+                        if (isImageIcon) {
+                            iconContainer.classList.add('image-icon');
+                            iconContainer.classList.add(ns);
+                            iconContainer.setAttribute("style", `--image-icon-url: url("${pxt.Util.pathJoin(pxt.webConfig.commitCdnUrl, encodeURI(currentIcon))}")`);
+                        } else {
+                            const inlineBlockIcon = document.createElement('i');
+                            inlineBlockIcon.append(currentIcon)
+                            iconContainer.append(inlineBlockIcon);
+                        }
+
+                        inlineBlock.addEventListener("click", e => {
+                            // need to filter out editors that are currently hidden as we leave toolboxes in dom
+                            const editorSelector = `#maineditor > div:not([style*="display:none"]):not([style*="display: none"])`;
+
+                            if (isAdvanced) {
+                                // toggle advanced open first if it is collapsed.
+                                const advancedSelector = `${editorSelector} .blocklyTreeRow[data-ns="advancedcollapsed"]`;
+                                const advancedRow = document.querySelector<HTMLDivElement>(advancedSelector);
+                                advancedRow?.click();
+                            }
+
+                            const toolboxSelector = `${editorSelector} .blocklyTreeRow[data-ns="${ns}"]`;
+                            const toolboxRow = document.querySelector<HTMLDivElement>(toolboxSelector);
+                            toolboxRow?.click();
+                        });
+                        inlineBlock.addEventListener("keydown", e => fireClickOnEnter(e as any))
                     }
                 }
             });