Align Skillmap loading icon with MakeCode branding

skillmap/src/App.tsx

@@ -37,12 +37,13 @@ import { InfoPanel } from './components/InfoPanel';
 
 import { parseSkillMap } from './lib/skillMapParser';
 import { parseHash, getMarkdownAsync, MarkdownSource, parseQuery,
-    setPageTitle, setPageSourceUrl, ParsedHash, resolvePath } from './lib/browserUtils';
+    setPageTitle, setPageSourceUrl, ParsedHash } from './lib/browserUtils';
 
 import { MakeCodeFrame } from './components/makecodeFrame';
 import { getLocalUserStateAsync, getUserStateAsync, saveUserStateAsync } from './lib/workspaceProvider';
 import { Unsubscribe } from 'redux';
 import { UserProfile } from './components/UserProfile';
+import { LoaderLogo } from './components/LoaderLogo';
 import { ReadyResources, ReadyPromise } from './lib/readyResources';
 import { LanguageSelector } from '../../react-common/components/language/LanguageSelector';
 import { ThemePickerModal } from '../../react-common/components/theming/ThemePickerModal';
@@ -452,7 +453,7 @@ class AppImpl extends React.Component<AppProps, AppState> {
         return (<div className={`app-container ${pxt.appTarget.id}`}>
                 <HeaderBar />
                 {showingSyncLoader && <div className={"makecode-frame-loader"}>
-                    <img src={resolvePath("assets/logo.svg")} alt={lf("MakeCode Logo")} />
+                    <LoaderLogo alt={lf("MakeCode Logo")} />
                 <div className="makecode-frame-loader-text">{lf("Saving to cloud...")}</div>
                 </div>}
                 <div className={`skill-map-container ${activityOpen ? "hidden" : ""}`} style={{ backgroundColor: theme.backgroundColor }}>

skillmap/src/components/LoaderLogo.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { resolvePath } from "../lib/browserUtils";
+
+interface LoaderLogoProps {
+    alt: string;
+}
+
+/**
+ * Renders the animated loading logo. The logo image is painted as-is by
+ * default, but targets can recolor a single-color logo by setting the
+ * --pxt-loader-logo-color css variable, which paints the logo shape (used as
+ * a mask) in that color instead.
+ */
+export const LoaderLogo = (props: LoaderLogoProps) => {
+    const { alt } = props;
+    const logoUrl = resolvePath("assets/logo.svg");
+
+    return <div
+        className="makecode-frame-loader-logo"
+        style={{ "--pxt-loader-logo-image": `url("${logoUrl}")` } as React.CSSProperties}
+    >
+        <img src={logoUrl} alt={alt} />
+        <div className="makecode-frame-loader-logo-color" aria-hidden={true} />
+    </div>
+}

skillmap/src/components/makecodeFrame.tsx

@@ -1,7 +1,7 @@
 /// <reference path="../../../localtypings/pxteditor.d.ts" />
 import * as React from "react";
 import { connect } from 'react-redux';
-import { isLocal, resolvePath, getEditorUrl, tickEvent, cloudLocalStoreKey } from "../lib/browserUtils";
+import { isLocal, getEditorUrl, tickEvent, cloudLocalStoreKey } from "../lib/browserUtils";
 import { lookupActivityProgress } from "../lib/skillMapUtils";
 
 import { SkillMapState } from '../store/reducer';
@@ -13,6 +13,7 @@ import '../styles/makecode-editor.css'
 import { ShareData } from "react-common/components/share/Share";
 import { ProgressBar } from "react-common/components/controls/ProgressBar";
 import { ThemeManager } from "react-common/components/theming/themeManager";
+import { LoaderLogo } from "./LoaderLogo";
 interface MakeCodeFrameProps {
     save: boolean;
     mapId: string;
@@ -130,7 +131,7 @@ class MakeCodeFrameImpl extends React.Component<MakeCodeFrameProps, MakeCodeFram
         /* eslint-disable @microsoft/sdl/react-iframe-missing-sandbox */
         return <div className="makecode-frame-outer" style={{ display: activityId ? "block" : "none" }}>
             <div className={`makecode-frame-loader ${showLoader ? "" : "hidden"}`}>
-                <img src={resolvePath("assets/logo.svg")} alt={imageAlt} />
+                <LoaderLogo alt={imageAlt} />
                 {openingProject && <ProgressBar className="makecode-frame-loader-bar" value={loadPercent!} />}
                 <div className="makecode-frame-loader-text">{loadingText}</div>
             </div>

skillmap/src/styles/makecode-editor.css

@@ -28,13 +28,44 @@
     display: none;
 }
 
-.makecode-frame-loader img {
+.makecode-frame-loader-logo {
+    position: relative;
+    display: inline-block;
     max-width: 200px;
     vertical-align: middle;
 
-   -webkit-animation: loader-pxt 2s infinite linear;
-   animation: loader-pxt  2s infinite linear;
- }
+    -webkit-animation: loader-pxt 2s infinite linear;
+    animation: loader-pxt 2s infinite linear;
+}
+
+.makecode-frame-loader-logo img {
+    display: block;
+    max-width: 100%;
+}
+
+/*
+ * Paints the logo shape in --pxt-loader-logo-color on top of the logo image,
+ * allowing targets with a single-color logo to recolor it. Targets that leave
+ * --pxt-loader-logo-color unset (e.g. those with a full color logo) get a
+ * transparent overlay and the image is shown unmodified.
+ */
+.makecode-frame-loader-logo-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--pxt-loader-logo-color, transparent);
+
+    -webkit-mask-image: var(--pxt-loader-logo-image);
+    mask-image: var(--pxt-loader-logo-image);
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}
 
 .makecode-frame-loader-bar {
     --progress-bar-filled-color: var(--pxt-primary-background);
@@ -61,10 +92,17 @@
 
 .high-contrast .makecode-frame-loader img {
   filter: grayscale(100%) brightness(60%) contrast(400%);
+}
+
+.high-contrast .makecode-frame-loader-logo {
   animation: none;
   -webkit-animation: none;
 }
 
+.high-contrast .makecode-frame-loader-logo-color {
+  display: none;
+}
+
 .high-contrast .makecode-frame-loader-fill {
   background-color: var(--high-contrast-text);
 }