@social-mail/social-mail-client 1.2.17 → 1.2.18

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -5,8 +5,6 @@ import sleep from "@web-atoms/core/dist/core/sleep";
 import styled from "@web-atoms/core/dist/style/styled";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import { ImageBlock } from "../blocks/ImageBlock";
 import { InstallDragDropHelper } from "../drag-drop/DragDropHelper";
 import { CodeCommand } from "../commands/CodeCommand";
 import UndoRedoToolbar from "../toolbars/UndoRedoToolbar";
@@ -17,6 +15,15 @@ import { StylerSet } from "../styler/StylerSet";
 import { SelectedElement } from "./SelectedElement";
 import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
 import { StylerVariable } from "../styler/Styler";
+import { ImageBox, RightImageBox } from "../blocks/ImageBox";
+import { RowBox } from "../blocks/RowBox";
+import { ColumnBox, Columns2, Columns3 } from "../blocks/ColumnBox";
+import { VerticalImageBox } from "../blocks/VerticalImageBox";
+import { Image } from "../blocks/Image";
+import { ImageCard } from "../blocks/ImageCard";
+import { TextBox } from "../blocks/TextBox";
+import { Card } from "../blocks/Card";
+import { List } from "../blocks/List";
 
     styled.css `
         display: grid;
@@ -266,8 +273,19 @@ export default class HtmlPageEditor extends AtomControl {
                 </EditorToolbar>
             </div>
             <EditorToolbar data-element="left">
-                <ImageBlock/>
+                <TextBox/>
+                <Image/>
                 <WrapGrid/>
+                <VerticalImageBox/>
+                <ImageBox/>
+                <RightImageBox/>
+                <Card/>
+                <ImageCard/>
+                <RowBox/>
+                <ColumnBox/>
+                <Columns2/>
+                <Columns3/>
+                <List/>
             </EditorToolbar>
             <div data-element="editor"
                 style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>
@@ -339,6 +357,27 @@ export default class HtmlPageEditor extends AtomControl {
         }
     }
 
+    public buildXNode(node: XNode) {
+        const build = (n: XNode) => {
+            const e = this.htmlDocument.createElement(n.name as string);
+            if (n.attributes) {
+                for (const key in n.attributes) {
+                    if (Object.prototype.hasOwnProperty.call(n.attributes, key)) {
+                        const element = n.attributes[key];
+                        e.setAttribute(key, element);
+                    }
+                }
+            }
+            if (n.children) {
+                for (const iterator of n.children) {
+                    e.appendChild(build(iterator));
+                }
+            }
+            return e;
+        };
+        return build(node);
+    }
+
     @Action({ onEvent: "delete-element"})
     async deleteElement() {
         const current = this.selection.element;

package/src/site-editor/editor/WebSitePageEditor.tsx

@@ -23,25 +23,45 @@ export default class WebSitePageEditor extends HtmlPageEditor {
     }
 
     protected async setStylerSheet() {
+
+        const stylerCSS = await this.createFile("styler.css", StylerSet.instance.toString());
+
+        await this.addStyleSheet(stylerCSS);
+
+        let vars = await this.cloudFileService.children(this.folder.appFileID, "styles/vars.css")
+            .firstOrDefault();
+        if (!vars) {
+            vars = await this.createFile("vars.css", `* {
+            }`);
+        }
+        await this.addStyleSheet(vars);
+
+    }
+
+
+    private async addStyleSheet(file: IAppFile) {
         const document = this.htmlDocument;
-        document.querySelector(`style[styler-style-sheet]`)?.remove();
-        let link  = document.querySelector(`link[rel=stylesheet][styler-style]`) as HTMLLinkElement;
-        const css = StylerSet.instance.toString();
-        if (link) {
-            const text = await FetchBuilder.get(link.href).responseAsText(false);
-            if (text === css) {
-                return;
+        const href = `/api/site/asset/download/${this.folder.appFileID}/${file.appFileID}/${file.fileContentID}/${file.name}`;
+        let link: HTMLLinkElement;
+        for (const iterator of Array.from(document.querySelectorAll(`link[rel="stylesheet"][styler-css]`))) {
+            if(iterator.getAttribute("styler-css") === file.name) {
+                link = iterator as HTMLLinkElement;
+                break;
             }
-        } else {
-            link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.setAttribute("styler-style", "ref");
+        }
+        if (!link){
+            link ??= document.createElement("link");
             document.head.appendChild(link);
+            link.rel = "stylesheet";
+            link.setAttribute("styler-css", file.name);
         }
-        const content = new File([css], "styler.css", { type: "text/css" });
+        link.href = href;
+    }
+
+    private async createFile(fileName: string, css: string) {
+        const content = new File([css], fileName, { type: "text/css" });
         const { appFileID } = await this.cloudFileService.saveFile({ parentID: this.folder.appFileID, folder: "styles", content });
         const file = await this.cloudFileService.getFile(appFileID);
-        link.href = `/api/site/asset/download/${this.folder.appFileID}/${file.appFileID}/${file.fileContentID}/${file.name}.css`;
+        return file;
     }
-
 }

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

@@ -9,6 +9,7 @@ export default function LayoutEditor () {
     return <ExpanderPropertyEditor label="Layout">
         <DropDownProperty property={properties.stylerLayout}/>
         <DropDownProperty label="Display" property={properties.stylerDisplay}/>
+        <DropDownProperty label="Color Set" property={properties.stylerColorSets}/>
         <DropDownProperty
             style-display={BindEditor.oneWay((e) => e.selection.currentStyle.display === "flex")}
             label="Direction"

package/src/site-editor/styler/Styler.ts

@@ -102,6 +102,27 @@ export const stylerVars = prepareVariables({
     menuColor: "#F0F0F0",
 
     linkColor: "blue",
+
+    primaryBackground: "#b372dd50",
+    primaryColor: "gray",
+    primaryAccent: "#6145a9c9",
+    primaryAccentText: "white",
+    primarySurface: "#FFFFFFA0",
+    primarySurfaceText: "gray",
+
+    secondaryBackground: "#00808050",
+    secondaryColor: "gray",
+    secondaryAccent: "blue",
+    secondaryAccentText: "white",
+    secondarySurface: "#00A0A080",
+    secondarySurfaceText: "gray",
+
+    tertiaryBackground: "#7b4fc596",
+    tertiaryColor: "gray",
+    tertiaryAccent: "blue",
+    tertiaryAccentText: "white",
+    tertiarySurface: "#0000A080",
+    tertiarySurfaceText: "gray",
 });
 
 export const sizeVarList = [

package/src/site-editor/styler/StylerSet.ts

@@ -1,14 +1,15 @@
 import { StylerVariable, stylerVars } from "./Styler";
 import { stylerBorder } from "./properties/stylerBorder";
-import { stylerDisplay } from "./properties/layout/display";
-import { stylerFlexDirection } from "./properties/layout/flex/flex";
-import { itemPositions } from "./properties/layout/items-position/itemsPosition";
-import { stylerLayout } from "./properties/layout/layout";
+import { stylerDisplay } from "./properties/layouts/display";
+import { stylerFlexDirection } from "./properties/layouts/flex/flex";
+import { itemPositions } from "./properties/layouts/items-position/itemsPosition";
+import { stylerLayout } from "./properties/layouts/layout";
 import { stylerPosition } from "./properties/stylerPosition";
 import { stylerSizes } from "./properties/stylerSizes";
 import { stylerSpace } from "./properties/stylerSpace";
 import { stylerText } from "./properties/text/stylerText";
 import { stylerBackground } from "./properties/stylerBackground";
+import { stylerColorSets } from "./properties/color-sets/stylerColorSets";
 
 const vars = [];
 for (const key in stylerVars) {
@@ -26,6 +27,7 @@ export class StylerSet {
 
     properties = {
         stylerLayout,
+        stylerColorSets,
         stylerDisplay,
         stylerFlexDirection,
         ... stylerBorder,

package/src/site-editor/styler/properties/color-sets/stylerColorSets.ts

@@ -0,0 +1,50 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { StylerProperty, stylerVars } from "../../Styler";
+
+export const stylerColorSets =  StylerProperty.create( "styler-colors", {
+
+    "primary": styled.css `
+        background-color: ${stylerVars.primaryBackground};
+        color: ${stylerVars.primaryColor};
+
+        & [styler-element=accent] {
+            background-color: ${stylerVars.primaryAccent};
+            color: ${stylerVars.primaryAccentText};
+        }
+
+        & [styler-element=surface] {
+            background-color: ${stylerVars.primarySurface};
+            color: ${stylerVars.primarySurfaceText};
+        }
+    `,
+
+    "secondary": styled.css `
+        background-color: ${stylerVars.secondaryBackground};
+        color: ${stylerVars.secondaryColor};
+
+        & [styler-element=accent] {
+            background-color: ${stylerVars.secondaryAccent};
+            color: ${stylerVars.secondaryAccentText};
+        }
+
+        & [styler-element=surface] {
+            background-color: ${stylerVars.secondarySurface};
+            color: ${stylerVars.secondarySurfaceText};
+        }
+    `,
+
+    "tertiary": styled.css `
+        background-color: ${stylerVars.tertiaryBackground};
+        color: ${stylerVars.tertiaryColor};
+
+        & [styler-element=accent] {
+            background-color: ${stylerVars.tertiaryAccent};
+            color: ${stylerVars.tertiaryAccentText};
+        }
+
+        & [styler-element=surface] {
+            background-color: ${stylerVars.tertiarySurface};
+            color: ${stylerVars.tertiarySurfaceText};
+        }
+    `
+});

package/src/site-editor/styler/properties/layouts/blocks/layoutBlock.ts

@@ -0,0 +1,10 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutBox: any = {
+    "block": styled.css `
+        display: block;
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+    `,
+};

package/src/site-editor/styler/properties/layouts/blocks/layoutCard.ts

@@ -0,0 +1,70 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutCard: any = {
+    "card": styled.css `
+        display: grid;
+        margin: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+        justify-items: stretch;
+        align-items: stretch;
+        contain: content;
+
+        & > h4 {
+            max-width: 100%;
+            padding: ${stylerVars.sizeDefault};
+            grid-column: 1;
+            grid-row: 1;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        & > section {
+            max-width: 100%;
+            margin: ${stylerVars.sizeDefault};
+            padding: ${stylerVars.sizeDefault};
+            border-radius: ${stylerVars.sizeDefault};
+            grid-column: 1;
+            grid-row: 3;
+        }
+
+        & > section:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+        }
+        & > h4:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Title";
+        }
+    `
+};

package/src/site-editor/styler/properties/layouts/blocks/layoutColumn.ts

@@ -0,0 +1,38 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutColumn: any = {
+    "column": styled.css `
+        display: flex;
+        flex-direction: column;
+        gap: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        justify-items: center;
+        align-items: stretch;
+
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 100%;
+        }
+
+        & > *:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+        }
+    `,
+};

package/src/site-editor/styler/properties/layouts/blocks/layoutColumn2Box.ts

@@ -0,0 +1,46 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutColumn2Box: any = {
+    "columns-2": styled.css `
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        gap: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        justify-items: center;
+        align-items: stretch;
+        contain: content;
+
+        @media (min-width: 600px) { 
+            & {
+                flex-direction: row;
+                flex-wrap: nowrap;
+            }
+            & > * {
+                width: 50%;
+                max-width: 50%;
+            }
+        }
+        & > *:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+
+        }
+
+`,
+};

package/src/site-editor/styler/properties/layouts/blocks/layoutColumn3Box.ts

@@ -0,0 +1,46 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutColumn3Box: any = {
+    "columns-3": styled.css `
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        gap: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        justify-items: center;
+        align-items: stretch;
+        contain: content;
+
+        @media (min-width: 600px) { 
+            & {
+                flex-direction: row;
+                flex-wrap: nowrap;
+            }
+            & > * {
+                width: 33%;
+                max-width: 33%;
+            }
+        }
+        & > *:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+
+        }
+    
+    `,
+};

package/src/site-editor/styler/properties/{layout/layout.ts → layouts/blocks/layoutFloatingNavBar.ts}

@@ -1,84 +1,25 @@
 import styled from "@web-atoms/core/dist/style/styled";
-import IStylerPair from "../../IStylerPair";
-import { StylerProperty, stylerVars } from "../../Styler";
+import { stylerVars } from "../../../Styler";
 
 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>`;
 
