designed the search

Kakar21 · Sep 5, 2024 · dcef642 · dcef642
1 parent ceabdd7
commit dcef642
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 80 deletions.
diff --git a/src/app/main/chat/chat.component.html b/src/app/main/chat/chat.component.html
@@ -209,7 +209,7 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                     </button>
                 </div>
             </div>
-            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+            <mat-autocomplete class="chat-mention-autocomplete" #auto="matAutocomplete" (optionSelected)="selected($event)">
                 <mat-option *ngFor="let option of filteredMembers | async" [value]="option.name">
                     @if (option.avatar && option.avatar.length > 1) {
                     <img src="{{ option.avatar }}" />

diff --git a/src/app/main/chat/chat.component.scss b/src/app/main/chat/chat.component.scss
@@ -748,7 +748,7 @@
     }
 }
 
-::ng-deep::ng-deep div.mat-mdc-autocomplete-panel {
+::ng-deep::ng-deep div.chat-mention-autocomplete {
     width: unset !important;
     display: flex;
     padding: 1.25rem 1.3125rem !important;

diff --git a/src/app/main/header/header.component.html b/src/app/main/header/header.component.html
@@ -29,18 +29,32 @@
             [formControl]="formCtrl"
             [matAutocomplete]="auto"
         />
-        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayOption">
-            <mat-option *ngIf="(filteredResults | async)?.length === 0" disabled>
-                Keine Ergebnisse gefunden
+        <mat-autocomplete class="search-autocomplete" #auto="matAutocomplete" [displayWith]="displayOption">
+            <mat-option class="search-no-results" *ngIf="(filteredResults | async)?.length === 0" disabled>
+                <span>Keine Ergebnisse gefunden</span>
             </mat-option>
-            <ng-container *ngFor="let option of filteredResults | async">
-                <mat-option *ngIf="option.type === 'user'" [value]="option">
-                    <h3>{{ option.name }}</h3>
-                    <p>{{ option.message }}</p>
+            <ng-container class="hallo" *ngFor="let option of filteredResults | async">
+                <mat-option class="search-option" *ngIf="option.type === 'user'" [value]="option">
+                    @if (option.avatar && option.avatar.length > 1) {
+                        <img src="{{ option.avatar }}" />
+                    } @else {
+                        <img
+                            src="../../assets/img/avatar/{{
+                                option.avatar
+                            }}.svg"
+                        />
+                    }
+                    <div>
+                        <h3>{{ option.name }}</h3>
+                        <p>{{ option.message }}</p>
+                    </div>
                 </mat-option>
-                <mat-option *ngIf="option.type === 'channel'" [value]="option">
-                    <h3>{{ option.name }}</h3>
-                    <p>{{ option.message }}</p>
+                <mat-option class="search-option" *ngIf="option.type === 'channel'" [value]="option">
+                    <img src="../../../assets/img/icons/tag.svg" />
+                    <div>
+                        <h3>{{ option.name }}</h3>
+                        <p>{{ option.message }}</p>
+                    </div>
                 </mat-option>
             </ng-container>
         </mat-autocomplete>

diff --git a/src/app/main/header/header.component.scss b/src/app/main/header/header.component.scss
@@ -27,6 +27,8 @@
     position: relative;
     display: flex;
     align-items: center;
+    border: 1px solid var(--bg-color);
+    border-radius: 2.625rem;
 
     input {
         width: 100%;
@@ -51,6 +53,80 @@
         position: absolute;
         right: 1.5rem;
     }
+
+    &:hover {
+        border-color: var(--purple-2);
+        cursor: pointer;
+    }
+
+    &:focus-within {
+        border-color: var(--purple-1);
+        cursor: unset;
+    }
+}
+
+::ng-deep::ng-deep div.search-autocomplete {
+    width: 100% !important;
+    display: flex;
+    padding: 1.25rem 1.3125rem !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+    justify-content: unset !important;
+    gap: 0.9375rem;
+    max-height: 50vh !important;
+    overflow-y: auto !important;
+    border-radius: 1.875rem 1.875rem 1.875rem 0rem !important;
+}
+
+::ng-deep::ng-deep mat-option.search-no-results {
+    >span {
+        >span {
+            color: var(--text-gray);
+            font-family: Nunito;
+            font-size: 1.125rem;
+        }
+    }
+}
+
+::ng-deep::ng-deep mat-option.search-option {
+    display: unset;
+    align-items: center;
+    padding: 0.25rem 1.25rem;
+    border-radius: 2.1875rem;
+    transition: 80ms ease-in;
+    width: auto;
+
+    >span {
+        display: flex;
+        gap: 0.9375rem;
+        width: 100%;
+
+        >img {
+            width: 3.125rem;
+            height: 3.125rem;
+            border-radius: 100%;
+            object-fit: cover;
+        }
+
+        >div {
+            width: calc(100% - 3.125rem - 0.9375rem);
+
+            >h3 {
+                font-size: 1.125rem;
+            }
+            >p {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 100%;
+            }
+        }
+    }
+
+    &:hover {
+        cursor: pointer;
+        background-color: var(--bg-color);
+    }
 }
 
 .profile-info {

diff --git a/src/app/main/thread/thread.component.html b/src/app/main/thread/thread.component.html
@@ -203,7 +203,7 @@ <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
                 </button>
             </div>
         </div>
-        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+        <mat-autocomplete class="thread-mention-autocomplete" #auto="matAutocomplete" (optionSelected)="selected($event)">
             <mat-option *ngFor="let option of filteredMembers | async" [value]="option.name">
                 @if (option.avatar && option.avatar.length > 1) {
                 <img src="{{ option.avatar }}" />

diff --git a/src/app/main/thread/thread.component.scss b/src/app/main/thread/thread.component.scss
@@ -393,7 +393,7 @@ header {
     padding: 0.5rem 1rem 1rem 1rem;
 }
 
-::ng-deep::ng-deep div.mat-mdc-autocomplete-panel {
+::ng-deep::ng-deep div.thread-mention-autocomplete {
     width: unset !important;
     display: flex;
     padding: 1.25rem 1.3125rem !important;

diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
diff --git a/src/app/search/search.component.scss b/src/app/search/search.component.scss
diff --git a/src/app/search/search.component.spec.ts b/src/app/search/search.component.spec.ts
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts