pxt-core 8.2.9 → 8.2.10

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

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

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

@@ -23,24 +23,37 @@
     }
 }
 
+
 .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;
+        margin-bottom: 0.5rem
     }
 }
 
@@ -51,6 +64,9 @@
 .project-share-thumbnail {
     display: flex;
     flex-direction: column;
+    min-width: 15rem;
+    align-items: center;
+    margin-right: 1rem;
 
     .project-thumbnail-placeholder,
     img {
@@ -58,6 +74,7 @@
         width: 15rem;
         height: 11.25rem;
         background-color: rgba(0, 0, 0, 0.05);
+        margin-bottom: 1rem;
     }
 }
 
@@ -74,6 +91,7 @@
 
 .share-publish-button {
     height: 3rem;
+    margin-right: 1rem;
 
     .common-spinner {
         display: inline-block;
@@ -91,7 +109,7 @@
     margin-bottom: 2rem;
 
     .common-button {
-        margin-right: 1rem;
+        margin-right: 0.5rem;
     }
 }
 
@@ -144,14 +162,52 @@
 //           Gif Recorder              //
 /////////////////////////////////////////
 
+.gif-recorder-content {
+    display: flex;
+    flex-direction: row;
+
+    .thumbnail-controls {
+        display: flex;
+        flex-direction: column;
+
+        .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: 10rem;
+                height: 7.5rem;
+            }
+        }
+    }
+}
+
+.gif-recorder-sim-embed {
+    flex-grow: 1;
+    padding-right: 1rem;
+
+    .simframe {
+        padding-bottom: 56.25%!important;
+    }
+}
+
 .gif-recorder {
     position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
 
-    bottom: 0;
-    left: calc(~'(100vw - 25rem)/2');
+    bottom: 1rem;
+    left: 50vw;
     padding: 1rem;
     transform: translateX(-50%);
     background: @white;

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>
-}