@social-mail/social-mail-client 1.8.407 → 1.8.411

package/src/site-editor-app/pages/websites/studio/layers/StudioLayers.tsx

@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-namespace */
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+/**
+ * Todo:
+ * https://zumerlab.github.io/snapdom/
+ */
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "studio-layers": any;
+            "layer-item": any;
+            "layer-children": any;
+        }
+    }
+
+    interface HTMLElement {
+        scrollIntoViewIfNeeded(...a: any[]);
+    }
+}
+
+const editorElement = Symbol("editorElement");
+const treeElement = Symbol("treeElement");
+
+import "./StudioLayers.global.css";
+import HtmlPageEditor from "../../../../../site-editor/editor/HtmlPageEditor";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import TreeElement from "./TreeElement";
+import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import sleep from "@web-atoms/core/dist/core/sleep";
+
+import eye from "@social-mail/social-mail-client/content/svg/eye.svg";
+import eyeSlash from "@social-mail/social-mail-client/content/svg/eye-slash.svg";
+
+export default class StudioLayers extends AtomControl {
+
+    treeElementType = TreeElement;
+
+    editor: HtmlPageEditor;
+
+    root: TreeElement;
+
+    ownerDocument: Document;
+
+    observer: MutationObserver;
+
+    constructor(app, e = document.createElement("studio-layers")) {
+        super(app, e);
+        this.pushInit();
+    }
+
+    async init() {
+        this.renderer = <div
+            update-me={Bind.oneWay(() => this.updateMe(this.editor.selection.element))}
+            >
+            </div>;
+
+        this.registerDisposable({
+            dispose: () => {
+                this.observer?.disconnect();
+                this.observer = void 0;
+            }
+        });
+
+        await sleep(100);
+
+        if (this.editor?.selection?.element) {
+            this.updateMe(this.editor.selection.element);
+        }
+    }
+
+    updateMe(e: HTMLElement) {
+
+        this.observer?.disconnect();
+        this.observer = void 0;
+
+
+        if (this.ownerDocument !== e.ownerDocument) {
+            this.editor.undoRedo.documentObserver.length = 0;
+            this.ownerDocument = e.ownerDocument;
+            // reset everything...
+            this.root?.remove();
+            this.root = document.createElement("tree-element") as TreeElement;
+            this.syncItems(this.root, e.ownerDocument.body.firstElementChild as HTMLElement);
+            this.element.append(this.root);
+            this.editor.undoRedo.documentObserver.push((x) => this.observe(x));
+        }
+
+        // we should sync items only on node changes...
+        this.root.selectedElement = e[treeElement];
+    }
+
+    observe(x: MutationRecord) {
+
+        if(x.type !== "childList") {
+            const { target } = x;
+            const t = target[treeElement];
+            if (t) {
+                this.updateProperties(t, target as HTMLElement);
+            }
+            return;
+        }
+
+        const { addedNodes, removedNodes, nextSibling, previousSibling } = x;
+
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let index = 0; index < addedNodes.length; index++) {
+            const added = addedNodes[index];
+            if (added.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+            const newItem = document.createElement("tree-element") as TreeElement;
+            this.syncItems(newItem, added as HTMLElement);
+            if (previousSibling) {
+                const pSibling  = previousSibling[treeElement] as TreeElement;
+                pSibling.insertAdjacentElement("afterend", newItem);
+            } else if (nextSibling) {
+                const nSibling  = nextSibling[treeElement] as TreeElement;
+                nSibling.insertAdjacentElement("beforebegin", newItem);
+            } else {
+                const p = added.parentElement[treeElement] as TreeElement;
+                p?.insertAdjacentElement("afterbegin", newItem);
+            }
+        }
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let index = 0; index < removedNodes.length; index++) {
+            const element = removedNodes[index];
+            if (element.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+            const t = element[treeElement] as TreeElement;
+            t?.remove();
+        }
+    }
+
+    syncItems(root: TreeElement, e: HTMLElement) {
+        root[editorElement] = e;
+        root.innerHTML = "";
+        e[treeElement] = root;
+        this.updateProperties(root, e);
+
+        for (const child of ChildEnumerator.enumerate(e)) {
+            const node = document.createElement("tree-element") as TreeElement;
+            this.syncItems(node, child);
+            root.append(node);
+        }
+    }
+
+    updateProperties(root: TreeElement, e: HTMLElement) {
+        const { name, fullName } = this.getName(e);
+        root.setAttribute("label", name);
+        root.setAttribute("title", fullName);
+
+        if (e.getAttribute("styler-invisible")) {
+            root.setAttribute("actions", `<img data-click-event="show-element" src="${eyeSlash}" title="Show" />`);
+        } else {
+            root.setAttribute("actions", `<img data-click-event="hide-element" src="${eye}" title="Hide" />`);
+        }
+    }
+
+    getName(start: HTMLElement) {
+        const typeName = start.className || start.getAttribute("styler-layout");
+        const name = typeName ? start.tagName + "(" + (typeName.length > 25 ? typeName.substring(0, 25) : typeName) + ")" : start.tagName;
+        const fullName = typeName ? start.tagName + "(" + typeName + ")" : start.tagName;
+        return { name, fullName };
+    }
+
+
+    @Action({ onEvent: "treeElementAction"})
+    onElementAction(d, e) {
+        const { target, detail } = e;
+        const te = target as TreeElement;
+        const element = te[editorElement];
+        const clickEvent = detail.getAttribute("data-click-event");
+        switch(clickEvent) {
+            case "hide-element":
+                element.setAttribute("styler-invisible", "true");
+                break;
+            case "show-element":
+                element.removeAttribute("styler-invisible");
+                break;
+        }
+    }
+
+    @Action({ onEvent: "treeElementHover"})
+    onElementHover(d, e) {
+        const target = e.target as TreeElement;
+        const ee = target[editorElement];
+        if (!ee) {
+            return;
+        }
+        this.editor.hover.update(ee);
+    }
+
+    @Action({ onEvent: "treeElementSelected"})
+    onElementSelected(d, e) {
+        const target = e.target as TreeElement;
+        const ee = target[editorElement] as HTMLElement;
+        if (!ee) {
+            return;
+        }
+        if (ee === this.editor.selection.element) {
+            return;
+        }
+        this.editor.selection.update(ee);
+        if (ee.scrollIntoViewIfNeeded) {
+            ee.scrollIntoViewIfNeeded();
+        } else {
+            ee.scrollIntoView({ behavior: "smooth" });
+        }
+    }
+
+
+}

