Share button for most homepage content (microsoft#11030)

* start homepage share of content

* fix example loading bug (ty sarah)

* de-emphasize, and half work on mobile layout

Author: jwunderl

localtypings/pxtarget.d.ts

@@ -539,6 +539,7 @@ declare namespace pxt {
         pxtJsonOptions?: PxtJsonOption[];
         enabledFeatures?: pxt.Map<FeatureFlag>;
         forceEnableAiErrorHelp?: boolean; // Enables the AI Error Help feature, regardless of geo setting.
+        shareHomepageContent?: boolean; // Show buttons to share links to homepage content more easily
     }
 
     interface DownloadDialogTheme {

react-common/components/share/ShareLinkDialog.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+
+import { Modal } from "../controls/Modal";
+import { Input } from "../controls/Input";
+import { Button } from "../controls/Button";
+
+export interface ShareLinkDialogProps {
+    visible: boolean;
+    shareUrl?: string;
+    title?: string;
+    ariaLabel?: string;
+    linkAriaLabel?: string;
+    className?: string;
+    children?: React.ReactNode;
+    onClose: () => void;
+}
+
+export const ShareLinkDialog: React.FC<ShareLinkDialogProps> = props => {
+    const {
+        visible,
+        shareUrl,
+        title,
+        ariaLabel,
+        linkAriaLabel,
+        className,
+        children,
+        onClose,
+    } = props;
+
+    const [copySuccessful, setCopySuccessful] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    React.useEffect(() => {
+        if (visible) setCopySuccessful(false);
+    }, [visible, shareUrl]);
+
+    const handleCopyClick = () => {
+        if (!shareUrl) return;
+
+        if (pxt.BrowserUtils.isIpcRenderer()) {
+            setCopySuccessful(!!inputRef.current && pxt.BrowserUtils.legacyCopyText(inputRef.current));
+            return;
+        }
+
+        navigator.clipboard.writeText(shareUrl);
+        setCopySuccessful(true);
+    };
+
+    const handleCopyBlur = () => {
+        setCopySuccessful(false);
+    };
+
+    if (!visible) return <></>;
+
+    const modalClassName = ["sharedialog", "share-link-dialog", className].filter(Boolean).join(" ");
+
+    return <Modal
+        title={title || lf("Share")}
+        className={modalClassName}
+        parentElement={document.getElementById("root") || undefined}
+        onClose={onClose}
+        ariaLabel={ariaLabel || lf("Share link modal")}
+    >
+        <div className="project-share">
+            <div className="project-share-info">
+                <div className="project-share-content">
+                    <div className="project-share-data">
+                        {!!children && <div className="share-link-dialog-top">
+                            {children}
+                        </div>}
+
+                        <div className="common-input-attached-button">
+                            <Input
+                                ariaLabel={linkAriaLabel || lf("Shareable link")}
+                                handleInputRef={(ref: HTMLInputElement) => inputRef.current = ref}
+                                initialValue={shareUrl}
+                                readOnly={true}
+                                selectOnClick={true}
+                            />
+                            <Button
+                                className={copySuccessful ? "green" : "primary"}
+                                title={lf("Copy link")}
+                                label={copySuccessful ? lf("Copied!") : lf("Copy")}
+                                leftIcon="fas fa-link"
+                                onClick={handleCopyClick}
+                                onBlur={handleCopyBlur}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Modal>;
+};

react-common/styles/share/share.less

@@ -193,6 +193,12 @@
     padding: .8rem 1rem .95rem;
 }
 
+.share-link-dialog {
+    .share-link-dialog-top {
+        margin-bottom: 0.75rem;
+    }
+}
+
 .project-share-vscode {
     display: flex;
     flex-direction: column;

theme/home.less

@@ -320,11 +320,17 @@
         .detail {
             color: var(--pxt-neutral-foreground3);
         }
-        .yt-button {
+        .yt-button, button.home-share-button {
             display: inline-block;
             border-radius: 0.5rem;
+        }
+        .yt-button {
             background-color: var(--pxt-primary-background);
         }
+        button.home-share-button {
+            color: var(--pxt-neutral-foreground1);
+            background-color: var(--pxt-target-background1);
+        }
         .ui.grid.stackable .actions {
             padding-right: 4rem !important;
             position: relative;
@@ -772,32 +778,36 @@
 
         .detailview {
             .column:first-child {
-                height: 10.5rem;
-                overflow: hidden;
+                height: auto;
+                overflow: visible;
+
+                .segment {
+                    padding-bottom: 1rem;
+                }
             }
             .actions {
-                height: 9rem;
-                padding-right: 4rem !important;
+                height: auto;
+                padding-right: @carouselArrowSizeMobile !important;
                 .card-action {
+                    display: inline-block;
+                    width: 8rem;
+                    margin: 0 0 0 0.5rem;
+                    border-width: 3px;
+
                     > .item, > .icon {
                         height: 2rem;
                     }
                     .xicon {
                         background-image: none!important;
                     }
                     .button.approve {
-                        padding: .35em 1em .5em;
+                        font-size: 0.9rem !important;
+                        padding: .35em 0.75em .5em;
                     }
                     .button.attached .icon:not(.xicon) {
                         font-size: 2rem;
                         line-height: 2rem;
                     }
-                    &:first-child {
-                        margin-left: 0;
-                    }
-                    &:last-child {
-                        margin-right: 0;
-                    }
                 }
 
                 .card-action-title {
@@ -806,11 +816,10 @@
                 }
 
                 .segment {
-                    position: absolute;
-                    bottom: 0;
-                    right: 0;
-                    margin: 0 1rem 0.5rem;
-                    white-space: normal;
+                    position: static;
+                    margin: 0 0.5rem 0.5rem;
+                    text-align: right;
+                    white-space: nowrap;
                 }
             }
         }

webapp/src/app.tsx

@@ -3168,7 +3168,7 @@ export class ProjectView
         const { name, path, loadBlocks, prj, preferredEditor } = options;
         core.showLoading("changingcode", lf("loading..."));
         this.loadingExample = true;
-        return this.loadActivityFromMarkdownAsync(path, name.toLowerCase(), preferredEditor)
+        return this.loadActivityFromMarkdownAsync(path, name?.toLowerCase(), preferredEditor)
             .then(r => {
                 const { filename, md, features, autoChooseBoard: autoChooseBoardMeta } = (r || {});
                 const autoChooseBoard = !prj && autoChooseBoardMeta;