pxt-core 7.4.11 → 7.4.15

package/react-common/components/util.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+export interface ControlProps {
+    id?: string;
+    className?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    role?: string;
+}
+
+export interface ContainerProps extends React.PropsWithChildren<ControlProps> {
+}
+
+export function jsxLF(loc: string, ...rest: JSX.Element[]) {
+    const indices: number[] = [];
+
+    loc.replace(/\{\d\}/g, match => {
+        indices.push(parseInt(match.substr(1, 1)));
+        return match;
+    });
+
+    const out: JSX.Element[] = [];
+
+    let parts: string[];
+
+    let i = 0;
+
+    for (const index of indices) {
+        parts = loc.split(`{${index}}`);
+        pxt.U.assert(parts.length === 2);
+        out.push(<span key={i++}>{parts[0]}</span>);
+        out.push(<span key={i++}>{rest[index]}</span>);
+        loc = parts[1]
+    }
+    out.push(<span key={i++}>{loc}</span>);
+
+    return out;
+}
+
+export function fireClickOnEnter(e: React.KeyboardEvent<HTMLElement>) {
+    const charCode = (typeof e.which == "number") ? e.which : e.keyCode;
+    if (charCode === 13 /* enter */ || charCode === 32 /* space */) {
+        e.preventDefault();
+        e.currentTarget.click();
+    }
+}
+
+export function classList(...classes: string[]) {
+    return classes
+        .filter(c => typeof c === "string")
+        .reduce((prev, c) => prev.concat(c.split(" ")), [] as string[])
+        .map(c => c.trim())
+        .filter(c => !!c)
+        .join(" ");
+}
+
+export enum CheckboxStatus {
+    Selected,
+    Unselected,
+    Waiting
+}

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

