example: Update customization example

Author: szuperaz

README.md

@@ -81,9 +81,9 @@ Run `npm start` and navigate to `http://localhost:4200/`.
 
 ## Customization examples
 
-This repository includes a sample app that showcases the different customization options of our SDK:
+This repository includes a sample app that showcases how you can provide your own template for different components within the SDK:
 
-To test the app:
+To run the app:
 
 Create a file named `.env` in the root directory with the following content:
 
@@ -93,6 +93,7 @@ STREAM_USER_ID=<Your user ID>
 STREAM_USER_TOKEN=<Your user token>
 ```
 
+x
 Run `npm start:customizations-example` and navigate to `http://localhost:4200/`.
 
 ## Local development

projects/customizations-example/src/app/app.component.html

@@ -1,19 +1,24 @@
 <div id="root">
   <stream-channel-list></stream-channel-list>
   <stream-channel>
-    <stream-channel-header></stream-channel-header>
-    <stream-message-list></stream-message-list>
+    <stream-channel-header
+      style="--white-snow: #e8f5e9"
+    ></stream-channel-header>
+    <stream-message-list style="--primary-color: #8bc34a"></stream-message-list>
     <stream-notification-list></stream-notification-list>
     <stream-message-input
-      style="--grey-whisper: rgba(255, 192, 203, 0.4)"
+      style="--grey-whisper: rgba(165, 214, 167, 0.4); --primary-color: #8bc34a"
     ></stream-message-input>
     <stream-thread name="thread">
       <stream-message-list
         name="thread-message-list"
         mode="thread"
       ></stream-message-list>
       <stream-message-input
-        style="--grey-whisper: rgba(255, 192, 203, 0.4)"
+        style="
+          --grey-whisper: rgba(165, 214, 167, 0.4);
+          --primary-color: #8bc34a;
+        "
         name="thread-message-input"
         mode="thread"
       ></stream-message-input>
@@ -29,7 +34,7 @@
   <div
     style="
       padding: 10px;
-      background-color: rgba(255, 192, 203, 0.4);
+      background-color: #f1f8e9;
       border-radius: var(--border-radius-md);
       margin: 10px;
       cursor: pointer;
@@ -48,15 +53,13 @@
   let-enabledMessageActions="enabledMessageActions"
   let-mode="mode"
 >
-  <div
-    style="
-      padding: 15px;
-      margin: 15px;
-      background-color: rgba(255, 192, 203, 0.4);
-      border-radius: var(--border-radius-md);
-    "
-  >
+  <div>
     <stream-message
+      style="
+        --grey-whisper: #c8e6c9;
+        --white-snow: #f1f8e9;
+        --primary-color: #689f38;
+      "
       [message]="message"
       [isLastSentMessage]="isLastSentMessage"
       [enabledMessageActions]="enabledMessageActions"
@@ -76,7 +79,7 @@
   let-messageUpdateHandler="messageUpdateHandler"
 >
   <stream-message-input
-    style="--grey-whisper: rgba(255, 192, 203, 0.4)"
+    style="--grey-whisper: rgba(165, 214, 167, 0.4); --primary-color: #8bc34a"
     [message]="message"
     [isFileUploadEnabled]="isFileUploadEnabled"
     [areMentionsEnabled]="areMentionsEnabled"
@@ -88,14 +91,14 @@
 </ng-template>
 
 <ng-template #mentionTemplate let-user="user">
