@social-mail/social-mail-client 1.5.20 → 1.5.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.5.20",
+  "version": "1.5.21",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/properties/groups/AnimateGroupEditor.tsx

@@ -1,20 +1,23 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import { DropDownProperty, ExpanderPropertyEditor } from "../controls/PropertyEditor";
+import { BindEditor, DropDownProperty, ExpanderPropertyEditor } from "../controls/PropertyEditor";
 import { MultiValueProperty } from "../controls/MultiValueProperty";
+import Bind from "@web-atoms/core/dist/core/Bind";
 
 export default function AnimateGroupEditor() {
     return <ExpanderPropertyEditor label="Animate">
-        <MultiValueProperty
-            label="On Reveal"
-            attributeName="styler-on-reveal"
-            />
-        <DropDownProperty
-            label="Timing"
-            attributeName="styler-animation-timing-function"
-            />
         <DropDownProperty
-            label="Duration"
-            attributeName="styler-animation-duration"
+            label="On Enter"
+            attributeName="styler-on-enter"
             />
+        <div style-display={BindEditor.oneWay((s) => s.selection.element.matches("[styler-on-enter]"))}>
+            <DropDownProperty
+                label="On Enter Timing"
+                attributeName="styler-on-enter-timing-function"
+                />
+            <DropDownProperty
+                label="On Enter Duration"
+                attributeName="styler-on-enter-duration"
+                />
+        </div>
     </ExpanderPropertyEditor>;
 }

package/styler/styles/animations/animations.less

@@ -0,0 +1,89 @@
+@import (reference) "../../ref.less";
+
+@animations: fade-in, fade-out, zoom-in, zoom-out;
+
+each(@animations, .(@s) {
+    [styler-revealed][styler-on-enter=@{s}] {
+        animation-name: @s,
+            var(--styler-on-enter-effect-1, none),
+            var(--styler-on-enter-effect-2, none);
+        animation-duration: var(--styler-on-enter-duration, 1s),
+            var(--styler-on-enter-effect-1-duration, 1s),
+            var(--styler-on-enter-effect-2-duration, 1s);
+        animation-direction: var(--styler-on-enter-direction, unset),
+            var(--styler-on-enter-effect-1-direction, unset),
+            var(--styler-on-enter-effect-2-direction, unset);
+        animation-iteration-count: var(--styler-on-enter-iteration-count, 1),
+            var(--styler-on-enter-effect-1-iteration-count, 1),
+            var(--styler-on-enter-effect-2-iteration-count, 1);
+        animation-timing-function: var(--styler-on-enter-timing-function, ease),
+            var(--styler-on-enter-effect-1-timing-function, ease),
+            var(--styler-on-enter-effect-2-timing-function, ease);
+        animation-delay: var(--styler-on-enter-delay, unset),
+            var(--styler-on-enter-effect-1-delay, unset),
+            var(--styler-on-enter-effect-2-delay, unset);
+    }
+
+    [styler-on-click=@{s}] {
+        animation-name: @s,
+        var(--styler-on-click-effect-1, none),
+        var(--styler-on-click-effect-2, none);
+        animation-duration: var(--styler-on-click-duration, 1s),
+        var(--styler-on-click-effect-1-duration, 1s),
+        var(--styler-on-click-effect-2-duration, 1s);
+        animation-direction: var(--styler-on-click-direction, unset),
+        var(--styler-on-click-effect-1-direction, unset),
+        var(--styler-on-click-effect-2-direction, unset);
+        animation-iteration-count: var(--styler-on-click-iteration-count, 1),
+        var(--styler-on-click-effect-1-iteration-count, 1),
+        var(--styler-on-click-effect-2-iteration-count, 1);
+        animation-timing-function: var(--styler-on-click-timing-function, ease),
+        var(--styler-on-click-effect-1-timing-function, ease),
+        var(--styler-on-click-effect-2-timing-function, ease);
+        animation-delay: var(--styler-on-click-delay, unset),
+        var(--styler-on-click-effect-1-delay, unset),
+        var(--styler-on-click-effect-2-delay, unset);
+    }
+
+    [styler-on-hover=@{s}]:hover {
+        animation-name: @s,
+        var(--styler-on-hover-effect-1, none),
+        var(--styler-on-hover-effect-2, none);
+        animation-duration: var(--styler-on-hover-duration, 1s),
+        var(--styler-on-hover-effect-1-duration, 1s),
+        var(--styler-on-hover-effect-2-duration, 1s);
+        animation-direction: var(--styler-on-hover-direction, unset),
+        var(--styler-on-hover-effect-1-direction, unset),
+        var(--styler-on-hover-effect-2-direction, unset);
+        animation-iteration-count: var(--styler-on-hover-iteration-count, infinite),
+        var(--styler-on-hover-effect-1-iteration-count, infinite),
+        var(--styler-on-hover-effect-2-iteration-count, infinite);
+        animation-timing-function: var(--styler-on-hover-timing-function, ease),
+        var(--styler-on-hover-effect-1-timing-function, ease),
+        var(--styler-on-hover-effect-2-timing-function, ease);
+        animation-delay: var(--styler-on-hover-delay, unset),
+        var(--styler-on-hover-effect-1-delay, unset),
+        var(--styler-on-hover-effect-2-delay, unset);
+    }
+
+    [styler-on-leave=@{s}] {
+        animation-name: @s,
+            var(--styler-on-leave-effect-1, none),
+            var(--styler-on-leave-effect-2, none);
+        animation-duration: var(--styler-on-leave-duration, 1s),
+            var(--styler-on-leave-effect-1-duration, 1s),
+            var(--styler-on-leave-effect-2-duration, 1s);
+        animation-direction: var(--styler-on-leave-direction, unset),
+            var(--styler-on-leave-effect-1-direction, unset),
+            var(--styler-on-leave-effect-2-direction, unset);
+        animation-iteration-count: var(--styler-on-leave-iteration-count, 1),
+            var(--styler-on-leave-effect-1-iteration-count, 1),
+            var(--styler-on-leave-effect-2-iteration-count, 1);
+        animation-timing-function: var(--styler-on-leave-timing-function, ease),
+            var(--styler-on-leave-effect-1-timing-function, ease),
+            var(--styler-on-leave-effect-2-timing-function, ease);
+        animation-delay: var(--styler-on-leave-delay, unset),
+            var(--styler-on-leave-effect-1-delay, unset),
+            var(--styler-on-leave-effect-2-delay, unset);
+        }
+});

