pxt-core 13.1.16 → 13.1.18

package/react-common/components/theming/ThemePickerModal.tsx

@@ -1,29 +1,90 @@
+import * as React from "react";
 import { Modal } from "../controls/Modal";
+import { EditorToggle } from "../controls/EditorToggle";
 import { ThemeCard } from "./ThemeCard";
 
+export type ThemePickerMode = "editor" | "simulator";
+
+export interface ThemePickerToggleProps {
+    selected: ThemePickerMode;
+    onModeChanged: (mode: ThemePickerMode) => void;
+}
+
+export const ThemePickerToggle = (props: ThemePickerToggleProps) => {
+    const { selected, onModeChanged } = props;
+    const selectMode = (mode: ThemePickerMode) => {
+        if (mode !== selected) onModeChanged(mode);
+    };
+
+    return <div className="theme-picker-toggle">
+        <EditorToggle
+            id="theme-picker-toggle"
+            ariaLabel={lf("Theme type")}
+            selected={selected === "editor" ? 0 : 1}
+            items={[
+                {
+                    label: lf("Editor"),
+                    title: lf("Editor theme"),
+                    icon: "fas fa-paint-brush",
+                    focusable: true,
+                    onClick: () => selectMode("editor"),
+                },
+                {
+                    label: lf("Simulator"),
+                    title: lf("Simulator theme"),
+                    icon: "fas fa-gamepad",
+                    focusable: true,
+                    onClick: () => selectMode("simulator"),
+                },
+            ]} />
+    </div>;
+};
+
 export interface ThemePickerModalProps {
     themes: pxt.ColorThemeInfo[];
-    onThemeClicked(them: pxt.ColorThemeInfo): void;
+    selectedThemeId?: string;
+    onThemeChanged: (theme: pxt.ColorThemeInfo) => void;
+    onSave: (theme: pxt.ColorThemeInfo) => void;
+    onSimulatorThemeClicked?: () => void;
     onClose(): void;
 }
 export const ThemePickerModal = (props: ThemePickerModalProps) => {
+    const [selectedThemeId, setSelectedThemeId] = React.useState(
+        props.selectedThemeId || props.themes[0]?.id
+    );
+    const selectedTheme = props.themes.find(theme => theme.id === selectedThemeId);
+
     return (
         <Modal
-            id="theme-picker-modal" 
+            id="theme-picker-modal"
             title={lf("Choose a Theme")}
+            hideTitle={!!props.onSimulatorThemeClicked}
             onClose={props.onClose}
             className="theme-picker-modal"
+            rightHeader={props.onSimulatorThemeClicked && <ThemePickerToggle
+                selected="editor"
+                onModeChanged={props.onSimulatorThemeClicked} />}
+            actions={[{
+                label: lf("Apply"),
+                className: "primary",
+                disabled: !selectedTheme,
+                onClick: () => selectedTheme && props.onSave(selectedTheme),
+            }]}
         >
             <div
                 className="theme-picker"
                 role="list"
                 aria-label={lf("List of available themes")}
             >
-                {props.themes && props.themes.map(theme => 
+                {props.themes.map(theme =>
                     <ThemeCard
                         key={theme.id}
                         theme={theme}
-                        onClick={props.onThemeClicked}
+                        selected={theme.id === selectedThemeId}
+                        onClick={selected => {
+                            setSelectedThemeId(selected.id);
+                            props.onThemeChanged(selected);
+                        }}
                     />
                 )}
             </div>

package/react-common/components/theming/simulatorThemeDefaults.ts

@@ -0,0 +1,77 @@
+export function getSimulatorThemePreferenceForColorThemeChange(
+    preference: pxt.auth.SimulatorThemePreference | undefined,
+    previousColorTheme: pxt.ColorThemeInfo | undefined,
+    nextColorTheme: pxt.ColorThemeInfo | undefined,
+    presets: pxt.SimulatorThemePreset[] | undefined
+): pxt.auth.SimulatorThemePreference | undefined {
+    if (!presets?.length || previousColorTheme?.id === nextColorTheme?.id) return preference;
+
+    const nextDefault = getDefaultSimulatorThemePreference(nextColorTheme, presets);
+    if (!nextDefault) return preference;
+
+    if (preference) {
+        if (preference.presetId !== nextDefault.presetId) return preference;
+        if (pxt.auth.simulatorThemeColorsEqual(preference.theme, nextDefault.theme)
+            && preference.theme.layout === nextDefault.theme.layout) return preference;
+    }
+    else if (!nextColorTheme?.defaultSimulatorTheme) {
+        return preference;
+    }
+
+    return nextDefault;
+}
+
+export function getDefaultSimulatorThemePreference(
+    colorTheme: pxt.ColorThemeInfo | undefined,
+    presets: pxt.SimulatorThemePreset[] | undefined
+): pxt.auth.SimulatorThemePreference | undefined {
+    const defaultPreset = presets?.find(candidate => candidate.id === "default") || presets?.[0];
+    if (!defaultPreset) return undefined;
+
+    const configuredDefault = colorTheme?.defaultSimulatorTheme;
+    const configuredPreset = typeof configuredDefault === "string"
+        ? presets?.find(candidate => candidate.id === configuredDefault)
+        : undefined;
+    const theme = typeof configuredDefault === "object"
+        ? { ...defaultPreset.theme, ...configuredDefault }
+        : configuredPreset?.theme || defaultPreset.theme;
+    return {
+        presetId: defaultPreset.id,
+        theme: copySimulatorTheme(theme as pxt.SimulatorTheme),
+    };
+}
+
+export function isImplicitSimulatorThemePreference(
+    preference: pxt.auth.SimulatorThemePreference,
+    presets: pxt.SimulatorThemePreset[] | undefined
+): boolean {
+    const defaultPreset = presets?.find(candidate => candidate.id === "default") || presets?.[0];
+    return preference.presetId === defaultPreset?.id
+        && preference.theme.layout === pxt.auth.DEFAULT_SIMULATOR_LAYOUT;
+}
+
+export function copySimulatorTheme(theme: pxt.SimulatorTheme): pxt.SimulatorTheme {
+    const result = { layout: theme.layout || pxt.auth.DEFAULT_SIMULATOR_LAYOUT } as pxt.SimulatorTheme;
+    for (const property of Object.keys(theme)) {
+        if (pxt.auth.isSimulatorThemeColorProperty(property)
+            && pxt.auth.isSimulatorThemeColor(theme[property])) {
+            result[property] = theme[property];
+        }
+    }
+    return result;
+}
+
+export function getSimulatorThemeForLayout(
+    theme: pxt.SimulatorTheme,
+    layoutId: string,
+    colorFields: pxt.SimulatorThemeColorField[] = []
+): pxt.SimulatorTheme {
+    const nextTheme = copySimulatorTheme(theme);
+    nextTheme.layout = layoutId;
+    for (const field of colorFields) {
+        if (!pxt.auth.isSimulatorThemeColor(nextTheme[field.property])) {
+            nextTheme[field.property] = field.defaultValue;
+        }
+    }
+    return nextTheme;
+}

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

@@ -0,0 +1,17 @@
+.common-dropdown-modal .common-modal {
+    .common-modal-header {
+        display: none;
+    }
+    .common-modal-body {
+        background: none;
+    }
+
+    .common-menu-dropdown-pane {
+        position: relative;
+        right: unset;
+    }
+
+    .common-dropdown-item .fas.fa-check.transparent {
+        opacity: 0;
+    }
+}

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

@@ -54,6 +54,12 @@
         padding-bottom: 1.25rem;
     }
 
+    .common-modal-right-menu {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
     .common-modal-close {
         border: 1px solid transparent;
     }
@@ -118,12 +124,6 @@
         border: 1px, solid var(--pxt-focus-border);
     }
 
-    .common-modal-right-menu {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
     .common-modal-help {
         display: flex;
         align-items: center;

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

@@ -11,6 +11,7 @@
 @import "controls/Checkbox.less";
 @import "controls/DraggableGraph.less";
 @import "controls/Dropdown.less";
+@import "controls/DropdownModal.less";
 @import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";

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

@@ -1,6 +1,190 @@
-.theme-picker-modal>.common-modal {
-    width: 80%;
-    max-width: 60rem;
+.theme-picker-modal,
+.simulator-theme-picker-modal {
+    >.common-modal {
+        width: 90%;
+        max-width: 64rem;
+    }
+
+    .common-modal-header {
+        padding-left: 0;
+
+        .common-modal-right-menu {
+            flex: 1;
+            justify-content: center;
+            min-width: 0;
+            margin-left: 4rem;
+        }
+    }
+
+    .common-modal-footer {
+        grid-template-columns: 1fr auto;
+
+        button:only-child {
+            justify-self: end;
+            min-width: 8rem;
+        }
+    }
+}
+
+.theme-picker-modal>.common-modal,
+.simulator-theme-picker-modal:not(.standalone)>.common-modal {
+    height: 90%;
+    max-height: 48rem;
+    display: flex;
+    flex-direction: column;
+
+    .common-modal-body {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+    }
+}
+
+.theme-picker-toggle {
+    width: 20rem;
+    max-width: 40vw;
+    padding: 0.5rem 0;
+
+    .common-editor-toggle-outer {
+        width: 100%;
+    }
+
+    .common-editor-toggle {
+        overflow: hidden;
+    }
+
+    .common-editor-toggle .common-editor-toggle-item > .common-button {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
+
+    .common-button-flex,
+    .common-button-label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.simulator-theme-picker-modal.standalone .common-modal-header {
+    padding-left: 1.5rem;
+}
+
+.simulator-theme-picker {
+    display: grid;
+    grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
+    gap: 2rem;
+    align-items: center;
+}
+
+.simulator-theme-preview {
+    min-width: 0;
+
+    .simframe {
+        margin: 0;
+    }
+
+    .simframe > .ui.loader {
+        display: none;
+    }
+}
+
+.simulator-theme-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 0;
+}
+
+.simulator-theme-select-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.simulator-theme-select {
+    box-sizing: border-box;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border: 1px solid var(--pxt-neutral-stencil1);
+    border-radius: 2px;
+    background: var(--pxt-neutral-background1);
+    color: var(--pxt-neutral-foreground1);
+    font: inherit;
+    cursor: pointer;
+
+    &:focus-visible {
+        outline: 3px solid var(--pxt-focus-border);
+        outline-offset: 2px;
+    }
+}
+
+.simulator-theme-color-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.simulator-theme-color {
+    display: grid;
+    grid-template-columns: minmax(7rem, 1fr) 3rem minmax(8rem, 1fr);
+    gap: 0.5rem;
+    align-items: center;
+
+    .common-input-wrapper {
+        min-width: 0;
+    }
+
+    input[type="color"] {
+        width: 3rem;
+        height: 2.25rem;
+        padding: 0.125rem;
+        cursor: pointer;
+        border: 1px solid var(--pxt-neutral-stencil1);
+        background: var(--pxt-neutral-background1);
+    }
+}
+
+@media only screen and (max-width: 50rem) {
+    .theme-picker-modal>.common-modal {
+        width: 90%;
+    }
+
+    .theme-picker-modal,
+    .simulator-theme-picker-modal {
+        .common-modal-header .common-modal-right-menu {
+            margin-left: clamp(0rem, calc(90vw - 16rem), 4rem);
+        }
+    }
+
+    .theme-picker-toggle {
+        width: 10rem;
+        max-width: 100%;
+
+        .common-editor-toggle .common-editor-toggle-item > .common-button {
+            padding-left: 0.2rem;
+            padding-right: 0.2rem;
+
+            i {
+                display: none;
+            }
+        }
+    }
+
+    .simulator-theme-picker {
+        grid-template-columns: 1fr;
+    }
+
+    .simulator-theme-preview {
+        max-width: 28rem;
+        width: 100%;
+        justify-self: center;
+    }
+
+    .simulator-theme-color {
+        grid-template-columns: minmax(5.5rem, 1fr) 3rem minmax(6.5rem, 1fr);
+    }
 }
 
 .theme-picker {
@@ -18,11 +202,16 @@
 
     .theme-card {
         width: 18rem;
-        height: unset;
+        height: auto;
         background-color: var(--pxt-neutral-background1);
         color: var(--pxt-neutral-foreground1);
         border: 1px solid var(--pxt-neutral-stencil1);
 
+        &.selected {
+            border-color: var(--pxt-primary-background);
+            box-shadow: inset 0 0 0 2px var(--pxt-primary-background);
+        }
+
         &:hover {
             border: 1px solid var(--pxt-focus-border);
             cursor: pointer;
@@ -180,3 +369,8 @@
         }
     }
 }
+
+.hc .theme-picker .theme-card.selected {
+    border-color: @highContrastTextColor;
+    box-shadow: inset 0 0 0 2px @highContrastTextColor;
+}

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

@@ -12,7 +12,6 @@
     --note-event-text-color-hover: #ffffff;
     --note-event-border-hover: 2px solid #ffffff;
 
-    --header-text-color: black;
 
     --white-key-color: white;
     --black-key-color: black;
@@ -28,7 +27,9 @@
 
     --velocity-slider-color: var(--note-event-color);
 
-    --header-background: #f0f0f0;
+    --header-background: var(--pxt-neutral-background1);
+    --header-text-color: var(--pxt-neutral-foreground1);
+
     --piano-roll-border-color: var(--workspace-grid-line-color);
 }
 
@@ -64,6 +65,13 @@
 .piano-roll .header-container {
     height: var(--header-height);
     flex-shrink: 0;
+
+    .header > .common-dropdown .common-menu-dropdown-pane {
+        max-height: 15rem;
+        overflow-y: auto;
+        overflow-x: hidden;
+        z-index: 2;
+    }
 }
 
 .piano-roll .header,
@@ -128,6 +136,10 @@
     &>.common-dropdown #snap-select {
         min-width: 4.75rem;
     }
+
+    .common-button.menu-button {
+        color: var(--header-text-color);
+    }
 }
 
 .scrollbar.horizontal {
@@ -340,6 +352,16 @@
     background-color: var(--playhead-color);
 }
 
+.piano-roll .header .velocity-editor-toggle {
+    overflow-x: hidden;
+
+    label {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
 .velocity-editor {
     position: relative;
     display: flex;
@@ -421,4 +443,10 @@
     .music-editor-edit-controls .common-button.green {
         display: none;
     }
+}
+
+@media @tabletAndBelow {
+    .common-dropdown > .common-button {
+        min-width: 8rem;
+    }
 }

package/theme/pxtjson.less

@@ -2,4 +2,16 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+}
+
+.pxt-json-simulator-theme {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.3rem;
+
+    label {
+        font-size: 14px;
+        font-weight: 600;
+    }
 }

package/webapp/public/multiplayer.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-multiplayer.css">
-  <script defer="defer" src="/blb/multiplayer/js/main.db72096c.js"></script><link href="/blb/multiplayer/css/main.40f89d37.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/multiplayer/js/main.d98f7e21.js"></script><link href="/blb/multiplayer/css/main.40f89d37.css" rel="stylesheet"></head>
   <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/skillmap.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-skillmap.css">
-  <script defer="defer" src="/blb/skillmap/js/main.fb626575.js"></script><link href="/blb/skillmap/css/main.450cb46e.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/skillmap/js/main.6352b119.js"></script><link href="/blb/skillmap/css/main.450cb46e.css" rel="stylesheet"></head>
   <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/teachertool.html

@@ -18,7 +18,7 @@
     <!-- <link rel="manifest" href="/teachertool-data/manifest.json" /> -->
     <title>MakeCode Code Evaluation</title>
     <script>var pxtConfig=null</script>
-  <script defer="defer" src="/blb/teachertool/js/main.168add6b.js"></script><link href="/blb/teachertool/css/main.8ef9c91e.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/teachertool/js/main.138b6a8e.js"></script><link href="/blb/teachertool/css/main.8ef9c91e.css" rel="stylesheet"></head>
   <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/tutorialtool.html

@@ -17,7 +17,7 @@
   <!-- <link rel="manifest" href="/tutorialtool-data/manifest.json" /> -->
   <title>MakeCode Tutorial Tool</title>
   <script>var pxtConfig=null</script>
-<script defer="defer" src="/blb/tutorialtool/js/main.16de6eb5.js"></script><link href="/blb/tutorialtool/css/main.02bb1797.css" rel="stylesheet"></head>
+<script defer="defer" src="/blb/tutorialtool/js/main.9b70fa5a.js"></script><link href="/blb/tutorialtool/css/main.02bb1797.css" rel="stylesheet"></head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>