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

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";
+        }
+    `,
+};

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

@@ -0,0 +1,103 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutImageCard: any = {
+    "image-card": styled.css `
+        display: grid;
+        margin: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr 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;
+        }
+
+        & > img {
+            padding: ${stylerVars.sizeDefault};
+            margin: ${stylerVars.sizeDefault};
+            align-self: center;
+            max-width: 100%;
+            grid-column: 1;
+            grid-row: 2;
+        }
+        & > section {
+            max-width: 100%;
+            margin: ${stylerVars.sizeDefault};
+            padding: ${stylerVars.sizeDefault};
+            border-radius: ${stylerVars.sizeDefault};
+            grid-column: 1;
+            grid-row: 3;
+        }
+
+        @media (min-width: 600px) { 
+            & {
+                grid-template-columns: 1fr 1fr;
+                grid-template-rows: auto 1fr;
+            }
+
+            & > h4 {
+                max-width: 100%;
+                grid-column: 1 / span 2;
+                grid-row: 1;
+            }
+
+            & > img {
+                padding: ${stylerVars.sizeDefault};
+                max-width: 100%;
+                grid-column: 1;
+                grid-row: 2;
+            }
+            & > section {
+                max-width: 100%;
+                grid-column: 2;
+                grid-row: 2;
+            }
+        }
+
+        & > 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/layoutNavBar.ts

@@ -0,0 +1,20 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutNavBar: any = {
+    "nav-bar": 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;
+        }
+    `,
+};

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

@@ -0,0 +1,51 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutRightImageBox: any = {
+    "right-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-reverse;
+            }
+        }
+
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 100%;
+            max-width: 50%;
+        }
+
+        & > img {
+            align-self: center;
+        }
+
+        & > *: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/layoutRow.ts

@@ -0,0 +1,47 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutRow: any = {
+    "row": styled.css `
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        justify-items: center;
+        align-items: center;
+
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 100%;
+        }
+
+
+        @media (min-width: 600px) { 
+            & {
+                flex-direction: row;
+                flex-wrap: nowrap;
+            }
+        }
+        & > *: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/layoutTextBox.ts

