[stable7.2] Cherry-pick fixes for tutorial release (#8527)

* Remove brackets around hidden title when rendering as docs page (#8521) * Fix sim, Usabilla position, title spacing, Safari gradient (#8522) * css fixes for release (#8523) * fix scriptmanager view * use my old version of modal overrides which seemed to work * fix count on import modal too * Fullscreen sprite editor on tablet tutorial, CSS fixes (#8525) * slower hero banner (#8526) * slow the transition animation between banners a bit * make time between cards 9 seconds (from 6 seconds) * Link brand fonts and outline fonts (#8524) * Show mini sim when navigating directly between tutorials or recipes (#8528) Co-authored-by: Joey Wunderlich <[email protected]> Co-authored-by: Vivian Li <[email protected]>
microsoft · Sep 27, 2021 · bf54682 · bf54682
1 parent 4f41d24
commit bf54682
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 84 deletions.
diff --git a/cli/cli.ts b/cli/cli.ts
@@ -1935,12 +1935,19 @@ function buildSemanticUIAsync(parsed?: commandParser.ParsedCommand) {
         cmd: "node",
         args: [lessCPath, "theme/style.less", "built/web/semantic.css", "--include-path=node_modules/semantic-ui-less:node_modules/pxt-core/theme:theme/foo/bar"]
     }).then(() => {
-        const fontFile = fs.readFileSync("node_modules/semantic-ui-less/themes/default/assets/fonts/icons.woff")
-        const url = "url(data:application/font-woff;charset=utf-8;base64,"
-            + fontFile.toString("base64") + ") format('woff')"
+        function linkFont(font: string, semCss: string) {
+            const fontFile = fs.readFileSync("node_modules/semantic-ui-less/themes/default/assets/fonts/" + font + ".woff")
+            const url = "url(data:application/font-woff;charset=utf-8;base64,"
+                + fontFile.toString("base64") + ") format('woff')"
+            const r = new RegExp(`src:.*url\\("fonts\/${font}\\.woff.*`, "g")
+            semCss = semCss.replace('src: url("fonts/' + font + '.eot");', "")
+                .replace(r, "src: " + url + ";")
+            return semCss;
+        }
         let semCss = fs.readFileSync('built/web/semantic.css', "utf8")
-        semCss = semCss.replace('src: url("fonts/icons.eot");', "")
-            .replace(/src:.*url\("fonts\/icons\.woff.*/g, "src: " + url + ";")
+        semCss = linkFont("icons", semCss)
+        semCss = linkFont("outline-icons", semCss)
+        semCss = linkFont("brand-icons", semCss)
         return semCss;
     }).then((semCss) => {
         // Append icons.css to semantic.css (custom pxt icons)

diff --git a/pxtlib/browserutils.ts b/pxtlib/browserutils.ts
@@ -164,6 +164,14 @@ namespace pxt.BrowserUtils {
         } catch (e) { return false; }
     }
 
+    export function isTabletSize(): boolean {
+        return window?.innerWidth < pxt.BREAKPOINT_TABLET;
+    }
+
+    export function isComputerSize(): boolean {
+        return window?.innerWidth >= pxt.BREAKPOINT_TABLET;
+    }
+
     export function noSharedLocalStorage(): boolean {
         try {
             return /nosharedlocalstorage/i.test(window.location.href);

diff --git a/pxtlib/docsrender.ts b/pxtlib/docsrender.ts
@@ -443,6 +443,10 @@ namespace pxt.docs {
             // remove tutorial macros
             if (text)
                 text = text.replace(/@(fullscreen|unplugged|showdialog|showhint)/gi, '');
+            text = text.trim();
+            // remove brackets for hiding step title
+            if (text.match(/^\{([\s\S]+)\}$/))
+                text = text.substr(1, text.length - 2);
             return `<h${level} id="${(this as any).options.headerPrefix}${id}">${text}</h${level}>`
         }
     }

diff --git a/skillmap/src/App.css b/skillmap/src/App.css
@@ -329,7 +329,7 @@ code {
 /* USABILLA */
 .usabilla_live_button_container {
     top: unset !important;
-    bottom: 5rem !important;
+    bottom: 9rem !important;
 }
 
 /** mscc cookie banner. Can be removed once the banner is out of the checked in pxtweb in doccdn */

diff --git a/theme/common.less b/theme/common.less
@@ -1056,6 +1056,7 @@ p.ui.font.small {
         max-width: 100%;
         min-width: 100%;
         height:100% !important;
+        background-color: @simulatorBackground;
     }
     #miniSimOverlay {
         display: none;
@@ -1326,7 +1327,7 @@ p.ui.font.small {
         position: fixed;
         padding: 0;
         margin: 1em;
-        bottom: ~"calc(4.5rem + var(--extra-mobile-sim-padding))" !important;
+        bottom: ~"calc(5.5rem + var(--extra-mobile-sim-padding))" !important;
         right: 0.5rem;
         top: unset;
         left: unset;
@@ -1355,7 +1356,7 @@ p.ui.font.small {
         position: absolute;
         display: block;
         width: 10rem; /* match width of div.simframe */
-        height: 9rem;
+        height: 8rem;
     }
 
     .simPanel {

diff --git a/theme/home.less b/theme/home.less
@@ -58,8 +58,8 @@
         }
     }
     .ui.segment.getting-started-segment.hero {
-        -webkit-transition: background-image 0.2s ease-in;
-        transition: background-image 0.2s ease-in;
+        -webkit-transition: background-image 0.5s ease-in;
+        transition: background-image 0.5s ease-in;
         overflow: hidden;
 
         .hero-banner-contents {
@@ -94,7 +94,7 @@
         }
 
         .dots button {
-            transition: background-color 0.2s;
+            transition: background-color 0.5s;
             border: 2px solid @heroBannerDotOutlineColor;
             margin-right: 1.25rem;
 
@@ -420,7 +420,7 @@
     }
 }
 
-.scriptmanager, .projectsdialog {
+.scriptmanager .ui.cards, .projectsdialog {
     .ui.card {
         margin-right: 5px;
         border-radius: @homeCardBorderRadius;

diff --git a/theme/themes/pxt/modules/modal.overrides b/theme/themes/pxt/modules/modal.overrides
@@ -30,6 +30,7 @@
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
+    transform: none;
     margin: 0 !important;
     padding: 0 !important;
     border: 0 !important;
@@ -43,6 +44,32 @@
     user-select: none;
 }
 
+.modals.dimmer .ui.scrolling.modal {
+    margin-top: 3.5rem auto !important;
+    top: auto;
+}
+
+.ui.modal {
+  position: fixed;
+  display: none;
+  z-index: @zIndex;
+  text-align: left;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  background: @background;
+  border: @border;
+  box-shadow: @boxShadow;
+  transform-origin: @transformOrigin;
+
+  flex: 0 0 auto;
+
+  border-radius: @borderRadius;
+  user-select: text;
+  will-change: top, left, margin, transform, opacity;
+}
+
 /* Back button */
 .ui.button.back-button {
     background: none;
@@ -196,61 +223,6 @@
     }
 }
 
-body .dimmable.dimmed .ui.page.dimmer .ui.modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-}
-
-@media only screen and (max-width: @largestMobileScreen) {
-    body .dimmable.dimmed .ui.page.dimmer .ui.modal {
-        margin: 0 0 0 -47.5%;
-    }
-}
-
-@media only screen and (min-width: @tabletBreakpoint) {
-    body .dimmable.dimmed .ui.page.dimmer {
-        .ui.modal {
-            margin: 0 0 0 -44%;
-        }
-        .ui.tiny.modal {
-            margin: 0 0 0 -26.4%;
-        }
-    }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-    body .dimmable.dimmed .ui.page.dimmer {
-        .ui.modal {
-            margin: 0 0 0 -425px;
-        }
-
-        .ui.tiny.modal {
-            margin: 0 0 0 -255px;
-        }
-
-        .ui.large.modal {
-            margin: 0 0 0 -510px;
-        }
-    }
-}
-
-@media only screen and (min-width: @largeMonitorBreakpoint) {
-    body .dimmable.dimmed .ui.page.dimmer {
-        .ui.modal {
-            margin: 0 0 0 -450px;
-        }
-
-        .ui.tiny.modal {
-            margin: 0 0 0 -270px;
-        }
-
-        .ui.large.modal {
-            margin: 0 0 0 -540px;
-        }
-    }
-}
-
 
 /*******************************
         Modal Close Icon

diff --git a/theme/tutorial-sidebar.less b/theme/tutorial-sidebar.less
@@ -8,6 +8,8 @@
 @tutorialTabletButtonColor: #f3f3f3;
 @tutorialTabletStepCounterWidth: 16rem;
 
+@tutorialHintMaskZIndex: -1; // Below tutorial pane
+
 /*******************************
         Tutorial Tab
 *******************************/
@@ -60,7 +62,7 @@
     height: 3rem;
     width: calc(~'100% - 1rem');
     bottom: 6rem;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), @white);
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), @white);
 }
 
 /*******************************
@@ -144,6 +146,7 @@
     margin-bottom: 1rem;
     font-size: @tutorialTitleFontSize;
     font-weight: 700;
+    line-height: 1.2em;
 }
 
 /*******************************
@@ -216,6 +219,7 @@
     left: 0;
     bottom: 0;
     right: 0;
+    z-index: @tutorialHintMaskZIndex;
 }
 
 /*******************************
@@ -279,8 +283,8 @@
 }
 
 // Mini sim is visible when tab is hidden
-#root:not(.fullscreensim) {
-    .tab-simulator.tab-content.hidden {
+#root {
+    &:not(.fullscreensim) .tab-simulator.tab-content.hidden {
         height: 0;
         padding: 0;
 
@@ -296,7 +300,7 @@
     }
     .tab-simulator.tab-content:not(.hidden) {
         .simPanel {
-            .sidebar-button { display: none !important; }
+            .sidebar-button, .hidefullscreen { display: none !important; }
         }
     }
 }
@@ -519,7 +523,7 @@
     /*******************************
             Simulator Tab
     *******************************/
-    #root.tabTutorial .tab-simulator:not(.hidden) {
+    #root.tabTutorial:not(.fullscreensim) .tab-simulator:not(.hidden) {
         .simPanel {
             display: flex;
 
@@ -595,7 +599,7 @@
 
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
-    #root.tabTutorial .tab-simulator:not(.hidden) .simPanel {
+    #root.tabTutorial:not(.fullscreensim) .tab-simulator:not(.hidden) .simPanel {
         #simulators {
             width: 16rem;
         }

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
@@ -4216,7 +4216,7 @@ export class ProjectView
         if (this.isTutorial()) {
             if (!pxt.BrowserUtils.useOldTutorialLayout()) {
                 const sidebarEl = document?.getElementById("editorSidebar");
-                if (sidebarEl && window?.innerWidth < pxt.BREAKPOINT_TABLET) {
+                if (sidebarEl && pxt.BrowserUtils.isTabletSize()) {
                     this.setState({ editorOffset: sidebarEl.offsetHeight + "px" });
                 } else {
                     this.setState({ editorOffset: undefined });
@@ -5327,7 +5327,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
             // Check to see if we should show the mini simulator (<= tablet size)
             if (!theEditor.isTutorial() || pxt.BrowserUtils.useOldTutorialLayout()) {
-                if (window?.innerWidth < pxt.BREAKPOINT_TABLET) {
+                if (pxt.BrowserUtils.isTabletSize()) {
                     theEditor.showMiniSim(true);
                 } else {
                     theEditor.showMiniSim(false);

diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
@@ -621,7 +621,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     protected resizeFieldEditorView() {
         if (!window) return;
         const blocklyDiv = this.getBlocksEditorDiv();
-        if (blocklyDiv && this.parent.isTutorial()) {
+        if (blocklyDiv && this.parent.isTutorial() && !pxt.BrowserUtils.isTabletSize()) {
             const containerRect = blocklyDiv.getBoundingClientRect();
             blocklyFieldView.setEditorBounds({
                 top: containerRect.top,

diff --git a/webapp/src/components/assetEditor/editor.tsx b/webapp/src/components/assetEditor/editor.tsx
@@ -61,7 +61,7 @@ export class AssetEditor extends Editor {
     resize(e?: Event) {
         const container = this.getAssetEditorDiv();
         // In tutorial view, the image editor is smaller and has no padding
-        if (container && this.parent.isTutorial()) {
+        if (container && this.parent.isTutorial() && !pxt.BrowserUtils.isTabletSize()) {
             const containerRect = container.getBoundingClientRect();
             const editorTools = document.getElementById("editortools");
             blocklyFieldView.setEditorBounds({

diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -41,7 +41,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
 
     React.useEffect(() => {
         const observer = new ResizeObserver(() => {
-            if (window.innerWidth < pxt.BREAKPOINT_TABLET) {
+            if (pxt.BrowserUtils.isTabletSize()) {
                 setLayout("horizontal");
             } else {
                 setLayout("vertical");

diff --git a/webapp/src/monaco.tsx b/webapp/src/monaco.tsx
@@ -849,7 +849,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
             const logoHeight = (this.parent.isJavaScriptActive()) ? this.parent.updateEditorLogo(toolboxWidth, this.getEditorColor()) : 0;
 
             this.editor.layout({ width: monacoArea.offsetWidth - toolboxWidth, height: monacoArea.offsetHeight - logoHeight });
-            if (monacoArea && this.parent.isTutorial()) {
+            if (monacoArea && this.parent.isTutorial() && !pxt.BrowserUtils.isTabletSize()) {
                 const containerRect = monacoArea.getBoundingClientRect();
                 blocklyFieldView.setEditorBounds({
                     top: containerRect.top,

diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
@@ -305,7 +305,7 @@ interface HeroBannerState {
     paused?: boolean;
 }
 
-const HERO_BANNER_DELAY = 6000; // 6 seconds per card
+const HERO_BANNER_DELAY = 9000; // 9 seconds per card
 class HeroBanner extends data.Component<ISettingsProps, HeroBannerState> {
     protected prevGalleries: pxt.CodeCard[];
     protected static fetchedImages: pxt.Map<HTMLImageElement> = {};
@@ -1287,14 +1287,20 @@ export class ImportDialog extends data.Component<ISettingsProps, ImportDialogSta
             && !pxt.winrt.isWinRT() // not supported in windows 10
             && !pxt.BrowserUtils.isPxtElectron()
             && pxt.appTarget?.cloud?.cloudProviders?.github;
+        const showOpenFiles = pxt.appTarget.compile && !disableFileAccessinMaciOs && !disableFileAccessinAndroid;
+
+        let cardCount = showOpenFiles ? 1 : 0;
+        cardCount += showImport ? 1 : 0;
+        cardCount += showCreateGithubRepo ? 1 : 0;
+        const cardClass = cardCount === 1 ? "one" : cardCount === 2 ? "two" : "three";
         return (
             <sui.Modal isOpen={visible} className={classes} size="small"
                 onClose={this.close} dimmer={true}
                 closeIcon={true} header={lf("Import")}
                 closeOnDimmerClick closeOnDocumentClick closeOnEscape
             >
-                <div className={pxt.github.token ? "ui three cards" : "ui two cards"}>
-                    {pxt.appTarget.compile && !disableFileAccessinMaciOs && !disableFileAccessinAndroid ?
+                <div className={`ui ${cardClass} cards`}>
+                    {showOpenFiles &&
                         <codecard.CodeCardView
                             ariaLabel={lf("Open files from your computer")}
                             role="button"
@@ -1304,7 +1310,7 @@ export class ImportDialog extends data.Component<ISettingsProps, ImportDialogSta
                             name={lf("Import File...")}
                             description={lf("Open files from your computer")}
                             onClick={this.importHex}
-                        /> : undefined}
+                        />}
                     {showImport &&
                         <codecard.CodeCardView
                             ariaLabel={lf("Open a shared project URL or GitHub repo")}

diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
@@ -57,7 +57,9 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
         // unmounting the component as we enter/exit the editor. We
         // instead manually reset the state as we transition
         if ((!this.props.tutorialOptions && props.tutorialOptions)
-            || (this.props.inHome && !props.inHome && props.tutorialOptions)) {
+            || (this.props.inHome && !props.inHome && props.tutorialOptions)
+            || (this.props.tutorialOptions?.tutorial && props.tutorialOptions?.tutorial
+                && this.props.tutorialOptions.tutorial !== props.tutorialOptions.tutorial)) {
             this.showTutorialTab();
         } else if (!this.props.inHome && props.inHome) {
             this.showSimulatorTab();