feat(ui/chat): new alwatr-chat element

Alwatr · Dec 29, 2022 · f711e12 · f711e12
1 parent 78305c5
commit f711e12
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 105 deletions.
diff --git a/ui/demo-pwa/src/page-chat.ts b/ui/demo-pwa/src/page-chat.ts
@@ -1,132 +1,32 @@
 import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
 
-import '@alwatr/ui-kit/chat/chat-footer.js';
-import '@alwatr/ui-kit/chat/chat-list.js';
-
-import type {ChatStorage} from '@alwatr/ui-kit/chat/chat-list.js';
+import '@alwatr/ui-kit/chat/chat.js';
 
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-page-chat': AlwatrPageHome;
   }
 }
 
-const currentUser = 'user-1';
-
-const chatStorage: ChatStorage = {
-  ok: true,
-  meta: {
-    formatVersion: 4,
-    lastAutoId: 0,
-    lastUpdated: Date.now(),
-    reversion: 100,
-  },
-  data: {
-    '1': {
-      id: '1',
-      from: 'user-1',
-      type: 'text',
-      text: 'سلام',
-    },
-    '2': {
-      id: '2',
-      from: 'user-2',
-      type: 'text',
-      text:
-        'با تمام جهل و مستی تصمیم گرفته‌ام دفترچه رزوگار را با پاک کنِ مهر و عطوفت پاک کنم\n' +
-        'و از اول با نام تو روزگار را آغاز کنم.',
-    },
-    '3': {
-      id: '3',
-      from: 'user-1',
-      type: 'text',
-      text: 'هنوز در نخستین صفحات آن مانده‌ام و مطلبی برای نوشتن ندارم.تا پایان نوشتن انتظارت می‌کشم.',
-    },
-    '4': {
-      id: '4',
-      from: 'user-4',
-      type: 'text',
-      text: 'دیوانه مسلمانی که در روزهای انتظار هزار بار به دیوانگی‌اش ایمان می‌آورد….',
-    },
-    '5': {
-      id: '5',
-      from: 'user-1',
-      type: 'text',
-      text: 'کودک که بودم پدرم جمعه ها صبح درب خانه را آب و جارو می کرد تا  اگر مولا از آن حوالی عبور کند …',
-    },
-    '6': {
-      id: '6',
-      from: 'user-2',
-      type: 'text',
-      text: 'و نو روز هر باره این حس را در من زنده می کند',
-    },
-    '7': {
-      id: '7',
-      from: 'user-2',
-      type: 'text',
-      text: 'مردمی را می بینم که سراسر شوق و شورند ، خانه تکانی می کنند و لباس های نو برتن…',
-    },
-    '8': {
-      id: '8',
-      from: 'user-2',
-      type: 'text',
-      text: 'اما برای چه ؟ برای که ؟\nاینان منتظرند تا  بهار شود ؟',
-    },
-    '9': {
-      id: '9',
-      from: 'user-4',
-      type: 'text',
-      text:
-        'سالهاست می اندیشم که هنگام بهار مگر چه می شود که اینگونه به هم می ریزیم' +
-        '،مهربان می شویم، به سراغ هم می رویم و از همه مهمتر منتظر می شویم…',
-    },
-    '10': {
-      id: '10',
-      from: 'user-4',
-      type: 'text',
-      text: 'انتظار...',
-    },
-  },
-};
-
 /**
  * Alwatr Demo Home Page
  */
 @customElement('alwatr-page-chat')
 export class AlwatrPageHome extends AlwatrSmartElement {
   static override styles = css`
     :host {
-      height: 100%;
+      display: block;
     }
-
-    .alwatr-chat {
+    :host,
+    alwatr-chat {
       height: 100%;
     }
-
-    /* inside alwatr chat */
-    .alwatr-chat {
-      display: flex;
-      flex-direction: column;
-
-      color: var(--md-sys-color-on-secondary-container);
-      background-color: var(--md-sys-color-secondary-container);
-    }
-
-    alwatr-chat-list {
-      flex-grow: 1;
-      overflow-y: auto;
-      background-color: transparent;
-      color: inherit;
-    }
   `;
 
   override render(): unknown {
     super.render();
     return html`
-      <main class="alwatr-chat">
-        <alwatr-chat-list .storage=${chatStorage} .currentUser=${currentUser}></alwatr-chat-list>
-        <alwatr-chat-footer></alwatr-chat-footer>
-      </main>
+      <alwatr-chat></alwatr-chat>
     `;
   }
 }
