pxt-core 7.5.2 → 7.5.5

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

@@ -0,0 +1,97 @@
+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>
+}

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

@@ -0,0 +1,49 @@
+/// <reference path="../types.d.ts" />
+
+import * as React from "react";
+import { ShareInfo } from "./ShareInfo";
+
+export interface ShareData {
+    url: string;
+    embed: {
+        code?: string;
+        editor?: string;
+        simulator?: string;
+        url?: string;
+    }
+    qr?: string;
+    error?: any;
+}
+
+export interface ShareProps {
+    projectName: string;
+    screenshotUri?: string;
+
+    screenshotAsync: () => Promise<string>;
+    gifRecordAsync: () => Promise<void>;
+    gifRenderAsync: () => Promise<string | void>;
+    gifAddFrame: (dataUri: ImageData, delay?: number) => boolean;
+    publishAsync: (name: string, screenshotUri?: string) => Promise<ShareData>;
+    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
+    unregisterSimulatorMsgHandler?: () => void;
+}
+
+export const Share = (props: ShareProps) => {
+    const { projectName, screenshotUri, screenshotAsync, gifRecordAsync, gifRenderAsync, gifAddFrame,
+        publishAsync, registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+
+return <div className="project-share">
+        {(!!screenshotAsync || !!gifRecordAsync) && <div className="project-share-simulator">
+            <div id="shareLoanedSimulator" />
+        </div>}
+        <ShareInfo projectName={projectName}
+            screenshotUri={screenshotUri}
+            screenshotAsync={screenshotAsync}
+            gifRecordAsync={gifRecordAsync}
+            gifRenderAsync={gifRenderAsync}
+            gifAddFrame={gifAddFrame}
+            publishAsync={publishAsync}
+            registerSimulatorMsgHandler={registerSimulatorMsgHandler}
+            unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />
+    </div>
+}

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

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+import { EditorToggle } from "../controls/EditorToggle";
+import { Input } from "../controls/Input";
+import { Textarea } from "../controls/Textarea";
+
+import { ShareData } from "./Share";
+import { GifInfo } from "./GifInfo";
+import { SocialButton } from "./SocialButton";
+
+export interface ShareInfoProps {
+    projectName: string;
+    description?: string;
+    screenshotUri?: string;
+
+    screenshotAsync?: () => Promise<string>;
+    gifRecordAsync?: () => Promise<void>;
+    gifRenderAsync?: () => Promise<string | void>;
+    gifAddFrame?: (dataUri: ImageData, delay?: number) => boolean;
+    publishAsync: (name: string, screenshotUri?: string) => Promise<ShareData>;
+    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
+    unregisterSimulatorMsgHandler?: () => void;
+}
+
+export const ShareInfo = (props: ShareInfoProps) => {
+    const { projectName, description, screenshotUri, screenshotAsync, gifRecordAsync, gifRenderAsync, gifAddFrame,
+        publishAsync, registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+    const [ name, setName ] = React.useState(projectName);
+    const [ thumbnailUri, setThumbnailUri ] = React.useState(screenshotUri);
+    const [ shareState, setShareState ] = React.useState<"share" | "gifrecord" | "publish">("share");
+    const [ shareData, setShareData ] = React.useState<ShareData>();
+    const [ embedState, setEmbedState ] = React.useState<"none" | "code" | "editor" | "simulator">("none");
+    const [ showQRCode, setShowQRCode ] = React.useState(false);
+
+    const showSimulator = !!screenshotAsync || !!gifRecordAsync;
+
+    React.useEffect(() => {
+        setThumbnailUri(screenshotUri)
+    }, [screenshotUri])
+
+    const exitGifRecord = () => {
+        setShareState("share");
+    }
+
+    const applyGifChange = (uri: string) => {
+        setThumbnailUri(uri);
+        exitGifRecord();
+    }
+
+    const handlePublishClick = async () => {
+        let publishedShareData = await publishAsync(name, thumbnailUri);
+        setShareData(publishedShareData);
+        if (!publishedShareData?.error) setShareState("publish");
+    }
+
+    const handleCopyClick = () => {
+        navigator.clipboard.writeText(shareData.url);
+    }
+
+    const handleEmbedClick = () => {
+        if (embedState === "none") {
+            setShowQRCode(false);
+            setEmbedState("code");
+        } else {
+            setEmbedState("none");
+        }
+    }
+
+    const handleQRCodeClick = () => {
+        pxt.tickEvent('share.qrtoggle');
+        if (!showQRCode) {
+            setEmbedState("none");
+            setShowQRCode(true);
+        } else {
+            setShowQRCode(false);
+        }
+    }
+
+
+    const embedOptions = [{
+        name: "code",
+        label: lf("Code"),
+        title: lf("Code"),
+        focusable: true,
+        onClick: () => setEmbedState("code")
+    },
+    {
+        name: "editor",
+        label: lf("Editor"),
+        title: lf("Editor"),
+        focusable: true,
+        onClick: () => setEmbedState("editor")
+    },
+    {
+        name: "simulator",
+        label: lf("Simulator"),
+        title: lf("Simulator"),
+        focusable: true,
+        onClick: () => setEmbedState("simulator")
+    }];
+
+    return <>
+        <div className="project-share-info">
+            {(shareState === "share" || shareState === "publish") && <>
+                {showSimulator && <h2>{lf("About your project")}</h2>}
+                <Input label={lf("Project Name")}
+                    initialValue={name}
+                    placeholder={lf("Name your project")}
+                    readOnly={shareState === "publish"}
+                    onChange={setName} />
+                <Textarea label={lf("Description")}
+                    initialValue={description}
+                    placeholder={lf("Tell others about your game")}
+                    readOnly={shareState === "publish"}
+                    rows={5} />
+                {shareState === "share" && <>
+                    {showSimulator && <div className="project-share-thumbnail">
+                        {thumbnailUri
+                            ? <img src={thumbnailUri} />
+                            : <div className="project-thumbnail-placeholder" />
+                        }
+                        <Button title={lf("Update project thumbnail")}
+                            label={lf("Update project thumbnail")}
+                            onClick={() => setShareState("gifrecord")} />
+                    </div>}
+                    <div>{lf("By publishing you agree that you are allowed to share this game.")}</div>
+                    {shareData?.error && <div className="project-share-error">
+                        {(shareData.error.statusCode === 413
+                            && pxt.appTarget?.cloud?.cloudProviders?.github)
+                            ? lf("Oops! Your project is too big. You can create a GitHub repository to share it.")
+                            : lf("Oops! There was an error. Please ensure you are connected to the Internet and try again.")}
+                    </div>}
+                    <Button className="primary"
+                        title={lf("Publish to share")}
+                        label={lf("Publish to share")}
+                        onClick={handlePublishClick} />
+                </>}
+                {shareState === "publish" && <div className="project-share-actions">
+                    <Button className="teal"
+                        title={lf("Copy link")}
+                        label={lf("Copy link")}
+                        leftIcon="fas fa-link"
+                        onClick={handleCopyClick} />
+                    <Button className="share-button"
+                        title={lf("Show QR code")}
+                        leftIcon="fas fa-qrcode"
+                        onClick={handleQRCodeClick} />
+                    <Button className="share-button"
+                        title={lf("Show embed code")}
+                        leftIcon="fas fa-code"
+                        onClick={handleEmbedClick} />
+                    <SocialButton className="share-button"
+                        url={shareData?.url}
+                        type='facebook'
+                        heading={lf("Share on Facebook")} />
+                    <SocialButton className="share-button"
+                        url={shareData?.url}
+                        type='twitter'
+                        heading={lf("Share on Twitter")} />
+                </div>}
+                {embedState !== "none" && <div className="project-embed">
+                    <EditorToggle id="project-embed-toggle"
+                        className="slim tablet-compact"
+                        items={embedOptions}
+                        selected={embedOptions.findIndex(i => i.name === embedState)} />
+                    <Textarea readOnly={true}
+                        rows={5}
+                        initialValue={shareData?.embed[embedState]} />
+                </div>}
+                {showQRCode && <div className="project-qrcode">
+                    <img src={shareData?.qr} />
+                </div>}
+            </>}
+            {shareState === "gifrecord" && <GifInfo
+                initialUri={thumbnailUri}
+                onApply={applyGifChange}
+                onCancel={exitGifRecord}
+                screenshotAsync={screenshotAsync}
+                gifRecordAsync={gifRecordAsync}
+                gifRenderAsync={gifRenderAsync}
+                gifAddFrame={gifAddFrame}
+                registerSimulatorMsgHandler={registerSimulatorMsgHandler}
+                unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />}
+        </div>
+    </>
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+
+interface SocialButtonProps {
+    className?: string;
+    url?: string;
+    type?: "facebook" | "twitter" | "discourse";
+    heading?: string;
+}
+
+export const SocialButton = (props: SocialButtonProps) => {
+    const { className, url, type, heading } = props;
+
+    const handleClick = () => {
+        const socialOptions = pxt.appTarget.appTheme.socialOptions;
+        let socialUrl = '';
+        switch (type) {
+            case "facebook": {
+                socialUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+                break;
+            }
+            case "twitter": {
+                let twitterText = lf("Check out what I made!");
+                if (socialOptions.twitterHandle && socialOptions.orgTwitterHandle) {
+                    twitterText = lf("Check out what I made with @{0} and @{1}!", socialOptions.twitterHandle, socialOptions.orgTwitterHandle);
+                } else if (socialOptions.twitterHandle) {
+                    twitterText = lf("Check out what I made with @{0}!", socialOptions.twitterHandle);
+                } else if (socialOptions.orgTwitterHandle) {
+                    twitterText = lf("Check out what I made with @{0}!", socialOptions.orgTwitterHandle);
+                }
+                socialUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}` +
+                    `&text=${encodeURIComponent(twitterText)}` +
+                    (socialOptions.hashtags ? `&hashtags=${encodeURIComponent(socialOptions.hashtags)}` : '') +
+                    (socialOptions.related ? `&related=${encodeURIComponent(socialOptions.related)}` : '');
+                break;
+            }
+            case "discourse": {
+                // https://meta.discourse.org/t/compose-a-new-pre-filled-topic-via-url/28074
+                socialUrl = `${socialOptions.discourse || "https://forum.makecode.com/"}new-topic?title=${encodeURIComponent(url)}`;
+                if (socialOptions.discourseCategory)
+                socialUrl += `&category=${encodeURIComponent(socialOptions.discourseCategory)}`;
+                break;
+            }
+        }
+        pxt.BrowserUtils.popupWindow(socialUrl, heading, 600, 600);
+    }
+
+    return <Button className={className}
+        ariaLabel={type}
+        title={type}
+        leftIcon={`icon ${type}`}
+        onClick={handleClick} />
+}

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

@@ -32,6 +32,10 @@
     margin-left: 0.5rem;
 }
 
+.common-button-flex {
+    white-space: nowrap;
+}
+
 /****************************************************
  *                  Color Variants                   *
  ****************************************************/

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

@@ -0,0 +1,271 @@
+.common-editor-toggle-outer {
+    position: relative;
+}
+
+.common-editor-toggle {
+    position: relative;
+    border-radius: 0.2rem;
+    border: @editorToggleBorderWidth solid @editorToggleBorderColor;
+    background: @editorToggleBackgroundColor;
+    display: flex;
+    flex-direction: row;
+}
+
+// Used in image/tilemap/animation editor
+.common-editor-toggle.slim .common-editor-toggle-item > .common-button {
+    padding: .6rem 2rem .75rem;
+}
+
+.common-editor-toggle-item {
+    z-index: 1;
+    flex: 3;
+
+    .common-menu-dropdown {
+        flex: 4;
+
+        & > .common-button {
+            padding: 0;
+            width: 100%;
+            border-left: 1px solid @editorToggleBorderColor;
+            border-right: 1px solid @editorToggleBorderColor;
+        }
+
+        .common-menu-dropdown-pane {
+            border-top: 1px solid @editorToggleBorderColor;
+        }
+    }
+
+    & > .common-button {
+        background: none;
+        color: @buttonTextColorInverted;
+        transition: color .25s;
+        margin: 0;
+        width: 100%;
+    }
+
+    .common-button:focus::after {
+        outline: none;
+    }
+}
+
+.common-editor-toggle-item.common-editor-toggle-item-dropdown {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    flex: 4;
+}
+
+.common-editor-toggle-item.selected {
+    .common-menu-dropdown {
+        text-align: center;
+
+        & > .common-button {
+            border-right: none;
+            color: @buttonTextColor;
+        }
+    }
+
+    & > .common-button {
+        color: @buttonTextColor;
+    }
+}
+
+/*****************************************************
+ *                  Toggle Handle                    *
+ ****************************************************/
+
+ .common-editor-toggle-handle {
+    position: absolute;
+    background: white;
+    width: 33%;
+    height: 100%;
+    transition: margin-left .25s, width .25s;
+    border-radius: 0.2rem;
+    margin-left: -@editorToggleBorderWidth;
+}
+
+.common-editor-toggle {
+    /* toggle size, two items, no dropdown */
+    .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 50% }
+
+    /* toggle positioning, two items, no dropdown */
+    .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+
+    /* toggle positioning, three items, no dropdown */
+    .common-editor-toggle-item:nth-of-type(1).selected ~ .common-editor-toggle-handle { margin-left: 0; }
+    .common-editor-toggle-item:nth-of-type(2).selected ~ .common-editor-toggle-handle { margin-left: 33%; }
+    .common-editor-toggle-item:nth-of-type(3).selected ~ .common-editor-toggle-handle { margin-left: 67%; }
+
+    &.has-dropdown {
+        /* flex balance, two items, has dropdown (45% to non-dropdown, 55% to dropdown) */
+       .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+       .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 55 }
+       .common-editor-toggle-item:first-child:nth-last-child(3),
+       .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 45 }
+
+        /* toggle size, two items, has dropdown */
+        .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 45% }
+        .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 55% }
+
+        /* toggle positioning, two items, first item has dropdown */
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 55% }
+
+        /* toggle positioning, two items, second item has dropdown */
+        .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 45% }
+
+        /* toggle size, three items, has dropdown */
+        .common-editor-toggle-handle { width: 30% }
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 40%; }
+
+        /* toggle positioning, three items, has dropdown */
+        .common-editor-toggle-item:nth-of-type(2).selected ~ .common-editor-toggle-handle { margin-left: 30%; }
+        .common-editor-toggle-item:nth-of-type(3).selected ~ .common-editor-toggle-handle { margin-left: 60%; }
+
+        /* toggle positioning, three items, first item in toggle has dropdown */
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 40%; }
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 70%; }
+
+        /* toggle positioning, three items, second item in toggle has dropdown */
+        .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 70%; }
+    }
+}
+
+/*****************************************************
+ *                Accessibility Menu                 *
+ ****************************************************/
+
+.common-toggle-accessibility {
+    position: absolute;
+    z-index: 2;
+    width: 0px;
+    height: 0px;
+    left: 0;
+    background: white;
+
+    .common-button {
+        width: 0px;
+        height: 0px;
+        min-height: 0px;
+
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .common-button:focus {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.common-toggle-accessibility:focus-within {
+    width: 100%;
+    height: 100%;
+}
+
+
+/*****************************************************
+ *                    Tablet View                    *
+ ****************************************************/
+
+@media @tabletAndBelow {
+    .common-editor-toggle.tablet-compact {
+        & > .common-editor-toggle-item > .common-button {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            .common-button-label {
+                display: none;
+            }
+        }
+
+        &.has-dropdown {
+            .common-editor-toggle-item {
+                flex: 25;
+            }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown {
+                flex: 50;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            .common-editor-toggle-handle { width: 25%; }
+            .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 50%; }
+
+            /* flex balance, two items, has dropdown (33% to non-dropdown, 67% to dropdown) */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 67 }
+            .common-editor-toggle-item:first-child:nth-last-child(3),
+            .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 33 }
+
+            /* toggle size, two items, has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 33% }
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 67% }
+
+            /* toggle positioning, two items, first item has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 67% }
+
+            /* toggle positioning, two items, second item has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 33% }
+
+            /* toggle positioning, first item in toggle has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+
+            /* toggle positioning, second item in toggle has dropdown */
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 25%; }
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+        }
+    }
+}
+
+// Same as tablet
+@media @mobileAndBelow {
+    .common-editor-toggle.mobile-compact {
+        & > .common-editor-toggle-item > .common-button {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            .common-button-label {
+                display: none;
+            }
+        }
+
+        &.has-dropdown {
+            .common-editor-toggle-item {
+                flex: 25;
+            }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown {
+                flex: 50;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            .common-editor-toggle-handle { width: 25%; }
+            .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 50%; }
+
+            /* flex balance, two items, has dropdown (33% to non-dropdown, 67% to dropdown) */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 67 }
+            .common-editor-toggle-item:first-child:nth-last-child(3),
+            .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 33 }
+
+            /* toggle size, two items, has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 33% }
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 67% }
+
+            /* toggle positioning, two items, first item has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 67% }
+
+            /* toggle positioning, two items, second item has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 33% }
+
+            /* toggle positioning, first item in toggle has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+
+            /* toggle positioning, second item in toggle has dropdown */
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 25%; }
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+        }
+    }
+}