-export const stylerLayout = StylerProperty.create( "styler-layout", {
-    "wrap-list": styled.css `
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        &:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-    `,
-
-    "column": styled.css `
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-    `,
-
-    "row": styled.css `
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-    `,
 
-    "block": styled.css `
-        display: block;
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-    `,
-    "nav-bar": styled.css `
-        display: flex;
-        padding: ${stylerVars.sizeSmall};
-        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;
-        }
-    `,
+export const layoutFloatingNavBar: any = {
 
     "floating-nav-bar": 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};
         align-items: center;
         justify-content: space-between;
+        z-index: 20;
         & > h1, & > h2, & > h3, & > h5, & > h6 {
             margin-block-start: 0;
             margin-block-end: 0;
@@ -134,4 +75,4 @@ export const stylerLayout = StylerProperty.create( "styler-layout", {
             
         }
     `,
-});
+};

package/src/site-editor/styler/properties/layouts/blocks/layoutImageBlock.ts

@@ -0,0 +1,44 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutImageBlock: any = {
+    "image-block": styled.css `
+        display: flex;
+        flex-direction: row;
+        gap: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        justify-items: center;
+        align-items: stretch;
+        contain: content;
+
+        & > img {
+            align-self: center;
+        }
+
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 100%;
+        }
+
+        & > *:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+        }
+    `,
+};

package/src/site-editor/styler/properties/layouts/blocks/layoutImageBox.ts

@@ -0,0 +1,51 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutImageBox: any = {
+    "image-box": styled.css `
+        display: flex;
+        flex-direction: column;
+        gap: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        justify-items: center;
+        align-items: stretch;
+        contain: content;
+
+        @media (min-width: 600px) { 
+            & {
+                flex-direction: row;
+            }
+        }
+
+        & > img {
+            align-self: center;
+        }
+
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 100%;
+            max-width: 50%;
+        }
+
+        & > *:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+        }
+    `,
+};