pxt-core 7.5.1 → 7.5.4

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

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { useState } from "react";
+import { classList, ControlProps } from "../util";
+import { Button } from "./Button";
+import { MenuDropdown } from "./MenuDropdown";
+
+export interface EditorToggleProps extends ControlProps {
+    items: EditorToggleItem[];
+    selected: number;
+}
+
+export type EditorToggleItem = BasicEditorToggleItem | DropdownEditorToggleItem;
+
+export interface BasicEditorToggleItem {
+    label: string;
+    title: string;
+    focusable: boolean;
+    icon?: string;
+    onClick: () => void;
+}
+
+export interface DropdownEditorToggleItem extends BasicEditorToggleItem {
+    items: BasicEditorToggleItem[];
+}
+
+
+export const EditorToggle = (props: EditorToggleProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role,
+        items,
+        selected
+    } = props;
+
+
+    const hasDropdown = items.some(item => isDropdownItem(item));
+
+    const onKeydown = (ev: React.KeyboardEvent) => {
+        // TODO
+    }
+
+    return (
+        <div id={id}
+            className={classList("common-editor-toggle", hasDropdown && "has-dropdown", className)}
+            role={role || "tablist"}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}>
+                {items.map((item, index) => {
+                    const isSelected = selected === index;
+                    return (
+                        <div key={index}
+                            className={classList(
+                                "common-editor-toggle-item",
+                                isSelected && "selected",
+                                isDropdownItem(item) && "common-editor-toggle-item-dropdown",
+                            )} >
+                            <ToggleButton item={item} isSelected={isSelected} onKeydown={onKeydown} />
+                            { isDropdownItem(item) &&
+                                <MenuDropdown
+                                    id="toggle-dropdown"
+                                    className="toggle-dropdown"
+                                    icon="fas fa-chevron-down"
+                                    title={lf("More options")}
+                                    items={items.map(item => ({
+                                        title: item.title,
+                                        label: item.label,
+                                        onClick: item.onClick,
+                                        leftIcon: item.icon
+                                    }))}
+                                    />
+                            }
+                        </div>
+                    );
+                })}
+
+                <div className="common-editor-toggle-handle"
+                    aria-hidden={true}
+                />
+        </div>
+    );
+}
+
+interface ToggleButtonProps {
+    item: BasicEditorToggleItem;
+    isSelected?: boolean;
+    onKeydown: (ev: React.KeyboardEvent) => void;
+}
+
+const ToggleButton = (props: ToggleButtonProps) => {
+    const { item, isSelected, onKeydown } = props;
+    const { label, title, onClick, icon, focusable } = item;
+
+    return <Button
+        role={focusable ? "tab" : undefined}
+        tabIndex={focusable && isSelected ? 0 : -1}
+        onKeydown={onKeydown}
+        label={label}
+        title={title}
+        onClick={onClick}
+        leftIcon={icon}
+        aria-selected={isSelected} />
+}
+
+function isDropdownItem(item: EditorToggleItem): item is DropdownEditorToggleItem {
+    return !!(item as DropdownEditorToggleItem).items?.length
+}

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

