Merge pull request #115 from mmmmaaaaarrrrrrkkkkkkkk/develop

Animations

Author: jwklong

src/addons/addons.js

@@ -77,6 +77,7 @@ const addons = [
 ];
 
 const newAddons = [
+    "animations",
     "paint-gradient-maker",
     "toolbox-full-blocks-on-hover",
     "waveform-chunk-size",

src/addons/addons/animations/_manifest_entry.js

@@ -0,0 +1,43 @@
+const manifest = {
+  "name": "Animation Types",
+  "description": "Change the intensity of animations that appear in the editor. Some moderate animations come with the editor by default.",
+  "credits": [
+    {
+      "name": "Reflow"
+    }
+  ],
+  "userscripts": [
+    {
+      "url": "userscript.js"
+    }
+  ],
+  "info": [
+    {
+      "text": "If you enabled a reduced motion setting on your device, these settings will not apply.",
+      "id": "reduced-motion"
+    }
+  ],
+  "settings": [
+     {
+      "dynamic": true,
+      "name": "Intensity",
+      "id": "intensity",
+      "type": "select",
+      "potentialValues": [
+        {
+          "id": "default",
+          "name": "Moderate animations"
+        },
+        {
+          "id": "intense",
+          "name": "Shower me in animations"
+        }
+      ],
+      "default": "default"
+    }
+  ],
+  "tags": ["editor", "new"],
+  "enabledByDefault": true,
+  "dynamicDisable": true
+};
+export default manifest;

src/addons/addons/animations/_runtime_entry.js

@@ -0,0 +1,4 @@
+import _js from "./userscript.js";
+export const resources = {
+  "userscript.js": _js,
+};

src/addons/addons/animations/userscript.js

@@ -0,0 +1,18 @@
+export default async function ({ addon, console, msg }) {
+  function applySettings() {
+    ReduxStore.dispatch({
+      type: 'scratch-gui/addon-util/SET_EDITOR_ANIM_PREF',
+      animPref: addon.settings.get('intensity') || "none"
+    });
+  }
+  function resetSettings() {
+    ReduxStore.dispatch({
+      type: 'scratch-gui/addon-util/SET_EDITOR_ANIM_PREF',
+      animPref: "none"
+    });
+  }
+  addon.self.addEventListener("reenabled", applySettings);
+  addon.self.addEventListener("disabled", resetSettings);
+  addon.settings.addEventListener("change", applySettings);
+  applySettings();
+}

src/addons/generated/addon-entries.js

@@ -71,8 +71,10 @@ import _tw_straighten_comments from "../addons/tw-straighten-comments/_manifest_
 import _tw_remove_feedback from "../addons/tw-remove-feedback/_manifest_entry.js";
 import _tw_remove_backpack from "../addons/tw-remove-backpack/_manifest_entry.js";
 import _tw_disable_cloud_variables from "../addons/tw-disable-cloud-variables/_manifest_entry.js";
+import _animations from "../addons/animations/_manifest_entry.js";
 
 export default {
+  "animations": _animations,
   "cat-blocks": _cat_blocks,
   "editor-devtools": _editor_devtools,
   "find-bar": _find_bar,

src/addons/generated/addon-manifests.js

@@ -12,6 +12,22 @@
     user-select: none;
 }
 
+.no-animation {
+    transition: transform 0s ease !important;
+}
+
+.button {
+    transition: transform 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95);
+}
+
+.button:hover {
+    transform: scale(1.02);
+}
+
+.button:active {
+    transform: scale(0.95);
+}
+
 .icon {
     height: 1.5rem;
 }

