@social-mail/social-mail-client 1.2.427 → 1.2.428

package/src/site-editor/blocks/Block.tsx

@@ -3,8 +3,7 @@ import type IEditorCommandParameter from "../commands/IEditorCommandParameter";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import type HtmlPageEditor from "../editor/HtmlPageEditor";
 import styled from "@web-atoms/core/dist/style/styled";
-import { StylerSets } from "../styler/StylerSets";
-import { stylerVars } from "../styler/Styler";
+import "./BodyStyles";
 
     styled.css `
         padding: 5px;
@@ -63,335 +62,3 @@ export function Block({
         />;
     };
 }
-
-// register default styles here...
-StylerSets.register("low", styled.css `
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-items: start;
-    padding: ${stylerVars.sizeDefault};
-    margin: ${stylerVars.sizeDefault};
-    gap: ${stylerVars.sizeLarge};
-    --children-width: 100%;
-
-    @media (min-width: 900px) {
-        & {
-            width: 900px;
-            --children-width: 900px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-    }
-
-    @media (min-width: 1200px) {
-        & {
-            width: 1200px;
-            --children-width: 1200px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-    }
-
-    &[styler-full-screen] {
-        width: 100%;
-        max-width: 100%;
-        padding: 0;
-        margin: 0;
-    }
-
-    & > [styler-background-mode=extend] {
-        align-self: center;
-        width: 100vw;
-        padding: 10px calc(50vw - var(--children-width) / 2 + 20px);
-        border-radius: 0;
-    }
-
-    `.expand("[styler-layout=main]")
-);
-
-StylerSets.register("high", styled.css `
-    & [styler-layout] {
-
-        &:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            height: 100%;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-
-        & > *:not([is-web-component]):empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            height: 100%;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-
-        & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
-            &:empty:before {
-                content: "Title";
-            }
-        }
-
-        & marquee-text:empty:before {
-            content: "Marquee Text";
-        }
-
-        & inject {
-            display: flex;
-            flex-direction: column;
-            width: 100vw;
-            padding: 0;
-            margin: 0;
-            align-self: center;
-            align-items: center;
-            justify-content: center;
-
-            & > :not([styler-layout=banner]) {
-                width: var(--children-width, 100%);
-            }
-            & * {
-                user-select: none;
-                pointer-events: none;
-            }
-            &:empty:before {
-                content: "Inject Not Set";
-            }
-
-            & > [styler-background-mode=extend] {
-                align-self: center;
-                width: 100vw;
-                padding: 10px calc(50vw - var(--children-width) / 2 + 20px);
-                border-radius: 0;
-            }
-
-        }
-
-        & video-player {
-            &:empty:before {
-                content: "Video Player";
-            }
-
-        }
-
-        & pdf-flip-book {
-            & * {
-                user-select: none;
-                pointer-events: none;
-            }
-            &:empty:before {
-                content: "PDF Flip Book";
-            }
-        }
-
-        
-    }
-    `.expand("body[editing]"));
-
-const svg = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`;
-
-const svgCross = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6z"/><path class="fa-primary" d=""/></svg>`;
-
-
-StylerSets.register("low", styled.css `
-    display: flex;
-    padding: ${stylerVars.sizeSmall};
-    padding-left: ${stylerVars.sizeLarge};
-    padding-right: ${stylerVars.sizeLarge};
-    margin: ${stylerVars.sizeDefault};
-    position: sticky;
-    top: ${stylerVars.sizeDefault};
-    border-radius: ${stylerVars.sizeLarge};
-    border: solid 1px ${stylerVars.borderColor};
-    background: ${stylerVars.navBarBackground};
-    backdrop-filter: ${stylerVars.navBarBackDropFilter};
-    align-items: center;
-    justify-content: space-between;
-    z-index: 20;
-    & > h1, & > h2, & > h3, & > h5, & > h6 {
-        margin-block-start: 0;
-        margin-block-end: 0;
-        & a {
-            text-decoration: none;
-            color: ${stylerVars.defaultTextColor};
-            &:hover {
-                color: ${stylerVars.accentColor};
-            }
-        }
-    }
-    & > [styler-element=navbar] {
-        display: flex;
-        gap: 5px;
-        position: relative;
-        & > input[type=checkbox][styler-element=drawer] {
-            color: transparent;
-            display: none;
-        }
-        & > nav {
-            display: flex;
-            gap: ${stylerVars.sizeDefault};
-            flex-wrap: wrap;
-        }
-    }
-
-    @media (max-width: 500px) {
-        & > [styler-element=navbar] {
-
-            & > nav {
-                display: none;
-            }
-
-            & > input[type=checkbox][styler-element=drawer] {
-                display: inline-block;
-                background-color: white;
-                background-image: url('data:image/svg+xml,${svg}');
-                background-position: 2px 2px;
-                border-radius: 2px;
-                background-repeat: no-repeat;
-                border-width: 1px;
-                border-style: solid;
-                border-color: transparent;
-                width: 21px;
-                height: 22px;
-                appearance: none;
-                outline: none;
-                &:checked {
-                    background-image: url('data:image/svg+xml,${svgCross}');
-                }
-
-                &:checked ~ nav {
-                    display: flex;
-                    gap: var(--size-default);
-                    flex-direction: column;
-                    position: absolute;
-                    right: 10px;
-                    top: 40px;
-                    background: ${stylerVars.primarySurface};
-                    color: ${stylerVars.primaryAccentText};
-                    padding: var(--size-default);
-                    border-radius: var(--size-default);
-                    box-shadow: 0 0 8px 2px gray;
-                    min-width: 200px;
-                    min-height: 300px;                    
-                }
-            }
-        }
-        
-    }
-    `.expand("[styler-layout=floating-nav-bar]")
-);
-
-StylerSets.register("low", styled.css `
-    display: flex;
-    padding: ${stylerVars.sizeSmall};
-    padding-left: ${stylerVars.sizeLarge};
-    padding-right: ${stylerVars.sizeLarge};
-    border-radius: ${stylerVars.sizeDefault};
-    margin: ${stylerVars.sizeDefault};
-    border-radius: ${stylerVars.sizeLarge};
-    align-items: center;
-    justify-content: space-between;
-    & > h1, & > h2, & > h3, & > h5, & > h6 {
-        margin-block-start: 0;
-        margin-block-end: 0;
-        & a {
-            text-decoration: none;
-            color: ${stylerVars.defaultTextColor};
-            &:hover {
-                color: ${stylerVars.accentColor};
-            }
-        }
-    }
-    `.expand("[styler-layout=nav-bar]")
-);
-
-StylerSets.register("low", styled.css `
-
-    & nav {
-
-        input:not(:checked)+nav menu {
-            position: relative;
-            padding-inline-start: 0;
-            margin: 0;
-            &:not(:hover) > ul:not(:hover) {
-                display: none;
-            }
-
-            & > ul {
-                position: absolute;
-                left: 5px;
-                top: 1ch;
-                background-color: canvas;
-                margin: 10px;
-                border-radius: 5px;
-                border: solid 1px lightgray;
-                padding-inline-start: 0;
-            }
-
-            & li {
-                list-style-type: none;
-
-                padding: 10px;
-                margin: 5px;
-
-                &:hover {
-                    background-color: var(--hover-color);
-                    color: var(--hover-text-color);
-                }
-            }
-        }
-
-        input:checked+nav > menu {
-            position: relative;
-            padding-inline-start: 0;
-            margin: 0;
-
-            & > ul {
-                background-color: canvas;
-                margin: 10px;
-                border-radius: 5px;
-                border: solid 1px lightgray;
-                padding-inline-start: 0;
-            }
-
-            & li {
-                list-style-type: none;
-
-                padding: 10px;
-                margin: 5px;
-
-                &:hover {
-                    background-color: var(--hover-color);
-                    color: var(--hover-text-color);
-                }
-            }
-        }
-
-
-    }
-
-`.expand("[styler-element=navbar]") );

package/src/site-editor/blocks/BodyStyles.tsx

@@ -0,0 +1,337 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { StylerSets } from "../styler/StylerSets";
+import { stylerVars } from "../styler/Styler";
+
+// register default styles here...
+StylerSets.register("low", styled.css `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-items: start;
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    gap: ${stylerVars.sizeLarge};
+    --children-width: 100%;
+
+    @media (min-width: 900px) {
+        & {
+            width: 900px;
+            --children-width: 900px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+    @media (min-width: 1200px) {
+        & {
+            width: 1200px;
+            --children-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+    &[styler-full-screen] {
+        width: 100%;
+        max-width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+
+    & > [styler-background-mode=extend] {
+        align-self: center;
+        width: 100vw;
+        padding: 10px calc(50vw - var(--children-width) / 2 + 20px);
+        border-radius: 0;
+    }
+
+    `.expand("[styler-layout=main]")
+);
+
+StylerSets.register("high", styled.css `
+    & [styler-layout] {
+
+        &:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            height: 100%;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+        }
+
+        & > *:not([is-web-component]):empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            height: 100%;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+        }
+
+        & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
+            &:empty:before {
+                content: "Title";
+            }
+        }
+
+        & marquee-text:empty:before {
+            content: "Marquee Text";
+        }
+
+        & inject {
+            display: flex;
+            flex-direction: column;
+            width: 100vw;
+            padding: 0;
+            margin: 0;
+            align-self: center;
+            align-items: center;
+            justify-content: center;
+
+            & > :not([styler-layout=banner]) {
+                width: var(--children-width, 100%);
+            }
+            & * {
+                user-select: none;
+                pointer-events: none;
+            }
+            &:empty:before {
+                content: "Inject Not Set";
+            }
+
+            & > [styler-background-mode=extend] {
+                align-self: center;
+                width: 100vw;
+                padding: 10px calc(50vw - var(--children-width) / 2 + 20px);
+                border-radius: 0;
+            }
+
+        }
+
+        & video-player {
+            &:empty:before {
+                content: "Video Player";
+            }
+
+        }
+
+        & pdf-flip-book {
+            & * {
+                user-select: none;
+                pointer-events: none;
+            }
+            &:empty:before {
+                content: "PDF Flip Book";
+            }
+        }
+
+        
+    }
+    `.expand("body[editing]"));
+
+
+const svg = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`;
+
+const svgCross = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6z"/><path class="fa-primary" d=""/></svg>`;
+
+
+StylerSets.register("low", styled.css `
+    display: flex;
+    padding: ${stylerVars.sizeSmall};
+    padding-left: ${stylerVars.sizeLarge};
+    padding-right: ${stylerVars.sizeLarge};
+    margin: ${stylerVars.sizeDefault};
+    position: sticky;
+    top: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeLarge};
+    border: solid 1px ${stylerVars.borderColor};
+    background: ${stylerVars.navBarBackground};
+    backdrop-filter: ${stylerVars.navBarBackDropFilter};
+    align-items: center;
+    justify-content: space-between;
+    z-index: 20;
+    & > h1, & > h2, & > h3, & > h5, & > h6 {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        & a {
+            text-decoration: none;
+            color: ${stylerVars.defaultTextColor};
+            &:hover {
+                color: ${stylerVars.accentColor};
+            }
+        }
+    }
+    & > [styler-element=navbar] {
+        display: flex;
+        gap: 5px;
+        position: relative;
+        & > input[type=checkbox][styler-element=drawer] {
+            color: transparent;
+            display: none;
+        }
+        & > nav {
+            display: flex;
+            gap: ${stylerVars.sizeDefault};
+            flex-wrap: wrap;
+        }
+    }
+
+    @media (max-width: 500px) {
+        & > [styler-element=navbar] {
+
+            & > nav {
+                display: none;
+            }
+
+            & > input[type=checkbox][styler-element=drawer] {
+                display: inline-block;
+                background-color: white;
+                background-image: url('data:image/svg+xml,${svg}');
+                background-position: 2px 2px;
+                border-radius: 2px;
+                background-repeat: no-repeat;
+                border-width: 1px;
+                border-style: solid;
+                border-color: transparent;
+                width: 21px;
+                height: 22px;
+                appearance: none;
+                outline: none;
+                &:checked {
+                    background-image: url('data:image/svg+xml,${svgCross}');
+                }
+
+                &:checked ~ nav {
+                    display: flex;
+                    gap: var(--size-default);
+                    flex-direction: column;
+                    position: absolute;
+                    right: 10px;
+                    top: 40px;
+                    background: ${stylerVars.primarySurface};
+                    color: ${stylerVars.primaryAccentText};
+                    padding: var(--size-default);
+                    border-radius: var(--size-default);
+                    box-shadow: 0 0 8px 2px gray;
+                    min-width: 200px;
+                    min-height: 300px;                    
+                }
+            }
+        }
+        
+    }
+    `.expand("[styler-layout=floating-nav-bar]")
+);
+
+StylerSets.register("low", styled.css `
+    display: flex;
+    padding: ${stylerVars.sizeSmall};
+    padding-left: ${stylerVars.sizeLarge};
+    padding-right: ${stylerVars.sizeLarge};
+    border-radius: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeLarge};
+    align-items: center;
+    justify-content: space-between;
+    & > h1, & > h2, & > h3, & > h5, & > h6 {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        & a {
+            text-decoration: none;
+            color: ${stylerVars.defaultTextColor};
+            &:hover {
+                color: ${stylerVars.accentColor};
+            }
+        }
+    }
+    `.expand("[styler-layout=nav-bar]")
+);
+
+
+StylerSets.register("low", styled.css `
+
+    & nav {
+
+        input:not(:checked)+nav menu {
+            position: relative;
+            padding-inline-start: 0;
+            margin: 0;
+            &:not(:hover) > ul:not(:hover) {
+                display: none;
+            }
+
+            & > ul {
+                position: absolute;
+                left: 5px;
+                top: 1ch;
+                background-color: canvas;
+                margin: 10px;
+                border-radius: 5px;
+                border: solid 1px lightgray;
+                padding-inline-start: 0;
+            }
+
+            & li {
+                list-style-type: none;
+
+                padding: 10px;
+                margin: 5px;
+
+                &:hover {
+                    background-color: var(--hover-color);
+                    color: var(--hover-text-color);
+                }
+            }
+        }
+
+        input:checked+nav > menu {
+            position: relative;
+            padding-inline-start: 0;
+            margin: 0;
+
+            & > ul {
+                background-color: canvas;
+                margin: 10px;
+                border-radius: 5px;
+                border: solid 1px lightgray;
+                padding-inline-start: 0;
+            }
+
+            & li {
+                list-style-type: none;
+
+                padding: 10px;
+                margin: 5px;
+
+                &:hover {
+                    background-color: var(--hover-color);
+                    color: var(--hover-text-color);
+                }
+            }
+        }
+
+
+    }
+
+`.expand("[styler-element=navbar]") );

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

@@ -6,7 +6,7 @@ const { properties } = StylerSet.instance;
 
 export default function ImageEditor() {
     return <ExpanderPropertyEditor
-        style-display={BindEditor.oneWay((x) => /^img$/i.test(x.selection.name))}
+        style-display={BindEditor.oneWay((x) => /^(img$|video)/i.test(x.selection.name))}
         label="Image">
         <DropDownProperty
             label="Object Fit"