@@ -79,7 +79,7 @@ export const Modal = (props: ModalProps) => {
                 {!fullscreen &&
                     <div className="common-modal-close">
                         <Button
-                            className="menu-button"
+                            className="menu-button inverted"
                             onClick={closeClickHandler}
                             title={lf("Close")}
                             rightIcon="fas fa-times-circle"

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import { fireClickOnEnter, CheckboxStatus } from "../util";
 import { UserNotification } from "./UserNotification";
 import { Checkbox } from "../controls/Checkbox";
+import { Button } from "../controls/Button";
 
 export interface UserPaneProps {
     profile: pxt.auth.UserProfile;
@@ -59,10 +60,13 @@ export const UserPane = (props: UserPaneProps) => {
                 onClick={onDeleteProfileClick}>
                 {lf("Delete Profile")}
             </a>
-            <button onClick={onSignOutClick} className="ui icon button sign-out">
-                <i className="icon sign-out"></i>
-                {lf("Sign Out")}
-            </button>
+            <Button
+                className="sign-out"
+                leftIcon="fas fa-sign-out-alt"
+                title={lf("Sign Out")}
+                label={lf("Sign Out")}
+                onClick={onSignOutClick}
+                />
         </div>
     </div>
 }

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

@@ -32,22 +32,10 @@
     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-flex {
+    white-space: nowrap;
 }
 
-.common-button.inverted:focus::after,
-.common-button.menu-button:focus::after {
-    outline: @buttonFocusOutlineInverted;
-}
-
-
 /****************************************************
  *                  Color Variants                   *
  ****************************************************/
@@ -142,6 +130,34 @@
     border: @buttonBackgroundColorDisabled;
 }
 
+/****************************************************
+ *                      Focus                       *
+ ****************************************************/
+
+.common-button:focus::after {
+    content: "";
+    position: absolute;
+    inset: 4px;
+    border: 1px solid transparent;
+    outline: @buttonFocusOutlineLightBackground;
+    z-index: 1;
+    border-radius: 0.2em;
+}
+
+.common-button.menu-button:focus::after,
+.common-button.primary:focus::after,
+.common-button.secondary:focus::after,
+.common-button.teal:focus::after,
+.common-button.orange:focus::after,
+.common-button.red:focus::after,
+.common-button.green:focus::after {
+    outline: @buttonFocusOutlineDarkBackground;
+}
+
+.common-button.inverted:focus::after {
+    outline: @buttonFocusOutlineLightBackground;
+}
+
 
 /****************************************************
  *                   Menu Buttons                   *

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

@@ -0,0 +1,233 @@
+.common-editor-toggle {
+    position: relative;
+    border-radius: 0.2rem;
+    border: @editorToggleBorderWidth solid @editorToggleBorderColor;
+    background: @editorToggleBackgroundColor;
+    display: flex;
+    flex-direction: row;
+}
+
+// Used in image/tilemap/animation editor
+.common-editor-toggle.slim .common-editor-toggle-item > .common-button {
+    padding: .6rem 2rem .75rem;
+}
+
+.common-editor-toggle-item {
+    z-index: 1;
+    flex: 3;
+
+    .common-menu-dropdown {
+        flex: 4;
+
+        & > .common-button {
+            padding: 0;
+            width: 100%;
+            border-left: 1px solid @editorToggleBorderColor;
+            border-right: 1px solid @editorToggleBorderColor;
+        }
+
+        .common-menu-dropdown-pane {
+            border-top: 1px solid @editorToggleBorderColor;
+        }
+    }
+
+    & > .common-button {
+        background: none;
+        color: @buttonTextColorInverted;
+        transition: color .25s;
+        margin: 0;
+        width: 100%;
+    }
+
+    .common-button:focus::after {
+        outline: none;
+    }
+}
+
+.common-editor-toggle-item.common-editor-toggle-item-dropdown {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    flex: 4;
+}
+
+.common-editor-toggle-item.selected {
+    .common-menu-dropdown {
+        text-align: center;
+
+        & > .common-button {
+            border-right: none;
+            color: @buttonTextColor;
+        }
+    }
+
+    & > .common-button {
+        color: @buttonTextColor;
+    }
+}
+
+/*****************************************************
+ *                  Toggle Handle                    *
+ ****************************************************/
+
+ .common-editor-toggle-handle {
+    position: absolute;
+    background: white;
+    width: 33%;
+    height: 100%;
+    transition: margin-left .25s, width .25s;
+    border-radius: 0.2rem;
+    margin-left: -@editorToggleBorderWidth;
+}
+
+.common-editor-toggle {
+    /* toggle size, two items, no dropdown */
+    .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 50% }
+
+    /* toggle positioning, two items, no dropdown */
+    .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+
+    /* toggle positioning, three items, no dropdown */
+    .common-editor-toggle-item:nth-of-type(1).selected ~ .common-editor-toggle-handle { margin-left: 0; }
+    .common-editor-toggle-item:nth-of-type(2).selected ~ .common-editor-toggle-handle { margin-left: 33%; }
+    .common-editor-toggle-item:nth-of-type(3).selected ~ .common-editor-toggle-handle { margin-left: 67%; }
+
+    &.has-dropdown {
+        /* flex balance, two items, has dropdown (45% to non-dropdown, 55% to dropdown) */
+       .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+       .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 55 }
+       .common-editor-toggle-item:first-child:nth-last-child(3),
+       .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 45 }
+
+        /* toggle size, two items, has dropdown */
+        .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 45% }
+        .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 55% }
+
+        /* toggle positioning, two items, first item has dropdown */
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 55% }
+
+        /* toggle positioning, two items, second item has dropdown */
+        .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 45% }
+
+        /* toggle size, three items, has dropdown */
+        .common-editor-toggle-handle { width: 30% }
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 40%; }
+
+        /* toggle positioning, three items, has dropdown */
+        .common-editor-toggle-item:nth-of-type(2).selected ~ .common-editor-toggle-handle { margin-left: 30%; }
+        .common-editor-toggle-item:nth-of-type(3).selected ~ .common-editor-toggle-handle { margin-left: 60%; }
+
+        /* toggle positioning, three items, first item in toggle has dropdown */
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 40%; }
+        .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 70%; }
+
+        /* toggle positioning, three items, second item in toggle has dropdown */
+        .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 70%; }
+    }
+}
+
+
+/*****************************************************
+ *                    Tablet View                    *
+ ****************************************************/
+
+@media @tabletAndBelow {
+    .common-editor-toggle.tablet-compact {
+        & > .common-editor-toggle-item > .common-button {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            .common-button-label {
+                display: none;
+            }
+        }
+
+        &.has-dropdown {
+            .common-editor-toggle-item {
+                flex: 25;
+            }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown {
+                flex: 50;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            .common-editor-toggle-handle { width: 25%; }
+            .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 50%; }
+
+            /* flex balance, two items, has dropdown (33% to non-dropdown, 67% to dropdown) */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 67 }
+            .common-editor-toggle-item:first-child:nth-last-child(3),
+            .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 33 }
+
+            /* toggle size, two items, has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 33% }
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 67% }
+
+            /* toggle positioning, two items, first item has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 67% }
+
+            /* toggle positioning, two items, second item has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 33% }
+
+            /* toggle positioning, first item in toggle has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+
+            /* toggle positioning, second item in toggle has dropdown */
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 25%; }
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+        }
+    }
+}
+
+// Same as tablet
+@media @mobileAndBelow {
+    .common-editor-toggle.mobile-compact {
+        & > .common-editor-toggle-item > .common-button {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            .common-button-label {
+                display: none;
+            }
+        }
+
+        &.has-dropdown {
+            .common-editor-toggle-item {
+                flex: 25;
+            }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown {
+                flex: 50;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            .common-editor-toggle-handle { width: 25%; }
+            .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { width: 50%; }
+
+            /* flex balance, two items, has dropdown (33% to non-dropdown, 67% to dropdown) */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) { flex: 67 }
+            .common-editor-toggle-item:first-child:nth-last-child(3),
+            .common-editor-toggle-item-dropdown:first-child:nth-last-child(3) ~ .common-editor-toggle-item { flex: 33 }
+
+            /* toggle size, two items, has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 33% }
+            .common-editor-toggle-item:first-child:nth-last-child(3) ~ .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle,
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected:first-child:nth-last-child(3) ~ .common-editor-toggle-handle { width: 67% }
+
+            /* toggle positioning, two items, first item has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown:first-child:nth-last-child(3) + .selected ~ .common-editor-toggle-handle { margin-left: 67% }
+
+            /* toggle positioning, two items, second item has dropdown */
+            .common-editor-toggle-item:first-child:nth-last-child(3) + .common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 33% }
+
+            /* toggle positioning, first item in toggle has dropdown */
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 50%; }
+            .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+
+            /* toggle positioning, second item in toggle has dropdown */
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown.selected ~ .common-editor-toggle-handle { margin-left: 25%; }
+            .common-editor-toggle-item + .common-editor-toggle-item.common-editor-toggle-item-dropdown + .common-editor-toggle-item.selected ~ .common-editor-toggle-handle { margin-left: 75%; }
+        }
+    }
+}

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

