pxt-core 7.5.19 → 7.5.22

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

@@ -4,6 +4,7 @@ import { EditorToggle } from "../controls/EditorToggle";
 import { Input } from "../controls/Input";
 import { MenuDropdown } from "../controls/MenuDropdown";
 import { Textarea } from "../controls/Textarea";
+import { Modal } from "../controls/Modal";
 
 import { ShareData } from "./Share";
 import { GifInfo } from "./GifInfo";
@@ -29,12 +30,15 @@ export const ShareInfo = (props: ShareInfoProps) => {
         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 [ shareState, setShareState ] = React.useState<"share" | "gifrecord" | "publish" | "publishing">("share");
     const [ shareData, setShareData ] = React.useState<ShareData>();
     const [ embedState, setEmbedState ] = React.useState<"none" | "code" | "editor" | "simulator">("none");
     const [ showQRCode, setShowQRCode ] = React.useState(false);
+    const [ copySuccessful, setCopySuccessful ] = React.useState(false);
 
     const showSimulator = !!screenshotAsync || !!gifRecordAsync;
+    const showDescription = shareState !== "publish";
+    let qrCodeButtonRef: HTMLButtonElement;
 
     React.useEffect(() => {
         setThumbnailUri(screenshotUri)
@@ -50,13 +54,20 @@ export const ShareInfo = (props: ShareInfoProps) => {
     }
 
     const handlePublishClick = async (forceAnonymous?: boolean) => {
+        setShareState("publishing");
         let publishedShareData = await publishAsync(name, thumbnailUri, forceAnonymous);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) setShareState("publish");
+        else setShareState("share")
     }
 
     const handleCopyClick = () => {
         navigator.clipboard.writeText(shareData.url);
+        setCopySuccessful(true);
+    }
+
+    const handleCopyBlur = () => {
+        setCopySuccessful(false);
     }
 
     const handleEmbedClick = () => {
@@ -104,30 +115,42 @@ export const ShareInfo = (props: ShareInfoProps) => {
         title: lf("Create snapshot"),
         label: lf("Create snapshot"),
         onClick: () => handlePublishClick(true)
-    }]
+    }];
+
+    const handleQRCodeButtonRef = (ref: HTMLButtonElement) => {
+        if (ref) qrCodeButtonRef = ref;
+    }
+
+    const handleQRCodeModalClose = () => {
+        setShowQRCode(false);
+        if (qrCodeButtonRef) qrCodeButtonRef.focus();
+    }
+
+    const prePublish = shareState === "share" || shareState === "publishing";
 
     return <>
         <div className="project-share-info">
