@social-mail/social-mail-client 1.8.321 → 1.8.323

package/src/common/controls/file-preview/FilePreview.global.css

@@ -6,13 +6,13 @@
     width: 180px;
     contain: content;
     text-decoration: none;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: 1fr auto;
+    grid-template-columns: auto 1fr auto auto;
+    grid-template-rows: 1fr auto auto;
     & a {
         text-decoration: none;
     }
     & > [data-element=preview] {
-        grid-column: 1 / span 3;
+        grid-column: 1 / span 4;
         grid-row: 1;
         overflow: hidden;
         justify-self: stretch;
@@ -25,7 +25,7 @@
     }
     & > [data-element=file-name] {
         grid-column: 1 / span 3;
-        grid-row: 2;
+        grid-row: 3;
         padding: 5px;
         font-size: smaller;
         text-overflow: ellipsis;
@@ -34,6 +34,27 @@
         background-color: var(--accent-color);
         color: var(--accent-text-color);
     }
+    & > [data-element=size] {
+        grid-column: 3 / span 2;
+        grid-row: 2;
+        font-size: x-small;
+        background-color: rgb(226, 226, 226);
+        color: rgb(49, 49, 49);
+        padding: 2px;
+        padding-left: 5px;
+        padding-right: 5px;
+        border-top-left-radius: 5px;
+    }
+    & > [data-element=ext] {
+        background-color: var(--accent-color);
+        color: var(--accent-text-color);
+        font-size: small;
+        grid-column: 4;
+        grid-row: 3;
+        justify-self: stretch;
+        align-self: stretch;
+        padding: 5px;
+    }
     & > [data-element=file-size] {
         grid-column: 3;
         grid-row: 2;

package/src/common/controls/file-preview/FilePreview.tsx

@@ -7,6 +7,14 @@ import { FileUrlService } from "../../FileUrlService";
 
 import "./FilePreview.global.css";
 
+const ext = (name: string) => {
+    const i = name.lastIndexOf(".");
+    if (i === -1) {
+        return "UNK";
+    }
+    return name.substring(i + 1).toUpperCase();
+};
+
 export default function FilePreview(a: IAppFile) {
 
 
@@ -33,6 +41,14 @@ export default function FilePreview(a: IAppFile) {
                 data-element="file-name">
                 {name}
             </label>
+            { size && <label
+                data-element="size"
+                text={size}
+                />}
+            <label
+                data-element="ext"
+                text={ext(name)}
+                />
         </a>;
     }
 
@@ -46,5 +62,13 @@ export default function FilePreview(a: IAppFile) {
             data-element="file-name">
             {name}
         </label>
+        { size && <label
+            data-element="size"
+            text={size}
+            />}
+        <label
+            data-element="ext"
+            text={ext(name)}
+            />
     </a>;
 }

package/src/common/menu/MenuService.tsx

@@ -52,6 +52,8 @@ export default class MenuService {
 
     private lastSearch = void 0;
 
+    private isFirstSearch = true;
+
     constructor() {
         setTimeout(() =>
             this.load().catch(console.error), 1);
@@ -93,7 +95,10 @@ export default class MenuService {
         // this.websites.addAll(websites);
 
         // show search if any has more than 2 items...
-        this.showSearch = [this.mailboxes, this.channels, this.websites].some((x) => x.length > 2);
+        if (this.isFirstSearch) {
+            this.showSearch = [this.mailboxes, this.channels, this.websites].some((x) => x.length > 2);
+            this.isFirstSearch = false;
+        }
 
     }
 

package/src/services/files/LocalFileService.tsx

@@ -98,7 +98,7 @@ export default class LocalFileService extends TaskManager {
         const fud = new FileUploader(this);
         while(size > 0) {
             const blobSize = Math.min(maxSize, file.size - start);
-            const part = new File([file.slice( start, start + blobSize)], "file.dat");
+            const part = new File([file.slice( start, blobSize === maxSize ? blobSize : void 0)], "file.dat");
             size -= blobSize;
             start += blobSize;
             const uploadRequest = fud.upload({

package/src/web/commands/MailAppEvents.ts

@@ -3,6 +3,8 @@ import { IMailboxContact } from "../../model/model";
 
 export const MailAppEvents = {
 
-    mailboxContactUpdated: EventScope.create<IMailboxContact>()
+    mailboxContactUpdated: EventScope.create<IMailboxContact>(),
+
+    refreshMailboxContacts: EventScope.create(),
 
 };

package/src/web/page/mails/ConversationPage.tsx

@@ -38,6 +38,7 @@ import AtomPopover from "@web-atoms/web-controls/dist/basic/elements/AtomPopover
 import { ReportPhishingCommand, ReportSpamCommand } from "./commands/ReportEmailCommand";
 import { ReportConversationPhishing, ReportConversationSpam } from "./commands/ReportConversationCommand";
 import NewConversationRequest from "./commands/NewConversationRequest";
+import { MailAppEvents } from "../../commands/MailAppEvents";
 
 const itemCss = "conversation-page-item-css";
 
@@ -66,7 +67,7 @@ export default class ConversationPage extends ContentPage {
     public mailsRepeater: AtomRepeater;
 
     @InjectProperty
-    private conversationService: ConversationService;
+    public conversationService: ConversationService;
 
     private mails: IMailboxContactEmail[] = [];
 
@@ -409,6 +410,7 @@ export default class ConversationPage extends ContentPage {
         this.parameters.folderTagID = SocialMailApp.contactsFolderTagID;
         await es.save(this.parameters, (c) => c);
         this.showComposeButton();
+        MailAppEvents.refreshMailboxContacts.dispatchEvent(this.parameters);
     }
 
     @Action({ onEvent: "click"})
@@ -668,6 +670,7 @@ export default class ConversationPage extends ContentPage {
     })
     async blockSender() {
         await this.conversationService.block(this.parameters);
+        MailAppEvents.refreshMailboxContacts.dispatchEvent(this.parameters);
     }
 
     @Action({
@@ -676,6 +679,7 @@ export default class ConversationPage extends ContentPage {
     })
     async unblockSender() {
         await this.conversationService.block(this.parameters);
+        MailAppEvents.refreshMailboxContacts.dispatchEvent(this.parameters);
     }
 
     @Action({

package/src/web/page/mails/commands/NewConversationRequest.tsx

@@ -3,6 +3,7 @@ import { AddIconTextButton, DeleteIconTextButton } from "../../../../common/cont
 import { ReportConversationSpam, ReportConversationPhishing } from "./ReportConversationCommand";
 
 import "./NewConversationRequest.local.css";
+import AtomPopover from "@web-atoms/web-controls/dist/basic/elements/AtomPopover";
 
 export default function NewConversationRequest() {
     return <div class="new-conversation-request">
@@ -16,15 +17,30 @@ export default function NewConversationRequest() {
                     text="Approve Sender"
                 />
                 <DeleteIconTextButton
-                    data-click-event="block-sender"
-                    text="Block Sender"
+                    event-click={(e) => AtomPopover.create(e.target as HTMLElement,{
+                         nodeFactory: () => <div>
+                            <div data-layout="vertical-flex">
+                                <DeleteIconTextButton
+                                    data-click-event="block-sender"
+                                    icon="fad fa-shield-quartered"
+                                    data-color="red"
+                                    text="Block Sender"
+                                    />
+                                <ReportConversationSpam/>
+                                <ReportConversationPhishing/>
+                            </div>
+                        </div>,
+                        "anchor-bottom": "parent-top",
+                        closeOnClick: true
+                    })}
+                    text="Block"
                     />
             </div>
-            <h6>If you believe this message contains spam or any harmful activity, we encourage you to please report them.</h6>
+            {/* <h6>If you believe this message contains spam or any harmful activity, we encourage you to please report them.</h6>
             <div data-layout="flex-center">
                 <ReportConversationSpam/>
                 <ReportConversationPhishing/>
-            </div>
+            </div> */}
         </div>
     </div>;
 }

package/src/web/page/mails/commands/ReportConversationCommand.tsx

@@ -7,20 +7,30 @@ import { DeleteIconTextButton } from "../../../../common/controls/buttons/IconBu
 import type ConversationPage from "../ConversationPage";
 
 UICommand.on<ConversationPage>("report-spam", async ({ control }) => {
-    PageNavigator.pushPage(MiniComposePage, {
+
+    const thread = control.mailsRepeater.items[0];
+    await control.conversationService.block(thread);
+
+    await PageNavigator.pushPageForResult(MiniComposePage, {
         mailto: Mailto.create({ to: "report@esocialmail.com", subject: "Spam Report", body: "Attached email contains #Spam." }),
-        thread: control.mailsRepeater.items[0],
+        thread,
         asAttachment: true
     });
+
 });
 
 
 UICommand.on<ConversationPage>("report-phishing", async ({ control }) => {
-    PageNavigator.pushPage(MiniComposePage, {
+
+    const thread = control.mailsRepeater.items[0];
+    await control.conversationService.block(thread);
+
+    await PageNavigator.pushPageForResult(MiniComposePage, {
         mailto: Mailto.create({ to: "report@esocialmail.com", subject: "Phishing Report", body: "Attached email contains #Phishing." }),
         thread: control.mailsRepeater.items[0],
         asAttachment: true
     });
+
 });
 
 export function ReportConversationPhishing() {

package/src/web/page/mails/contacts/MailboxContact.local.css

@@ -91,6 +91,8 @@
             & > .name {
                 grid-row: 1;
                 grid-column: 1;
+                font-size: larger;
+                font-weight: bold;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;

package/src/web/page/mails/contacts/MailboxContacts.tsx

@@ -176,7 +176,8 @@ export default class MailsPage extends MasterDetailPage {
                     cancelToken
                 }))}
                 itemRenderer={(item: IMailboxContact) => {
-                    const name = displayName(item) + " " + item.emailAddress.emailAddress;
+                    const name = displayName(item);
+                    const fullName = name + " " + item.emailAddress.emailAddress;
                     const subject = item.lastEmail?.subject;
                     const summary = item.lastEmail?.summary;
                     return <div
@@ -184,8 +185,13 @@ export default class MailsPage extends MasterDetailPage {
                         data-unread={item.unread > 0}>
                             <div
                                 class="name"
-                                title={name}
+                                title={fullName}
                                 text={name}/>
+                            {/* <div
+                                class="address"
+                                text={item.emailAddress.emailAddress}
+                                title={fullName}
+                                /> */}
                             <div class="subject"
                                 title={subject}
                                 text={subject}/>
@@ -226,6 +232,11 @@ export default class MailsPage extends MasterDetailPage {
         }));
     }
 
+    @Action({ onEvent: MailAppEvents.refreshMailboxContacts })
+    refreshMailboxContacts() {
+        this.version++;
+    }
+
     @Action({ onEvent: MailAppEvents.mailboxContactUpdated})
     updateMailboxContact(mc: IMailboxContact) {
         const { mailboxID , emailAddressID } = mc;