Feature/change view mode selector to slide toggle (#1443)

* Change view mode selector to slide toggle

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Changed the view mode selector to a slide toggle
 - Upgraded `Nx` from version `15.0.0` to `15.0.13`
 
 ## 1.211.0 - 11.11.2022

apps/client/src/app/pages/account/account-page.component.ts

@@ -303,6 +303,24 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     }
   }
 
+  public onViewModeChange(aEvent: MatSlideToggleChange) {
+    this.dataService
+      .putUserSetting({ viewMode: aEvent.checked === true ? 'ZEN' : 'DEFAULT' })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/pages/account/account-page.html

@@ -167,29 +167,6 @@
                   </mat-form-field>
                 </div>
               </div>
-              <div class="d-flex mb-2">
-                <div class="align-items-center d-flex pr-1 pt-1 w-50">
-                  <ng-container i18n>View Mode</ng-container>
-                </div>
-                <div class="pl-1 w-50">
-                  <div class="align-items-center d-flex overflow-hidden">
-                    <mat-form-field
-                      appearance="outline"
-                      class="compact-with-outline w-100 without-hint"
-                    >
-                      <mat-select
-                        name="viewMode"
-                        [disabled]="!hasPermissionToUpdateViewMode"
-                        [value]="user.settings.viewMode"
-                        (selectionChange)="onChangeUserSetting('viewMode', $event.value)"
-                      >
-                        <mat-option value="DEFAULT">Default</mat-option>
-                        <mat-option value="ZEN">Zen</mat-option>
-                      </mat-select>
-                    </mat-form-field>
-                  </div>
-                </div>
-              </div>
               <div class="d-flex">
                 <div class="align-items-center d-flex pr-1 pt-1 w-50">
                   <ng-container i18n>Appearance</ng-container>
@@ -216,6 +193,19 @@
               </div>
             </form>
           </div>
+          <div class="d-flex mt-4 py-1">
+            <div class="align-items-center d-flex pr-1 pt-1 w-50">
+              <ng-container i18n>Zen Mode</ng-container>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-slide-toggle
+                color="primary"
+                [checked]="user.settings.viewMode === 'ZEN'"
+                [disabled]="!hasPermissionToUpdateViewMode"
+                (change)="onViewModeChange($event)"
+              ></mat-slide-toggle>
+            </div>
+          </div>
           <div class="align-items-center d-flex mt-4 py-1">
             <div class="pr-1 w-50" i18n>Sign in with fingerprint</div>
             <div class="pl-1 w-50">