pxt-core 8.2.6 → 8.2.9

package/react-common/components/palette/PaletteSwatch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Palette } from "./Palettes";
+
+export interface PaletteSwatchProps {
+    palette: Palette;
+}
+
+export const PaletteSwatch = (props: PaletteSwatchProps) => {
+    const { palette } = props;
+
+
+    return <div className="common-palette-swatch">
+        <div className="common-palette-swatch-name">
+            {palette.name}
+        </div>
+        <div className="common-palette-color-list">
+            {palette.colors.map((color, index) => <PaletteColor key={index} color={color} />)}
+        </div>
+    </div>
+}
+
+interface PaletteColorProps {
+    color: string;
+}
+
+const PaletteColor = (props: PaletteColorProps) =>
+    <div className="common-palette-color" style={{backgroundColor: props.color}} />

package/react-common/components/palette/Palettes.ts

@@ -0,0 +1,289 @@
+export interface Palette {
+    name: string;
+    id: string;
+    colors: string[];
+}
+
+export const Adafruit: Palette = {
+    id: "Adafruit",
+    name: lf("Adafruit"),
+    colors: [
+        "#000000",
+        "#FFFFFF",
+        "#FF0000",
+        "#FF007D",
+        "#FF7a00",
+        "#e5FF00",
+        "#2D9F00",
+        "#00FF72",
+        "#0034FF",
+        "#17ABFF",
+        "#C600FF",
+        "#636363",
+        "#7400DB",
+        "#00EFFF",
+        "#DF2929",
+        "#000000",
+    ]
+}
+
+// https://lospec.com/palette-list/vanilla-milkshake missing #e9f59d
+export const Pastel: Palette = {
+    id: "Pastel",
+    name: lf("Pastel"),
+    colors: [
+        "#000000",
+        "#fff7e4",
+        "#f98284",
+        "#feaae4",
+        "#ffc384",
+        "#fff7a0",
+        "#87a889",
+        "#b0eb93",
+        "#b0a9e4",
+        "#accce4",
+        "#b3e3da",
+        "#d9c8bf",
+        "#6c5671",
+        "#ffe6c6",
+        "#dea38b",
+        "#28282e",
+    ]
+}
+
+
+export const Matte: Palette = {
+    id: "Matte",
+    name: lf("Matte"),
+    colors: [
+        "#000000",
+        "#FFF1E8",
+        "#FF004D",
+        "#FF77A8",
+        "#FFA300",
+        "#FFEC27",
+        "#008751",
+        "#00E436",
+        "#29ADFF",
+        "#C2C3C7",
+        "#7E2553",
+        "#83769C",
+        "#5F574F",
+        "#FFCCAA",
+        "#AB5236",
+        "#1D2B53",
+    ]
+}
+
+
+export const Grayscale: Palette = {
+    id: "Grayscale",
+    name: lf("Grayscale"),
+    colors: [
+        "#000000",
+        "#FFFFFF",
+        "#EDEDED",
+        "#DBDBDB",
+        "#C8C8C8",
+        "#B6B6B6",
+        "#A4A4A4",
+        "#929292",
+        "#808080",
+        "#6D6D6D",
+        "#5B5B5B",
+        "#494949",
+        "#373737",
+        "#242424",
+        "#121212",
+        "#000000",
+    ]
+}
+
+
+// https://lospec.com/palette-list/poke14 with #b56edd added for purple
+export const Poke: Palette = {
+    id: "Poke",
+    name: lf("Poke"),
+    colors: [
+        "#000000",
+        "#ffffff",
+        "#d45362",
+        "#e8958b",
+        "#cc8945",
+        "#f5dc8c",
+        "#417d53",
+        "#5dd48f",
+        "#5162c2",
+        "#6cadeb",
+        "#b56edd",
+        "#8f3f29",
+        "#612431",
+        "#c0fac2",
+        "#24325e",
+        "#1b1221",
+    ]
+}
+
+
+// https://lospec.com/palette-list/warioware-diy
+export const DIY: Palette = {
+    id: "DIY",
+    name: lf("DIY"),
+    colors: [
+        "#000000",
+        "#f8f8f8",
+        "#f80000",
+        "#FF93C4",
+        "#f8a830",
+        "#f8f858",
+        "#089050",
+        "#70d038",
+        "#2868c0",
+        "#10c0c8",
+        "#c868e8",
+        "#c0c0c0",
+        "#787878",
+        "#f8d898",
+        "#c04800",
+        "#000000",
+    ]
+}
+
+
+// https://lospec.com/palette-list/still-life
+export const StillLife: Palette = {
+    id: "StillLife",
+    name: lf("Still Life"),
+    colors: [
+        "#000000",
+        "#a8e4d4",
+        "#d13b27",
+        "#e07f8a",
+        "#cc8218",
+        "#b3e868",
+        "#5d853a",
+        "#68c127",
+        "#286fb8",
+        "#9b8bff",
+        "#3f2811",
+        "#513155",
+        "#122615",
+        "#c7b581",
+        "#7a2222",
+        "#000000",
+    ]
+}
+
+
+// https://lospec.com/palette-list/steam-lords, missing 0xa0b9ba
+export const SteamPunk: Palette = {
+    id: "SteamPunk",
+    name: lf("Steam Punk"),
+    colors: [
+        "#000000",
+        "#c0d1cc",
+        "#603b3a",
+        "#170e19",
+        "#775c4f",
+        "#77744f",
+        "#4f7754",
+        "#a19f7c",
+        "#4f5277",
+        "#65738c",
+        "#3a604a",
+        "#213b25",
+        "#433a60",
+        "#7c94a1",
+        "#3b2137",
+        "#2f213b",
+    ]
+}
+
+// https://lospec.com/palette-list/sweetie-16, missing 0x73eff7
+export const Sweet: Palette = {
+    id: "Sweet",
+    name: lf("Sweet"),
+    colors: [
+        "#000000",
+        "#f4f4f4",
+        "#b13e53",
+        "#a7f070",
+        "#ef7d57",
+        "#ffcd75",
+        "#257179",
+        "#38b764",
+        "#29366f",
+        "#3b5dc9",
+        "#41a6f6",
+        "#566c86",
+        "#333c57",
+        "#94b0c2",
+        "#5d275d",
+        "#1a1c2c",
+    ]
+}
+
+
+// https://lospec.com/palette-list/na16, missing 0x70377f
+export const Adventure: Palette = {
+    id: "Adventure",
+    name: lf("Adventure"),
+    colors: [
+        "#000000",
+        "#f5edba",
+        "#9d303b",
+        "#d26471",
+        "#e4943a",
+        "#c0c741",
+        "#647d34",
+        "#34859d",
+        "#17434b",
+        "#7ec4c1",
+        "#584563",
+        "#8c8fae",
+        "#3e2137",
+        "#d79b7d",
+        "#9a6348",
+        "#1f0e1c",
+    ]
+}
+
+
+//% fixedInstance whenUsed block="arcade"
+export const Arcade: Palette = {
+    id: "Arcade",
+    name: lf("Arcade"),
+    colors: [
+        "#000000",
+        "#FFFFFF",
+        "#FF2121",
+        "#FF93C4",
+        "#FF8135",
+        "#FFF609",
+        "#249CA3",
+        "#78DC52",
+        "#003FAD",
+        "#87F2FF",
+        "#8E2EC4",
+        "#A4839F",
+        "#5C406c",
+        "#E5CDC4",
+        "#91463d",
+        "#000000",
+    ]
+}
+
+
+export const AllPalettes = [
+    Arcade,
+    Matte,
+    Pastel,
+    Sweet,
+    Poke,
+    Adventure,
+    DIY,
+    Adafruit,
+    StillLife,
+    SteamPunk,
+    Grayscale,
+]