diff --git a/ui/ui-kit/src/chat/chat.ts b/ui/ui-kit/src/chat/chat.ts
@@ -0,0 +1,113 @@
+import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
+
+import './chat-footer.js';
+import './chat-list.js';
+
+import type {ChatStorage} from './chat-list.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-chat': AlwatrChat;
+  }
+}
+
+const currentUser = 'user-1';
+
+const chatStorage: ChatStorage = {
+  ok: true,
+  meta: {
+    formatVersion: 4,
+    lastAutoId: 0,
+    lastUpdated: Date.now(),
+    reversion: 100,
+  },
+  data: {
+    '1': {
+      id: '1',
+      from: 'user-1',
+      type: 'text',
+      text: 'سلام',
+    },
+    '2': {
+      id: '2',
+      from: 'user-2',
+      type: 'text',
+      text:
+        'با تمام جهل و مستی تصمیم گرفته‌ام دفترچه رزوگار را با پاک کنِ مهر و عطوفت پاک کنم\n' +
+        'و از اول با نام تو روزگار را آغاز کنم.',
+    },
+    '3': {
+      id: '3',
+      from: 'user-1',
+      type: 'text',
+      text: 'هنوز در نخستین صفحات آن مانده‌ام و مطلبی برای نوشتن ندارم.تا پایان نوشتن انتظارت می‌کشم.',
+    },
+    '4': {
+      id: '4',
+      from: 'user-4',
+      type: 'text',
+      text: 'دیوانه مسلمانی که در روزهای انتظار هزار بار به دیوانگی‌اش ایمان می‌آورد….',
+    },
+    '5': {
+      id: '5',
+      from: 'user-1',
+      type: 'text',
+      text: 'کودک که بودم پدرم جمعه ها صبح درب خانه را آب و جارو می کرد تا  اگر مولا از آن حوالی عبور کند …',
+    },
+    '6': {
+      id: '6',
+      from: 'user-2',
+      type: 'text',
+      text: 'و نو روز هر باره این حس را در من زنده می کند',
+    },
+    '7': {
+      id: '7',
+      from: 'user-2',
+      type: 'text',
+      text: 'مردمی را می بینم که سراسر شوق و شورند ، خانه تکانی می کنند و لباس های نو برتن…',
+    },
+    '8': {
+      id: '8',
+      from: 'user-2',
+      type: 'text',
+      text: 'اما برای چه ؟ برای که ؟\nاینان منتظرند تا  بهار شود ؟',
+    },
+    '9': {
+      id: '9',
+      from: 'user-4',
+      type: 'text',
+      text:
+        'سالهاست می اندیشم که هنگام بهار مگر چه می شود که اینگونه به هم می ریزیم' +
+        '،مهربان می شویم، به سراغ هم می رویم و از همه مهمتر منتظر می شویم…',
+    },
+    '10': {
+      id: '10',
+      from: 'user-4',
+      type: 'text',
+      text: 'انتظار...',
+    },
+  },
+};
+
+/**
+ * Alwatr Demo Home Page
+ */
+@customElement('alwatr-chat')
+export class AlwatrChat extends AlwatrSmartElement {
+  static override styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      color: var(--md-sys-color-on-secondary-container);
+      background-color: var(--md-sys-color-secondary-container);
+    }
+  `;
+
+  override render(): unknown {
+    super.render();
+    return html`
+      <alwatr-chat-list .storage=${chatStorage} .currentUser=${currentUser}></alwatr-chat-list>
+      <alwatr-chat-footer></alwatr-chat-footer>
+    `;
+  }
+}