@social-mail/social-mail-client 1.2.61 → 1.2.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.61",
+  "version": "1.2.63",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/common/controls/repeater/InfiniteRepeater.tsx

@@ -63,10 +63,14 @@ const pagedItemsSetter = AtomControl.registerProperty("paged-items", "paged-item
             control.items = value.items;
         }
 
-        setTimeout(() => {
-            const ce = control.element?.firstElementChild as HTMLElement;
-            ce?.scrollIntoView();
-        }, 100);
+        const autoScroll = control.element.getAttribute("data-auto-scroll") !== "false";
+
+        if (autoScroll) {
+            setTimeout(() => {
+                const ce = control.element?.firstElementChild as HTMLElement;
+                ce?.scrollIntoView();
+            }, 100);
+        }
 
         control.footer = value.total && value.items && value.items.length < value.total;
         (control as any).pagedItems = value;

package/src/public/channel/ChannelMessage.tsx

@@ -0,0 +1,18 @@
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import BlogService from "./BlogService";
+
+const url = (window as any).pageUrl as URL;
+
+const {1: channelID = 1, 2: emailID = 1 } = /^\/channels\/(\d+)\/(\d+)\//.exec(url.pathname) ?? {} as any;
+
+export default class ChannelMessage extends AtomControl {
+
+    @InjectProperty
+    blogService: BlogService;
+
+    async init() {
+        const { items: [ email ]} = await this.blogService.getEmails({ channelID,  start: 0, size: 1, cancelToken: null});
+    }
+
+}

package/src/public/channel/ChannelMessageList.tsx

@@ -0,0 +1,93 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import LimitedText from "@web-atoms/web-controls/dist/basic/LimitedText";
+import InfiniteRepeater from "../../common/controls/repeater/InfiniteRepeater";
+import { DateFormats } from "../../common/date/DateFormats";
+import { IMailbox, IEmail } from "../../model/model";
+import { renderMail } from "../../web/page/mails/service/ConversationService";
+import BlogService from "./BlogService";
+import { channelViewStyle } from "./channelViewStyle";
+
+export default class ChannelView extends AtomControl {
+
+    @InjectProperty
+    blogService: BlogService;
+
+    search = "";
+
+    channel: IMailbox;
+
+    mails = [] as IEmail[];
+
+    constructor(app, e = document.createElement("section")) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
+    async init() {
+
+        const { channelID, emailAddress } = (window as any).socialMail ?? {};
+
+        this.element.setAttribute("data-blog-list", "blog-list");
+
+        this.channel = await this.blogService.getChannel(emailAddress, channelID);
+
+        this.renderer = <div data-layout="flex-center">
+            <span text="..."/>
+        </div>;
+
+        this.element.className = channelViewStyle;
+        this.renderer = <section>
+            <header>
+                <div>
+                    <span text={this.channel.emailAddress.name}/>
+                    <a href={`mailto:subscribe-${this.channel.emailAddress.emailAddress}?subject=subscribe`}><button>Follow</button></a>
+                </div>
+                <div>
+                    <input
+                        placeholder="Search..."
+                        value={Bind.twoWaysImmediate(() => this.search)}/>
+                </div>
+            </header>
+            <section>
+                <AtomRepeater
+                    items={this.mails}
+                    data-auto-scroll="false"
+                    { ... InfiniteRepeater.pagedItems((start) =>
+                            (c, e, cancelToken) =>
+                                this.blogService.getEmails({
+                                    channelID: this.channel.mailboxID,
+                                    start,
+                                    search: this.search,
+                                    cancelToken
+                                })
+                    )}
+                    itemRenderer={(email: IEmail) => {
+                        return <section data-element="blog-item">
+                            <h4 data-element="title">
+                                <a href={`/channels/${this.channel.mailboxID}/${email.emailID}/${email.subject?.trim() ?? ""}`} text={email.subject}></a>
+                            </h4>
+                            <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
+                            <h6 text={email.senderName}/>
+                            <section
+                                data-element="content">
+                                <LimitedText height={200}>
+                                    <section { ... renderMail({ email })}/>
+                                </LimitedText>
+                            </section>
+                        </section>;
+                    }}
+                />
+            </section>
+            <aside>
+                <AtomRepeater
+                />
+            </aside>
+            <footer></footer>
+        </section>;
+    }
+
+}

package/src/public/channel/ChannelView.tsx

@@ -1,19 +1,6 @@
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import "../../style/GlobalStyle";
-import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
-import EntityService from "../../services/EntityService";
-import XNode from "@web-atoms/core/dist/core/XNode";
-import { channelViewStyle } from "./channelViewStyle";
-import Bind from "@web-atoms/core/dist/core/Bind";
-import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
-import { IEmail, IMailbox } from "../../model/model";
-import InfiniteRepeater from "../../common/controls/repeater/InfiniteRepeater";
-import BlogService from "./BlogService";
 import Pack from "@web-atoms/core/dist/Pack";
