Merge branch 'develop' of https://github.com/PenguinMod/penguinmod.github.io into develop

Author: RedMan13

src/addons/addons/drag-drop/userscript.js

@@ -62,7 +62,9 @@ export default async function ({ addon, console }) {
       (el = e.target.closest('div[class*="selector_wrapper"]'))
     ) {
       callback = (files) => {
-        const hdFilter = addon.settings.get("use-hd-upload") ? "" : ":not(.sa-better-img-uploads-input)";
+        // do not use HD uploads if we drop a GIF, Scratch will split its frames individualy.
+        const hasGif = [...files].some(f => f.type === "image/gif");
+        const hdFilter = !hasGif && addon.settings.get("use-hd-upload") ? "" : ":not(.sa-better-img-uploads-input)";
         const fileInput = el.querySelector('input[class*="action-menu_file-input"]' + hdFilter);
         fileInput.files = files;
         fileInput.dispatchEvent(new Event("change", { bubbles: true }));

src/components/box/box.jsx

@@ -99,8 +99,12 @@ Box.propTypes = {
     /**
      * A callback function whose first parameter is the underlying dom elements.
      * This call back will be executed immediately after the component is mounted or unmounted
+     * Can also be a ref of Element
      */
-    componentRef: PropTypes.func,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
     /** https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction */
     direction: PropTypes.oneOf([
         'row', 'row-reverse', 'column', 'column-reverse'

src/components/modal/modal.jsx

@@ -16,6 +16,7 @@ import styles from './modal.css';
 const ModalComponent = props => (
     <ReactModal
         isOpen
+        ref={props.componentRef}
         className={classNames(styles.modalContent, props.className, {
             [styles.fullScreen]: props.fullScreen
         })}
@@ -24,10 +25,12 @@ const ModalComponent = props => (
             [styles.scrollable]: props.scrollable
         })}
         onRequestClose={props.onRequestClose}
+        style={{ content: props.styleContent, overlay: props.styleOverlay }}
     >
         <Box
             dir={props.isRtl ? 'rtl' : 'ltr'}
             direction="column"
+            componentRef={props.boxRef}
             grow={1}
         >
             <div className={classNames(styles.header, props.headerClassName)}>
@@ -98,6 +101,16 @@ const ModalComponent = props => (
 
 ModalComponent.propTypes = {
     children: PropTypes.node,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    boxRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    styleContent: PropTypes.object,
+    styleOverlay: PropTypes.object,
     className: PropTypes.string,
     contentLabel: PropTypes.oneOfType([
         PropTypes.string,

src/components/monitor/monitor.jsx

@@ -11,7 +11,6 @@ import LargeMonitor from './large-monitor.jsx';
 import SliderMonitor from '../../containers/slider-monitor.jsx';
 import ListMonitor from '../../containers/list-monitor.jsx';
 
-
 import styles from './monitor.css';
 
 const categories = {
@@ -37,7 +36,7 @@ const MonitorComponent = props => (
         // TW: if export is defined, we always show it, even outside of the editor
         disable={!props.draggable && !props.onExport}
         holdToDisplay={props.mode === 'slider' ? -1 : 1000}
-        id={`monitor-${props.label}`}
+        id={`monitor-${props.id}`}
     >
         <Draggable
             bounds=".monitor-overlay" // Class for monitor container
@@ -66,7 +65,7 @@ const MonitorComponent = props => (
             // positioning conflicts between the monitors `transform: scale` and
             // the context menus `position: fixed`. For more details, see
             // http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
-            <ContextMenu id={`monitor-${props.label}`}>
+            <ContextMenu id={`monitor-${props.id}`}>
                 {props.draggable && props.onSetModeToDefault &&
                     <MenuItem onClick={props.onSetModeToDefault}>
                         <FormattedMessage

src/components/prompt/prompt.jsx

@@ -9,7 +9,6 @@ import Modal from '../../containers/modal.jsx';
 import styles from './prompt.css';
 import { SCRATCH_MAX_CLOUD_VARIABLES } from '../../lib/tw-cloud-limits.js';
 
-
 const messages = defineMessages({
     forAllSpritesMessage: {
         defaultMessage: 'For all sprites',
@@ -40,30 +39,57 @@ const messages = defineMessages({
     }
 });
 
+const customButtonStyle = (button) => {
+    // if class is manually specified, dont try to guess the intended style
+    if (button.class) {
+        switch (button.class) {
+            case "ok":
+                return styles.okButton;
+            case "cancel":
+                return styles.cancelButton;
+            default:
+                return styles.cancelButton;
+        }
+    }
+
+    // assume intended style from role
+    if (button.role) {
+        switch (button.role) {
+            case "ok":
+                return styles.okButton;
+            case "close":
+                return styles.cancelButton;
+        }
+    }
+    return styles.cancelButton;
+};
 const PromptComponent = props => props.isCustom ? (
     <Modal
         className={styles.modalContent}
         contentLabel={props.title}
         id="customModal"
         onRequestClose={props.onCancel}
+        componentRef={props.ref}
+        boxRef={props.boxRef}
+        styleContent={props.styleContent}
+        styleOverlay={props.styleOverlay}
+        scrollable={props.config.scrollable}
     >
         <Box className={styles.body}>
-            <Box>
-            </Box>
-            <Box className={styles.buttonRow}>
-                <button
-                    className={styles.cancelButton}
-                    onClick={props.onCancel}
-                >
-                    {props.closeTitle}
-                </button>
-                <button
-                    className={styles.okButton}
-                    onClick={props.onOk}
-                >
-                    {props.enterTitle}
-                </button>
+            <Box componentRef={props.customRef}>
             </Box>
+            {(props.customButtons && props.customButtons.length > 0 ? <Box className={styles.buttonRow}>
+                {/* slice then reverse to avoid mutating the array. reversing cause scratch modals put OK on the right & usually you define OK button first */}
+                {props.customButtons.slice().reverse().map(button => (
+                    <button
+                        className={customButtonStyle(button)}
+                        style={button.style}
+                        onClick={() => props.onCustomButton(button)}
+                    >
+                        {button.name}
+                    </button>
+                ))}
+            </Box> : null)}
         </Box>
     </Modal>
 ) : (
@@ -72,6 +98,10 @@ const PromptComponent = props => props.isCustom ? (
         contentLabel={props.title}
         id="variableModal"
         onRequestClose={props.onCancel}
+        componentRef={props.componentRef}
+        boxRef={props.boxRef}
+        styleContent={props.styleContent}
+        styleOverlay={props.styleOverlay}
     >
         <Box className={styles.body}>
             <Box className={styles.label}>
@@ -232,11 +262,26 @@ PromptComponent.propTypes = {
     onScopeOptionSelection: PropTypes.func,
     showCloudOption: PropTypes.bool,
     showVariableOptions: PropTypes.bool,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    boxRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    styleContent: PropTypes.object,
+    styleOverlay: PropTypes.object,
 
     /* custom modals */
     isCustom: PropTypes.bool,
-    enterTitle: PropTypes.string,
-    closeTitle: PropTypes.string
+    config: PropTypes.object,
+    onCustomButton: PropTypes.func,
+    customButtons: PropTypes.arrayOf(PropTypes.object),
+    customRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
 };
 
 export default PromptComponent;