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

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

@@ -58,6 +58,7 @@ import { List } from "../blocks/List";
             grid-column: 3;
             border-left: solid 1px lightgray;
             border-radius: 0;
+            overflow: auto;
         }
 
         & > [data-element=editor] {
@@ -221,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();
@@ -346,6 +366,12 @@ export default class HtmlPageEditor extends AtomControl {
                 </div>
             </div>
             <div data-element="right">
+                <button
+                    data-click-event="open-variables"
+                    data-layout="icon-button">
+                    <i class="fas fa-code"/>
+                    Variables
+                </button>
                 <Properties/>
             </div>
         </div>);
@@ -405,6 +431,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) {
@@ -486,6 +528,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

@@ -7,6 +7,9 @@ import { StylerSet } from "../styler/StylerSet";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import CloudFileService from "../../web/page/files/service/CloudFileService";
 import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import MonacoEditor from "../../code-editor/MonaoEditor";
+import CodeEditorPage from "../../code-editor/CodeEditorPage";
 
 export default class WebSitePageEditor extends HtmlPageEditor {
 
@@ -22,6 +25,12 @@ export default class WebSitePageEditor extends HtmlPageEditor {
         await this.insertImage(src);
     }
 
+    @Action({ onEvent: "open-variables"})
+    async openVariables() {
+        const file = await this.cloudFileService.children(this.folder.appFileID, "vars.css").firstOrDefault();
+        await PageNavigator.pushPage(CodeEditorPage, file);
+    }
+
     protected async setStylerSheet() {
 
         const stylerCSS = await this.createFile("styler.css", StylerSet.instance.toString());

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/styler/Styler.ts

@@ -112,16 +112,16 @@ export const stylerVars = prepareVariables({
 
     secondaryBackground: "#00808050",
     secondaryColor: "gray",
-    secondaryAccent: "blue",
+    secondaryAccent: "#318984a8",
     secondaryAccentText: "white",
-    secondarySurface: "#00A0A080",
+    secondarySurface: "#FFFFFFA0",
     secondarySurfaceText: "gray",
 
-    tertiaryBackground: "#7b4fc596",
+    tertiaryBackground: "#cfa55c87",
     tertiaryColor: "gray",
-    tertiaryAccent: "blue",
+    tertiaryAccent: "#e17b42cf",
     tertiaryAccentText: "white",
-    tertiarySurface: "#0000A080",
+    tertiarySurface: "#FFFFFFA0",
     tertiarySurfaceText: "gray",
 });
 

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/web/page/files/FolderPage.tsx

@@ -2,7 +2,7 @@ import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import { AppFile, IAppFile } from "../../../model/model";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
-import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import AtomRepeater, { SelectorCheckBox } from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import TreeView from "../../../common/controls/tree/TreeView";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import Action from "@web-atoms/core/dist/view-model/Action";
@@ -65,6 +65,8 @@ export default class FolderPage extends ContentPage {
 
     private folderTree: TreeView;
 
+    private selectedFiles: IAppFile[] = [];
+
     @InjectProperty
     private cloudFileService: CloudFileService;
 
@@ -139,7 +141,9 @@ export default class FolderPage extends ContentPage {
                 })}
                 >
                 <AtomRepeater
-                    for="table"
+                    data-layout="data-grid"
+                    allowMultipleSelection={true}
+                    selectedItems={this.selectedFiles}
                     items={Bind.oneWayAsync((c, e, cancelToken) =>
                             this.cloudFileService.files({
                                 search: this.search,
@@ -152,56 +156,73 @@ export default class FolderPage extends ContentPage {
                     />
             </div>
         </div>;
+
+        this.footerRenderer = () => <div
+            style-display={Bind.oneWay(() => this.selectedFiles.length > 0)}
+            data-layout="command-row">
+            <button
+                data-click-event="delete-files"
+                data-layout="stop-icon-button">
+                <i class="fas fa-trash-can"/>
+                Delete
+            </button>
+        </div>;
     }
 
     renderFile(item: IAppFile) {
 
         if (item.isFolder) {
-            return <tr>
-                <td>
+            return <div>
+                <SelectorCheckBox
+                    />
+                <div>
                     <i class={item.isFolder ? "fiv-viv fiv-icon-folder" : `fiv-viv fiv-icon-${getExtension(item.name)}`} />
                     <span data-click-event="open-folder" class="file-link" text={item.name} data-padding-left="auto"/>
-                </td>
-                <td>{item.isShared && <i title="Shared" class="fas fa-folder-user"/>}</td>
-                <td text={toFileSize(item.fileSize)}/>
-                <td></td>
-                <td><i
+                </div>
+                <div>{item.isShared && <i title="Shared" class="fas fa-folder-user"/>}</div>
+                <div text={toFileSize(item.fileSize)}/>
+                <div></div>
+                <div><i
                     data-click-event="edit-shares"
-                    class="fas fa-share"/></td>
-            </tr>;
+                    class="fas fa-share"/></div>
+            </div>;
         }
 
         if( this.parameters.templates && item.contentType === "message/rfc822") {
-            return <tr>
-                <td>
+            return <div>
+                <SelectorCheckBox
+                    />
+                <div>
                     <i class={item.isFolder ? "fiv-viv fiv-icon-folder" : `fiv-viv fiv-icon-${getExtension(item.name)}`} />
                     <span
                         data-click-event="open-template"
                         class="file-link"
                         text={item.name}
                         data-margin-left="default"/>
-                </td>
-                <td>{item.isShared && <i title="Shared" class="fas fa-folder-user"/>}</td>
-                <td text={toFileSize(item.fileSize)}/>
-                <td><a href={item.downloadUrl} target="_blank" download={true}><i class="fas fa-download"/></a></td>
-                <td><i
+                </div>
+                <div>{item.isShared && <i title="Shared" class="fas fa-folder-user"/>}</div>
+                <div text={toFileSize(item.fileSize)}/>
+                <div><a href={item.downloadUrl} target="_blank" download={true}><i class="fas fa-download"/></a></div>
+                <div><i
                     data-click-event="edit-shares"
-                    class="fas fa-share"/></td>
-            </tr>;
+                    class="fas fa-share"/></div>
+            </div>;
         }
 
-        return <tr>
-            <td>
+        return <div>
+            <SelectorCheckBox
+                />
+            <div>
                 <i class={item.isFolder ? "fiv-viv fiv-icon-folder" : `fiv-viv fiv-icon-${getExtension(item.name)}`} />
                 <a href={item.url} target="_blank" text={item.name} data-margin-left="default"></a>
-            </td>
-            <td>{item.isShared && <i title="Shared" class="fas fa-folder-user"/>}</td>
-            <td text={toFileSize(item.fileSize)}/>
-            <td><a href={item.downloadUrl} target="_blank" download={true}><i class="fas fa-download"/></a></td>
-            <td><i
+            </div>
+            <div>{item.isShared && <i title="Shared" class="fas fa-folder-user"/>}</div>
+            <div text={toFileSize(item.fileSize)}/>
+            <div><a href={item.downloadUrl} target="_blank" download={true}><i class="fas fa-download"/></a></div>
+            <div><i
                 data-click-event="edit-shares"
-                class="fas fa-share"/></td>
-        </tr>;
+                class="fas fa-share"/></div>
+        </div>;
     }
 
     @Action({ onEvent: "edit-shares"})
@@ -230,6 +251,13 @@ export default class FolderPage extends ContentPage {
         await this.cloudFileService.expand(item);
     }
 
+    @Action({ onEvent: "delete-files"})
+    async deleteFiles() {
+        await this.cloudFileService.delete(this.selectedFiles);
+        this.selectedFiles.clear();
+        this.version++;
+    }
+
     @Action({ onEvent: "files-available"})
     async onFilesUploaded() {
         this.version++;

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

@@ -273,4 +273,8 @@ export default class CloudFileService {
         return file;
     }
 
+    async delete(files: IAppFile[]) {
+        files = files.map(({ appFileID }) => ( AppFile.create({ appFileID, $deleted: true })));
+        await this.entityService.save(files);
+    }
 }