@social-mail/social-mail-client 1.2.102 → 1.2.103

package/src/public/channel/ChannelMessage.tsx

@@ -64,11 +64,26 @@ export default class ChannelMessage extends AtomControl {
                             <section { ... renderMail({ email })}/>
                         </section>
                         <footer>
-                            <img
+                            <button
+                                data-element="engage"
                                 data-click-event="react-email"
-                                src={UMD.resolvePath("@social-mail/social-mail-client/content/images/icons/face-plus.svg")}
-                                style-max-height="15px"
-                                title="React"/>
+                                style="padding:0; margin:0; border: none; outline: none;"
+                                >
+                                <img
+                                    src={UMD.resolvePath("@social-mail/social-mail-client/content/images/icons/face-plus.svg")}
+                                    style-max-height="15px"
+                                    title="React"/>
+                            </button>
+                            <button
+                                data-element="engage"
+                                data-click-event="reply-email"
+                                style="padding:0; margin:0; border: none; outline: none;"
+                                >
+                                <img
+                                    src={UMD.resolvePath("@social-mail/social-mail-client/content/images/icons/comment-plus.svg")}
+                                    style-max-height="15px"
+                                    title="React"/>
+                            </button>
                             { ... engagements.map((x) =>
                                 <span
                                     title={`View all ${x.engagement} ${x.count}`}
@@ -90,10 +105,10 @@ export default class ChannelMessage extends AtomControl {
         const subject = `${emoji}:${Number(email.emailID).toString(36)}:${email.headerMessageID}`;
         await PopupService.alert({
             message: <div data-layout="vertical-flex">
-                To engage with this conversation, please join the channel.
-                And then reply to this email with following subject.
+                To add your emoji to this post, email just the emoji {emoji} with given subject to the channel email address.
                 <div>To: {channel.emailAddress.emailAddress}</div>
                 <div>Subject: {subject}</div>
+                <div>Body: {emoji}</div>
                 <div>
                     <a href={`mailto:${channel.emailAddress.emailAddress}?subject=${subject}&body=${emoji}`}>Email Now</a>
                 </div>
@@ -102,4 +117,22 @@ export default class ChannelMessage extends AtomControl {
         });
     }
 
+    @Action({ onEvent: "reply-email"})
+    async replyEmail(a, ce: CustomEvent) {
+        const emoji = "💬";
+        const { channel, email } = this;
+        const subject = `${emoji}:${Number(email.emailID).toString(36)}:${email.headerMessageID}`;
+        await PopupService.alert({
+            message: <div data-layout="vertical-flex">
+                To send comment to this post, email us your comment with given subject to the channel email address.
+                <div>To: {channel.emailAddress.emailAddress}</div>
+                <div>Subject: {subject}</div>
+                <div>
+                    <a href={`mailto:${channel.emailAddress.emailAddress}?subject=${subject}`}>Email Now</a>
+                </div>
+            </div>,
+            title: "Send Email"
+        });
+    }
+
 }

package/src/public/channel/styles/channelViewStyle.ts

@@ -1,6 +1,6 @@
 import styled from "@web-atoms/core/dist/style/styled";
 
-styled.css `
+    styled.css `
 
 box-sizing: border-box;
 
@@ -8,6 +8,19 @@ box-sizing: border-box;
 
 }
 
+& button[data-element=engage] {
+    margin:0;
+    border: none;
+    outline: none;
+    background: transparent;
+    cursor: pointer;
+    & > img {
+        max-height: 20px;
+        height: 20px;
+        pointer-events: none;
+    }
+}
+
 & > section {
     & [data-element=blog-item] {
         margin: 10px;
@@ -62,6 +75,9 @@ box-sizing: border-box;
             background-color: canvas;
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 10px;
+            display: flex;
+            gap: 5px;
+            flex-wrap: wrap;
         }
     }
 }