pxt-core 8.2.9 → 8.2.11

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

@@ -230,21 +230,30 @@
 }
 
 /****************************************************
- *                   Circle Buttons                 *
+ *                   Square Buttons                 *
  ****************************************************/
 
- .common-button.circle-button {
+ .common-button.square-button {
     width: 3rem;
     height: 3rem;
     overflow: hidden;
     padding: 0;
-    border-radius: 2rem;
 
     i, i.fas, i.far {
         margin: 0;
     }
 }
 
+
+/****************************************************
+ *                   Circle Buttons                 *
+ ****************************************************/
+
+ .common-button.circle-button {
+    &:extend(.common-button.square-button);
+    border-radius: 2rem;
+}
+
 .common-button.circle-button:focus::after {
     border-radius: 2rem;
 }
@@ -253,6 +262,14 @@
  *                   Social Buttons                 *
  ****************************************************/
 
+.common-button.social-button {
+    font-size: 1.5rem;
+
+    img {
+        max-width: 100%;
+    }
+}
+
 .common-button.facebook {
     background: #4267B2;
     color: @buttonTextColorDarkBackground;
@@ -273,6 +290,16 @@
     color: @buttonTextColorDarkBackground;
 }
 
+.common-button.whatsapp {
+    background: #59CE72;
+    color: @buttonTextColorDarkBackground;
+}
+
+.common-button.microsoft-teams {
+    background: #35258F;
+    color: @buttonTextColorDarkBackground;
+}
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

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

@@ -24,8 +24,13 @@
     overflow: hidden;
 }
 
-@media @mobileAndBelow {
-    .common-modal {
+.wide > .common-modal {
+    width: 75%;
+    max-width: 60rem;
+}
+
+@media @tabletAndBelow {
+    .common-modal, .wide > .common-modal {
         width: 95%;
     }
 }

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

@@ -23,25 +23,34 @@
     }
 }
 
+
 .project-share-info {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
     flex: 1;
 
-    > div {
-        margin-bottom: 1rem;
-        flex-shrink: 0;
+    .project-share-content {
+        flex-grow: 1;
+
+        .name-input .common-input-group {
+            height: 3rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .common-checkbox {
+            margin-bottom: 0.5rem;
+        }
     }
 }
 
 .project-share-title {
-    display: flex;
+    margin-bottom: 1rem;
+}
 
-    h2 {
-        flex: 1;
-        margin: 0;
-    }
+.project-share-label {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
 }
 
 #project-share-dropdown {
@@ -51,6 +60,9 @@
 .project-share-thumbnail {
     display: flex;
     flex-direction: column;
+    min-width: 15rem;
+    align-items: center;
+    margin-right: 1rem;
 
     .project-thumbnail-placeholder,
     img {
@@ -58,6 +70,18 @@
         width: 15rem;
         height: 11.25rem;
         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;
+        }
     }
 }
 
@@ -74,41 +98,40 @@
 
 .share-publish-button {
     height: 3rem;
+    margin-right: 1rem;
 
     .common-spinner {
         display: inline-block;
     }
 }
 
+
 /////////////////////////////////////////
 //           Embed                     //
 /////////////////////////////////////////
 
 .project-share-actions {
     display: flex;
+    flex-direction: row;
     margin-top: 1rem;
     position: relative;
     margin-bottom: 2rem;
+}
 
-    .common-button {
-        margin-right: 1rem;
-    }
+.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 {
@@ -144,19 +167,59 @@
 //           Gif Recorder              //
 /////////////////////////////////////////
 
+.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;
+            flex-direction: column;
+            flex-grow: 1;
+            align-items: center;
+
+            & > div {
+                padding-bottom: 1rem;
+            }
+
+            .thumbnail-image,
+            .thumbnail-placeholder {
+                display: flex;
+                background-color: rgba(0, 0, 0, 0.05);
+                width: 15rem;
+                height: 12.25rem;
+            }
+        }
+
+        .thumbnail-actions {
+            display: flex;
+            flex-direction: row;
+        }
+    }
+}
+
+.gif-recorder-sim-embed {
+    flex-grow: 1;
+    padding-right: 1rem;
+
+    .simframe {
+        padding-bottom: 56.25%!important;
+    }
+}
+
+.gif-recorder-sim {
+    flex-grow: 1;
+}
+
 .gif-recorder {
-    position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
-
-    bottom: 0;
-    left: calc(~'(100vw - 25rem)/2');
-    padding: 1rem;
-    transform: translateX(-50%);
-    background: @white;
-    border: @teal;
-    border-radius: 0.2rem;
     font-family: @segoeUIFont;
 }
 
@@ -176,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;
+            }
+        }
+    }
 }

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

