Merge pull request #118 from mmmmaaaaarrrrrrkkkkkkkk/develop

[URGENT] HUGE fix for Animation addon

Author: Ianyourgod

src/addons/addons/animations/_manifest_entry.js

@@ -1,6 +1,6 @@
 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.",
+  "name": "Reactive",
+  "description": "Adds animations and reactiveness to parts of the editor. (formerly Animation Types)",
   "credits": [
     {
       "name": "Reflow"
@@ -13,7 +13,7 @@ const manifest = {
   ],
   "info": [
     {
-      "text": "If you enabled a reduced motion setting on your device, these settings will not apply.",
+      "text": "If you enabled a reduced motion setting on your device, these settings will not apply. See how to re-enable motion: https://mgik.dev/turn-on-motion",
       "id": "reduced-motion"
     }
   ],

src/addons/modal.js

@@ -9,13 +9,23 @@ export const createEditorModal = (tab, title, {isOpen = false} = {}) => {
         className: tab.scratchClass('modal_modal-overlay'),
         dir: tab.direction
     });
+    setTimeout(() => {
+        container.classList.add(tab.scratchClass('modal_modal-overlay-visible'));
+    });
     container.style.display = isOpen ? '' : 'none';
     document.body.appendChild(container);
+    const modalOuter = Object.assign(document.createElement('div'), {
+        className: tab.scratchClass('modal_modal-container')
+    });
     const modal = Object.assign(document.createElement('div'), {
-        className: tab.scratchClass('modal_modal-content')
+        className: tab.scratchClass('modal_modal-content-addons')
+    });
+    modalOuter.appendChild(modal);
+    setTimeout(() => {
+        modalOuter.classList.add(tab.scratchClass('modal_modal-visible'));
     });
     modal.addEventListener('click', e => e.stopPropagation());
-    container.appendChild(modal);
+    container.appendChild(modalOuter);
     const header = Object.assign(document.createElement('div'), {
         className: tab.scratchClass('modal_header')
     });
@@ -45,7 +55,7 @@ export const createEditorModal = (tab, title, {isOpen = false} = {}) => {
     });
     modal.appendChild(content);
     return {
-        container: modal,
+        container: modalOuter,
         content,
         backdrop: container,
         closeButton,

src/components/icon-button/icon-button.css

@@ -9,6 +9,15 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: $motion-primary;
     border-radius: 0.5rem;
+    transition: transform 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95);
+}
+
+.container:hover {
+    transform: scale(1.06);
+}
+
+.container:active {
+    transform: scale(0.94);
 }
 
 .container + .container {

src/components/modal/modal.css

@@ -76,6 +76,19 @@
     overflow: hidden;
 }
 
+.modal-content-addons {
+    margin: auto auto;
+    outline: none;
+    border: 4px solid $ui-white-transparent;
+    padding: 0;
+    border-radius: $space;
+    user-select: none;
+
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: $text-primary-light;
+    overflow: hidden;
+}
+
 .modal-content.full-screen {
     position: absolute;
 

src/components/sound-editor/sound-editor.css

@@ -86,11 +86,21 @@ $border-radius: 0.25rem;
     transition: 0.2s;
     user-select: none;
     margin: 0px;
+    transition: transform 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95);
 }
 [theme="dark"] .button {
     background-color: $ui-primary;
 }
 
+
+.button:hover {
+    transform: scale(1.02);
+}
+
+.button:active {
+    transform: scale(0.95);
+}
+
 .button > img {
     flex-grow: 1;
     max-width: 100%;

src/containers/sound-editor.jsx

@@ -667,6 +667,10 @@ class SoundEditor extends React.Component {
         const box = document.createElement("div");
         div.append(box);
         box.classList.add(confirmStyles.promptBox);
+        setTimeout(() => {
+            div.classList.add(confirmStyles.baseVisible);
+            box.classList.add(confirmStyles.promptVisible);
+        }, 0);
         box.style.width = `${width}px`;
         box.style.height = `${height}px`;
         const header = document.createElement("div");
@@ -689,12 +693,20 @@ class SoundEditor extends React.Component {
         accept.classList.add(confirmStyles.accept);
         accept.innerHTML = okname ? okname : "OK";
         accept.onclick = () => {
+            div.classList.remove(confirmStyles.baseVisible);
+            box.classList.remove(confirmStyles.promptVisible);
+            setTimeout(() => {
             div.remove();
             if (accepted) accepted();
+            }, 150);
         }
         deny.onclick = () => {
+            div.classList.remove(confirmStyles.baseVisible);
+            box.classList.remove(confirmStyles.promptVisible);
+            setTimeout(() => {
             div.remove();
             if (cancelled) cancelled();
+            }, 150);
         }
         return {
             popup: div,

src/css/confirm-dialog.css

@@ -9,11 +9,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s cubic-bezier(0.63, 0.32, 0.08, 0.95);
 }
 [theme="dark"] .base {
     background-color: #333a;
 }
 
+.baseVisible {
+    opacity: 1;
+}
+
 .promptBox {
     width: 540px;
     height: 380px;
@@ -25,12 +31,22 @@
     overflow: hidden;
     position: relative;
     color: black;
+    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);
 }
 [theme="dark"] .promptBox {
     color: $text-primary;
     background: $ui-primary;
 }
 
+
+.promptVisible {
+    opacity: 1; 
+    transform: scale(1) rotateX(0deg);
+}
+
+
 .header {
     width: 100%;
     height: 3.125em;