pxt-core 7.5.53 → 8.0.2

package/docfiles/script.html

@@ -43,7 +43,7 @@
 
     <div class="ui main container mainbody script-content">
         <iframe id="embed-frame" class="script-embed" src="/@versionsuff@#sandbox:@id@"
-            sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0"></iframe>
+            sandbox="allow-popups allow-forms allow-scripts allow-same-origin allow-downloads" frameborder="0"></iframe>
         <div class="script-bookend">
             <div id="abuse-message" class="ui tiny blue message">
                 <div class="ui grid padded">

package/package.json

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

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

@@ -89,6 +89,21 @@ export const ShareInfo = (props: ShareInfoProps) => {
         }
     }
 
+    const handleDeviceShareClick = async () => {
+        pxt.tickEvent("share.device");
+
+        const shareOpts = {
+            title: document.title,
+            url: shareData.url,
+            text: lf("Check out my new MakeCode project!"),
+        };
+
+        // TODO: Fix this; typing for navigator not included in the lib typing we use in tsconfig
+        if ((navigator as any)?.canShare?.(shareOpts)) {
+            return navigator.share(shareOpts);
+        }
+    };
+
     const embedOptions = [{
         name: "code",
         label: lf("Code"),
@@ -197,7 +212,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                                 onBlur={handleCopyBlur} />
                         </div>
                         <div className="project-share-actions">
-                            <Button className="circle-button gray"
+                            <Button className="circle-button gray embed mobile-portrait-hidden"
                                 title={lf("Show embed code")}
                                 leftIcon="fas fa-code"
                                 onClick={handleEmbedClick} />
@@ -209,6 +224,12 @@ export const ShareInfo = (props: ShareInfoProps) => {
                                 url={shareData?.url}
                                 type='twitter'
                                 heading={lf("Share on Twitter")} />
+                            {navigator.share && <Button className="circle-button device-share"
+                                title={lf("Show device share options")}
+                                ariaLabel={lf("Show device share options")}
+                                leftIcon={"icon share"}
+                                onClick={handleDeviceShareClick}
+                            />}
                             <Button
                                 className="menu-button project-qrcode"
                                 buttonRef={handleQRCodeButtonRef}

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

@@ -268,6 +268,11 @@
     color: @buttonTextColorDarkBackground;
 }
 
+.common-button.device-share {
+    background: #333333;
+    color: @buttonTextColorDarkBackground;
+}
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

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

@@ -24,6 +24,12 @@
     overflow: hidden;
 }
 
+@media @mobileAndBelow {
+    .common-modal {
+        width: 95%;
+    }
+}
+
 .common-modal-header {
     background-color: @modalHeaderBackgroundColor;
 
@@ -142,4 +148,4 @@
     .common-modal {
         border: 1px solid @highContrastTextColor;
     }
-}
+}

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

@@ -4,16 +4,33 @@
 @largeMonitorBreakpoint: 1200px;
 @widescreenMonitorBreakpoint: 1920px;
 
+@largestMobilePortraitScreen: (@mobileBreakpoint + 100px);
 @largestMobileScreen: (@tabletBreakpoint - 1px);
 @largestTabletScreen: (@computerBreakpoint - 1px);
 @largestSmallMonitor: (@largeMonitorBreakpoint - 1px);
 @largestLargeMonitor: (@widescreenMonitorBreakpoint - 1px);
 
+@portraitMobileAndBelow: ~"only screen and (max-width: @{largestMobilePortraitScreen})";
 @mobileAndBelow: ~"only screen and (max-width: @{largestMobileScreen})";
 @tabletAndBelow: ~"only screen and (max-width: @{largestTabletScreen})";
 @computerAndBelow: ~"only screen and (max-width: @{largestSmallMonitor})";
 @largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";
 
+/****************************************************
+ *                Mobile Portrait                   *
+ ****************************************************/
+
+@media only screen and (min-width: @portraitMobileAndBelow) {
+    .mobile-portrait-only {
+        display: none !important;
+    }
+}
+
+@media @mobileAndBelow {
+    .mobile-portrait-hidden {
+        display: none !important;
+    }
+}
 
 /****************************************************
  *                    Mobile                        *