pxt-core 13.1.8 → 13.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "13.1.8",
+  "version": "13.1.9",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

package/react-common/components/controls/Card.tsx

@@ -5,7 +5,7 @@ export interface CardProps extends ContainerProps {
     onClick?: () => void;
     tabIndex?: number;
     ariaLabelledBy?: string;
-    label?: string;
+    label?: React.ReactNode;
     labelClass?: string;
 }
 

package/react-common/components/controls/Tree.tsx

@@ -173,6 +173,7 @@ export const TreeItem = (props: TreeItemProps) => {
         onClick,
         label,
         labelClassName,
+        leftIcon,
         rightIcon,
         title
     } = props;
@@ -208,6 +209,7 @@ export const TreeItem = (props: TreeItemProps) => {
             tabIndex={isSelected ? 0 : -1}
             onKeyDown={handleKeydown(dispatch)}
             aria-expanded={hasSubtree ? expanded : undefined}
+            aria-selected={isSelected}
         >
             <div className={classList("common-treeitem", hasSubtree && "has-subtree")}>
                 <ButtonBody
@@ -215,7 +217,7 @@ export const TreeItem = (props: TreeItemProps) => {
                     title={title}
                     labelClassName={labelClassName}
                     rightIcon={rightIcon}
-                    leftIcon={hasSubtree ? (expanded ? "fas fa-chevron-down" : "fas fa-chevron-right") : undefined}
+                    leftIcon={hasSubtree ? (expanded ? "fas fa-chevron-down" : "fas fa-chevron-right") : leftIcon}
                 />
             </div>
             {hasSubtree &&

package/react-common/components/extensions/ExtensionCard.tsx

@@ -38,10 +38,13 @@ export const ExtensionCard = <U,>(props: ExtensionCardProps<U>) => {
     }
 
     const id = pxt.Util.guidGen();
-    const cardLabel = installed ? lf("Installed") : label;
+    const cardLabel = installed
+        ? <><i className="fas fa-cog" aria-hidden={true} /> {lf("Installed")}</>
+        : label;
+    const cardLabelText = installed ? lf("Installed") : label;
     const cardLabelClass = installed ? classList("installed", labelClass) : labelClass;
     const descriptionId = id + "-description";
-    const statusId = cardLabel ? id + "-status" : undefined;
+    const statusId = cardLabelText ? id + "-status" : undefined;
 
     return <>
         <Card
@@ -63,7 +66,7 @@ export const ExtensionCard = <U,>(props: ExtensionCardProps<U>) => {
                             {description}
                         </div>
                     </div>
-                    {cardLabel && <div id={statusId} className="sr-only">{cardLabel}</div>}
+                    {cardLabelText && <div id={statusId} className="sr-only">{cardLabelText}</div>}
                     {(showDisclaimer || learnMoreUrl) &&
                         <div className="common-extension-card-extra-content">
                             {showDisclaimer && lf("User-provided extension, not endorsed by Microsoft.")}

package/react-common/styles/extensions/ExtensionCard.less

@@ -62,6 +62,9 @@
         color: var(--pxt-colors-green-foreground);
         background-color: var(--pxt-colors-green-background);
         border-color: var(--pxt-colors-green-hover);
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
     }
 
     a.link-button {

package/theme/music-editor/MusicEditor.less

@@ -7,6 +7,7 @@
 @import "Track";
 @import "TrackSelector";
 @import "Workspace";
+@import "gallery";
 
 @music-editor-header-color: #e30fc0; // Matches block color
 @music-editor-header-border-color: #c10da3; // Matches block color

package/theme/music-editor/gallery.less

@@ -0,0 +1,97 @@
+.image-editor-gallery.song {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: unset;
+    padding: 0.5rem;
+
+    gap: 0.5rem;
+}
+
+.song-gallery-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.5rem;
+    width: 100%;
+    height: 4rem;
+
+    background-color: var(--pxt-neutral-background1);
+    color: var(--pxt-neutral-foreground1);
+    border-radius: 0.25rem;
+    max-width: 500px;
+    gap: 1rem;
+
+    .song-gallery-item-name {
+        flex-shrink: 0;
+        width: 7rem;
+        font-weight: 600;
+        font-size: 18px;
+
+        overflow-x: hidden;
+        overflow-y: hidden;
+        text-overflow: ellipsis;
+
+        height: 3rem;
+        line-height: 3rem;
+    }
+
+    .song-gallery-item-preview {
+        flex-grow: 1;
+        flex-shrink: 1;
+        position: relative;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        height: 3rem;
+
+        img {
+            image-rendering: pixelated;
+            width: 100%;
+            height: 3rem;
+            object-fit: fill;
+        }
+    }
+
+    .common-button.play-button {
+        flex-shrink: 0;
+        width: 3rem;
+        height: 3rem;
+        padding: 0;
+        border-radius: 2rem;
+        background-color: var(--pxt-neutral-foreground2);
+        color: var(--pxt-neutral-background2);
+
+        .fas.fa-play, .fas.fa-stop {
+            margin: 0 0 0 0.25rem;
+            color: var(--pxt-neutral-background2);
+        }
+
+        .fas.fa-stop {
+            margin: 0;
+        }
+
+        &:focus-visible:after {
+            outline: solid var(--pxt-focus-border) 3px;
+            outline-offset: 5px;
+        }
+    }
+
+    .common-button.song-gallery-item-button {
+        flex-grow: 1;
+        height: 3rem;
+        padding: 0;
+        background-color: var(--pxt-neutral-background1);
+
+        .common-button-label {
+            display: flex;
+            flex-direction: row;
+            height: 3rem;
+            align-items: center;
+        }
+
+        &:focus-visible:after {
+            outline: solid var(--pxt-focus-border) 3px;
+            outline-offset: 5px;
+        }
+    }
+}

package/theme/piano-roll/piano-roll.less

@@ -197,7 +197,7 @@
     }
 }
 
-.selection {
+.piano-roll .selection {
     position: absolute;
     top: 0;
     height: 100%;

package/theme/timeMachine.less

@@ -117,6 +117,36 @@
         filter: grayscale(.15) brightness(.85) contrast(1.3);
     }
 
+    .common-treeitem-container.extension-event {
+        min-width: 0;
+        max-width: 100%;
+
+        .common-treeitem {
+            box-sizing: border-box;
+            min-width: 0;
+            width: 100%;
+        }
+
+        .common-button-flex {
+            display: flex;
+            align-items: center;
+            min-width: 0;
+            width: 100%;
+        }
+
+        .common-button-label {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        i {
+            flex-shrink: 0;
+            margin-right: 0.5rem;
+        }
+    }
+
     .time-machine-tree-container {
         flex-grow: 1;
         overflow-y: auto;
@@ -159,7 +189,7 @@
         height: @mobileMenuHeight;
     }
 
-    button.common-button.square-on-mobile {
+    .common-button.square-on-mobile {
         width: 3rem;
         height: 3rem;
         padding: 0;