package/src/site-editor-app/pages/websites/studio/layers/TreeElement.global.css

@@ -0,0 +1,85 @@
+tree-element {
+    display: grid;
+    grid-template-columns: auto auto auto 1fr auto;
+    grid-template-rows: auto 1fr;
+    width: 100%;
+    &[hover] {
+        &::part(bg) {
+            background-color: var(--hover-color, #c0c0c055);
+        }
+        &::part(actions) {
+            display: flex;
+        }
+    }
+    &[selected] {
+        &::part(actions) {
+            display: flex;
+        }
+        &::part(bg) {
+            background-color: var(--selection-color, highlight);
+        }        
+        &::part(icon),&::part(label) {
+            color: var(--selection-color-text, inherit);
+        }        
+    }
+    &::part(spacer) {
+        grid-row: 1;
+        grid-column: 1;
+        cursor: pointer;
+    }
+    &::part(bg) {
+        grid-row: 1;
+        grid-column: 1 / span 5;
+    }
+    &::part(label) {
+        grid-row: 1;
+        grid-column: 4;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: smaller;
+        text-transform: lowercase;
+        cursor: pointer;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+    &::part(actions) {
+        grid-row: 1;
+        grid-column: 5;
+        display: none;
+        flex-direction: row;
+        align-items: center;
+    }
+    &::part(action-item) {
+        height: 16px;
+        padding-right: 2px;
+        cursor: pointer;
+    }
+    &::part(icon) {
+        grid-row: 1;
+        grid-column: 3;
+        cursor: pointer;
+    }
+    &::part(check) {
+        grid-row: 1;
+        grid-column: 2;
+        appearance: none;
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        cursor: pointer;
+        background-image: url("../../../../../../content/svg/angle-right.svg");
+        background-size: 100% 100%;
+        &:checked {
+            background-image: url("../../../../../../content/svg/angle-down.svg");
+            background-size: 100% 100%;
+        }
+    }
+    &::part(container) {
+        grid-row: 2;
+        grid-column: 1 / span 5;
+        display: flex;
+        gap: 0;
+        flex-direction: column;
+    }
+}

package/src/site-editor-app/pages/websites/studio/layers/TreeElement.tsx

@@ -0,0 +1,202 @@
+import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
+
+import "./TreeElement.global.css";
+
+const onTreeElementClick = (e: MouseEvent) => {
+    const target = e.target as TreeElement;
+    const root = target?.treeRoot;
+    if (!root) {
+        return;
+    }
+    root.selectedElement = root;
+};
+
+const onTreeActionClick = (e: MouseEvent) => {
+    const target = e.target as TreeElement;
+    const root = target?.treeRoot;
+    if (!root) {
+        return;
+    }
+    root.dispatchEvent(new CustomEvent("treeElementAction", {
+        bubbles: true,
+        detail: target
+    }));
+};
+
+const selectedElementSymbol = Symbol("selectedElement");
+
+export default class TreeElement extends HTMLElement {
+
+    static observedAttributes = ["label", "icon", "spacing", "actions"];
+
+    root: ShadowRoot;
+    labelElement: HTMLSpanElement;
+    check: HTMLInputElement;
+    spacer: HTMLDivElement;
+    actions: HTMLElement;
+
+    get spacing() {
+        const parent = this.parentElement as TreeElement;
+        if (/tree-element/i.test(parent.tagName)) {
+            return parent.spacing + 5;
+        }
+        return 5;
+    }
+
+    get selectedElement() {
+        const root = this.treeRoot;
+        if (!root) {
+            return void 0;
+        }
+        return root[selectedElementSymbol];
+    }
+
+    set selectedElement(v: TreeElement) {
+        if (v && !(v instanceof TreeElement)) {
+            return;
+        }
+        const root = this.treeRoot;
+        if(!root) {
+            return;
+        }
+        const old = root[selectedElementSymbol] as TreeElement;
+        if (old === v) {
+            return;
+        }
+        old?.removeAttribute("selected");
+        v?.setAttribute("selected", "1");
+        root[selectedElementSymbol] = v;
+
+        let start = v;
+        if (!v) {
+            return;
+        }
+
+        // open all root...
+        while(start?.check) {
+            start.check.checked = true;
+            start.updateSelection(true);
+            start = start.parentElement as TreeElement;
+        }
+
+        v.dispatchEvent(new CustomEvent("treeElementSelected", {
+            bubbles: true
+        }));
+    }
+
+    get treeRoot() {
+        let start = this as TreeElement;
+        while(/tree-element/i.test(start.parentElement?.tagName)) {
+            start = start.parentElement as TreeElement;
+        }
+        return start;
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch(name) {
+            case "label":
+                if (this.labelElement) {
+                    this.labelElement.textContent = newValue;
+                }
+                break;
+            case "icon":
+                break;
+            case "actions":
+                if (this.actions) {
+                    this.setActions(newValue);
+                }
+                break;
+        }
+    }
+    setActions(newValue) {
+        this.actions.innerHTML = newValue;
+        for (const e of ChildEnumerator.enumerate(this.actions)) {
+            e.setAttribute("part", "action-item");
+            // @ts-expect-error non existent
+            e.treeRoot = this;
+        }
+    }
+
+    connectedCallback() {
+        this.root = this.attachShadow({ mode:"open"});
+        const spacer = document.createElement("div");
+        spacer.setAttribute("part", "spacer");
+        this.spacer = spacer;
+        this.root.appendChild(spacer);
+        const bg = document.createElement("div");
+        bg.setAttribute("part", "bg");
+        this.root.appendChild(bg);
+        const label = document.createElement("span");
+        label.setAttribute("part", "label");
+        // @ts-expect-error non existent
+        label.treeRoot = this;
+        this.labelElement = label;
+        const text = this.getAttribute("label");
+        if (text) {
+            label.textContent = text;
+        }
+        this.root.appendChild(label);
+        const check = document.createElement("input");
+        check.setAttribute("part", "check");
+        check.setAttribute("type", "checkbox");
+        this.check = check;
+        this.root.appendChild(check);
+
+        const actions= document.createElement("div");
+        actions.setAttribute("part", "actions");
+        this.actions = actions;
+        // @ts-expect-error non existent
+        actions.treeRoot = this;
+        actions.onclick = onTreeActionClick;
+        const a = this.getAttribute("actions");
+        this.root.appendChild(actions);
+        if (a) {
+            this.setActions(a);
+        }
+
+        label.onclick = onTreeElementClick;
+
+        label.onpointerenter = () => {
+            this.setAttribute("hover", "1");
+            this.dispatchEvent(new CustomEvent("treeElementHover", { bubbles: true }));
+        };
+        label.onpointerleave = () => this.removeAttribute("hover");
+
+        const container = document.createElement("slot");
+        container.setAttribute("name", "container");
+        container.setAttribute("part", "container");
+        this.root.appendChild(container);
+
+        check.oninput = (e) => this.updateSelection(e.target !== check);
+
+        // update parent...
+        const parent = this.parentElement as TreeElement;
+        if (parent.check) {
+            if(parent.check.checked) {
+                this.slot = "container";
+                this.spacer.style.width = parent.spacing + "px";
+            }
+        }
+    }
+
+    updateSelection(checkOnly = false) {
+        const { check } = this;
+        if (check.checked) {
+            // show all elements....
+            const spacing = this.spacing + "px";
+            for (const element of ChildEnumerator.enumerate(this)) {
+                element.slot = "container";
+                (element as TreeElement).spacer.style.width = spacing;
+            }
+        } else {
+            if(checkOnly) {
+                return;
+            }
+            for (const element of ChildEnumerator.enumerate(this)) {
+                element.slot = "container1";
+            }
+        }
+    }
+}
+
+customElements.define("tree-element", TreeElement);

package/src/site-editor-app/pages/websites/studio/tool-bar/StudioToolBar.global.css

@@ -0,0 +1,60 @@
+studio-tool-bar {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
+    gap: 0;
+    overflow: hidden;
+    & > button-bar {
+        grid-row: 1;
+        grid-column: 1;
+        border: none;
+        border-right: solid 1px lightgray;
+        border-radius: 0;
+        height: 100%;
+
+        width: 50px;
+
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        gap: 10px;
+
+        & > label {
+            padding: 5px;
+            justify-content: center;
+        }
+
+        & input[type=radio] {
+            position: absolute;
+            left: -10px;
+            top: -10px;
+        }
+
+        & [data-element=header] {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr auto;
+            justify-content: center;
+            align-items: center;
+            justify-items: center;
+            align-content: center;
+            & > i {
+                grid-column: 1;
+                grid-row: 1;
+                font-size: 25px;
+            }
+            & > span {
+                grid-column: 1;
+                grid-row: 2;
+                font-size: smaller;
+            }
+        }
+    }
+    & > [data-element=container] {
+        grid-row: 1;
+        grid-column: 2;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}

package/src/site-editor-app/pages/websites/studio/tool-bar/StudioToolBar.tsx

@@ -0,0 +1,79 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import ButtonBar from "@web-atoms/web-controls/dist/basic/ButtonBar";
+import Defer from "@web-atoms/core/dist/core/Defer";
+
+import "./StudioToolBar.global.css";
+
+export default class StudioToolBar extends AtomControl {
+
+    static page(a: { id, title, body: XNode, className, header?: never } | { id, title?: never, header: XNode, body: XNode, className?: never }) {
+        a.header ??= <div data-element="header">
+            <i class={a.className}/>
+            <span text={a.title}/>
+        </div>;
+        (a.header.attributes ??= {})["data-element"] = "header";
+        return a;
+    }
+
+    container: HTMLElement;
+
+    search = "";
+
+    root = null;
+
+    pages = [] as { id, title, body }[];
+
+    selectedItem = void 0;
+
+    constructor(app, e = document.createElement("studio-tool-bar")) {
+        super(app, e);
+        this.pushInit();
+    }
+
+    async init() {
+
+        this.selectedItem ??= this.pages[1].id;
+
+        this.renderer = <div>
+            <ButtonBar
+                items={this.pages}
+                itemRenderer={(x) => x.header}
+                valuePath={(x) => x.id}
+                value={Bind.twoWaysImmediate(() => this.selectedItem)}
+                event-input={() => this.updateSelected()}
+                />
+            <div data-element="container"></div>
+        </div>;
+
+        this.container = this.element.querySelector(`[data-element="container"]`) as HTMLElement;
+        this.updateSelected();
+    }
+
+    @Defer(10)
+    updateSelected() {
+
+        this.dispose(this.container);
+        this.container.innerHTML = "";
+
+        const parent = this.parent;
+        const selected = this.pages.find((x) => x.id === this.selectedItem);
+        // @ts-expect-error private
+        parent.render( <div>{selected.body}</div>, this.container, parent);
+    }
+}
+
+// export default function Tools({ folder }) {
+
+//     const model = { search: ""};
+
+//     return <section class="site-editor-tools-tools">
+//         <search>
+//             <input type="search" value={Bind.sourceTwoWays(model, (x) => x.source.search)}/>
+//         </search>
+//         <BasicShapes/>
+//         <Designs/>
+//         {/* <SiteFiles root={folder}/> */}
+//     </section>;
+// }

package/src/web/page/mails/service/ConversationService.tsx

@@ -195,7 +195,7 @@ export const renderMailPromise = AtomControl.registerProperty<{ thread?: IMailbo
 
     setTimeout(() => {
         if(msg.scrollWidth > msg.offsetWidth) {
-            msg.style.scale = (msg.offsetWidth / msg.scrollWidth) + "";
+            msg.style.scale = Math.max(0.5, msg.offsetWidth / msg.scrollWidth) + "";
             msg.style.transformOrigin = "top left";
         }
     }, 100);

package/src/web/page/mails/service/MsgStyle.global.css

@@ -14,5 +14,9 @@ msg-root {
         flex-direction: column;
         word-break: break-word;
         max-width: 80ch;
+        & * {
+            max-width: 80ch;
+            word-break: break-word;
+        }
     }
 }

package/dist/site-editor/editor/BreadCrum.d.ts

@@ -1,13 +0,0 @@
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "bread-crum": any;
-        }
-    }
-}
-import "./BreadCrum.global.css";
-export default function BreadCrum({ selection, ...a }: {
-    [x: string]: any;
-    selection: any;
-}): any;
-//# sourceMappingURL=BreadCrum.d.ts.map