@@ -1,63 +0,0 @@
-import * as React from "react";
-import { Button } from "../controls/Button";
-import { GifRecorder } from "./GifRecorder";
-
-export interface GifInfoProps {
-    initialUri?: string;
-
-    onApply: (uri: string) => void;
-    onCancel: () => void;
-
-    screenshotAsync?: () => Promise<string>;
-    gifRecordAsync?: () => Promise<void>;
-    gifRenderAsync?: () => Promise<string | void>;
-    gifAddFrame?: (dataUri: ImageData, delay?: number) => boolean;
-
-    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
-    unregisterSimulatorMsgHandler?: () => void;
-}
-
-export const GifInfo = (props: GifInfoProps) => {
-    const { initialUri, onApply, onCancel, screenshotAsync, gifRecordAsync, gifRenderAsync, gifAddFrame,
-        registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
-    const [ uri, setUri ] =  React.useState(initialUri);
-
-    const handleApplyClick = (evt?: any) => {
-        onApply(uri);
-    }
-
-    const handleScreenshotClick = async () => {
-        const screenshotUri = await screenshotAsync();
-        setUri(screenshotUri);
-    }
-
-    const handleRecordStopClick = async () => {
-        const gifUri = await gifRenderAsync();
-        if (gifUri) setUri(gifUri);
-    }
-
-    return <>
-        <span className="thumbnail-label">{lf("Current Thumbnail")}</span>
-        <div className="thumbnail-image">
-            {uri
-                ? <img src={uri} />
-                : <div className="thumbnail-placeholder" />
-            }
-        </div>
-        <div className="thumbnail-actions">
-            <Button className="primary"
-                title={lf("Apply")}
-                label={lf("Apply")}
-                onClick={handleApplyClick} />
-            <Button title={lf("Cancel")}
-                label={lf("Cancel")}
-                onClick={onCancel} />
-        </div>
-        <GifRecorder onScreenshot={screenshotAsync ? handleScreenshotClick : undefined}
-            onRecordStart={gifRecordAsync}
-            onRecordStop={handleRecordStopClick}
-            onGifFrame={gifAddFrame}
-            registerSimulatorMsgHandler={registerSimulatorMsgHandler}
-            unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />
-    </>
-}

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

@@ -1,97 +0,0 @@
-import * as React from "react";
-import { Button } from "../controls/Button";
-
-type RecorderState = "default" | "recording" | "rendering";
-
-export interface GifRecorderProps {
-    onScreenshot?: () => void;
-    onRecordStart?: () => void;
-    onRecordStop?: () => Promise<void>;
-    onGifFrame?: (dataUri: ImageData, delay?: number) => boolean;
-    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
-    unregisterSimulatorMsgHandler?: () => void;
-}
-
-export const GifRecorder = (props: GifRecorderProps) => {
-    const { onScreenshot, onRecordStart, onRecordStop, onGifFrame,
-        registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
-    const [ recorderState, _setRecorderState ] = React.useState<RecorderState>("default");
-    const recorderStateRef = React.useRef(recorderState);
-    const targetTheme = pxt.appTarget.appTheme;
-
-    const setRecorderState = (state: RecorderState) => {
-        _setRecorderState(state);
-        recorderStateRef.current = state;
-    }
-
-    const onGifRecordStop = async () => {
-        setRecorderState("rendering");
-        await onRecordStop();
-        setRecorderState("default");
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-        const pressed = e.key.toLocaleLowerCase();
-        if (targetTheme.simScreenshotKey && pressed === targetTheme.simScreenshotKey.toLocaleLowerCase()) {
-            onScreenshot();
-        } else if (targetTheme.simGifKey && pressed === targetTheme.simGifKey.toLocaleLowerCase()) {
-            if (recorderStateRef.current === "recording") {
-                onGifRecordStop();
-            } else {
-                onGifRecordStart();
-            }
-        }
-    }
-
-    const handleSimulatorMsg = (e: any) => {
-        if (e.type === "screenshot") {
-            if (recorderStateRef.current === "recording") {
-                // Adds frame, returns true if we've exceeded the max frame count
-                if (onGifFrame(e.data, e.delay)) {
-                    onGifRecordStop();
-                }
-            } else {
-                onScreenshot();
-            }
-        } else if (e.event === "start") {
-            onGifRecordStart();
-        } else if (e.event === "stop") {
-            onGifRecordStop();
-        }
-    }
-
-    React.useEffect(() => {
-        document.addEventListener("keydown", handleKeyDown);
-        if (registerSimulatorMsgHandler) registerSimulatorMsgHandler(handleSimulatorMsg);
-
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-            if (unregisterSimulatorMsgHandler) unregisterSimulatorMsgHandler();
-        }
-    }, []);
-
-    const onGifRecordStart = () => {
-        setRecorderState("recording");
-        onRecordStart();
-    }
-
-    const screenshotLabel = lf("Take screenshot ({0})", targetTheme.simScreenshotKey);
-    const startRecordingLabel = lf("Record game play ({0})", targetTheme.simGifKey);
-    const stopRecordingLabel = lf("Stop recording ({0})", targetTheme.simGifKey) ;
-
-    return <div className="gif-recorder">
-        <div className="gif-recorder-label">{lf("Pick your project thumbnail")}</div>
-        <div className="gif-recorder-actions">
-            {!!onScreenshot && <Button className="teal inverted"
-                title={screenshotLabel}
-                label={screenshotLabel}
-                leftIcon="fas fa-camera"
-                onClick={onScreenshot} />}
-            {!!onRecordStart && <Button className="teal inverted"
-                title={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
-                label={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
-                leftIcon={`fas fa-${recorderState === "recording" ? "square" : "circle"}`}
-                onClick={recorderState === "recording" ? onGifRecordStop : onGifRecordStart} />}
-        </div>
-    </div>
-}