package/react-common/components/profile/SignInModal.tsx

@@ -0,0 +1,100 @@
+/// <reference path="../types.d.ts" />
+
+import * as React from "react";
+import { Checkbox } from "../controls/Checkbox";
+import { Button } from "../controls/Button";
+import { Link } from "../controls/Link";
+import { Modal } from "../controls/Modal";
+
+export interface SignInModalProps {
+    onSignIn: (provider: pxt.AppCloudProvider, rememberMe: boolean) => Promise<void>;
+    onClose: () => void;
+    appMessage?: string;
+    resolvePath?: (path: string) => string;
+    mode?: "signin" | "signup";
+}
+
+export const SignInModal = (props: SignInModalProps) => {
+    const { onSignIn, onClose, appMessage } = props;
+    const resolvePath = props.resolvePath ?? (path => path);
+
+    const [rememberMe, setRememberMe] = React.useState(false);
+    const [mode, setMode] = React.useState(props.mode ?? "signin");
+
+    const titleText = React.useMemo(() => (mode === "signin" ? lf("Sign in") : lf("Sign up")), [mode]);
+    const headerText = React.useMemo(
+        () =>
+            mode === "signin"
+                ? lf("Sign in to save your progress and access your work anytime, anywhere.")
+                : lf("Join now to save your progress and access your work anytime, anywhere."),
+        [mode]
+    );
+    const footerFragment = React.useMemo(
+        () =>
+            mode === "signin" ? (
+                <div className='switch'>
+                    <span>{lf("Don't have an account?")}</span>
+                    <Button className="link-button" onClick={() => setMode("signup")} title={lf("Sign up")} label={lf("Sign up")}/>
+                </div>
+            ) : (
+                <div className='switch'>
+                    <span>{lf("Have an account?")}</span>
+                    <Button className="link-button" onClick={() => setMode("signin")} title={lf("Sign in")} label={lf("Sign in")}/>
+                </div>
+            ),
+        [mode]
+    );
+
+    return (
+        <Modal title={titleText} onClose={onClose}>
+            <div className='signin-form'>
+                <div className='signin-header'>
+                    {appMessage ? appMessage : undefined} {headerText}
+                </div>
+                <div className='signin-body'>
+                    <div className='providers'>
+                        {pxt.auth.identityProviders().map((provider, index) => {
+                            const title =
+                                mode === "signin"
+                                    ? lf("Continue with {0}", provider.name)
+                                    : lf("Sign up with {0}", provider.name);
+                            return (
+                                <Button
+                                    key={index}
+                                    className='teal inverted provider'
+                                    onClick={() => onSignIn(provider, rememberMe)}
+                                    title={title}
+                                    ariaLabel={title}
+                                    label={
+                                        <div className='label'>
+                                            <div>
+                                                <img className='logo' src={resolvePath(provider.icon)} />
+                                            </div>
+                                            <div className='title'>{title}</div>
+                                        </div>
+                                    }
+                                />
+                            );
+                        })}
+                        <div className='rememberme'>
+                            <Checkbox
+                                id='rememberme'
+                                label={lf("Remember me")}
+                                isChecked={rememberMe}
+                                onChange={setRememberMe}
+                            ></Checkbox>
+                        </div>
+                    </div>
+                </div>
+                <div className='signin-footer'>
+                    {footerFragment}
+                    <div className='learn'>
+                        <Link href='/identity/sign-in' target='_blank'>
+                            {lf("Learn more")}
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+    );
+};