package/styler/styles/animations/effects.less

@@ -0,0 +1,13 @@
+@selectors: styler-on-enter-effect-1, styler-on-click-effect-1, styler-on-hover-effect-1,
+styler-on-enter-effect-2, styler-on-click-effect-2, styler-on-hover-effect-2;
+@effects: rotate;
+
+each(@selectors, .(@s) {
+   @n: e('@{s}');
+   each(@effects, .(@v) {
+      @ns: e('@{n}=@{v}');
+      [@{ns}] {
+          --@{n}: @v;
+      }
+    })
+});

package/styler/styles/animations/main-key-frames.less

@@ -0,0 +1,27 @@
+
+@keyframes fade-in {
+    0% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.3;
+    }
+}
+
+@keyframes zoom-in {
+    0% {
+        transform: scale(0.5, 0.5);
+    }
+    100% {
+        transform: scale(1, 1);
+    }
+}

package/styler/styles/animations/properties.less

@@ -0,0 +1,94 @@
+@import (reference) "../ref.less";
+
+@selectors: styler-on-enter, styler-on-click, styler-on-hover, styler-on-leave,
+styler-on-enter-effect-1, styler-on-click-effect-1, styler-on-hover-effect-1,
+styler-on-enter-effect-2, styler-on-click-effect-2, styler-on-hover-effect-2
+;
+
+@animation-duration: inherit, initial, revert, revert-layer, unset,
+        0.1s, 0.2s, 0.3s, 0.4s, 0.5s, 0.6s, 0.7s, 0.8s, 0.9s,
+        1s, 2s, 3s, 4s, 5s, 6s, 7s, 8s, 9s, 10s;
+
+each(@selectors, .(@s) {
+   @n: e('@{s}-duration');
+   [@{n}=custom] {
+      --none: 0;
+   }
+   each(@animation-duration, .(@v) {
+      @ns: e('@{n}=@{v}');
+      [@{ns}] {
+          --@{n}: @v;
+      }
+    })
+});
+
+
+
+@animation-timing-function: inherit, initial, revert, revert-layer, unset,
+    linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end;
+
+each(@selectors, .(@s) {
+    @n: e('@{s}-timing-function');
+    [@{n}=custom] {
+        --none: 0;
+    }
+    each(@animation-timing-function, .(@v) {
+        @ns: e('@{n}=@{v}');
+        [@{ns}] {
+            --@{n}: @v;
+        }
+        })
+    });
+     
+     
+
+@animation-direction : inherit, initial, revert, revert-layer, unset,
+    normal, reverse, alternate, alternate-reverse;
+
+each(@selectors, .(@s) {
+    @n: e('@{s}-direction');
+    [@{n}=custom] {
+        --none: 0;
+    }
+    each(@animation-direction, .(@v) {
+        @ns: e('@{n}=@{v}');
+        [@{ns}] {
+            --@{n}: @v;
+        }
+        })
+    });
+
+@animation-iteration-count : inherit, initial, revert, revert-layer, unset,
+    infinite, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+
+each(@selectors, .(@s) {
+    @n: e('@{s}-iteration-count');
+    [@{n}=custom] {
+        --none: 0;
+    }
+    each(@animation-iteration-count, .(@v) {
+        @ns: e('@{n}=@{v}');
+        [@{ns}] {
+            --@{n}: @v;
+        }
+        })
+    });
+
+@animation-delay: inherit, initial, revert, revert-layer, unset,
+    0,
+    0.1s, 0.2s, 0.3s, 0.4s, 0.5s, 0.6s, 0.7s, 0.8s, 0.9s,
+    1s, 2s, 3s, 4s, 5s, 6s, 7s, 8s, 9s, 10s;
+
+each(@selectors, .(@s) {
+    @n: e('@{s}-delay');
+    [@{n}=custom] {
+        --none: 0;
+    }
+    each(@animation-delay, .(@v) {
+        @ns: e('@{n}=@{v}');
+        [@{ns}] {
+            --@{n}: @v;
+        }
+        })
+    });
+     

package/styler/styles/ref.less

@@ -32,4 +32,21 @@
             }
         });
     })
+}
+
+.each-var(@rules, @prefix: "") {
+    each(@rules .(@rule, @ruleName) {
+        @p1: e(replace(%("styler-%s%s", @prefix, @ruleName),"\@","", "g"));
+        @n1: e(replace(%("--styler-%s%s", @prefix, @ruleName),"\@","", "g"));
+        @sv1: e(replace(%("var(--styler-%s%s)", @prefix, @ruleName),"\@","", "g"));
+        [@{p1}=custom] {
+            @{n1}: @sv1;
+        }
+        each(@rule, .(@value) {
+            @sn1: e(replace(%("%s", @value),"\s","-", "g"));
+            [@{p1}=@{sn1}] {
+                @{n1}:@value;
+            }
+        });
+    })
 }