-import { renderMail } from "../../web/page/mails/service/ConversationService";
-import { DateFormats } from "../../common/date/DateFormats";
 import styled from "@web-atoms/core/dist/style/styled";
-import LimitedText from "@web-atoms/web-controls/dist/basic/LimitedText";
 
     styled.css `
 
@@ -40,6 +27,14 @@ import LimitedText from "@web-atoms/web-controls/dist/basic/LimitedText";
                 margin-block-start: 0;
                 margin-block-end: 0;
                 padding: 10px;
+                & > a {
+                    text-decoration: none;
+                    color: white;
+                    &:hover {
+                        text-decoration: underline;
+                        color: #73ff73;
+                    }
+                }
             }
 
             & > h6 {
@@ -62,75 +57,14 @@ import LimitedText from "@web-atoms/web-controls/dist/basic/LimitedText";
 
     `.installGlobal("[data-blog-list=blog-list]");
 
-@Pack
-export default class ChannelView extends AtomControl {
-
-    @InjectProperty
-    blogService: BlogService;
-
-    search = "";
-
-    channel: IMailbox;
-
-    mails = [] as IEmail[];
-
-    constructor(app, e = document.createElement("section")) {
-        super(app, e);
-        this.runAfterInit(() => this.app.runAsync(() => this.init()));
-    }
-
-    async init() {
+const url = new URL(location.href);
+(window as any).pageUrl = url;
+const { default: view } = await (/\/channels\//.test(url.pathname)
+    ? import("./ChannelMessage")
+    : import("./ChannelMessageList")) as any;
 
-        const { channelID, emailAddress } = (window as any).socialMail ?? {};
-
-        this.element.setAttribute("data-blog-list", "blog-list");
-
-        this.channel = await this.blogService.getChannel(emailAddress, channelID);
-
-        this.renderer = <div data-layout="flex-center">
-            <span text="..."/>
-        </div>;
-
-        this.element.className = channelViewStyle;
-        this.renderer = <section>
-            <header>
-                <input
-                    placeholder="Search..."
-                    value={Bind.twoWaysImmediate(() => this.search)}/>
-            </header>
-            <section>
-                <AtomRepeater
-                    items={this.mails}
-                    { ... InfiniteRepeater.pagedItems((start) =>
-                            (c, e, cancelToken) =>
-                                this.blogService.getEmails({
-                                    channelID: this.channel.mailboxID,
-                                    start,
-                                    search: this.search,
-                                    cancelToken
-                                })
-                    )}
-                    itemRenderer={(email: IEmail) => {
-                        return <section data-element="blog-item">
-                            <h4 data-element="title" text={email.subject}/>
-                            <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
-                            <h6 text={email.senderName}/>
-                            <section
-                                data-element="content">
-                                <LimitedText height={200}>
-                                    <section { ... renderMail({ email })}/>
-                                </LimitedText>
-                            </section>
-                        </section>;
-                    }}
-                />
-            </section>
-            <aside>
-                <AtomRepeater
-                />
-            </aside>
-            <footer></footer>
-        </section>;
-    }
+@Pack
+export default class Empty extends view {
 
 }
+

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

@@ -45,6 +45,24 @@ export const stylerVars = prepareVariables({
     sizeLarger: "15px",
     sizeLarge: "20px",
 
+    sizeMobileWidth: "350px",
+    sizeTabletWidth: "1024px",
+
+    size10Pc: "10%",
+    size20Pc: "20%",
+    size25Pc: "25%",
+    size30Pc: "30%",
+    size33Pc: "33.3%",
+    size40Pc: "40%",
+    size50Pc: "50%",
+    size60Pc: "60%",
+    size66Pc: "66.6%",
+    size70Pc: "70%",
+    size75Pc: "75%",
+    size80Pc: "80%",
+    size90Pc: "90%",
+    size100Pc: "100%",
+
     rem1: "1rem",
     rem2: "2rem",
     rem3: "3rem",
@@ -154,6 +172,20 @@ export const sizeVarList = [
     stylerVars.sizeDefault,
     stylerVars.sizeLarger,
     stylerVars.sizeLarge,
+    stylerVars.size10Pc,
+    stylerVars.size20Pc,
+    stylerVars.size25Pc,
+    stylerVars.size30Pc,
+    stylerVars.size33Pc,
+    stylerVars.size40Pc,
+    stylerVars.size50Pc,
+    stylerVars.size60Pc,
+    stylerVars.size66Pc,
+    stylerVars.size70Pc,
+    stylerVars.size75Pc,
+    stylerVars.size80Pc,
+    stylerVars.size90Pc,
+    stylerVars.size100Pc,
     stylerVars.relSizeXS,
     stylerVars.relSizeSmall,
     stylerVars.relSizeMedium,