@@ -33,7 +33,7 @@
 }
 
 .common-menu-dropdown-item.common-button:focus::after {
-    outline: @buttonFocusOutlineInverted;
+    outline: @buttonFocusOutlineLightBackground;
 }
 
 /****************************************************

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

@@ -335,7 +335,7 @@
     }
 }
 
-@media only screen and (max-width: 1200px) and (min-width: 992px) {
+@media @computerAndBelow {
     .profile-badges, .profile-badges-background {
         background-size: 25%;
         grid-template-columns: repeat(4, 1fr);
@@ -343,7 +343,7 @@
     }
 }
 
-@media only screen and (max-width: 991px) {
+@media @tabletAndBelow {
     .profile-badges, .profile-badges-background {
         background-size: 33%;
         grid-template-columns: repeat(3, 1fr);

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

@@ -0,0 +1,10 @@
+/**
+ * This file is the same as react-common-skillmap.less except it doesn't import any
+ * variables from the target. This is used for pxt-core's css build
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+@import "react-common.less";

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

@@ -0,0 +1,12 @@
+/**
+ * Used for building react-common-skillmap.css
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+// Import the variables from the target
+@import "site/globals/site.variables";
+
+@import "react-common.less";

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

@@ -2,6 +2,23 @@
 @commonBorderColor: rgb(96, 94, 92);
 @commonBackgroundDisabledColor: rgb(243, 242, 241);
 
+@mobileBreakpoint: 320px;
+@tabletBreakpoint: 768px;
+@computerBreakpoint: 992px;
+@largeMonitorBreakpoint: 1200px;
+@widescreenMonitorBreakpoint: 1920px;
+
+@largestMobileScreen: (@tabletBreakpoint - 1px);
+@largestTabletScreen: (@computerBreakpoint - 1px);
+@largestSmallMonitor: (@largeMonitorBreakpoint - 1px);
+@largestLargeMonitor: (@widescreenMonitorBreakpoint - 1px);
+
+@mobileAndBelow: ~"only screen and (max-width: @{largestMobileScreen})";
+@tabletAndBelow: ~"only screen and (max-width: @{largestTabletScreen})";
+@computerAndBelow: ~"only screen and (max-width: @{largestSmallMonitor})";
+@largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";
+
+
 /****************************************************
  *                    Buttons                       *
  ****************************************************/
