fix(chat-footer): footer padding, demo _changeLocale

Alwatr · Dec 29, 2022 · 6454599 · 6454599
1 parent a02074d
commit 6454599
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/ui/ui-kit/src/chat/chat-footer.ts b/ui/ui-kit/src/chat/chat-footer.ts
@@ -2,6 +2,7 @@ import {AlwatrDummyElement, css, customElement, html} from '@alwatr/element';
 
 import './chat-text-input.js';
 import '../icon-button/standard-icon-button.js';
+import {l10n} from '@alwatr/i18n';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -17,15 +18,13 @@ export class AlwatrChatFooter extends AlwatrDummyElement {
   static override styles = css`
     :host {
       display: flex;
-
-      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);
-
+      padding-inline-start: var(--md-sys-spacing-track-1);
       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);
     }
 
     alwatr-standard-icon-button {
@@ -36,8 +35,20 @@ export class AlwatrChatFooter extends AlwatrDummyElement {
 
   override render(): unknown {
     return html`
-      <alwatr-standard-icon-button .icon=${'happy-outline'}></alwatr-standard-icon-button>
+      <alwatr-standard-icon-button .icon=${'happy-outline'} @click=${this._changeLocale}></alwatr-standard-icon-button>
       <alwatr-chat-text-input></alwatr-chat-text-input>
     `;
   }
+
+  protected _changeLocale(): void {
+    l10n.setLocal(
+      l10n.locale?.code !== l10n.config.defaultLocale.code
+        ? l10n.config.defaultLocale
+        : {
+          code: 'fa-IR',
+          direction: 'rtl',
+          language: 'fa',
+        },
+    );
+  }
 }