@social-mail/social-mail-client 1.2.66 → 1.2.67

package/src/web/page/channels/services/ChannelService.ts

@@ -1,7 +1,7 @@
 import DITransient from "@web-atoms/core/dist/di/DITransient";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../../../../services/EntityService";
-import { Email, IMailboxContact, Mailbox, MailboxContact } from "../../../../model/model";
+import { Email, IEmail, IMailboxContact, Mailbox, MailboxContact } from "../../../../model/model";
 import { Sql } from "../../../../common/Sql";
 
 @DITransient({})
@@ -16,6 +16,7 @@ export default class ChannelService {
         start = 0,
         size = 100,
         search = "",
+        version = 0,
         cancelToken
     }) {
         let q = this.entityService.query(Email);
@@ -78,4 +79,13 @@ export default class ChannelService {
         }
         await this.entityService.save(cloners);
     }
+
+    async deleteMail(email: IEmail) {
+        const { emailID } = email;
+        await this.entityService.save(Email.create({
+            emailID,
+            status: "deleted"
+        }));
+        email.status = "deleted";
+    }
 }

package/src/web/page/mails/mini-compose/MiniComposeBox.tsx

@@ -29,6 +29,8 @@ import Unlink from "@web-atoms/web-controls/dist/html-editor/commands/Unlink";
 import Separator from "@web-atoms/web-controls/dist/html-editor/commands/Separator";
 import Insert from "./Insert";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
+import ToggleEmoji from "./ToggleEmoji";
+import { emojiBarAsText } from "../../templates/emoji-bar/EmojiBar";
 
 const css = styled.css `
     display: grid;
@@ -103,7 +105,10 @@ export default class MiniComposeBox extends AtomControl {
 
         this.typedMessage = this.draft?.htmlBody
             ? this.draft.htmlBody
-            : `<div contentEditable="true" style="background-color: white; color: black;"><p>&nbsp;</br></p></div>`;
+            : `<section style="background-color: white; color: black;">
+                <section contentEditable="true">&nbsp;</br></section>
+                ${emojiBarAsText()}
+            </section>`;
 
         this.render(<div>
             <MailHtmlEditor
@@ -119,11 +124,12 @@ export default class MiniComposeBox extends AtomControl {
                     <AddLink/>
                     <Unlink/>
                     <Separator/>
+                    <ToggleEmoji/>
                 </Toolbar></div>}
                 data-element="editor"
                 data-html-editor="email-editor"
                 presenter={Bind.presenter((c) => this.editor = c )}
-                content={`<div contentEditable="true" style="background-color: white; color: black;">${this.typedMessage}</div>`}
+                content={this.typedMessage}
                 style-min-height="50px"
                 />
             <i
@@ -209,6 +215,7 @@ export default class MiniComposeBox extends AtomControl {
         const { html , text } = this.editor.htmlTextContent;
         this.draft.htmlBody = html;
         this.draft.textBody = text;
+        await this.save();
 
         this.draft.status = "scheduled";
         this.draft.dateSent = DateTime.now.add(TimeSpan.fromSeconds(30));

package/src/web/page/mails/mini-compose/ToggleEmoji.tsx

@@ -0,0 +1,24 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { IPopupOptions } from "@web-atoms/core/dist/web/services/PopupService";
+import PopupButton, { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import { MailHtmlEditor } from "../../../../common/controls/html/InlineHtmlEditorWithToolbar";
+
+const toggleEmojiAction = Bind.event((editor: MailHtmlEditor) => {
+
+});
+
+export default function ToggleEmoji({ alignment = "above" as IPopupOptions["alignment"]}) {
+    return <PopupButton
+        class="command"
+        data-layout="toolbar-button"
+        icon="fas fa-message-smile"
+        title="Toggle Emoji"
+        alignment={alignment}>
+            <MenuItem
+                icon="ri-list-unordered"
+                label="List"
+                event-click={toggleEmojiAction}
+                />
+        </PopupButton>;
+}

package/src/web/page/templates/emoji-bar/EmojiBar.tsx

@@ -0,0 +1,42 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Emoji } from "../../../../services/Emoji";
+import DomToString from "@web-atoms/email-dom/dist/DomToString";
+
+const EmojiButton = ({
+    emoji,
+    command = "track",
+    title
+}) => {
+    const emojiCode = "u" + Emoji.emojiUnicode(emoji);
+    const selector = `social-button-${emojiCode}`;
+    return <a
+        class={selector}
+        style="text-decoration: none;outline: none;border:none; margin-right: 5px"
+        data-social-mail-command={command}
+        title={title}
+        data-social-mail-transform="buttons-3x"
+        data-social-mail-transform-max-image="30px"
+        data-social-mail-track={emoji}>
+        <button style="margin: 1px;padding:2px;padding-left: 5px;padding-right: 5px; border: solid 1px lightgray; border-radius: 9999px; display: inline-flex; align-items: center;">
+            {emoji} <span
+                data-social-mail-element="count"/>
+        </button>
+    </a>;
+};
+
+export const emojiBar = (addComments = true) => <table data-social-mail-component="emoji-tracker" contentEditable="false" style="width:100%">
+    <td>
+        <EmojiButton emoji="👍" title={"Like this ... "}/>
+        <EmojiButton emoji="👎" title={"Don't like this ... "}/>
+        <EmojiButton emoji="🗨️" title={"Comment ... "}/>
+    </td>
+    <td style="text-align: right">
+        <EmojiButton
+            emoji="👁️‍🗨️"
+            command="view"
+            title={"Views"}
+            />
+    </td>
+</table>;
+
+export const emojiBarAsText = (addComments = true) =>  DomToString(emojiBar(addComments));