-  <span style="color: pink; font-weight: bold">{{
+  <span style="color: #7cb342; font-weight: bold">{{
     user?.id || user?.name
   }}</span>
 </ng-template>
 
 <ng-template #typingIndicator let-usersTyping$="usersTyping$">
   <div
-    style="color: pink"
+    style="color: #7cb342"
     *ngIf="$any(usersTyping$ | async)?.length"
     class="str-chat__typing-indicator str-chat__typing-indicator--typing"
   >
@@ -108,20 +111,31 @@
 </ng-template>
 
 <ng-template #mentionAutocompleteItemTemplate let-item="item">
-  <div style="color: pink">{{ item.autocompleteLabel }} - {{ item.role }}</div>
+  <div style="color: #7cb342">
+    {{ item.autocompleteLabel }} - {{ item.role }}
+  </div>
 </ng-template>
 
 <ng-template #commandAutocompleteItemTemplate let-item="item">
-  <div style="color: pink">
+  <div style="color: #7cb342">
     {{ item.autocompleteLabel | uppercase }} ({{ item.description }})
   </div>
 </ng-template>
 
 <ng-template #channelActionsTemplate let-channel="channel">
-  <span style="color: pink">
-    You can add action buttons to manage
-    {{ channel?.data?.name || channel?.id }} channel
-  </span>
+  <button
+    (click)="inviteClicked(channel)"
+    style="
+      background-color: #388e3c;
+      color: white;
+      border-radius: var(--border-radius-md);
+      border: none;
+      padding: 10px;
+      cursor: pointer;
+    "
+  >
+    Invite
+  </button>
 </ng-template>
 
 <ng-template
@@ -131,7 +145,7 @@
 >
   <span
     style="
-      color: pink;
+      color: #7cb342;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -156,7 +170,7 @@
   <stream-attachment-preview-list
     style="
       border-radius: var(--border-radius-md);
-      background-color: rgba(255, 192, 203, 0.4);
+      background-color: rgba(241, 248, 233, 0.4);
     "
     [attachmentUploads$]="attachmentUploads$"
     (retryAttachmentUpload)="retryUploadHandler($event)"
@@ -172,25 +186,21 @@
   let-size="size"
 >
   <stream-avatar
-    style="--primary-color: pink"
+    style="--primary-color: #8bc34a"
     [name]="name"
     [imageUrl]="imageUrl"
     [size]="size"
   ></stream-avatar>
 </ng-template>
 
 <ng-template #iconTemplate let-icon="icon" let-size="size">
-  <stream-icon
-    style="border: 1px solid pink"
-    [icon]="icon"
-    [size]="size"
-  ></stream-icon>
+  <app-icon [icon]="icon" [size]="size"></app-icon>
 </ng-template>
 
 <ng-template #loadingIndicatorTemplate let-size="size" let-color="color">
   <stream-loading-indicator
     [size]="size"
-    color="pink"
+    color="#F1F8E9"
   ></stream-loading-indicator>
 </ng-template>
 
@@ -204,7 +214,7 @@
   let-isEditingChangeHandler="isEditingChangeHandler"
 >
   <stream-message-actions-box
-    style="--primary-color: pink"
+    style="--primary-color: #33691e"
     [isOpen]="isOpen"
     [isMine]="isMine"
     [enabledActions]="enabledActions"
@@ -237,7 +247,7 @@
   let-ownReactions="ownReactions"
 >
   <stream-message-reactions
-    style="--black: rgba(255, 192, 203, 0.8)"
+    style="--black: rgba(51, 105, 30, 0.8)"
     [messageReactionCounts]="messageReactionCounts"
     [latestReactions]="latestReactions"
     [isSelectorOpen]="isSelectorOpen"
@@ -254,7 +264,7 @@
   let-content="content"
 >
   <stream-modal
-    style="--white: #faf2f6"
+    style="--white: #f1f8e9"
     [isOpen]="isOpen"
     (isOpenChange)="isOpenChangeHandler($event)"
     [content]="content"
@@ -265,7 +275,7 @@
 <ng-template #notificationTemplate let-type="type" let-content="content">
   <div
     class="str-chat__custom-notification"
-    style="background-color: #fff0f9; color: pink"
+    style="background-color: #f1f8e9; color: #2e7d32"
   >
     {{ type | uppercase }}
     <ng-container *ngTemplateOutlet="content"></ng-container>

projects/customizations-example/src/app/app.component.ts

@@ -4,6 +4,7 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core';
+import { Channel } from 'stream-chat';
 import {
   ChatClientService,
   ChannelService,
@@ -149,4 +150,12 @@ export class AppComponent implements AfterViewInit {
       this.threadHeaderTemplate
     );
   }
+
+  inviteClicked(channel: Channel) {
+    alert(
+      `You can add channel actions to the channel header to manage the ${
+        channel.data?.name || (channel.data?.id as string)
+      } channel`
+    );
+  }
 }

projects/customizations-example/src/app/app.module.ts

@@ -11,13 +11,15 @@ import { EmojiPickerComponent } from './emoji-picker/emoji-picker.component';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { MessageActionComponent } from './message-action/message-action.component';
 import { ThreadHeaderComponent } from './thread-header/thread-header.component';
+import { IconComponent } from './icon/icon.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     EmojiPickerComponent,
     MessageActionComponent,
     ThreadHeaderComponent,
+    IconComponent,
   ],
   imports: [
     BrowserModule,

projects/customizations-example/src/app/emoji-picker/emoji-picker.component.html

@@ -5,7 +5,7 @@
     preserveAspectRatio="xMinYMin"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-rule="evenodd" fill-rule="evenodd" fill="pink">
+    <g clip-rule="evenodd" fill-rule="evenodd" fill="#33691e">
       <path
         d="M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z"
       ></path>
@@ -15,7 +15,7 @@
 
 <emoji-mart
   class="picker"
-  color="pink"
+  color="#33691e"
   *ngIf="isOpened"
   title="Pick your emoji…"
   emoji="point_up"

projects/customizations-example/src/app/icon/icon.component.html

@@ -0,0 +1,6 @@
+<span
+  class="material-icons"
+  [ngStyle]="{ 'font-size': size || defaultSize + 'px' }"
+>
+  {{ mapToMaterialIcon() }}
+</span>

projects/customizations-example/src/app/icon/icon.component.scss

@@ -0,0 +1,3 @@
+.material-icons {
+  color: #33691e;
+}

projects/customizations-example/src/app/icon/icon.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [IconComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/customizations-example/src/app/icon/icon.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { Icon } from 'stream-chat-angular';
+
+@Component({
+  selector: 'app-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+})
+export class IconComponent {
+  @Input() icon: Icon | undefined;
+  @Input() size: number | undefined;
+  defaultSize = 18;
+
+  constructor() {}
+
+  mapToMaterialIcon() {
+    const map: { [key in Icon]: string } = {
+      'action-icon': 'more_horiz',
+      'arrow-left': 'keyboard_arrow_left',
+      'arrow-right': 'keyboard_arrow_right',
+      close: 'close',
+      'close-no-outline': 'close',
+      'connection-error': 'error',
+      'delivered-icon': 'check',
+      file: 'folder',
+      'file-upload': 'file_upload',
+      menu: 'menu',
+      'reaction-icon': 'face',
+      reply: 'swap_horiz',
+      'reply-in-thread': 'reply',
+      retry: 'replay',
+      send: 'send',
+    };
+
+    return map[this.icon!];
+  }
+}

projects/customizations-example/src/app/thread-header/thread-header.component.scss

@@ -1,3 +1,3 @@
 .str-chat__thread-header {
-  color: pink;
+  --white: #e8f5e9;
 }