pxt-core 13.1.17 → 13.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "13.1.17",
+  "version": "13.1.18",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+import { Button, ButtonViewProps } from "./Button";
+import { DropdownProps } from "./Dropdown";
+import { FocusList } from "./FocusList";
+import { Modal } from "./Modal";
+
+interface DropdownModalProps extends DropdownProps {
+    onClose: () => void;
+}
+
+export const DropdownModal = (props: DropdownModalProps) => {
+    const {
+        className,
+        ariaLabel,
+        items,
+        selectedId,
+        onItemSelected,
+        onClose
+    } = props;
+
+    const focusableItems = React.useRef<{[k: string]: HTMLButtonElement}>({});
+
+    React.useEffect(() => {
+        if (Object.keys(focusableItems.current).length) {
+            focusableItems.current[selectedId ?? 0].focus();
+        }
+    }, [selectedId]);
+
+
+    return (
+        <Modal
+            className={classList("common-dropdown-modal", className)}
+            title={ariaLabel}
+            hideTitle={true}
+            onClose={onClose}
+            hideDismissButton={true}
+        >
+            <FocusList
+                role="listbox"
+                className="common-menu-dropdown-pane common-dropdown-shadow"
+                childTabStopId={selectedId}
+                useUpAndDownArrowKeys={true}
+                onClose={onClose}
+            >
+                    <ul role="presentation">
+                        { items.map(item =>
+                            <li key={item.id} role="presentation">
+                                <Button
+                                    {...item}
+                                    buttonRef={ref => focusableItems.current[item.id] = (ref as HTMLButtonElement)}
+                                    className={classList("common-dropdown-item", item.className)}
+                                    onClick={() => {
+                                        onItemSelected(item.id);
+                                        onClose();
+                                    }}
+                                    ariaSelected={item.id === selectedId}
+                                    leftIcon={classList("fas fa-check", selectedId !== item.id && "transparent")}
+                                    role="option"/>
+                            </li>
+                        )}
+                    </ul>
+            </FocusList>
+        </Modal>
+    )
+}

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

@@ -8,7 +8,7 @@ export interface InputProps extends ControlProps {
     inputClassName?: string;
     groupClassName?: string;
     initialValue?: string;
-    label?: string;
+    label?: string | JSX.Element;
     title?: string;
     placeholder?: string;
     icon?: string;

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

@@ -0,0 +1,17 @@
+.common-dropdown-modal .common-modal {
+    .common-modal-header {
+        display: none;
+    }
+    .common-modal-body {
+        background: none;
+    }
+
+    .common-menu-dropdown-pane {
+        position: relative;
+        right: unset;
+    }
+
+    .common-dropdown-item .fas.fa-check.transparent {
+        opacity: 0;
+    }
+}

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

@@ -11,6 +11,7 @@
 @import "controls/Checkbox.less";
 @import "controls/DraggableGraph.less";
 @import "controls/Dropdown.less";
+@import "controls/DropdownModal.less";
 @import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";

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

@@ -369,3 +369,8 @@
         }
     }
 }
+
+.hc .theme-picker .theme-card.selected {
+    border-color: @highContrastTextColor;
+    box-shadow: inset 0 0 0 2px @highContrastTextColor;
+}

package/theme/piano-roll/piano-roll.less

@@ -12,7 +12,6 @@
     --note-event-text-color-hover: #ffffff;
     --note-event-border-hover: 2px solid #ffffff;
 
-    --header-text-color: black;
 
     --white-key-color: white;
     --black-key-color: black;
@@ -28,7 +27,9 @@
 
     --velocity-slider-color: var(--note-event-color);
 
-    --header-background: #f0f0f0;
+    --header-background: var(--pxt-neutral-background1);
+    --header-text-color: var(--pxt-neutral-foreground1);
+
     --piano-roll-border-color: var(--workspace-grid-line-color);
 }
 
@@ -64,6 +65,13 @@
 .piano-roll .header-container {
     height: var(--header-height);
     flex-shrink: 0;
+
+    .header > .common-dropdown .common-menu-dropdown-pane {
+        max-height: 15rem;
+        overflow-y: auto;
+        overflow-x: hidden;
+        z-index: 2;
+    }
 }
 
 .piano-roll .header,
@@ -128,6 +136,10 @@
     &>.common-dropdown #snap-select {
         min-width: 4.75rem;
     }
+
+    .common-button.menu-button {
+        color: var(--header-text-color);
+    }
 }
 
 .scrollbar.horizontal {
@@ -340,6 +352,16 @@
     background-color: var(--playhead-color);
 }
 
+.piano-roll .header .velocity-editor-toggle {
+    overflow-x: hidden;
+
+    label {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
 .velocity-editor {
     position: relative;
     display: flex;
@@ -421,4 +443,10 @@
     .music-editor-edit-controls .common-button.green {
         display: none;
     }
+}
+
+@media @tabletAndBelow {
+    .common-dropdown > .common-button {
+        min-width: 8rem;
+    }
 }