@@ -14,8 +31,8 @@
 @buttonMenuTextColor: #ffffff;
 @buttonMenuTextColorInverted: @primaryColor;
 @buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
-@buttonFocusOutline: @buttonTextColorInverted solid 1px;;
-@buttonFocusOutlineInverted: @commonBorderColor solid 1px;
+@buttonFocusOutlineDarkBackground: @buttonTextColorInverted solid 1px;;
+@buttonFocusOutlineLightBackground: @commonBorderColor solid 1px;
 @buttonMenuBackgroundHoverColor: rgba(0,0,0,.1);
 @buttonMenuBackgroundActiveColor: rgba(0,0,0,.15);
 
@@ -57,6 +74,13 @@
 @inputButtonColor: rgb(0, 120, 212);
 @inputButtonColorHover: rgb(16, 110, 190);
 
+/****************************************************
+ *              EditorToggle                        *
+ ****************************************************/
+@editorToggleBackgroundColor: rgba(52,73,94,.4);
+@editorToggleBorderColor: rgba(52,73,94,.2);
+@editorToggleBorderWidth: 3px;
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

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

@@ -1,6 +1,7 @@
 @import "profile/profile.less";
 @import "controls/Button.less";
 @import "controls/Checkbox.less";
+@import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";
 @import "controls/MenuDropdown.less";

package/theme/common.less

@@ -9,6 +9,11 @@
              Layout
 *******************************/
 
+@mobileAndBelow: ~"only screen and (max-width: @{largestMobileScreen})";
+@tabletAndBelow: ~"only screen and (max-width: @{largestTabletScreen})";
+@computerAndBelow: ~"only screen and (max-width: @{largestSmallMonitor})";
+@largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";
+
 html {
     height: 100%;
     width: 100%;