pxt-core 13.2.0 → 13.2.1

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/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/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;

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>