pxt-core 7.5.38 → 7.5.39

package/package.json

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

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { classList, ContainerProps, fireClickOnEnter } from "../util";
+
+export interface CardProps extends ContainerProps {
+    onClick?: () => void;
+    tabIndex?: number;
+    ariaLabelledBy?: string;
+    label?: string;
+    labelClass?: string;
+}
+
+export const Card = (props: CardProps) => {
+    const {
+        id,
+        className,
+        role,
+        children,
+        ariaDescribedBy,
+        ariaLabelledBy,
+        ariaHidden,
+        ariaLabel,
+        onClick,
+        label,
+        labelClass,
+        tabIndex
+    } = props;
+
+    return <div
+        id={id}
+        className={classList("common-card", className)}
+        role={role || (onClick ? "button" : undefined)}
+        aria-describedby={ariaDescribedBy}
+        aria-labelledby={ariaLabelledBy}
+        aria-hidden={ariaHidden}
+        aria-label={ariaLabel}
+        onClick={onClick}
+        tabIndex={tabIndex}
+        onKeyDown={fireClickOnEnter}>
+            <div className="common-card-body">
+                {children}
+            </div>
+            {label &&
+                <label className={classList("common-card-label", labelClass)}>
+                    {label}
+                </label>
+            }
+    </div>
+}

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

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { ControlProps } from "../util";
+
+export interface LazyImageProps extends ControlProps {
+    src: string;
+    alt: string;
+    title?: string;
+}
+
+let observer: IntersectionObserver;
+
+export const LazyImage = (props: LazyImageProps) => {
+    const {
+        id,
+        className,
+        role,
+        src,
+        alt,
+        title,
+        ariaLabel,
+        ariaHidden,
+        ariaDescribedBy,
+    } = props;
+
+    initObserver();
+
+    let imageRef: HTMLImageElement;
+
+    const handleImageRef = (ref: HTMLImageElement) => {
+        if (!ref) return;
+
+        if (imageRef) observer.unobserve(imageRef);
+        imageRef = ref;
+        observer.observe(ref);
+    }
+
+
+
+    return <div className="common-lazy-image-wrapper">
+        <img
+            id={id}
+            ref={handleImageRef}
+            className={className}
+            data-src={src}
+            alt={alt}
+            title={title}
+            role={role}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+        />
+        <div className="common-spinner" />
+    </div>
+}
+
+function initObserver() {
+    if (observer) return;
+
+    const config = {
+        // If the image gets within 50px in the Y axis, start the download.
+        rootMargin: '50px 0px',
+        threshold: 0.01
+    };
+    const onIntersection: IntersectionObserverCallback = (entries) => {
+        entries.forEach(entry => {
+            // Are we in viewport?
+            if (entry.intersectionRatio > 0) {
+                // Stop watching and load the image
+                observer.unobserve(entry.target);
+                const url = entry.target.getAttribute("data-src");
+                (entry.target as HTMLImageElement).src = url;
+
+                const image = entry.target as HTMLImageElement;
+                image.src = url;
+                image.onload = () => {
+                    image.parentElement.classList.add("loaded");
+                }
+            }
+        })
+    }
+    observer = new IntersectionObserver(onIntersection, config);
+}

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

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+import { Card } from "../controls/Card";
+import { LazyImage } from "../controls/LazyImage";
+import { classList } from "../util";
+
+export interface ExtensionCardProps<U> {
+    title: string;
+    description: string;
+    imageUrl?: string;
+    learnMoreUrl?: string;
+    label?: string;
+    onClick?: (value: U) => void;
+    extension?: U;
+    loading?: boolean;
+}
+
+export const ExtensionCard = <U,>(props: ExtensionCardProps<U>) => {
+    const {
+        title,
+        description,
+        imageUrl,
+        learnMoreUrl,
+        label,
+        onClick,
+        extension,
+        loading
+    } = props;
+
+    const onCardClick = () => {
+        if (onClick) onClick(extension);
+    }
+
+    const id = pxt.Util.guidGen();
+
+    return <>
+        <Card
+            className={classList("common-extension-card", loading && "loading")}
+            onClick={onCardClick}
+            ariaLabelledBy={id + "-title"}
+            ariaDescribedBy={id + "-description"}
+            tabIndex={onClick && 0}
+            label={label}>
+            <div className="common-extension-card-contents">
+                {!loading && <>                
+                    <LazyImage src={imageUrl} alt={title} />
+                    <div className="common-extension-card-title" id={id + "-title"}>
+                        {title}
+                    </div>
+                    <div className="common-extension-card-description">
+                        <div id={id + "-description"}>
+                            {description}
+                        </div>
+                    </div>
+                    {learnMoreUrl &&
+                        <Button
+                            className="link-button"
+                            label={lf("Learn More")}
+                            title={lf("Learn More")}
+                            onClick={() => {}}
+                            href={learnMoreUrl}
+                        />
+                    }
+                </>
+                }
+            </div>
+            <div className="common-spinner"/>
+        </Card>
+    </>
+}

