Change the view toggle to use icons

block-core · Nov 7, 2024 · a619c80 · a619c80
1 parent b7aaa1a
commit a619c80
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/app/src/app/communities/communities.component.html b/app/src/app/communities/communities.component.html
@@ -18,10 +18,20 @@
       <input matInput placeholder="Filter communities..." />
       <mat-icon matSuffix>search</mat-icon>
     </mat-form-field> -->
+
     <mat-button-toggle-group hideSingleSelectionIndicator="true" [(ngModel)]="viewStyle">
+      <mat-button-toggle value="thumbnail">
+        <mat-icon>grid_view</mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="list">
+        <mat-icon>view_list</mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <!-- <mat-button-toggle-group hideSingleSelectionIndicator="true" [(ngModel)]="viewStyle">
       <mat-button-toggle value="card">Cards</mat-button-toggle>
       <mat-button-toggle value="table">Table</mat-button-toggle>
-    </mat-button-toggle-group>
+    </mat-button-toggle-group> -->
   </mat-card-content>
 </mat-card>
 
@@ -39,7 +49,7 @@
     </div>
   </mat-card-content>
 </mat-card>
-} @if (viewStyle() == 'card') {
+} @if (viewStyle() == 'thumbnail') {
 <!-- <mat-card appearance="outlined">
   <mat-card-header>
     <mat-card-title>Dog Lovers</mat-card-title>

diff --git a/app/src/app/communities/communities.component.ts b/app/src/app/communities/communities.component.ts
@@ -94,7 +94,7 @@ export class CommunitiesComponent {
   // }
 
   //viewStyle = signal('card');
-  viewStyle = model<string>('card');
+  viewStyle = model<string>('thumbnail');
 
   checked = model<boolean>(false);