src/components/button/button.css

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -13,16 +14,19 @@ const ButtonComponent = ({
     iconHeight,
     onClick,
     children,
+    animPref,
     ...props
 }) => {
-
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (disabled) {
         onClick = function () {};
     }
 
     const icon = iconSrc && (
         <img
-            className={classNames(iconClassName, styles.icon)}
+            className={classNames(iconClassName, styles.icon, {
+                [styles.noAnimation]: animPref == 'none' || prefersReducedMotion
+            })}
             draggable={false}
             src={iconSrc}
             height={iconHeight}
@@ -34,6 +38,7 @@ const ButtonComponent = ({
         <span
             className={classNames(
                 styles.outlinedButton,
+                styles.button,
                 className
             )}
             role="button"
@@ -57,4 +62,12 @@ ButtonComponent.propTypes = {
     onClick: PropTypes.func
 };
 
-export default ButtonComponent;
+const mapStateToProps = (state) => {
+    return {
+        animPref: state.scratchGui.addonUtil.editorAnimPref,
+    };
+};
+
+export default connect(
+    mapStateToProps
+)(ButtonComponent);

src/components/button/button.jsx

@@ -21,7 +21,21 @@
     border-radius: $space;
     text-align: center;
     cursor: pointer;
+    transition: transform 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95), border-color 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95);
 }
+
+.no-animation {
+    transition: transform 0s ease, border-color 0s ease !important;
+}
+
+.library-item:hover {
+    transform: scale(1.02);
+}
+
+.library-item:active {
+    transform: scale(0.98);
+}
+
 [theme="dark"] .library-item {
     background: $ui-primary;
 }

src/components/library-item/library-item.css

@@ -1,5 +1,6 @@
 import {FormattedMessage, intlShape, defineMessages} from 'react-intl';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import React from 'react';
 
 import Box from '../box/box.jsx';
@@ -32,13 +33,15 @@ const getMSFormatted = (ms) => {
 /* eslint-disable react/prefer-stateless-function */
 class LibraryItemComponent extends React.PureComponent {
     render() {
+        const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
         return this.props.featured ? (
             <div
                 className={classNames(
                     styles.libraryItem,
                     styles.featuredItem,
                     {
-                        [styles.disabled]: this.props.disabled
+                        [styles.disabled]: this.props.disabled,
+                        [styles.noAnimation]: this.props.animPref == 'none' || prefersReducedMotion,
                     },
                     typeof this.props.extensionId === 'string' ? styles.libraryItemExtension : null,
                     this.props.hidden ? styles.hidden : null
@@ -483,4 +486,12 @@ LibraryItemComponent.defaultProps = {
     showPlayButton: false
 };
 
-export default LibraryItemComponent;
+const mapStateToProps = (state) => {
+    return {
+        animPref: state.scratchGui.addonUtil.editorAnimPref,
+    };
+};
+
+export default connect(
+    mapStateToProps
+)(LibraryItemComponent);

src/components/library-item/library-item.jsx

@@ -306,6 +306,7 @@ class LibraryComponent extends React.Component {
                 contentLabel={this.props.title}
                 id={this.props.id}
                 onRequestClose={this.handleClose}
+                kind={this.props.kind}
             >
                 {/*
                     todo: translation support?

src/components/library/library.jsx

@@ -13,7 +13,21 @@
     overflow: visible;
     color: $ui-white;
     box-shadow: 0 8px 8px 0 $ui-black-transparent-default;
+    transform-origin: top left;
+    opacity: 0;
+    transform: scale(0.6);
+    transition: opacity 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95), transform 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95);
 }
+
+.no-animation {
+    transition: opacity 0s ease, transform 0s ease !important;
+}
+
+.menu-visible {
+    opacity: 1;
+    transform: scale(1);
+}
+
 [theme="dark"] .menu {
     background-color: $motion-primary-dark;
 }

src/components/menu/menu.css

@@ -1,29 +1,48 @@
 import classNames from 'classnames';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import React from 'react';
-
+import React, {useState, useEffect, useRef} from 'react';
 import styles from './menu.css';
 
+
+
 const MenuComponent = ({
     className = '',
     children,
     componentRef,
+    animPref,
     place = 'right'
-}) => (
-    <ul
-        className={classNames(
-            styles.menu,
-            className,
-            {
-                [styles.left]: place === 'left',
-                [styles.right]: place === 'right'
-            }
-        )}
-        ref={componentRef}
-    >
-        {children}
-    </ul>
-);
+}, props) => {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const animIn = animPref == "none" ? 0 : 0; // ms, you could add a delay but it doesn't feel right
+    const [visible, setVisible] = useState(false); // provides a clear way to check visibility
+    const waitOut = useRef(null);
+
+    useEffect(() => {
+        const waitIn = setTimeout(() => setVisible(true), animIn); 
+        return () => {
+            clearTimeout(waitIn);
+            if (waitOut.current) clearTimeout(waitOut.current);
+        };
+    }, []);
+    return (
+        <ul
+            className={classNames(
+                styles.menu,
+                className,
+                {
+                    [styles.left]: place === 'left',
+                    [styles.right]: place === 'right',
+                    [styles.menuVisible]: visible,
+                    [styles.noAnimation]: animPref == 'none' || prefersReducedMotion
+                }
+            )}
+            ref={componentRef}
+        >
+            {children}
+        </ul>
+    )
+};
 
 MenuComponent.propTypes = {
     children: PropTypes.node,
@@ -77,8 +96,14 @@ MenuSection.propTypes = {
     children: PropTypes.node
 };
 
-export {
-    MenuComponent as default,
-    MenuItem,
-    MenuSection
+export { MenuItem, MenuSection }; 
+
+const mapStateToProps = (state) => {
+    return {
+        animPref: state.scratchGui.addonUtil.editorAnimPref,
+    };
 };
+
+export default connect(
+    mapStateToProps
+)(MenuComponent);

src/components/menu/menu.jsx

@@ -10,7 +10,14 @@
     bottom: 0;
     z-index: $z-index-modal;
     background-color: $ui-modal-overlay;
+    opacity: 0;
+    transition: opacity 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95);
 }
+
+.modal-overlay-visible {
+    opacity: 1;
+}
+
 .scrollable {
     overflow: auto;
 }
@@ -19,6 +26,43 @@
     box-sizing: border-box;
 }
 
+.full-screen {
+    opacity: 0;
+    transform: scale(0);
+    transition: opacity 0.5s cubic-bezier(0.63, 0.32, 0.08, 0.95), transform 0.5s cubic-bezier(0.63, 0.32, 0.08, 0.95);
+    -webkit-perspective: 240px;
+    perspective: 240px;
+}
+
+.modal-container {
+    opacity: 0;
+    transform: scale(0.7) rotateX(-45deg);
+    transition: opacity 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95), transform 0.2s cubic-bezier(0.63, 0.32, 0.08, 0.95);
+    -webkit-perspective: 240px;
+    perspective: 240px;
+    max-width: max(60%, 750px);
+    width: max(60%, 750px);
+}
+
+
+.no-animation {
+    transition: opacity 0s ease, transform 0s ease !important;
+}
+
+.modal-fs-visible {
+    opacity: 1;
+    transform: scale(1) rotateX(0deg);
+}
+
+.modal-visible {
+    opacity: 1;
+    transform: scale(1) rotateX(0deg);
+}
+
+.ext-modal {
+    transform-origin: bottom left;
+}
+
 .modal-content {
     margin: 100px auto;
     outline: none;