package/react-common/styles/controls/Button.less

@@ -223,6 +223,12 @@
     text-decoration: underline;
 }
 
+.common-button.link-button:focus {
+    outline: none;
+    border: none;
+    text-decoration: underline;
+}
+
 /****************************************************
  *                   Circle Buttons                 *
  ****************************************************/

package/react-common/styles/controls/Card.less

@@ -0,0 +1,53 @@
+.common-card {
+    width: 18rem;
+    height: 20rem;
+    border-radius: 0.5rem;
+    border: 1px solid @inputBorderColor;
+    transition: border 0.1s ease;
+    position: relative;
+
+    .common-card-body {
+        overflow: hidden;
+        border-radius: 0.5rem;
+    }
+}
+
+.common-card[role="button"] {
+    cursor: pointer;
+
+    &:hover {
+        border: 1px solid @inputBorderColorFocus;
+    }
+}
+
+.common-card-label {
+    color: @white;
+    background-color: @orange;
+    
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+    
+    position: absolute;
+    top: 1rem;
+    right: -1rem;
+    
+    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
+    min-width: 5rem;
+    font-size: 16px;
+    border-color: darken(@orange, 10%);
+}
+
+.common-card-label::after {
+    position: absolute;
+    content: "";
+    top: 100%;
+    left: auto;
+    right: 0;
+    background-color: transparent;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 1.2em 1.2em 0 0;
+    border-top-color: inherit;
+    width: 0;
+    height: 0;
+}

package/react-common/styles/controls/LazyImage.less

@@ -0,0 +1,29 @@
+.common-lazy-image-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .common-spinner {
+        position: absolute;
+        width: 60px;
+        height: 60px;
+
+        opacity: 1;
+        transition: opacity 0.3s ease;
+    }
+
+    img {
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+}
+
+.common-lazy-image-wrapper.loaded {
+    .common-spinner {
+        opacity: 0;
+    }
+
+    img {
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,82 @@
+.common-extension-card {
+    background-color: @white;
+    
+    .common-card-body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .common-extension-card-title {
+        font-weight: 600;
+        font-size: 18px;
+        padding: 0.5rem 1rem 0.25rem 1rem;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .common-extension-card-description {
+        flex-grow: 1;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-size: 16px;
+        overflow: hidden;
+
+        div {
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+            overflow: hidden;
+        }
+    }
+
+    img {
+        width: 100%;
+        height: 11rem;
+        object-fit: cover;
+        flex-shrink: 0;
+    }
+
+    .common-button.link-button {
+        text-align: right;
+        padding: 0.5rem 1rem;
+        background: @white;
+        margin: 0;
+        border-radius: 0;
+        border-top: solid 1px @inputBorderColor;
+        flex-shrink: 0;
+    }
+
+    .common-extension-card-contents {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+
+        opacity: 1;
+        transition: opacity 0.3s ease;
+    }
+
+    .common-spinner {
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        position: absolute;
+        width: 60px;
+        height: 60px;
+    }
+}
+
+.common-extension-card.loading {
+    .common-extension-card-contents {
+        opacity: 0;
+    }
+
+    .common-spinner {
+        opacity: 1;
+    }
+}

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

@@ -1,12 +1,15 @@
 @import "profile/profile.less";
 @import "share/share.less";
+@import "extensions/ExtensionCard.less";
 @import "controls/Button.less";
+@import "controls/Card.less";
 @import "controls/Checkbox.less";
 @import "controls/DraggableGraph.less";
 @import "controls/Dropdown.less";
 @import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";
+@import "controls/LazyImage.less";
 @import "controls/MenuDropdown.less";
 @import "controls/Modal.less";
 @import "controls/RadioButtonGroup.less";

package/theme/common.less

@@ -1142,6 +1142,14 @@ Field editors
         }
     }
 }
+
+.extension-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 18rem);
+    gap: 1rem;
+    width: 100%;
+}
+
 .import-extension-modal {
     .common-modal-body {
         display: flex;