package/react-common/components/profile/UserPane.tsx

@@ -1,3 +1,6 @@
+/// <reference path="../types.d.ts" />
+/// <reference path="../../../localtypings/react.d.ts" />
+
 import * as React from "react";
 import { fireClickOnEnter, CheckboxStatus } from "../util";
 import { UserNotification } from "./UserNotification";
@@ -17,7 +20,9 @@ export interface UserPaneProps {
 export const UserPane = (props: UserPaneProps) => {
     const { profile, onSignOutClick, onDeleteProfileClick, onEmailCheckClick, notification, emailChecked } = props;
 
-    const { username, displayName, picture } = profile.idp;
+    const { username, displayName, picture, pictureUrl } = profile.idp;
+
+    const picUrl = pictureUrl ?? picture?.dataUrl;
 
     const emailLabel = <>
         {emailChecked === CheckboxStatus.Waiting ? <div className="common-spinner" /> : undefined}
@@ -27,8 +32,11 @@ export const UserPane = (props: UserPaneProps) => {
 
     return <div className="profile-user-pane">
         <div className="profile-portrait">
-            { picture?.dataUrl ?
-                <img src={picture?.dataUrl} alt={pxt.U.lf("Profile Picture")} />
+            { picUrl ?
+                // Google user picture URL must have referrer policy set to no-referrer
+                <div>
+                    <img src={picUrl} alt={pxt.U.lf("Profile Picture")} referrerPolicy="no-referrer" />
+                </div>
                 : <div className="profile-initials-portrait">
                     {pxt.auth.userInitials(profile)}
                 </div>
@@ -54,12 +62,12 @@ export const UserPane = (props: UserPaneProps) => {
                 label={emailLabel}/>
         </div>
         <div className="profile-actions">
-            <a role="button"
-                tabIndex={0}
-                onKeyPress={fireClickOnEnter}
-                onClick={onDeleteProfileClick}>
-                {lf("Delete Profile")}
-            </a>
+            <Button
+                className="link-button"
+                title={lf("Delete Profile")}
+                label={lf("Delete Profile")}
+                onClick={onDeleteProfileClick}
+            />
             <Button
                 className="sign-out"
                 leftIcon="fas fa-sign-out-alt"

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

@@ -0,0 +1,21 @@
+.common-color-picker-field {
+    display: grid;
+    grid-template-columns: 3fr 6fr 1fr 1fr;
+    align-items: center;
+    padding: 0.1rem 0rem;
+}
+
+.common-color-inputs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &>:first-child {
+        margin-right: 0.5rem;
+    }
+
+    &>:last-child {
+        flex-grow: 1;
+        margin-right: 0.5rem;
+    }
+}

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

@@ -0,0 +1,10 @@
+.common-palette-picker {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.common-palette-editor {
+    max-height: 35rem;
+    overflow-y: auto;
+}

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

@@ -0,0 +1,27 @@
+.common-palette-swatch {
+    display: flex;
+    flex-direction: row;
+}
+
+.common-palette-color-list {
+    display: flex;
+    flex-direction: row;
+}
+
+.common-palette-color {
+    width: 1rem;
+    height: 1rem;
+}
+
+.common-palette-swatch-name {
+    flex-grow: 1;
+    padding-right: 0.5rem;
+}
+
+.common-palette-picker > .common-dropdown > .common-button .common-button-label .common-palette-color-list {
+    display: none;
+}
+
+.common-palette-picker > .common-dropdown > .common-button .common-button-flex {
+    display: flex;
+}

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

@@ -0,0 +1,3 @@
+@import "./PalettePicker.less";
+@import "./PaletteSwatch.less";
+@import "./ColorPickerField.less";

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

@@ -349,4 +349,67 @@
         grid-template-columns: repeat(3, 1fr);
         grid-auto-rows: 12rem;
     }
-}
+}
+
+
+/****************************************************
+ *                 Sign In Modal                    *
+ ****************************************************/
+
+.signin-form {
+    margin: 0 1rem;
+
+    .signin-header {
+        margin: 0 0 1rem 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .signin-body {
+        display: flex;
+        justify-content: center;
+
+        .providers {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            align-items: center;
+            margin: 0 0 1rem 0;
+
+            .provider {
+                width: 100%;
+                margin: 0;
+                padding: 0.8rem 2.5rem;
+
+                .label {
+                    display: flex;
+                    flex-direction: row;
+                    gap: 1rem;
+
+                    .logo {
+                        width: 1.25rem;
+                    }
+
+                    .title {
+                        align-self: center;
+                    }
+                }
+            }
+        }
+    }
+
+    .signin-footer {
+        .switch {
+            display: flex;
+            gap: 0.5rem;
+            justify-content: center;
+        }
+
+        .learn {
+            font-size: smaller;
+            width: 100%;
+            text-align: right;
+        }
+    }
+}

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

@@ -1,5 +1,6 @@
 @import "profile/profile.less";
 @import "share/share.less";
+@import "palette/palette.less";
 @import "extensions/ExtensionCard.less";
 @import "controls/Button.less";
 @import "controls/Card.less";

package/theme/blockly-core.less

@@ -90,7 +90,7 @@ body.blocklyMinimalBody {
         font-style: italic;
     }
 
-    .blocklyEditableText>text.semanticIcon {
+    .blocklyEditableText>text.semanticIcon, .blocklyNonEditableText>text.semanticIcon {
         fill: #fff;
         font-family: "Icons";
         font-size: 19px;

package/theme/common.less

@@ -204,7 +204,6 @@ pre {
 
 .invisibleScrollbar::-webkit-scrollbar {
     background: transparent !important;
-    width: @customScrollbarWidth; // TODO: remove this when the sim breakpoint is fixed
 }
 .invisibleScrollbar::-webkit-scrollbar-thumb {
     display: none !important;
@@ -909,7 +908,7 @@ Field editors
     .common-modal > {
         .common-modal-header {
             height: @mainMenuHeight;
-            background-color: @blue;
+            background-color: @mainMenuInvertedBackground;
             z-index: 202;
             display: flex;
             padding-left: 0rem;
@@ -2501,3 +2500,15 @@ select.ui.dropdown {
         background-color: #F5BC5F;
     }
 }
+
+
+/** Project settings */
+
+.palette-picker-field {
+    display: flex;
+    align-items: center;
+}
+
+.palette-picker-label {
+    margin-right: 0.5rem;
+}

package/theme/image-editor/bottomBar.less

@@ -53,6 +53,7 @@
 
 .image-editor-change-name {
     position: relative;
+    width: 20rem;
 }
 
 .image-editor-change-name .image-editor-input {
@@ -67,7 +68,6 @@
     max-width: 100%;
     width: 100%;
     height: 100%;
-    min-width: 20rem;
 
     transition: border-bottom 0.2s;
 }

package/theme/tutorial-sidebar.less

@@ -62,7 +62,7 @@
         border-top: 2px dashed @tutorialSecondaryColor;
     }
 
-    .lang-blocks .ui.segment.raised, .ui.segment.raised.codewidget {
+    .lang-block .ui.segment.raised, .lang-blocks .ui.segment.raised, .ui.segment.raised.codewidget {
         overflow-x: auto;
 
         code, code.hljs {
@@ -830,4 +830,4 @@
     .tutorial-title {
         max-width: 100%;
     }
-}
+}