Small fixes

Author: szuperaz

projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.html

@@ -2,10 +2,7 @@
   <ng-container
     *ngIf="maxOptionsDisplayed && options.length > maxOptionsDisplayed"
   >
-    <button
-      class="str-chat__poll-action"
-      (click)="selectedAction = 'allOptions'; isModalOpen = true"
-    >
+    <button class="str-chat__poll-action" (click)="modalOpened('allOptions')">
       {{ "streamChat.See all options ({{count}})" | translate:{count:
       options.length} }}
     </button>
@@ -79,11 +76,23 @@
 
 <!-- The modal components click outside logic can't identify clicks from subcomponents, so we stop event propagation -->
 <ng-template #allOptions>
-  <stream-poll-options-list
+  <div
+    class="str-chat__modal__poll-option-list"
     (click)="$event.stopPropagation()"
-    [pollId]="pollId"
-    [messageId]="messageId"
-  ></stream-poll-options-list>
+  >
+    <div class="str-chat__modal-header">
+      <div class="str-chat__modal-header__title" translate>Poll options</div>
+    </div>
+    <div class="str-chat__modal__poll-option-list__body">
+      <div class="str-chat__modal__poll-option-list__title">{{ name }}</div>
+      <stream-poll-options-list
+        (click)="$event.stopPropagation()"
+        [pollId]="pollId"
+        [messageId]="messageId"
+        [maxOptionsDisplayed]="undefined"
+      ></stream-poll-options-list>
+    </div>
+  </div>
 </ng-template>
 <ng-template #suggestOption>
   <div>TODO: Suggest option</div>

projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.ts

@@ -30,8 +30,9 @@ type Action =
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PollActionsComponent extends BasePollComponent {
-  @Input() maxOptionsDisplayed: number | undefined;
+  @Input() maxOptionsDisplayed: number | undefined = 10;
   @Input() maxPollOptions = 100;
+  name = '';
   options: PollOption[] = [];
   isClosed = false;
   allowUserSuggestions = false;
@@ -77,6 +78,7 @@ export class PollActionsComponent extends BasePollComponent {
         allow_answers: state.allow_answers,
         answer_count: state.answers_count,
         created_by: state.created_by,
+        name: state.name,
       }),
       (state) => {
         this.options = state.options;
@@ -85,6 +87,7 @@ export class PollActionsComponent extends BasePollComponent {
         this.allowAnswers = state.allow_answers ?? false;
         this.answerCount = state.answer_count ?? 0;
         this.isOwnPoll = state.created_by?.id === this.currentUser?.id;
+        this.name = state.name;
         markForCheck();
       }
     );

projects/stream-chat-angular/src/lib/polls/poll-option-selector/poll-option-selector.component.html

@@ -18,6 +18,7 @@
           [user]="vote.user"
           [imageUrl]="vote.user?.image"
           [name]="vote.user?.name"
+          type="user"
         ></stream-avatar-placeholder>
       </div>
     </ng-container>

projects/stream-chat-angular/src/lib/polls/poll-options-list/poll-options-list.component.html

@@ -1,7 +1,7 @@
 <div
   class="str-chat__poll-option-list"
   [class.str-chat__poll-option-list--full]="
-    maxOptionsDisplayed && maxOptionsDisplayed === options.length
+    !maxOptionsDisplayed || maxOptionsDisplayed === options.length
   "
 >
   <ng-container

projects/stream-chat-angular/src/lib/polls/poll-options-list/poll-options-list.component.ts

@@ -9,7 +9,7 @@ import { Poll, PollOption } from 'stream-chat';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PollOptionsListComponent extends BasePollComponent {
-  @Input() maxOptionsDisplayed: number | undefined;
+  @Input() maxOptionsDisplayed: number | undefined = 10;
   options: PollOption[] = [];
 
   protected stateStoreSelector(

projects/stream-chat-angular/src/lib/polls/poll-results/poll-vote/poll-vote.component.html

@@ -5,6 +5,7 @@
       [user]="vote?.user"
       [imageUrl]="vote?.user?.image"
       [name]="vote?.user?.name ?? anonymousTranslation"
+      type="user"
     ></stream-avatar-placeholder>
     <div class="str-chat__poll-vote__author__name">
       {{ vote?.user?.name ?? anonymousTranslation }}