@@ -0,0 +1,174 @@
+.common-button {
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    min-height: 1rem;
+    outline: none;
+    border: none;
+    vertical-align: middle;
+    color: @buttonTextColor;
+    background: @buttonBackgroundColor;
+    font-family: @pageFont;
+    margin: 0 0.25rem 0 0;
+    padding: 0.8rem 2rem 0.95rem;
+    text-transform: none;
+    text-shadow: none;
+    font-weight: 400;
+    line-height: 1em;
+    font-style: normal;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 0.2em;
+    user-select: none;
+    transition: opacity .1s ease,background-color .1s ease,box-shadow .1s ease,color .1s ease,background .1s ease;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.common-button:hover {
+    filter: grayscale(.15) brightness(.85) contrast(1.3);
+}
+
+.common-button .right {
+    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                   *
+ ****************************************************/
+
+.common-button.primary {
+    background: @primaryColor;
+    color: @buttonTextColorInverted;
+    border: 1px solid @primaryColor;
+}
+
+.common-button.secondary {
+    background: @secondaryColor;
+    color: @buttonTextColorInverted;
+    border: 1px solid @secondaryColor;
+}
+
+.common-button.teal {
+    background: @teal;
+    color: @buttonTextColorInverted;
+    border: 1px solid @teal;
+}
+
+.common-button.orange {
+    background: @orange;
+    color: @buttonTextColorInverted;
+    border: 1px solid @orange;
+}
+
+.common-button.red {
+    background: @red;
+    color: @buttonTextColorInverted;
+    border: 1px solid @red;
+}
+
+.common-button.green {
+    background: @green;
+    color: @buttonTextColorInverted;
+    border: 1px solid @green;
+}
+
+.common-button.primary.inverted {
+    background: @buttonTextColorInverted;
+    color: @primaryColor;
+}
+
+.common-button.teal.inverted {
+    background: @buttonTextColorInverted;
+    color: @teal;
+}
+
+.common-button.orange.inverted {
+    background: @buttonTextColorInverted;
+    color: @orange;
+}
+
+.common-button.red.inverted {
+    background: @buttonTextColorInverted;
+    color: @red;
+}
+
+.common-button.green.inverted {
+    background: @buttonTextColorInverted;
+    color: @green;
+}
+
+
+/****************************************************
+ *                Disabled Buttons                  *
+ ****************************************************/
+
+.common-button.disabled:hover {
+    filter: none;
+}
+
+.common-button.disabled,
+.common-button.disabled.primary,
+.common-button.disabled.primary.inverted,
+.common-button.disabled.secondary,
+.common-button.disabled.secondary.inverted,
+.common-button.disabled.teal,
+.common-button.disabled.teal.inverted,
+.common-button.disabled.orange,
+.common-button.disabled.orange.inverted,
+.common-button.disabled.red,
+.common-button.disabled.red.inverted,
+.common-button.disabled.green,
+.common-button.disabled.green.inverted
+ {
+    cursor: default;
+    background-color: @buttonBackgroundColorDisabled;
+    color: @buttonTextColor;
+    border: @buttonBackgroundColorDisabled;
+}
+
+
+/****************************************************
+ *                   Menu Buttons                   *
+ ****************************************************/
+
+.common-button.menu-button {
+    background: none;
+    border: none;
+    color: @buttonMenuTextColor;
+    height: 100%;
+    padding: 0em 1rem 0rem;
+    margin: 0;
+    border-radius: 0;
+    font-size: 20px;
+
+    i.fas, i.far, .icon, .xicon {
+        font-size: 24px;
+    }
+}
+
+.common-button.menu-button:hover {
+    background: rgba(0,0,0,.1);
+}
+
+.common-button.menu-button.inverted,
+.common-button.menu-button.inverted:hover  {
+    background: @buttonMenuBackgroundColorInverted;
+    color: @buttonMenuTextColorInverted;
+}
+

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/Icon.less

@@ -0,0 +1,11 @@
+i.far, i.fas {
+    margin: 0 0.25rem 0 0;
+    text-align: center;
+    width: 1.81rem;
+    line-height: inherit;
+    font-size: 18px;
+}
+
+i.far.large, i.fas.large {
+    font-size: 24px;
+}

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/List.less

@@ -0,0 +1,12 @@
+.common-list {
+    display: flex;
+    flex-direction: column;
+
+    .common-list-item {
+        margin-bottom: 0.25rem;
+    }
+}
+
+.common-list.horizontal {
+    flex-direction: row;
+}

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/{built/web/react-common.css → react-common/styles/profile/profile.less}

@@ -70,6 +70,7 @@
 
 .profile-email {
     display: flex;
+    padding-bottom: 1rem;
 }
 
 .profile-email .checkbox {
@@ -302,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-skillmap-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-skillmap.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

@@ -0,0 +1,47 @@
+@commonTextColor: rgb(50, 49, 48);
+@commonBorderColor: rgb(96, 94, 92);
+@commonBackgroundDisabledColor: rgb(243, 242, 241);
+
+/****************************************************
+ *                    Buttons                       *
+ ****************************************************/
+
+@buttonTextColor: @commonTextColor;
+@buttonTextColorInverted: @white;
+@buttonBackgroundColor: @white;
+@buttonBackgroundColorDisabled: @commonBackgroundDisabledColor;
+
+@buttonMenuTextColor: #ffffff;
+@buttonMenuTextColorInverted: @primaryColor;
+@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

@@ -0,0 +1,12 @@
+@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";
+@import "fontawesome-free/less/regular.less";
+@import "fontawesome-free/less/fontawesome.less";

package/react-common/tsconfig.json

@@ -0,0 +1,36 @@
+{
+    "compilerOptions": {
+        "target": "es2017",
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "module": "commonjs",
+        "outDir": "../built/react-common",
+        "rootDir": ".",
+        "newLine": "LF",
+        "sourceMap": false,
+        "moduleResolution": "node",
+        "isolatedModules": false,
+        "jsx": "react",
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        "declaration": true,
+        "preserveConstEnums": true,
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "scripthost",
+            "es2017",
+            "ES2018.Promise"
+        ],
+        "types": [
+            "react",
+            "react-dom",
+            "resize-observer-browser"
+        ],
+        "incremental": false
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}