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

package/src/common/pages/websites/studio/WebSiteStudioPage.tsx

@@ -16,6 +16,7 @@ import ChooseWebSiteTemplatePage from "../templates/ChooseWebSiteTemplatePage";
 import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
 import { FileTreeView } from "../../../controls/tree/FileTreeView";
 import WebSitePageEditor from "../../../../site-editor/editor/WebSitePageEditor";
+import HtmlPageEditor from "../../../../site-editor/editor/HtmlPageEditor";
 
 const css = styled.css `
     display: grid;
@@ -64,11 +65,18 @@ export default class WebSiteStudioPage extends ContentPage {
     @InjectProperty
     private cloudFileService: CloudFileService;
 
+    private lastHtml: string;
+
+    private htmlEditor: HtmlPageEditor;
+
     async init() {
         this.search = "";
         this.root = await this.cloudFileService.root(this.parameters);
         this.root.children ??= [];
-        this.root.children.remove((x) => x.isDeleted || ( x.contentType !== "text/html" && !x.isFolder ));
+        this.root.children.remove((x) => x.isDeleted || !(
+            /^(text\/(html|css))$/i.test(x.contentType)
+            || x.isFolder
+        ));
         this.root.children.sort((a, b) => a.isFolder ? -1 : 0);
 
         await this.onItemExpanded(this.root);
@@ -150,6 +158,7 @@ export default class WebSiteStudioPage extends ContentPage {
             <WebSitePageEditor
                 class="file-list"
                 folder={this.root}
+                presenter={Bind.presenter((c) => this.htmlEditor = c)}
                 event-html-page-changed={(ce: CustomEvent<string>) => this.pageContent = ce.detail}
                 htmlPage={Bind.oneWayAsync((s, e, cancelToken) =>  this.selectedFile
                         ? FetchBuilder.get(this.selectedFile.downloadUrl)
@@ -217,4 +226,16 @@ export default class WebSiteStudioPage extends ContentPage {
         await this.cloudFileService.saveFile({ appFileID: this.selectedFile.appFileID, content });
         this.pageContent = "";
     }
+
+    protected hide(): void {
+        this.pageContent = this.htmlEditor.htmlPage;
+        super.hide();
+    }
+
+    protected show(): void {
+        super.show();
+        if (this.pageContent) {
+            setTimeout(() => this.htmlEditor.htmlPage = this.pageContent, 400);
+        }
+    }
 }

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

@@ -173,10 +173,15 @@ export default class HtmlPageEditor extends AtomControl {
             }, 100);
             return;
         }
-        void this.ready.then(() => {
+        void this.ready.then(async () => {
             if(!this.htmlDocument) {
                 return;
             }
+            const iframe = this.element as HTMLIFrameElement;
+            if(this.htmlDocument !== iframe.contentDocument) {
+                this.htmlDocument = void 0;
+                await this.loadContentDocument();
+            }
             this.htmlDocument.open();
             this.htmlDocument.write(v);
             this.htmlDocument.addEventListener("click", (e) => {
@@ -366,15 +371,17 @@ 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>);
 
-        this.contentEditor = this.element.querySelector(`[data-element="content-editor"]`);
-        while(!this.htmlDocument) {
-            this.htmlDocument = this.contentEditor.contentDocument;
-            await sleep(100);
-        }
+        await this.loadContentDocument();
     }
 
     public buildXNode(node: XNode) {
@@ -561,4 +568,13 @@ export default class HtmlPageEditor extends AtomControl {
         this.pageVariables = StylerSet.instance.vars.map((x) => new StylerVariable(x.name, x.value, this.htmlDocument, onChange));
 
     }
+
+    private async loadContentDocument() {
+        this.contentEditor = this.element.querySelector(`[data-element="content-editor"]`);
+        while (!this.htmlDocument) {
+            this.htmlDocument = this.contentEditor.contentDocument;
+            await sleep(100);
+        }
+    }
+
 }

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,13 @@ 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, "styles/vars.css").firstOrDefault();
+        const changedFile = await PageNavigator.pushPage(CodeEditorPage, file);
+        await this.addStyleSheet(changedFile);
+    }
+
     protected async setStylerSheet() {
 
         const stylerCSS = await this.createFile("styler.css", StylerSet.instance.toString());
@@ -32,6 +42,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
             .firstOrDefault();
         if (!vars) {
             vars = await this.createFile("vars.css", `* {
+                ${StylerSet.instance.varsCss}
             }`);
         }
         await this.addStyleSheet(vars);

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

@@ -25,6 +25,8 @@ export class StylerSet {
 
     vars = vars;
 
+    varsCss = this.vars.join("\n\t\t\t");
+
     properties = {
         stylerLayout,
         stylerColorSets,

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

@@ -18,6 +18,7 @@ export type ISaveFileModel = ({
 } | {
     appFileID: number;
     parentID?: never;
+    folder?: never;
 }) & { content: File };
 
 @DISingleton()
@@ -248,8 +249,8 @@ export default class CloudFileService {
 
     async saveFile(fm: ISaveFileModel) {
 
-        const { appFileID, content, parentID } = fm;
-        return this.localFileService.uploadFile(content, { appFileID, parentID  });
+        const { appFileID, content, parentID, folder  } = fm;
+        return this.localFileService.uploadFile(content, { appFileID, parentID, folder  });
 
         // check if file exists...
 
@@ -273,4 +274,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);
+    }
 }