pxt-core 8.2.10 → 8.2.12

package/package.json

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

package/react-common/components/share/ShareInfo.tsx

@@ -150,7 +150,9 @@ export const ShareInfo = (props: ShareInfoProps) => {
                 <div className="project-share-thumbnail">
                     {thumbnailUri
                         ? <img src={thumbnailUri} />
-                        : <div className="project-thumbnail-placeholder" />
+                        : <div className="project-thumbnail-placeholder">
+                             <div className="common-spinner" />
+                        </div>
                     }
                     {shareState !== "publish" &&
                         <Button
@@ -163,11 +165,12 @@ export const ShareInfo = (props: ShareInfoProps) => {
             }
             <div className="project-share-content">
                 {(prePublish || shareState === "publish") && <>
-                    <div className="project-share-title">
-                        <h2>{inputTitle}</h2>
+                    <div className="project-share-title project-share-label" id="share-input-title">
+                        {inputTitle}
                     </div>
                     {showDescription && <>
                         <Input
+                            ariaDescribedBy="share-input-title"
                             className="name-input"
                             initialValue={name}
                             placeholder={lf("Name your project")}
@@ -207,6 +210,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                         <div className="project-share-data">
                             <div className="common-input-attached-button">
                                 <Input
+                                    ariaDescribedBy="share-input-title"
                                     handleInputRef={handleInputRef}
                                     initialValue={shareData.url}
                                     readOnly={true}
@@ -219,36 +223,38 @@ export const ShareInfo = (props: ShareInfoProps) => {
                                     onBlur={handleCopyBlur} />
                             </div>
                             <div className="project-share-actions">
-                                <Button className="square-button gray embed mobile-portrait-hidden"
-                                    title={lf("Show embed code")}
-                                    leftIcon="fas fa-code"
-                                    onClick={handleEmbedClick} />
-                                <SocialButton className="square-button facebook"
-                                    url={shareData?.url}
-                                    type='facebook'
-                                    heading={lf("Share on Facebook")} />
-                                <SocialButton className="square-button twitter"
-                                    url={shareData?.url}
-                                    type='twitter'
-                                    heading={lf("Share on Twitter")} />
-                                <SocialButton className="square-button google-classroom"
-                                    url={shareData?.url}
-                                    type='google-classroom'
-                                    heading={lf("Share on Google Classroom")} />
-                                <SocialButton className="square-button microsoft-teams"
-                                    url={shareData?.url}
-                                    type='microsoft-teams'
-                                    heading={lf("Share on Microsoft Teams")} />
-                                <SocialButton className="square-button whatsapp"
-                                    url={shareData?.url}
-                                    type='whatsapp'
-                                    heading={lf("Share on WhatsApp")} />
-                                {navigator.share && <Button className="square-button device-share"
-                                    title={lf("Show device share options")}
-                                    ariaLabel={lf("Show device share options")}
-                                    leftIcon={"icon share"}
-                                    onClick={handleDeviceShareClick}
-                                />}
+                                <div className="project-share-social">
+                                    <Button className="square-button gray embed mobile-portrait-hidden"
+                                        title={lf("Show embed code")}
+                                        leftIcon="fas fa-code"
+                                        onClick={handleEmbedClick} />
+                                    <SocialButton className="square-button facebook"
+                                        url={shareData?.url}
+                                        type='facebook'
+                                        heading={lf("Share on Facebook")} />
+                                    <SocialButton className="square-button twitter"
+                                        url={shareData?.url}
+                                        type='twitter'
+                                        heading={lf("Share on Twitter")} />
+                                    <SocialButton className="square-button google-classroom"
+                                        url={shareData?.url}
+                                        type='google-classroom'
+                                        heading={lf("Share on Google Classroom")} />
+                                    <SocialButton className="square-button microsoft-teams"
+                                        url={shareData?.url}
+                                        type='microsoft-teams'
+                                        heading={lf("Share on Microsoft Teams")} />
+                                    <SocialButton className="square-button whatsapp"
+                                        url={shareData?.url}
+                                        type='whatsapp'
+                                        heading={lf("Share on WhatsApp")} />
+                                    {navigator.share && <Button className="square-button device-share"
+                                        title={lf("Show device share options")}
+                                        ariaLabel={lf("Show device share options")}
+                                        leftIcon={"icon share"}
+                                        onClick={handleDeviceShareClick}
+                                    />}
+                                </div>
                                 <Button
                                     className="menu-button project-qrcode"
                                     buttonRef={handleQRCodeButtonRef}

package/react-common/components/share/ThumbnailRecorder.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Button } from "../controls/Button";
+import { classList } from "../util";
 
 export interface ThumbnailRecorderProps {
     initialUri?: string;
@@ -31,7 +32,7 @@ export interface SimRecorderRef {
 
 export const ThumbnailRecorder = (props: ThumbnailRecorderProps) => {
     const { initialUri, onApply, onCancel, simRecorder } = props;
-    const [ uri, setUri ] =  React.useState(initialUri);
+    const [ uri, setUri ] =  React.useState(undefined);
     const [ error, setError] = React.useState<string>(undefined)
     const [ recorderRef, setRecorderRef ] = React.useState<SimRecorderRef>(undefined);
     const [ recorderState, setRecorderState ] = React.useState<SimRecorderState>("default");
@@ -76,62 +77,73 @@ export const ThumbnailRecorder = (props: ThumbnailRecorderProps) => {
         setRecorderRef(ref);
     }
 
-    const screenshotLabel = lf("Take screenshot ({0})", targetTheme.simScreenshotKey);
-    const startRecordingLabel = lf("Record gameplay ({0})", targetTheme.simGifKey);
+    const screenshotLabel = lf("Screenshot ({0})", targetTheme.simScreenshotKey);
+    const startRecordingLabel = lf("Record ({0})", targetTheme.simGifKey);
     const stopRecordingLabel = lf("Stop recording ({0})", targetTheme.simGifKey) ;
 
+    const thumbnailLabel = uri ? lf("New Thumbnail") : lf("Current Thumbnail");
+    const classes = classList(
+        "gif-recorder-content",
+        uri && "has-uri"
+    )
+
     return <>
-        <div className="gif-recorder-content">
-            <div className="gif-recorder-sim-embed">
-                {React.createElement(simRecorder, { onSimRecorderInit: handleSimRecorderRef })}
+        <div className={classes}>
+            <div className="gif-recorder-sim">
+                <div className="gif-recorder-sim-embed">
+                    {React.createElement(simRecorder, { onSimRecorderInit: handleSimRecorderRef })}
+                </div>
+                <div className="gif-recorder">
+                    <div className="gif-recorder-actions">
+                        <Button className="teal inverted"
+                            title={screenshotLabel}
+                            label={screenshotLabel}
+                            leftIcon="fas fa-camera"
+                            onClick={handleScreenshotClick} />
+                        <Button className="teal inverted"
+                            title={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
+                            label={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
+                            leftIcon={`fas fa-${recorderState === "recording" ? "square" : "circle"}`}
+                            onClick={handleRecordClick} />
+                        <div className="spacer mobile-only" />
+                        <Button className="mobile-only"
+                            title={lf("Cancel")}
+                            label={lf("Cancel")}
+                            onClick={onCancel} />
+                    </div>
+                </div>
             </div>
             <div className="thumbnail-controls">
                 <div className="thumbnail-preview">
                     <div>
-                        <span className="thumbnail-label">{lf("Current Thumbnail")}</span>
-                        <div className="thumbnail-image">
-                            {initialUri
-                                ? <img src={initialUri} />
-                                : <div className="thumbnail-placeholder" />
-                            }
+                        <div className="thumbnail-header">
+                            <span className="project-share-label">{thumbnailLabel}</span>
+                            <Button
+                                className="link-button mobile-only"
+                                title={lf("Try again?")}
+                                label={lf("Try again?")}
+                                onClick={() => setUri(undefined)} />
                         </div>
-                    </div>
-                    <div>
-                        <span className="thumbnail-label">{lf("New Thumbnail")}</span>
                         <div className="thumbnail-image">
-                            {uri
-                                ? <img src={uri} />
+                            {(uri || initialUri)
+                                ? <img src={uri || initialUri} />
                                 : <div className="thumbnail-placeholder" />
                             }
                         </div>
                     </div>
                 </div>
                 <div className="thumbnail-actions">
-                    <Button className="primary"
-                        title={lf("Apply")}
-                        label={lf("Apply")}
-                        onClick={handleApplyClick} />
+                    {uri &&
+                        <Button className="primary"
+                            title={lf("Apply")}
+                            label={lf("Apply")}
+                            onClick={handleApplyClick} />
+                    }
                     <Button title={lf("Cancel")}
                         label={lf("Cancel")}
                         onClick={onCancel} />
                 </div>
             </div>
         </div>
-
-        <div className="gif-recorder">
-            <div className="gif-recorder-label">{lf("Pick your project thumbnail")}</div>
-            <div className="gif-recorder-actions">
-                {<Button className="teal inverted"
-                    title={screenshotLabel}
-                    label={screenshotLabel}
-                    leftIcon="fas fa-camera"
-                    onClick={handleScreenshotClick} />}
-                {<Button className="teal inverted"
-                    title={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
-                    label={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
-                    leftIcon={`fas fa-${recorderState === "recording" ? "square" : "circle"}`}
-                    onClick={handleRecordClick} />}
-            </div>
-        </div>
     </>
 }

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

@@ -24,7 +24,12 @@
     overflow: hidden;
 }
 
-@media @mobileAndBelow {
+.wide > .common-modal {
+    width: 75%;
+    max-width: 60rem;
+}
+
+@media @tabletAndBelow {
     .common-modal, .wide > .common-modal {
         width: 95%;
     }
@@ -121,11 +126,6 @@
     max-height: unset;
 }
 
-.wide > .common-modal {
-    width: 75%;
-    max-width: 60rem;
-}
-
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

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

@@ -30,10 +30,6 @@
     justify-content: center;
     flex: 1;
 
-    > div {
-        margin-bottom: 1rem;
-    }
-
     .project-share-content {
         flex-grow: 1;
 
@@ -50,11 +46,11 @@
 
 .project-share-title {
     margin-bottom: 1rem;
+}
 
-    h2 {
-        margin: 0;
-        margin-bottom: 0.5rem
-    }
+.project-share-label {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
 }
 
 #project-share-dropdown {
@@ -76,6 +72,17 @@
         background-color: rgba(0, 0, 0, 0.05);
         margin-bottom: 1rem;
     }
+
+    .project-thumbnail-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .common-spinner {
+            width: 5rem;
+            height: 5rem;
+        }
+    }
 }
 
 .fullscreen {
@@ -98,35 +105,33 @@
     }
 }
 
+
 /////////////////////////////////////////
 //           Embed                     //
 /////////////////////////////////////////
 
 .project-share-actions {
     display: flex;
+    flex-direction: row;
     margin-top: 1rem;
     position: relative;
     margin-bottom: 2rem;
+}
 
-    .common-button {
-        margin-right: 0.5rem;
-    }
+.project-share-social {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
 .project-share-text {
     margin-bottom: 1rem;
 }
 
-.common-button.menu-button.project-qrcode {
-    position: absolute;
-    right: 0;
-    height: 6rem;
-    padding: 0.5rem;
-    top: -0.5rem;
-
-    img {
-        height: 5rem;
-    }
+.common-button.menu-button.project-qrcode img {
+    height: 5rem;
 }
 
 .common-button.menu-button.project-qrcode:focus::after {
@@ -165,10 +170,12 @@
 .gif-recorder-content {
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     .thumbnail-controls {
         display: flex;
         flex-direction: column;
+        padding: 0 4rem;
 
         .thumbnail-preview {
             display: flex;
@@ -184,10 +191,15 @@
             .thumbnail-placeholder {
                 display: flex;
                 background-color: rgba(0, 0, 0, 0.05);
-                width: 10rem;
-                height: 7.5rem;
+                width: 15rem;
+                height: 12.25rem;
             }
         }
+
+        .thumbnail-actions {
+            display: flex;
+            flex-direction: row;
+        }
     }
 }
 
@@ -200,19 +212,14 @@
     }
 }
 
+.gif-recorder-sim {
+    flex-grow: 1;
+}
+
 .gif-recorder {
-    position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
-
-    bottom: 1rem;
-    left: 50vw;
-    padding: 1rem;
-    transform: translateX(-50%);
-    background: @white;
-    border: @teal;
-    border-radius: 0.2rem;
     font-family: @segoeUIFont;
 }
 
@@ -232,4 +239,79 @@
     background-color: rgba(0, 0, 0, 0.05);
     width: 24.5rem;
     height: 18.375rem;
+}
+
+.thumbnail-header {
+    display: flex;
+    flex-direction: row;
+
+    .project-share-label {
+        flex-grow: 1;
+    }
+
+    .common-button.link-button {
+        margin-bottom: 0.5rem;
+    }
+}
+
+
+/////////////////////////////////////////
+//               Mobile                //
+/////////////////////////////////////////
+
+#root.miniSim:not(.fullscreensim) .gif-recorder-sim div.simframe {
+    width: 100%;
+}
+
+@media @tabletAndBelow {
+    .gif-recorder-content .thumbnail-controls {
+        padding: 0 2rem;
+    }
+}
+
+@media @mobileAndBelow {
+    .project-share-info, .gif-recorder-content {
+        flex-direction: column;
+    }
+
+    .gif-recorder-sim {
+        width: 100%;
+    }
+
+    .gif-recorder-actions {
+        width: 100%;
+
+        .spacer {
+            flex-grow: 1;
+        }
+    }
+
+    .gif-recorder-actions .common-button:not(.mobile-only) {
+        width: 3rem;
+        height: 3rem;
+        overflow: hidden;
+        padding: 0;
+
+        i, i.fas, i.far {
+            margin: 0;
+        }
+
+        .common-button-label {
+            display: none;
+        }
+    }
+
+    .gif-recorder-content {
+        &.has-uri {
+            .gif-recorder-sim {
+                display: none;
+            }
+        }
+
+        &:not(.has-uri) {
+            .thumbnail-controls {
+                display: none;
+            }
+        }
+    }
 }