pxt-core 7.4.14 → 7.4.15

package/react-common/components/controls/Modal.tsx

@@ -0,0 +1,143 @@
+import React = require("react");
+import { classList, ContainerProps } from "../util";
+import { Button } from "./Button";
+
+export interface ModalAction {
+    label: string;
+    className?: string;
+    disabled?: boolean;
+    icon?: string;
+    xicon?: boolean;
+    onClick: () => void;
+    url?: string;
+
+    // TODO: It would be nice to make fullscreen modals their own thing and deprecate this prop. right
+    // now it's required to render the back arrow
+    fullscreen?: boolean;
+}
+
+export interface ModalProps extends ContainerProps {
+    title: string;
+    ariaDescribedBy?: string;
+    actions?: ModalAction[];
+    onClose?: () => void;
+    fullscreen?: boolean;
+}
+
+export const Modal = (props: ModalProps) => {
+    const {
+        children,
+        id,
+        className,
+        ariaLabel,
+        ariaHidden,
+        ariaDescribedBy,
+        role,
+        title,
+        actions,
+        onClose,
+        fullscreen
+    } = props;
+
+    const closeClickHandler = (e?: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClose) onClose();
+    }
+
+    let firstFocusableElement: HTMLElement;
+    let lastFocusableElement: HTMLElement;
+
+    const handleRef = (ref: HTMLDivElement) => {
+        if (!ref) return;
+
+        const focusable = ref.querySelectorAll(`[tabindex]:not([tabindex="-1"])`);
+
+        firstFocusableElement = focusable.item(0) as HTMLElement;
+        lastFocusableElement = focusable.item(focusable.length - 1) as HTMLElement;
+
+        // TODO: Add an error here? this should never happen
+        if (!firstFocusableElement) return;
+
+        if (!ref.contains(document.activeElement)) firstFocusableElement.focus();
+    }
+
+    const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+        if (e.key !== "Tab") return;
+
+        const target = e.target;
+
+        if (e.shiftKey) {
+            if (target === firstFocusableElement) {
+                lastFocusableElement.focus();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+        else if (target === lastFocusableElement) {
+            firstFocusableElement.focus();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+
+    const classes = classList(
+        "common-modal-container",
+        fullscreen && "fullscreen",
+        className
+    );
+
+    return <div className={classes} ref={handleRef} onKeyDown={onKeyDown}>
+        <div id={id}
+            className="common-modal"
+            role={role || "dialog"}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}
+            aria-describedby={ariaDescribedBy}
+            aria-labelledby="modal-title">
+            <div className="common-modal-header">
+                {fullscreen &&
+                    <div className="common-modal-back">
+                        <Button
+                            className="menu-button"
+                            onClick={closeClickHandler}
+                            title={lf("Go Back")}
+                            label={lf("Go Back")}
+                            leftIcon="fas fa-arrow-left"
+                        />
+                    </div>
+                }
+                <div id="modal-title" className="common-modal-title">
+                    {title}
+                </div>
+                {!fullscreen &&
+                    <div className="common-modal-close">
+                        <Button
+                            className="menu-button"
+                            onClick={closeClickHandler}
+                            title={lf("Close")}
+                            rightIcon="fas fa-times-circle"
+                        />
+                    </div>
+                }
+            </div>
+            <div className="common-modal-body">
+                {children}
+            </div>
+            {actions?.length &&
+                <div className="common-modal-footer">
+                    { actions.map((action, index) =>
+                        <Button
+                            key={index}
+                            className="primary inverted"
+                            disabled={action.disabled}
+                            onClick={action.onClick}
+                            href={action.url}
+                            label={action.label}
+                            title={action.label}
+                            rightIcon={(action.xicon ? "xicon " : "") + action.icon}
+                        />
+                    )}
+                </div>
+            }
+        </div>
+    </div>
+}

package/react-common/components/profile/Profile.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { BadgeList } from "./BadgeList";
 import { UserPane } from "./UserPane";
 import { BadgeInfo } from "./BadgeInfo";
-import { CheckboxStatus } from "../Checkbox";
+import { CheckboxStatus } from "../util";
 
 export interface ProfileProps {
     user: pxt.auth.State;

package/react-common/components/profile/UserPane.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { fireClickOnEnter } from "../util";
+import { fireClickOnEnter, CheckboxStatus } from "../util";
 import { UserNotification } from "./UserNotification";
-import { Checkbox, CheckboxStatus } from "../Checkbox";
+import { Checkbox } from "../controls/Checkbox";
 
 export interface UserPaneProps {
     profile: pxt.auth.UserProfile;
@@ -18,7 +18,11 @@ export const UserPane = (props: UserPaneProps) => {
 
     const { username, displayName, picture } = profile.idp;
 
-    const checkboxLabel = "email-optin-label"
+    const emailLabel = <>
+        {emailChecked === CheckboxStatus.Waiting ? <div className="common-spinner" /> : undefined}
+        {lf("I would like to receive the MakeCode newsletter. ")}
+        <a href="https://makecode.com/privacy" target="_blank" rel="noopener noreferrer">{lf("View Privacy Statement")}</a>
+    </>
 
     return <div className="profile-user-pane">
         <div className="profile-portrait">
@@ -42,11 +46,11 @@ export const UserPane = (props: UserPaneProps) => {
         { notification && <UserNotification notification={notification}/> }
         <div className="profile-spacer"></div>
         <div className="profile-email">
-            <Checkbox isChecked={emailChecked} onClick={onEmailCheckClick} label={checkboxLabel}/>
-            <div id={checkboxLabel}>
-                {lf("I would like to receive the MakeCode newsletter. ")}
-                <a href="https://makecode.com/privacy" target="_blank" rel="noopener noreferrer">{lf("View Privacy Statement")}</a>
-            </div>
+            <Checkbox id="profile-email-checkbox"
+                className={emailChecked === CheckboxStatus.Waiting ? "loading" : ""}
+                isChecked={emailChecked === CheckboxStatus.Selected}
+                onChange={onEmailCheckClick}
+                label={emailLabel}/>
         </div>
         <div className="profile-actions">
             <a role="button"

package/react-common/components/util.tsx

@@ -8,6 +8,9 @@ export interface ControlProps {
     role?: string;
 }
 
+export interface ContainerProps extends React.PropsWithChildren<ControlProps> {
+}
+
 export function jsxLF(loc: string, ...rest: JSX.Element[]) {
     const indices: number[] = [];
 
@@ -49,4 +52,10 @@ export function classList(...classes: string[]) {
         .map(c => c.trim())
         .filter(c => !!c)
         .join(" ");
+}
+
+export enum CheckboxStatus {
+    Selected,
+    Unselected,
+    Waiting
 }

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

@@ -1,5 +1,6 @@
 .common-button {
     cursor: pointer;
+    position: relative;
     display: inline-block;
     min-height: 1rem;
     outline: none;
@@ -31,6 +32,22 @@
     margin-left: 0.5rem;
 }
 
+.common-button:focus::after {
+    content: "";
+    position: absolute;
+    inset: 4px;
+    border: 1px solid transparent;
+    outline: @buttonFocusOutline;
+    z-index: 1;
+    border-radius: 0.2em;
+}
+
+.common-button.inverted:focus::after,
+.common-button.menu-button:focus::after {
+    outline: @buttonFocusOutlineInverted;
+}
+
+
 /****************************************************
  *                  Color Variants                   *
  ****************************************************/

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

@@ -0,0 +1,13 @@
+.common-checkbox {
+    position: relative;
+    padding: 0.25rem;
+
+    input {
+        margin-right: 0.5rem;
+    }
+}
+
+.common-checkbox:focus-within {
+    outline: @checkboxFocusOutline;
+    border-radius: 0.2em;
+}

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

@@ -0,0 +1,95 @@
+/****************************************************
+ *                Input                             *
+ ****************************************************/
+
+.common-input-group {
+    position: relative;
+    display: flex;
+    height: 2rem;
+    align-items: stretch;
+    border-radius: 2px;
+    border: 1px solid @inputBorderColor;
+    background: @inputBackgroundColor;
+}
+
+.common-input-group:focus::after,
+.common-input-group:focus-within::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border: 2px solid @inputBorderColorFocus;
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.common-input {
+    width: 100%;
+    min-width: 0;
+    padding: 0 0.5rem;
+    color: @inputTextColor;
+    border: none;
+    outline: 0;
+    background: none transparent;
+    text-overflow: ellipsis;
+}
+
+/****************************************************
+ *                Input Label                       *
+ ****************************************************/
+
+.common-input-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 0.3rem 0;
+    overflow-wrap: break-word;
+}
+
+/****************************************************
+ *                Input Icon                        *
+ ****************************************************/
+
+.common-input-group {
+    & > i.fas, i.far, .icon, .xicon {
+        position: absolute;
+        bottom: 0.3rem;
+        right: 0.5rem;
+        width: 1.25rem;
+        margin-right: 0;
+        line-height: 1.25rem;
+        pointer-events: none;
+    }
+
+    & > .common-button {
+        color: @inputButtonColor;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+
+        &:hover {
+            color: @inputButtonColorHover;
+        }
+    }
+}
+
+.common-input.has-icon {
+    padding: 0 1.75rem 0 0.5rem;
+}
+
+/****************************************************
+ *                Disabled Input                    *
+ ****************************************************/
+
+.common-input-wrapper.disabled {
+    .common-input-group {
+        cursor: default;
+        border: 1px solid @inputBackgroundColorDisabled;
+        background: @inputBackgroundColorDisabled;
+    }
+
+    .common-input,
+    .common-input-label,
+    i {
+        color: @inputTextColorDisabled;
+    }
+}

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

@@ -0,0 +1,105 @@
+.common-modal-container {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--modal-overlay-color);
+    z-index: var(--modal-dimmer-zindex);
+}
+
+.common-modal-container.fullscreen {
+    z-index: var(--fullscreen-modal-zindex)
+}
+
+.common-modal {
+    width: 50%;
+    max-width: 40rem;
+    border-radius: .285rem;
+    overflow: hidden;
+}
+
+.common-modal-header {
+    background-color: @modalHeaderBackgroundColor;
+
+    display: flex;
+    font-size: 1.2rem;
+    font-weight: 600;
+    padding-left: 1.5rem;
+    border-bottom: @modalSeparatorBorder;
+    flex-shrink: 0;
+
+    .common-modal-title {
+        flex-grow: 1;
+        padding-top: 1.25rem;
+        padding-bottom: 1.25rem;
+    }
+
+    .common-modal-close .common-button .fas {
+        color: @modalCloseColor;
+    }
+}
+
+.common-modal-body {
+    background-color: @modalBodyBackgroundColor;
+    min-height: 4rem;
+    padding: 1.25rem 1.5rem;
+}
+
+.common-modal-footer {
+    background-color: @modalFooterBackgroundColor;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    padding: 1rem;
+    border-top: @modalSeparatorBorder;
+
+    button:only-child {
+        grid-column: 2 / -1;
+    }
+}
+
+.fullscreen > .common-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: none;
+    padding: 0;
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.fullscreen > .common-modal > .common-modal-header {
+    background-color: var(--primary-color);
+    color: white;
+    margin-bottom: 0;
+
+    .common-modal-back {
+        font-size: 1.2rem;
+        font-weight: 600;
+
+        .common-button.men .fas {
+
+        }
+    }
+
+    .common-modal-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.fullscreen > .common-modal > .common-modal-body {
+    flex-grow: 1;
+    background-color: var(--body-background-color);
+    padding: 1rem;
+    max-height: unset;
+}

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

@@ -0,0 +1,24 @@
+// This is mostly taken from fluentui
+.common-spinner {
+    box-sizing: border-box;
+    border-radius: 50%;
+    border-width: 1.5px;
+    border-style: solid;
+    border-color: rgb(0, 120, 212) rgb(199, 224, 244) rgb(199, 224, 244);
+    border-image: initial;
+    animation-name: spinner-rotate;
+    animation-duration: 1.3s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
+    width: 20px;
+    height: 20px;
+}
+
+@keyframes spinner-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

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

@@ -303,6 +303,18 @@
     font-family: var(--body-font-family);
 }
 
+.common-checkbox.loading {
+    input {
+        opacity: 0;
+    }
+
+    .common-spinner {
+        display: inline-block;
+        position: absolute;
+        left: 0px;
+    }
+}
+
 @media only screen and (max-width: 1200px) and (min-width: 992px) {
     .profile-badges, .profile-badges-background {
         background-size: 25%;

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

@@ -1,12 +1,47 @@
+@commonTextColor: rgb(50, 49, 48);
+@commonBorderColor: rgb(96, 94, 92);
+@commonBackgroundDisabledColor: rgb(243, 242, 241);
+
 /****************************************************
  *                    Buttons                       *
  ****************************************************/
 
-@buttonTextColor: rgb(50, 49, 48);
+@buttonTextColor: @commonTextColor;
 @buttonTextColorInverted: @white;
 @buttonBackgroundColor: @white;
-@buttonBackgroundColorDisabled: rgb(243, 242, 241);
+@buttonBackgroundColorDisabled: @commonBackgroundDisabledColor;
 
 @buttonMenuTextColor: #ffffff;
 @buttonMenuTextColorInverted: @primaryColor;
-@buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
+@buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
+@buttonFocusOutline: @buttonTextColorInverted solid 1px;;
+@buttonFocusOutlineInverted: @commonBorderColor solid 1px;
+
+/****************************************************
+ *                    Modals                        *
+ ****************************************************/
+
+@modalCloseColor: #333333;
+@modalBodyBackgroundColor: #ffffff;
+@modalHeaderBackgroundColor: @modalBodyBackgroundColor;
+@modalFooterBackgroundColor: #f9fafb;
+@modalSeparatorBorder: 1px solid rgba(34, 36, 38, .15);
+
+/****************************************************
+ *                    Checkboxes                    *
+ ****************************************************/
+
+@checkboxFocusOutline: @commonBorderColor solid 1px;
+
+/****************************************************
+ *                    Inputs                        *
+ ****************************************************/
+
+@inputTextColor: @commonTextColor;
+@inputTextColorDisabled: rgb(161, 159, 157);
+@inputBorderColor: @commonBorderColor;
+@inputBorderColorFocus: rgb(0, 120, 212);
+@inputBackgroundColor: #ffffff;
+@inputBackgroundColorDisabled: @commonBackgroundDisabledColor;
+@inputButtonColor: rgb(0, 120, 212);
+@inputButtonColorHover: rgb(16, 110, 190);

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

@@ -1,6 +1,10 @@
 @import "profile/profile.less";
 @import "controls/Button.less";
+@import "controls/Checkbox.less";
 @import "controls/Icon.less";
+@import "controls/Input.less";
+@import "controls/Modal.less";
+@import "controls/Spinner.less";
 @import "./react-common-variables.less";
 
 @import "fontawesome-free/less/solid.less";

package/theme/asset-editor.less

@@ -10,6 +10,7 @@
     height: 100%;
     border-right: 1px solid @assetSidebarBorder;
     overflow-y: auto;
+    z-index: 1;
 }
 
 .asset-editor-sidebar-info {
@@ -159,31 +160,22 @@
     }
 }
 
-.asset-editor-button {
-    padding: .7em 2em .85em;
-    text-align: center;
-    background-color: @assetSidebarButton;
-    font-size: 1rem;
-    box-shadow: inset 0 0 0 1px rgba(34,36,38,.15), inset 0 -0.3em 0 0 rgba(34,36,38,.15);
-    cursor: pointer;
-}
-
-.asset-editor-button.disabled,
-.asset-editor-button.disabled:hover {
-    color: darken(@assetSidebarButtonHover, 20%);
-    background-color: @assetSidebarButtonHover;
-    cursor: not-allowed;
+.asset-editor-sidebar-controls > .common-list-item {
+    display: flex;
 }
 
-.asset-editor-button:hover {
-    background-color: @assetSidebarButtonHover;
+.asset-editor-button {
+    flex: 1;
+    box-shadow: inset 0 0 0 1px rgba(34,36,38,.15), inset 0 -0.3em 0 0 rgba(34,36,38,.15);
 }
 
-.asset-editor-button[data-tooltip]:hover:after {
-    z-index: @sidedocZIndex;
+.delete-asset.common-button {
+    flex: 1;
+    background: none transparent;
+    border: none;
 }
 
-.create-new {
+.create-new.common-button {
     color: @white;
     background-color: @green;
     font-weight: 700;
@@ -191,7 +183,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border-width: 0;
+    margin: 1rem 0 0 1rem;
 
     i.icon {
         margin: 0;
@@ -207,14 +199,6 @@
     background-color: @assetUnselected;
 }
 
-.delete-asset {
-    margin: 0.5rem;
-    text-align: center;
-    font-size: 0.9rem;
-    cursor: pointer;
-    opacity: 0.9;
-}
-
 .asset-editor-create-options {
     display: flex;
     flex-wrap: wrap;
@@ -222,7 +206,7 @@
     justify-content: space-around;
 }
 
-.asset-editor-create-button {
+.asset-editor-create-button.common-button {
     display: flex;
     flex-direction: column;
     justify-content: center;

package/webapp/public/skillmap.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-skillmap.css">
-  <link href="/blb/skillmap/css/main.369ecead.chunk.css" rel="stylesheet"></head>
+  <link href="/blb/skillmap/css/main.b2b69d60.chunk.css" rel="stylesheet"></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
@@ -28,5 +28,5 @@
     <!-- end usabilla live embed code -->
 
     <!-- @include thin-footer.html -->
-  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.dc66e964.chunk.js"></script><script src="/blb/skillmap/js/main.e89a1af7.chunk.js"></script></body>
+  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.fce3190c.chunk.js"></script><script src="/blb/skillmap/js/main.9d64b2d7.chunk.js"></script></body>
 </html>