pxt-core 7.5.52 → 8.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "7.5.52",
+  "version": "8.0.1",
   "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"),
@@ -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/theme/serial.less

@@ -20,6 +20,11 @@
     #serialCsv {
         display: none;
     }
+
+    .common-editor-toggle-outer {
+        padding-left: 1.5rem;
+    }
+
     &.csv-view {
         #serialCsv {
             display: block;