@@ -0,0 +1,35 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutTextBox: any = {
+    "text-box": 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;
+
+        & > p: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/layoutWrapList.ts

@@ -0,0 +1,32 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../../Styler";
+
+export const layoutWrapList: any = {
+    "wrap-list": styled.css `
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+        border-radius: ${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";
+        }
+    `,
+};

package/src/site-editor/styler/properties/layouts/layout.ts

@@ -0,0 +1,30 @@
+import { StylerProperty } from "../../Styler";
+import { layoutTextBox } from "./blocks/layoutTextBox";
+import { layoutWrapList } from "./blocks/layoutWrapList";
+import { layoutImageBox } from "./blocks/layoutImageBox";
+import { layoutRightImageBox } from "./blocks/layoutRightImageBox";
+import { layoutColumn2Box } from "./blocks/layoutColumn2Box";
+import { layoutColumn } from "./blocks/layoutColumn";
+import { layoutRow } from "./blocks/layoutRow";
+import { layoutBox } from "./blocks/layoutBlock";
+import { layoutNavBar } from "./blocks/layoutNavBar";
+import { layoutFloatingNavBar } from "./blocks/layoutFloatingNavBar";
+import { layoutColumn3Box } from "./blocks/layoutColumn3Box";
+import { layoutImageCard } from "./blocks/layoutImageCard";
+import { layoutCard } from "./blocks/layoutCard";
+
+export const stylerLayout = StylerProperty.create( "styler-layout", {
+    ... layoutTextBox,
+    ... layoutWrapList,
+    ... layoutImageCard,
+    ... layoutImageBox,
+    ... layoutRightImageBox,
+    ... layoutColumn2Box,
+    ... layoutColumn3Box,
+    ... layoutColumn,
+    ... layoutRow,
+    ... layoutBox,
+    ... layoutNavBar,
+    ... layoutFloatingNavBar,
+    ... layoutCard
+});

package/src/site-editor/toolbars/EditorToolbar.tsx

@@ -13,6 +13,7 @@ import styled from "@web-atoms/core/dist/style/styled";
         color: #555555;
         padding: 5px;
         cursor: pointer;
+        max-width: 90%;
         &:not([data-disabled]):hover, &[data-disabled=false]:hover {
             background-color: #00800050;
         }

package/src/site-editor/toolbars/UndoRedoToolbar.tsx

@@ -8,18 +8,12 @@ export default function UndoRedoToolbar() {
     return <EditorToolbar
         data-element="undo">
         <i
-            event-click={EditorCommand.onClick((editor) => {
-                editor.redoList.insert(editor.redoList.length, editor.htmlDocument.documentElement.innerHTML);
-                editor.htmlDocument.documentElement.innerHTML = editor.undoList.removeAt(editor.undoList.length-1);
-            })}
+            data-click-event="undo"
             title="Undo"
             data-disabled={Bind.oneWay((editor: HtmlPageEditor) => editor.undoList.length === 0)}
             class="fas fa-undo" />
         <i
-            event-click={EditorCommand.onClick((editor) => {
-                editor.undoList.insert(editor.undoList.length, editor.htmlDocument.documentElement.innerHTML);
-                editor.htmlDocument.documentElement.innerHTML = editor.redoList.removeAt(editor.redoList.length-1);
-            })}
+            data-click-event="redo"
             title="Redo"
             data-disabled={Bind.oneWay((editor: HtmlPageEditor) => editor.redoList.length === 0)}
             class="fas fa-redo" />

package/src/style/GlobalStyle.ts

@@ -31,7 +31,7 @@ function addLinkTag(href, integrity?, rel = "stylesheet") {
 
 addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
 addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.1/css/all.min.css");
-addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");
+addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
 
     styled.css `
 

package/src/web/page/files/media/ChooseMediaPage.tsx

@@ -9,6 +9,7 @@ import CloudFileService from "../service/CloudFileService";
 import styled from "@web-atoms/core/dist/style/styled";
 import { FilesDragDrop } from "../../../../common/controls/drag-drop/FilesDragDrop";
 import Action from "@web-atoms/core/dist/view-model/Action";
+import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
 
 
 const css = styled.css `
@@ -111,13 +112,28 @@ export default class ChooseMediaPage extends PopupWindowPage<{folder: IAppFile,
             </div>
         </div>;
 
-        this.footerRenderer = () => <div
-            style-display={Bind.oneWay(() => this.selectedFile !== null)}
-            data-layout="command-row">
-            <input type="range" min="100" max="2000" step="100" value={Bind.twoWaysImmediate(() => this.size)} />
-            <span text={Bind.oneWay(() => `${this.size}px`)}/>
-            <button data-click-event="select-file" text="Save"/>
-        </div>;
+        this.footerRenderer = () => <div data-layout="frame-vertical-flex">
+            <div
+                data-layout="row">
+                    <button
+                        data-layout="accent-icon-button"
+                        { ... UploadEvent.AttachUploadAction({
+                            multiple: true,
+                            extra: Bind.oneWay(() => JSON.stringify({ parentID: this.selectedFolder?.appFileID})),
+                            accept
+                        })}>
+                        <i class="fas fa-upload"/>
+                        Upload
+                    </button>
+                </div>
+            <div
+                style-display={Bind.oneWay(() => this.selectedFile !== null)}
+                data-layout="row">
+                <input type="range" min="100" max="2000" step="100" value={Bind.twoWaysImmediate(() => this.size)} />
+                <span text={Bind.oneWay(() => `${this.size}px`)}/>
+                <button data-click-event="select-file" text="Save"/>
+            </div>
+        </div> ;
 
     }
 

package/src/web/page/files/service/CloudFileService.ts

@@ -7,13 +7,18 @@ import { CancelToken } from "@web-atoms/core/dist/core/types";
 import { Sql } from "../../../../common/Sql";
 import SocialMailApp from "../../../../common/SocialMailApp";
 import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import LocalFileService from "../../../../services/files/LocalFileService";
 
 const hideActivityIndicator = true;
 
 export type ISaveFileModel = ({
     parentID: number;
     folder?: string;
-} | { appFileID: number }) & { content: File };
+    appFileID?: never;
+} | {
+    appFileID: number;
+    parentID?: never;
+}) & { content: File };
 
 @DISingleton()
 export default class CloudFileService {
@@ -21,6 +26,9 @@ export default class CloudFileService {
     @Inject
     private entityService: EntityService;
 
+    @Inject
+    private localFileService: LocalFileService;
+
     async top(site: boolean = false) {
         const userID = SocialMailApp.user.userID;
         let q = this.entityService.query(AppFile)
@@ -234,19 +242,29 @@ export default class CloudFileService {
         return results;
     }
 
+    children(parentID: number, name?: string, sha256?: string) {
+        return this.entityService.query(AppFile, "children", parentID, name, sha256);
+    }
+
     async saveFile(fm: ISaveFileModel) {
-        const { appFileID, content, parentID } = fm as any;
-        const sp = new URLSearchParams();
-        if (appFileID) {
-            sp.append("appFileID", appFileID);
-        }
-        if (parentID) {
-            sp.append("parentID", parentID);
-        }
-        const url = `/api/upload?${sp.toString()}`;
-        return FetchBuilder.post(url)
-            .form("file", content, content.name)
-            .responseAsJson<{ url: string; appFileID: number; }>();
+
+        const { appFileID, content, parentID } = fm;
+        return this.localFileService.uploadFile(content, { appFileID, parentID  });
+
+        // check if file exists...
+
+        // const { appFileID, content, parentID } = fm;
+        // const sp = new URLSearchParams();
+        // if (appFileID) {
+        //     sp.append("appFileID", appFileID.toString());
+        // }
+        // if (parentID) {
+        //     sp.append("parentID", parentID.toString());
+        // }
+        // const url = `/api/upload?${sp.toString()}`;
+        // return FetchBuilder.post(url)
+        //     .form("file", content, content.name)
+        //     .responseAsJson<{ url: string; appFileID: number; }>();
     }
 
     async save(file: IAppFile) {

package/dist/site-editor/blocks/ImageBlock.d.ts

@@ -1,2 +0,0 @@
-export declare const ImageBlock: () => any;
-//# sourceMappingURL=ImageBlock.d.ts.map