feat(settings): Toggle to disable animations completely (#611)

apps/angular-console/src/app/app.component.html

@@ -1,4 +1,9 @@
-<div fxLayout="column" fxFlex class="content-container">
+<div
+  fxLayout="column"
+  fxFlex
+  class="content-container"
+  [@.disabled]="settings.useDisableAnimations()"
+>
   <ui-contextual-action-bar></ui-contextual-action-bar>
 
   <div

apps/angular-console/src/app/app.component.ts

@@ -47,7 +47,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   constructor(
-    settings: Settings,
+    readonly settings: Settings,
     private readonly contextualActionBarService: ContextualActionBarService,
     private readonly titleService: Title,
     router: Router

apps/electron/src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-console",
   "description": "Angular Console",
-  "version": "7.4.3",
+  "version": "7.4.6",
   "author": {
     "name": "Narwhal Technologies Inc",
     "email": "[email protected]"

apps/vscode/src/package.json

@@ -2,7 +2,7 @@
   "name": "angular-console",
   "displayName": "Angular Console",
   "description": "Angular Console for Visual Studio Code. The user interface app for the Angular CLI",
-  "version": "7.4.3",
+  "version": "7.4.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/nrwl/angular-console"

libs/feature-settings/src/lib/settings/settings.component.html

@@ -11,7 +11,7 @@ <h4 mat-line>Send anonymous usage data</h4>
       </div>
       <mat-slide-toggle
         (change)="toggleDataCollection($event.checked)"
-        [checked]="canCollectionData()"
+        [checked]="settings.canCollectData()"
       ></mat-slide-toggle>
     </div>
     <div fxLayout="row wrap" fxFill fxLayoutAlign="start top">
@@ -25,8 +25,8 @@ <h4 mat-line>Auto Update Channel</h4>
 
       <mat-form-field appearance="outline" floatLabel="auto">
         <mat-select
-          (selectionChange)="setChannel($event.value)"
-          [value]="getChannel()"
+          (selectionChange)="settings.setChannel($event.value)"
+          [value]="settings.getChannel()"
         >
           <mat-option value="latest"> Latest </mat-option>
           <mat-option value="beta">Beta </mat-option>
@@ -36,6 +36,18 @@ <h4 mat-line>Auto Update Channel</h4>
     </div>
 
     <h3>Features</h3>
+    <div fxLayout="row wrap" fxFill fxLayoutAlign="start center">
+      <div fxFlex>
+        <h4 mat-line>Disable Animations</h4>
+        <p mat-line>
+          Disable all animations for a snappier feel
+        </p>
+      </div>
+      <mat-slide-toggle
+        (change)="settings.setDisableAnimations($event.checked)"
+        [checked]="settings.useDisableAnimations()"
+      ></mat-slide-toggle>
+    </div>
     <div fxLayout="row wrap" fxFill fxLayoutAlign="start center">
       <div fxFlex>
         <h4 mat-line>Use detailed status</h4>
@@ -44,8 +56,8 @@ <h4 mat-line>Use detailed status</h4>
         </p>
       </div>
       <mat-slide-toggle
-        (change)="toggleDetailedStatus($event.checked)"
-        [checked]="enableDetailedStatus()"
+        (change)="settings.setEnableDetailedStatus($event.checked)"
+        [checked]="settings.enableDetailedStatus()"
       ></mat-slide-toggle>
     </div>
     <div fxLayout="row wrap" fxFill fxLayoutAlign="start center">
@@ -56,8 +68,8 @@ <h4 mat-line>Use WSL (Windows users only)</h4>
         </p>
       </div>
       <mat-slide-toggle
-        (change)="toggleIsWsl($event.checked)"
-        [checked]="isWsl()"
+        (change)="settings.setIsWsl($event.checked)"
+        [checked]="settings.isWsl()"
       ></mat-slide-toggle>
     </div>
     <div fxLayout="row wrap" fxFill fxLayoutAlign="start center">
@@ -68,8 +80,8 @@ <h4 mat-line>Use NVM (Supports OS X, Linux and WSL)</h4>
         </p>
       </div>
       <mat-slide-toggle
-        (change)="toggleUseNvm($event.checked)"
-        [checked]="useNvm()"
+        (change)="settings.setUseNvm($event.checked)"
+        [checked]="settings.useNvm()"
       ></mat-slide-toggle>
     </div>
   </div>

libs/feature-settings/src/lib/settings/settings.component.ts

@@ -9,48 +9,12 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 })
 export class SettingsComponent {
   constructor(
-    private readonly settingsService: Settings,
+    readonly settings: Settings,
     @Inject('telemetry') private readonly telemetry: Telemetry
   ) {}
 
-  canCollectionData() {
-    return this.settingsService.canCollectData();
-  }
-
   toggleDataCollection(x: boolean) {
-    this.settingsService.setCanCollectData(x);
+    this.settings.setCanCollectData(x);
     this.telemetry.reportDataCollectionEvent(x);
   }
-
-  enableDetailedStatus() {
-    return this.settingsService.enableDetailedStatus();
-  }
-
-  toggleDetailedStatus(x: boolean) {
-    this.settingsService.setEnableDetailedStatus(x);
-  }
-
-  setChannel(channel: 'latest' | 'beta' | 'alpha') {
-    this.settingsService.setChannel(channel);
-  }
-
-  getChannel() {
-    return this.settingsService.getChannel();
-  }
-
-  isWsl() {
-    return this.settingsService.isWsl();
-  }
-
-  useNvm() {
-    return this.settingsService.useNvm();
-  }
-
-  toggleUseNvm(x: boolean) {
-    this.settingsService.setUseNvm(x);
-  }
-
-  toggleIsWsl(x: boolean) {
-    this.settingsService.setIsWsl(x);
-  }
 }

libs/schema/src/lib/generated/graphql-types.ts

@@ -35,6 +35,8 @@ export interface Settings {
 
   isConnectUser?: Maybe<boolean>;
 
+  disableAnimations?: Maybe<boolean>;
+
   showSupportPlugin?: Maybe<boolean>;
 
   installNodeManually?: Maybe<boolean>;
@@ -665,6 +667,12 @@ export namespace SettingsResolvers {
 
     isConnectUser?: IsConnectUserResolver<Maybe<boolean>, TypeParent, Context>;
 
+    disableAnimations?: DisableAnimationsResolver<
+      Maybe<boolean>,
+      TypeParent,
+      Context
+    >;
+
     showSupportPlugin?: ShowSupportPluginResolver<
       Maybe<boolean>,
       TypeParent,
@@ -714,6 +722,11 @@ export namespace SettingsResolvers {
     Parent = any,
     Context = any
   > = Resolver<R, Parent, Context>;
+  export type DisableAnimationsResolver<
+    R = Maybe<boolean>,
+    Parent = any,
+    Context = any
+  > = Resolver<R, Parent, Context>;
   export type ShowSupportPluginResolver<
     R = Maybe<boolean>,
     Parent = any,

libs/server/src/assets/schema.graphql

@@ -248,6 +248,7 @@ type WorkspaceDefinition {
 type Settings {
   canCollectData: Boolean!
   isConnectUser: Boolean
+  disableAnimations: Boolean
   showSupportPlugin: Boolean
   installNodeManually: Boolean
   enableDetailedStatus: Boolean

libs/utils/src/lib/graphql/settings.graphql

@@ -6,6 +6,7 @@ query Settings {
     installNodeManually
     enableDetailedStatus
     channel
+    disableAnimations
     isConnectUser
     recent {
       path

libs/utils/src/lib/settings.service.ts

@@ -26,6 +26,7 @@ export class Settings {
     enableDetailedStatus: true,
     isConnectUser: false,
     channel: 'latest',
+    disableAnimations: true,
     isWsl: false,
     useNvm: false
   };
@@ -108,6 +109,14 @@ export class Settings {
     return this.settings.channel;
   }
 
+  setDisableAnimations(disableAnimations: boolean): void {
+    this.store({ ...this.settings, disableAnimations });
+  }
+
+  useDisableAnimations() {
+    return this.settings.disableAnimations;
+  }
+
   showConnectPlugin(): boolean {
     return true;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-console",
-  "version": "7.4.3",
+  "version": "7.4.6",
   "private": true,
   "publisher": "nrwl",
   "author": {