From 70410476ff7846b14873dfdf6299d528e1de2f61 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Wed, 28 Dec 2022 16:42:15 +0330 Subject: [PATCH 1/7] feat(ui-kit/chat-footer): component --- ui/ui-kit/src/chat/chat-footer.ts | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 ui/ui-kit/src/chat/chat-footer.ts diff --git a/ui/ui-kit/src/chat/chat-footer.ts b/ui/ui-kit/src/chat/chat-footer.ts new file mode 100644 index 000000000..9335aedd6 --- /dev/null +++ b/ui/ui-kit/src/chat/chat-footer.ts @@ -0,0 +1,29 @@ +import {AlwatrDummyElement, css, customElement, html} from '@alwatr/element'; + +declare global { + interface HTMLElementTagNameMap { + 'alwatr-chat-footer': AlwatrChatFooter; + } +} + +/** + * Alwatr chat footer element. + */ +@customElement('alwatr-chat-footer') +export class AlwatrChatFooter extends AlwatrDummyElement { + static override styles = css` + :host { + display: flex; + } + footer { + border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left); + border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right); + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface); + } + `; + + override render(): unknown { + return html` `; + } +} From 30cf89aac3a68e0fc028eb7a8a227efce85ba892 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Wed, 28 Dec 2022 18:53:57 +0330 Subject: [PATCH 2/7] feat(ui-kit/chat-footer): build base --- ui/ui-kit/src/chat/chat-footer.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/ui/ui-kit/src/chat/chat-footer.ts b/ui/ui-kit/src/chat/chat-footer.ts index 9335aedd6..182eb36d7 100644 --- a/ui/ui-kit/src/chat/chat-footer.ts +++ b/ui/ui-kit/src/chat/chat-footer.ts @@ -14,16 +14,15 @@ export class AlwatrChatFooter extends AlwatrDummyElement { static override styles = css` :host { display: flex; - } - footer { - border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left); - border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right); + border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left); + border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right); color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-surface); + padding: var(--md-sys-spacing-track-2); } `; override render(): unknown { - return html`
`; + return html``; } } From 38e3bbc5d35242466cd4e33bf4bcacd5c6a87368 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Thu, 29 Dec 2022 19:14:18 +0330 Subject: [PATCH 3/7] fix(ui-kit/chat-footer): styles --- ui/ui-kit/src/chat/chat-footer.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/ui-kit/src/chat/chat-footer.ts b/ui/ui-kit/src/chat/chat-footer.ts index 182eb36d7..85ab7e051 100644 --- a/ui/ui-kit/src/chat/chat-footer.ts +++ b/ui/ui-kit/src/chat/chat-footer.ts @@ -14,11 +14,15 @@ export class AlwatrChatFooter extends AlwatrDummyElement { static override styles = css` :host { display: flex; - border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left); - border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right); + width: 100%; + color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-surface); + padding: var(--md-sys-spacing-track-2); + + border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left); + border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right); } `; From b8837ff9772959a585e4862f48b9b5da390da561 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Thu, 29 Dec 2022 19:49:17 +0330 Subject: [PATCH 4/7] feat(ui-kit/chat-text-input): flex grow --- ui/ui-kit/src/chat/chat-text-input.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/ui-kit/src/chat/chat-text-input.ts b/ui/ui-kit/src/chat/chat-text-input.ts index 0089b7355..c08bd5f4a 100644 --- a/ui/ui-kit/src/chat/chat-text-input.ts +++ b/ui/ui-kit/src/chat/chat-text-input.ts @@ -22,9 +22,10 @@ export class AlwatrChatTextInput extends LocalizeMixin(AlwatrDummyElement) { user-select: none; align-items: flex-end; vertical-align: middle; - border-radius: calc(var(--_height)/2); + border-radius: calc(var(--_height) / 2); color: var(--md-sys-color-on-surface-variant); background-color: var(--md-sys-color-surface-variant); + flex-grow: 1; } alwatr-standard-icon-button { From 5151d1c50c1fd63e1bee479220a4363a9ab800e3 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Thu, 29 Dec 2022 19:49:45 +0330 Subject: [PATCH 5/7] feat(ui-kit/chat-footer): new component --- ui/ui-kit/src/chat/chat-footer.ts | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/ui/ui-kit/src/chat/chat-footer.ts b/ui/ui-kit/src/chat/chat-footer.ts index 85ab7e051..0cf25c231 100644 --- a/ui/ui-kit/src/chat/chat-footer.ts +++ b/ui/ui-kit/src/chat/chat-footer.ts @@ -1,5 +1,8 @@ import {AlwatrDummyElement, css, customElement, html} from '@alwatr/element'; +import './chat-text-input.js'; +import '../icon-button/standard-icon-button.js'; + declare global { interface HTMLElementTagNameMap { 'alwatr-chat-footer': AlwatrChatFooter; @@ -14,19 +17,27 @@ export class AlwatrChatFooter extends AlwatrDummyElement { static override styles = css` :host { display: flex; - width: 100%; color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-surface); + gap: var(--md-sys-spacing-track-1); padding: var(--md-sys-spacing-track-2); - border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left); - border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right); + border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left); + border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right); + } + + alwatr-standard-icon-button { + width: var(--md-sys-spacing-track-6); + height: var(--md-sys-spacing-track-6); } `; override render(): unknown { - return html``; + return html` + + + `; } } From 7f98b8a14c999d17ce30364f48234498b166994f Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Thu, 29 Dec 2022 19:50:15 +0330 Subject: [PATCH 6/7] feat(ui/demo-pwa/page-chat): new demo --- ui/demo-pwa/src/page-chat.ts | 99 +++++++----------------------------- 1 file changed, 18 insertions(+), 81 deletions(-) diff --git a/ui/demo-pwa/src/page-chat.ts b/ui/demo-pwa/src/page-chat.ts index cf005e5d9..fca7e4a0e 100644 --- a/ui/demo-pwa/src/page-chat.ts +++ b/ui/demo-pwa/src/page-chat.ts @@ -1,12 +1,7 @@ -import {customElement, AlwatrSmartElement, css, html, map} from '@alwatr/element'; -import {l10n} from '@alwatr/i18n'; +import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element'; -import '@alwatr/ui-kit/chat/chat-avatar.js'; -import '@alwatr/ui-kit/chat/chat-bubble.js'; -import '@alwatr/ui-kit/chat/chat-message.js'; -import '@alwatr/ui-kit/chat/chat-text-input.js'; +import '@alwatr/ui-kit/chat/chat-footer.js'; import '@alwatr/ui-kit/chat/chat-list.js'; -import '@alwatr/ui-kit/icon-button/standard-icon-button.js'; import type {ChatStorage} from '@alwatr/ui-kit/chat/chat-list.js'; @@ -94,8 +89,6 @@ const chatStorage: ChatStorage = { }, }; -const messageListShort = Object.values(chatStorage.data).splice(0, 5); - /** * Alwatr Demo Home Page */ @@ -103,91 +96,35 @@ const messageListShort = Object.values(chatStorage.data).splice(0, 5); export class AlwatrPageHome extends AlwatrSmartElement { static override styles = css` :host { - display: block; - box-sizing: border-box; height: 100%; - overflow-y: auto; - padding: var(--md-sys-spacing-side-padding); } - p { - padding: var(--md-sys-spacing-track-2) var(--md-sys-spacing-track-1) var(--md-sys-spacing-track-1); - color: var(--md-sys-color-on-surface-variant); - background-color: var(--md-sys-color-surface-variant); - } - p.surface { - color: var(--md-sys-color-on-surface); - background-color: var(--md-sys-color-surface); + .alwatr-chat { + height: 100%; } - .section-name { - display: block; - margin-bottom: var(--md-sys-spacing-track-1); + /* inside alwatr chat */ + .alwatr-chat { + display: flex; + flex-direction: column; + + color: var(--md-sys-color-on-surface-variant); + background-color: var(--md-sys-color-surface-variant); } - alwatr-chat-message { - margin: var(--md-sys-spacing-track-1) 0; + alwatr-chat-list { + flex-grow: 1; + overflow-y: auto; } `; override render(): unknown { super.render(); return html` - text on surface - -

text on surface-variant

- -

- alwatr-standard-icon-button - - - - -

- -

- alwatr-chat-text-input - -

- -

- alwatr-chat-avatar - ${map(messageListShort, (message) => html``)} -

- -

- alwatr-chat-bubble - ${map( - messageListShort, - (message) => html` - - `, - )} -

- -

- alwatr-chat-message - ${map( - messageListShort, - (message) => html` - - `, - )} -

- - +
+ + +
`; } - - protected _changeLocale(): void { - l10n.setLocal( - l10n.locale?.code !== l10n.config.defaultLocale.code - ? l10n.config.defaultLocale - : { - code: 'fa-IR', - direction: 'rtl', - language: 'fa', - }, - ); - } } From 35b1bf3b18fc96efd0ddf81452301973e2bce3b6 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Thu, 29 Dec 2022 22:01:05 +0330 Subject: [PATCH 7/7] fix(page-chat): colors --- ui/demo-pwa/src/page-chat.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/demo-pwa/src/page-chat.ts b/ui/demo-pwa/src/page-chat.ts index fca7e4a0e..0092a9000 100644 --- a/ui/demo-pwa/src/page-chat.ts +++ b/ui/demo-pwa/src/page-chat.ts @@ -108,13 +108,15 @@ export class AlwatrPageHome extends AlwatrSmartElement { display: flex; flex-direction: column; - color: var(--md-sys-color-on-surface-variant); - background-color: var(--md-sys-color-surface-variant); + 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; } `;