-            {(shareState === "share" || shareState === "publish") && <>
+            {(prePublish|| shareState === "publish") && <>
                 {showSimulator && <div className="project-share-title">
                     <h2>{lf("About your project")}</h2>
-                    {showShareDropdown && shareState === "share" && <MenuDropdown id="project-share-dropdown"
+                    {showShareDropdown && prePublish && <MenuDropdown id="project-share-dropdown"
                         icon="fas fa-ellipsis-h"
                         title={lf("More share options")}
                         items={dropdownOptions}
                         />}
                 </div>}
-                <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" && <>
+                {showDescription && <>
+                    <Input label={lf("Project Name")}
+                        initialValue={name}
+                        placeholder={lf("Name your project")}
+                        onChange={setName} />
+                    <Textarea label={lf("Description")}
+                        initialValue={description}
+                        placeholder={lf("Tell others about your game")}
+                        rows={5} />
+                    </>
+                }
+                {prePublish && <>
                     {showSimulator && <div className="project-share-thumbnail">
                         {thumbnailUri
                             ? <img src={thumbnailUri} />
@@ -137,41 +160,65 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             label={lf("Update project thumbnail")}
                             onClick={() => setShareState("gifrecord")} />
                     </div>}
-                    <div>{lf("By publishing you agree that you are allowed to share this game.")}</div>
+                    <div>{lf("You need to publish your project to share it or embed it in other web pages. You acknowledge having consent to publish this project.")}</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 === "share" ?
+                        <Button className="primary share-publish-button"
+                            title={lf("Publish to share")}
+                            label={lf("Publish to share")}
+                            onClick={handlePublishClick} /> :
+                        <Button className="primary share-publish-button"
+                            title={lf("Publishing...")}
+                            label={ <div className="common-spinner" />}
+                            onClick={() => {}} />
+                    }
                 </>}
-                {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>}
+
+                {shareState === "publish" &&
+                    <div className="project-share-data">
+                        <div className="project-share-text">
+                            {lf("Your project is ready! Use the address below to share your projects.")}
+                        </div>
+                        <div className="common-input-attached-button">
+                            <Input
+                                initialValue={shareData.url}
+                                readOnly={true}
+                                onChange={setName} />
+                            <Button className={copySuccessful ? "green" : "primary"}
+                                title={lf("Copy link")}
+                                label={copySuccessful ? lf("Copied!") : lf("Copy link")}
+                                leftIcon="fas fa-link"
+                                onClick={handleCopyClick}
+                                onBlur={handleCopyBlur} />
+                        </div>
+                        <div className="project-share-actions">
+                            <Button className="circle-button gray"
+                                title={lf("Show embed code")}
+                                leftIcon="fas fa-code"
+                                onClick={handleEmbedClick} />
+                            <SocialButton className="circle-button facebook"
+                                url={shareData?.url}
+                                type='facebook'
+                                heading={lf("Share on Facebook")} />
+                            <SocialButton className="circle-button twitter"
+                                url={shareData?.url}
+                                type='twitter'
+                                heading={lf("Share on Twitter")} />
+                            <Button
+                                className="menu-button project-qrcode"
+                                buttonRef={handleQRCodeButtonRef}
+                                title={lf("Show QR Code")}
+                                label={<img className="qrcode-image" src={shareData?.qr} />}
+                                onClick={handleQRCodeClick}
+                            />
+                        </div>
+                    </div>
+                }
                 {embedState !== "none" && <div className="project-embed">
                     <EditorToggle id="project-embed-toggle"
                         className="slim tablet-compact"
@@ -181,9 +228,6 @@ export const ShareInfo = (props: ShareInfoProps) => {
                         rows={5}
                         initialValue={shareData?.embed[embedState]} />
                 </div>}
-                {showQRCode && <div className="project-qrcode">
-                    <img src={shareData?.qr} />
-                </div>}
             </>}
             {shareState === "gifrecord" && <GifInfo
                 initialUri={thumbnailUri}
@@ -195,6 +239,14 @@ export const ShareInfo = (props: ShareInfoProps) => {
                 gifAddFrame={gifAddFrame}
                 registerSimulatorMsgHandler={registerSimulatorMsgHandler}
                 unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />}
+
+            {showQRCode &&
+                <Modal title={lf("QR Code")} onClose={handleQRCodeModalClose}>
+                    <div className="qrcode-modal-body">
+                        <img className="qrcode-image" src={shareData?.qr} />
+                    </div>
+                </Modal>
+            }
         </div>
     </>
 }

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

@@ -47,7 +47,7 @@ export const SocialButton = (props: SocialButtonProps) => {
 
     return <Button className={className}
         ariaLabel={type}
-        title={type}
+        title={heading}
         leftIcon={`icon ${type}`}
         onClick={handleClick} />
 }

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

@@ -6,7 +6,7 @@
     outline: none;
     border: none;
     vertical-align: middle;
-    color: @buttonTextColor;
+    color: @buttonTextColorLightBackground;
     background: @buttonBackgroundColor;
     font-family: @pageFont;
     margin: 0 0.25rem 0 0;
@@ -42,62 +42,68 @@
 
 .common-button.primary {
     background: @primaryColor;
-    color: @buttonTextColorInverted;
+    color: @buttonTextColorDarkBackground;
     border: 1px solid @primaryColor;
 }
 
 .common-button.secondary {
     background: @secondaryColor;
-    color: @buttonTextColorInverted;
+    color: @buttonTextColorDarkBackground;
     border: 1px solid @secondaryColor;
 }
 
 .common-button.teal {
     background: @teal;
-    color: @buttonTextColorInverted;
+    color: @buttonTextColorDarkBackground;
     border: 1px solid @teal;
 }
 
 .common-button.orange {
     background: @orange;
-    color: @buttonTextColorInverted;
+    color: @buttonTextColorDarkBackground;
     border: 1px solid @orange;
 }
 
 .common-button.red {
     background: @red;
-    color: @buttonTextColorInverted;
+    color: @buttonTextColorDarkBackground;
     border: 1px solid @red;
 }
 
 .common-button.green {
     background: @green;
-    color: @buttonTextColorInverted;
+    color: @buttonTextColorDarkBackground;
     border: 1px solid @green;
 }
 
+.common-button.gray, .common-button.grey {
+    background: @buttonGrayColor;
+    color: @buttonTextColorLightBackground;
+    border: 1px solid @buttonGrayColor;
+}
+
 .common-button.primary.inverted {
-    background: @buttonTextColorInverted;
+    background: @buttonTextColorDarkBackground;
     color: @primaryColor;
 }
 
 .common-button.teal.inverted {
-    background: @buttonTextColorInverted;
+    background: @buttonTextColorDarkBackground;
     color: @teal;
 }
 
 .common-button.orange.inverted {
-    background: @buttonTextColorInverted;
+    background: @buttonTextColorDarkBackground;
     color: @orange;
 }
 
 .common-button.red.inverted {
-    background: @buttonTextColorInverted;
+    background: @buttonTextColorDarkBackground;
     color: @red;
 }
 
 .common-button.green.inverted {
-    background: @buttonTextColorInverted;
+    background: @buttonTextColorDarkBackground;
     color: @green;
 }
 
@@ -126,7 +132,7 @@
  {
     cursor: default;
     background-color: @buttonBackgroundColorDisabled;
-    color: @buttonTextColor;
+    color: @buttonTextColorLightBackground;
     border: @buttonBackgroundColorDisabled;
 }
 
@@ -150,7 +156,10 @@
 .common-button.teal:focus::after,
 .common-button.orange:focus::after,
 .common-button.red:focus::after,
-.common-button.green:focus::after {
+.common-button.green:focus::after,
+.common-button.facebook:focus::after,
+.common-button.twitter:focus::after,
+.common-button.discourse:focus::after {
     outline: @buttonFocusOutlineDarkBackground;
 }
 
@@ -213,6 +222,45 @@
     text-decoration: underline;
 }
 
+/****************************************************
+ *                   Circle Buttons                 *
+ ****************************************************/
+
+ .common-button.circle-button {
+    width: 3rem;
+    height: 3rem;
+    overflow: hidden;
+    padding: 0;
+    border-radius: 2rem;
+
+    i, i.fas, i.far {
+        margin: 0;
+    }
+}
+
+.common-button.circle-button:focus::after {
+    border-radius: 2rem;
+}
+
+/****************************************************
+ *                   Social Buttons                 *
+ ****************************************************/
+
+.common-button.facebook {
+    background: #4267B2;
+    color: @buttonTextColorDarkBackground;
+}
+
+.common-button.twitter {
+    background: #1DA1F2;
+    color: @buttonTextColorDarkBackground;
+}
+
+.common-button.discourse {
+    background: #333333;
+    color: @buttonTextColorDarkBackground;
+}
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

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

@@ -37,7 +37,7 @@
 
     & > .common-button {
         background: none;
-        color: @buttonTextColorInverted;
+        color: @buttonTextColorDarkBackground;
         transition: color .25s;
         margin: 0;
         width: 100%;
@@ -60,12 +60,12 @@
 
         & > .common-button {
             border-right: none;
-            color: @buttonTextColor;
+            color: @buttonTextColorLightBackground;
         }
     }
 
     & > .common-button {
-        color: @buttonTextColor;
+        color: @buttonTextColorLightBackground;
     }
 }
 

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

@@ -94,6 +94,32 @@
     }
 }
 
