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

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;
@@ -51,6 +58,7 @@ import { StylerVariable } from "../styler/Styler";
             grid-column: 3;
             border-left: solid 1px lightgray;
             border-radius: 0;
+            overflow: auto;
         }
 
         & > [data-element=editor] {
@@ -214,6 +222,25 @@ export default class HtmlPageEditor extends AtomControl {
                 this.hover.update(target);
             }, { capture: true });
 
+            this.htmlDocument.addEventListener("keydown", (e) => {
+                if(e.ctrlKey || e.metaKey) {
+                    switch(e.key) {
+                        case "s":
+                            this.contentEditor.dispatchEvent(new CustomEvent("savePage", { bubbles: true }));
+                            e.preventDefault();
+                            break;
+                        case "z":
+                            this.contentEditor.dispatchEvent(new CustomEvent("undo", { bubbles: true }));
+                            e.preventDefault();
+                            break;
+                        case "y":
+                            this.contentEditor.dispatchEvent(new CustomEvent("redo", { bubbles: true }));
+                            e.preventDefault();
+                            break;
+                    }
+                }
+            });
+
             InstallDragDropHelper(this);
 
             this.htmlDocument.close();
@@ -266,8 +293,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 +377,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;
@@ -366,6 +425,22 @@ export default class HtmlPageEditor extends AtomControl {
         return this.insertImage(prompt("Image Src", ""));
     }
 
+    @Action({ onEvent: "keyup"})
+    onKeyUp(d, ke: KeyboardEvent) {
+        if (ke.ctrlKey) {
+            switch(ke.key) {
+                case "z":
+                    ke.preventDefault();
+                    this.undo();
+                    break;
+                case "y":
+                    ke.preventDefault();
+                    this.redo();
+                    break;
+            }
+        }
+    }
+
     async insertImage(src: string, style?: { [key: string]: string}) {
         let img: HTMLImageElement;
         if(this.selection.isImage) {
@@ -447,6 +522,18 @@ export default class HtmlPageEditor extends AtomControl {
         }, 100);
     }
 
+    @Action({ onEvent: "undo"})
+    undo() {
+        this.redoList.insert(this.redoList.length, this.htmlDocument.documentElement.innerHTML);
+        this.htmlDocument.documentElement.innerHTML = this.undoList.removeAt(this.undoList.length-1);
+    }
+
+    @Action({ onEvent: "redo"})
+    redo() {
+        this.undoList.insert(this.undoList.length, this.htmlDocument.documentElement.innerHTML);
+        this.htmlDocument.documentElement.innerHTML = this.redoList.removeAt(this.redoList.length-1);
+    }
+
     protected async setStylerSheet() {
         const document = this.htmlDocument;
         let style = document.querySelector(`[styler-style-sheet]`);

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/controls/PropertyEditor.tsx

@@ -26,26 +26,56 @@ export const BindStyleCustom = AtomControl.registerProperty("data-style-property
     styled.css `
 
     display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    justify-items: stretch;
+    align-items: center;
     column-gap: 5px;
+    max-width: 200px;
+    & > * {
+        width: 100%;
+    }
     & > label {
         grid-row: 1;
         grid-column: 1;
     }
 
     & > [data-element=editor] {
-        grid-row: 1;
-        grid-column: 2;
+        grid-row: 2;
+        grid-column: 1;
     }
 
     & > [data-element=custom] {
-        grid-row: 2;
-        grid-column: 1 / span 2;
+        grid-row: 3;
+        grid-column: 1;
+    }
+
+    & select {
+        outline: none;
+        border: none;
+        background-color: #e7e7e775;
+        border-radius: 9999px;
+        padding-left: 10px;
+        padding-right: 10px;
     }
 
     `.installGlobal("[data-element=property-editor]");
 
+
+    styled.css `
+    
+        & select {
+            outline: none;
+            border: none;
+            background-color: #e7e7e775;
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+
+    `.installGlobal("[data-element=expander-property-editor]")
+
 function PropertyEditor({ label = void 0, custom = void 0, ... a }, ... nodes: XNode[]) {
     if (!label && nodes.length === 1) {
         return nodes[0];
@@ -70,7 +100,9 @@ export function ExpanderPropertyEditor({
     const child = nodes.length > 1
         ? <div data-layout="vertical-flex-stretch-items">{ ... nodes }</div>
         : nodes[0];
-    return <Expander isExpanded={isExpanded}
+    return <Expander
+        data-element="expander-property-editor"
+        isExpanded={isExpanded}
         { ... a}>
         { label && <label>{label}</label>}
         { child }

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: "#318984a8",
+    secondaryAccentText: "white",
+    secondarySurface: "#FFFFFFA0",
+    secondarySurfaceText: "gray",
+
+    tertiaryBackground: "#cfa55c87",
+    tertiaryColor: "gray",
+    tertiaryAccent: "#e17b42cf",
+    tertiaryAccentText: "white",
+    tertiarySurface: "#FFFFFFA0",
+    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";
+
+        }
+    
+    `,
+};