package/dist/site-editor/editor/BreadCrum.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreadCrum.d.ts","sourceRoot":"","sources":["../../../src/site-editor/editor/BreadCrum.tsx"],"names":[],"mappings":"AAOA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,GAAG,CAAC;QACV,UAAU,iBAAiB;YACvB,YAAY,EAAE,GAAG,CAAC;SACrB;KACJ;CACJ;AAED,OAAO,wBAAwB,CAAC;AAqGhC,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,EAC/B,SAAS,EACT,GAAI,CAAC,EACR;;;CAAA,OAWA"}

package/dist/site-editor/editor/BreadCrum.global.css

@@ -1,2 +0,0 @@
-bread-crum{background-color:#fff;border-top:1px solid #d3d3d3;display:flex;flex-direction:row;flex-wrap:nowrap;font-size:smaller;gap:0;position:relative}bread-crum>button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:2px 0;text-transform:lowercase}bread-crum>button:hover{background-color:#d3d3d3}bread-crum>button:not(:first-child):before{content:">";display:inline-block;padding-left:5px;padding-right:5px}bread-crum>i{cursor:pointer;padding:2px 5px;position:relative}bread-crum>i:hover{background-color:#d3d3d3}bread-crum>i>popup-menu{align-items:flex-start;background-color:canvas;border:none;border-radius:10px;bottom:1.3rem;box-shadow:0 0 2px 1px gray;cursor:pointer;display:flex;flex-direction:column;font-family:var(--body-font-family);gap:10px;left:0;min-width:100px;outline:none;padding:10px;position:absolute;z-index:200}bread-crum>i>popup-menu>*{text-transform:lowercase}bread-crum>i>popup-menu>[is-invisible]{text-decoration:line-through}bread-crum>i>popup-menu>:hover{background-color:#d3d3d3}
-/*# sourceMappingURL=BreadCrum.global.css.map */

package/dist/site-editor/editor/BreadCrum.global.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/site-editor/editor/BreadCrum.global.css"],"names":[],"mappings":"AAAA,WACI,qBAAuB,CACvB,4BAA+B,CAC/B,YAAa,CACb,kBAAmB,CACnB,gBAAiB,CACjB,iBAAkB,CAElB,KAAM,CADN,iBA8EJ,CA3EI,kBAII,4BAA6B,CAD7B,WAAY,CAFZ,cAAe,CACf,YAAa,CAMb,aAAgB,CAHhB,wBAiBJ,CAZI,wBACI,wBACJ,CAEA,2CAEI,WAAY,CACZ,oBAAqB,CACrB,gBAAiB,CACjB,iBACJ,CAIJ,aAKI,cAAe,CAEf,eAAkB,CALlB,iBA+CJ,CAxCI,mBACI,wBACJ,CAEA,wBAOI,sBAAuB,CAOvB,uBAAwB,CAHxB,WAAY,CAMZ,kBAAmB,CAdnB,aAAc,CAiBd,2BAA4B,CAX5B,cAAe,CAJf,YAAa,CACb,qBAAsB,CAMtB,mCAAoC,CAJpC,QAAS,CAJT,MAAO,CAcP,eAAgB,CARhB,YAAa,CAMb,YAAa,CAdb,iBAAkB,CAiBlB,WAeJ,CAZI,0BAEI,wBASJ,CARI,uCACI,4BACJ,CAEA,+BACI,wBACJ","file":"BreadCrum.global.css"}