+
+/****************************************************
+ *                Attached Button                   *
+ ****************************************************/
+
+.common-input-attached-button {
+    display: flex;
+    flex-direction: row;
+
+    .common-input-wrapper {
+        flex-grow: 1;
+
+        .common-input-group {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: none;
+            height: 3rem;
+        }
+    }
+
+    .common-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

package/react-common/styles/extensions/ExtensionCard.less

@@ -0,0 +1,56 @@
+.extensionCard.loading {
+    background: @loadingAnimation;
+    background-size: 400% 400%;
+    animation: gradient 3s infinite alternate;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.extensionCard.ui.card {
+    height: 19rem;
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    overflow: hidden;
+
+    img {
+        height: 11rem;
+    }
+
+    .content {
+        justify-content: flex-start;
+        display: flex;
+        flex-direction: column;
+        padding: 0.2em 1em;
+    }
+
+    .name {
+        font-family: @defaultFont;
+        font-weight: 600;
+        font-size: 1.5rem;
+        line-height: 1.6rem;
+        padding-top: .5rem;
+    }
+
+    .description {
+        font-weight: 400;
+        text-overflow: ellipsis;
+        padding-top: .8rem;
+        font-size: 1rem;
+    }
+
+    .learnmore {
+        font-size: 1rem;
+        align-self: flex-end;
+    }
+}

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

@@ -19,19 +19,22 @@
 @largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";
 
 
+@defaultFont: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 /****************************************************
  *                    Buttons                       *
  ****************************************************/
 
-@buttonTextColor: @commonTextColor;
-@buttonTextColorInverted: @white;
+@buttonTextColorLightBackground: @commonTextColor;
+@buttonTextColorDarkBackground: @white;
 @buttonBackgroundColor: @white;
 @buttonBackgroundColorDisabled: @commonBackgroundDisabledColor;
+@buttonGrayColor: #e0e1e2;
 
 @buttonMenuTextColor: #ffffff;
 @buttonMenuTextColorInverted: @primaryColor;
 @buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
-@buttonFocusOutlineDarkBackground: @buttonTextColorInverted solid 1px;;
+@buttonFocusOutlineDarkBackground: @buttonTextColorDarkBackground solid 1px;;
 @buttonFocusOutlineLightBackground: @commonBorderColor solid 1px;
 @buttonMenuBackgroundHoverColor: rgba(0,0,0,.1);
 @buttonMenuBackgroundActiveColor: rgba(0,0,0,.15);
@@ -96,19 +99,19 @@
 
 @inputTextColor: @commonTextColor;
 @inputTextColorDisabled: rgb(161, 159, 157);
-@inputBorderColor: @commonBorderColor;
+@inputBorderColor: rgba(34,36,38,.15);
 @inputBorderColorFocus: rgb(0, 120, 212);
 @inputBackgroundColor: #ffffff;
 @inputBackgroundColorDisabled: @commonBackgroundDisabledColor;
 @inputButtonColor: rgb(0, 120, 212);
-@inputButtonColorHover: rgb(16, 110, 190);
+@inputButtonColorHover: rgb(3, 33, 60);
 
 /****************************************************
  *                  Textarea                        *
  ****************************************************/
 
  @textareaTextColor: @commonTextColor;
- @textareaBorderColor: @commonBorderColor;
+ @textareaBorderColor: @inputBorderColor;
  @textareaBorderColorFocus: rgb(0, 120, 212);
  @textareaBackgroundColor: #ffffff;
  @textareaBackgroundColorDisabled: @commonBackgroundDisabledColor;
@@ -139,4 +142,9 @@
  @highContrastBackgroundColor: #000000;
  @highContrastHighlightColor: #ffff00;
  @highContrastFocusOutline: 2px solid @highContrastHighlightColor;
- @highContrastFocusZIndex: 1;
+ @highContrastFocusZIndex: 1;
+
+/****************************************************
+ *                 Extension Card                   *
+ ****************************************************/
+ @loadingAnimation: linear-gradient(-45deg, #ffffff46, #f3f3f350, #dee2ff6e, #f1f1f149);

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

@@ -11,6 +11,7 @@
 @import "controls/Modal.less";
 @import "controls/RadioButtonGroup.less";
 @import "controls/Spinner.less";
+@import "extensions/ExtensionCard.less";
 @import "controls/Textarea.less";
 @import "./react-common-variables.less";
 

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

@@ -72,23 +72,73 @@
     }
 }
 
+.share-publish-button {
+    height: 3rem;
+
+    .common-spinner {
+        display: inline-block;
+    }
+}
+
 /////////////////////////////////////////
 //           Embed                     //
 /////////////////////////////////////////
 
 .project-share-actions {
     display: flex;
+    margin-top: 1rem;
+    position: relative;
+    margin-bottom: 2rem;
+
+    .common-button {
+        margin-right: 1rem;
+    }
+}
+
+.project-share-text {
+    margin-bottom: 1rem;
+}
 
-    .share-button {
-        width: 3rem;
-        padding: 1rem 0.75rem;
+.common-button.menu-button.project-qrcode {
+    position: absolute;
+    right: 0;
+    height: 6rem;
+    padding: 0.5rem;
+    top: -0.5rem;
 
-        i {
-            margin: 0;
-        }
+    img {
+        height: 5rem;
     }
 }
 
+.common-button.menu-button.project-qrcode:focus::after {
+    outline: @buttonFocusOutlineLightBackground;
+}
+
+.project-share-data .common-input-attached-button .common-button {
+    width: 10rem;
+    padding: .8rem 1rem .95rem;
+}
+
+.qrcode-image {
+    image-rendering: optimizeSpeed;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: optimize-contrast;
+    image-rendering: pixelated;
+    -ms-interpolation-mode: nearest-neighbor;
+}
+
+
+.qrcode-modal-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .qrcode-image {
+        height: 20rem;
+    }
+}
 
 /////////////////////////////////////////
 //           Gif Recorder              //

package/theme/blockly-core.less

@@ -115,6 +115,19 @@ body.blocklyMinimalBody {
     visibility: visible;
 }
 
+i.icon.blocklyTreeButton {
+    float: right;
+    line-height: 40px;
+    color: grey;
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: .5s;
+}
+
+.blocklyTreeRow:hover i.icon.blocklyTreeButton {
+    opacity: 1;
+}
+
 /*******************************
         Blockly Flyout
 *******************************/