Updated apply UX. Resolves #310. (#1170)

Author: MillenniumFalconMechanic

spa/src/app/files/_ngrx/file.effects.spec.ts

@@ -140,7 +140,7 @@ describe("File Effects", () => {
         // Update selected tab to be samples
         store.setState(DEFAULT_SAMPLES_STATE);
 
-        // Dispatch the fetch file fileFacets action
+        // Dispatch the fetch file facets action
         actions = hot("--a-", {
             a: new FetchFileFacetsRequestAction(true)
         });
@@ -163,7 +163,7 @@ describe("File Effects", () => {
         // Update search state to include a selected project search term
         store.setState(SAMPLES_STATE_WITH_SEARCH_TERM);
 
-        // Dispatch the fetch file fileFacets action
+        // Dispatch the fetch file facets action
         actions = hot("--a-", {
             a: new FetchFileFacetsRequestAction(true)
         });
@@ -186,7 +186,7 @@ describe("File Effects", () => {
         // Update selected tab to be files
         store.setState(DEFAULT_FILES_STATE);
 
-        // Dispatch the fetch file fileFacets action
+        // Dispatch the fetch file facets action
         actions = hot("--a-", {
             a: new FetchFileFacetsRequestAction(true)
         });

spa/src/app/files/_ngrx/file.effects.ts

@@ -2,7 +2,7 @@
  * Human Cell Atlas
  * https://www.humancellatlas.org/
  *
- * File-related effects, including fetching file summary (eg total counts), file fileFacets, terms etc.
+ * File-related effects, including fetching file summary (eg total counts), file facets, terms etc.
  */
 
 // Core dependencies

spa/src/app/files/_ngrx/search/select-file-facet-term.action.ts

@@ -3,7 +3,7 @@
  * https://www.humancellatlas.org/
  *
  * Action that is triggered when file facet term is selected. Select can be dispatched from facet card itself or from
- * corresponding term menu displayed over facet card (this includes search fileFacets and their menus).
+ * corresponding term menu displayed over facet card (this includes search facets and their menus).
  */
 
 // Core dependencies

spa/src/app/files/facet/facet-age-range/facet-age-range-form/age-in-age-unit.pipe.ts

@@ -1,4 +1,7 @@
 /**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ * 
  * Pipe for formatting age in seconds to age unit.
  */
 
@@ -7,6 +10,7 @@ import { Pipe, PipeTransform } from "@angular/core";
 
 // App dependencies
 import { AgeUnit } from "../age-unit.model";
+import { TimeUnitInSeconds } from "../time-unit-in-seconds.model";
 
 @Pipe({
     name: "ageInAgeUnit"
@@ -19,12 +23,6 @@ export class AgeInAgeUnit implements PipeTransform {
             return;
         }
 
-        const timeUnitInSeconds = {
-            "week": 604800,
-            "month": 2628000,
-            "year": 31536000
-        };
-
-        return age / timeUnitInSeconds[ageUnit];
+        return age / TimeUnitInSeconds[ageUnit.toUpperCase()];
     }
 }

spa/src/app/files/facet/facet-age-range/facet-age-range-form/age-unit-in-age-unit.pipe.ts

@@ -1,4 +1,7 @@
 /**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ * 
  * Pipe for formatting age in one unit to another.
  */
 
@@ -7,6 +10,7 @@ import { Pipe, PipeTransform } from "@angular/core";
 
 // App dependencies
 import { AgeUnit } from "../age-unit.model";
+import { TimeUnitInSeconds } from "../time-unit-in-seconds.model";
 
 @Pipe({
     name: "ageUnitInAgeUnit"
@@ -19,13 +23,8 @@ export class AgeUnitInAgeUnit implements PipeTransform {
             return;
         }
 
-        const timeUnitInSeconds = {
-            "week": 604800,
-            "month": 2628000,
-            "year": 31536000
-        };
-
-        const conversion = age * timeUnitInSeconds[prevAgeUnit] / timeUnitInSeconds[nextAgeUnit];
+        const conversion =
+            age * TimeUnitInSeconds[prevAgeUnit.toUpperCase()] / TimeUnitInSeconds[nextAgeUnit.toUpperCase()];
 
         return Math.round(conversion);
     }

spa/src/app/files/facet/facet-age-range/facet-age-range-form/age-unit-in-seconds.pipe.ts

@@ -1,4 +1,7 @@
 /**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ * 
  * Pipe for formatting age unit to seconds.
  */
 
@@ -7,6 +10,7 @@ import { Pipe, PipeTransform } from "@angular/core";
 
 // App dependencies
 import { AgeUnit } from "../age-unit.model";
+import { TimeUnitInSeconds } from "../time-unit-in-seconds.model";
 
 @Pipe({
     name: "ageUnitInSeconds"
@@ -15,12 +19,6 @@ export class AgeUnitInSeconds implements PipeTransform {
 
     transform(age: number, ageUnit: AgeUnit): number {
 
-        const timeUnitInSeconds = {
-            "week": 604800,
-            "month": 2628000,
-            "year": 31536000
-        };
-
-        return age * timeUnitInSeconds[ageUnit];
+        return age * TimeUnitInSeconds[ageUnit.toUpperCase()];
     }
 }

spa/src/app/files/facet/facet-age-range/facet-age-range-form/facet-age-range-form.component.html

@@ -17,7 +17,13 @@
         <input type="number" placeholder="e.g. 2" formControlName="ageMax">
     </label>
     <div class="actions">
-        <button class="apply" type="submit" [disabled]="!ageRangeGroup.valid">Apply</button>
-        <button class="clear" type="button" (click)="onClearAgeRange(ageRangeGroup, ageRange)">Clear</button>
+            <button class="apply"
+                    type="submit"
+                    [ngClass]="{'pristine': pristine}"
+                    [disabled]="!isSubmittable(ageRangeGroup)">Apply</button>
+        <button class="clear"
+                type="button"
+                [disabled]="!isClearable(ageRange)"
+                (click)="onClearAgeRange(ageRangeGroup, ageRange)">Clear</button>
     </div>
 </form>

spa/src/app/files/facet/facet-age-range/facet-age-range-form/facet-age-range-form.component.scss

@@ -103,45 +103,67 @@ form {
 
         /* Action - button */
         button {
-            border: 1px solid $hca-gray-light;
+            border: 1px solid $hca-gray-lightest;
             border-radius: 3px;
             font-family: "Montserrat", sans-serif;
             font-size: 12px;
-            font-weight: 600;
             height: 28px;
             letter-spacing: 0.2px;
             line-height: 28px;
+            overflow: hidden;
             padding: 0 12px;
             text-transform: capitalize;
-
-            /* Apply - valid */
+            transition: background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), border-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+            
+            /* Apply - default */
+            &.apply {
+                font-weight: 600;
+                min-width: 63px; // Maintain width during toggle between "Apply" and check mark
+            }
+            
+            /* Apply - valid or invalid/not submittable but maintain enabled UI during animation */
             &.apply:not([disabled]) {
                 border-color: rgba(28, 124, 199, 0.12);
                 background-color: rgba(28, 124, 199, 0.06);
                 color: $hca-primary;
             }
 
-            /* Apply - invalid */
-            &.apply[disabled] {
-                background-color: rgba(0, 0, 0, 0.03);
-                color: $hca-gray-medium;
-            }
-
             /* Apply - valid - hover */
             &.apply:not([disabled]):hover {
                 background-color: rgba(28, 124, 199, 0.12);
             }
 
-            /* Clear */
+            /* Apply - invalid, not submittable */
+            &.apply[disabled] {
+                background-color: rgba(0, 0, 0, 0.03);
+                color: $hca-gray-medium;
+            }
+            
+            /** Apply - pristine but invalid, not submittable */
+            &.apply[disabled]:not(.pristine) {
+                font-size: 0;
+                &:before {
+                    content: "\e5ca";
+                    font-family: "Material Icons";
+                    font-size: 16px;
+                }
+            }
+            
+            /* Clear - default */
             &.clear {
                 border-color: transparent;
                 color: $hca-primary;
-                font-weight: 400;
+                padding: 0 8px;
                 margin: 0 0 0 8px;
-                transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
             }
 
-            &.clear:hover {
+            /* Clear = disabled */
+            &.clear[disabled] {
+                color: $hca-gray-light;
+            }
+
+            /* Clear - hover */
+            &.clear:not([disabled]):hover {
                 border-color: rgba(0, 0, 0, 0.03);
                 background-color: rgba(0, 0, 0, 0.03);
             }