feat(FileUpload): support disabled mode

ISSUES CLOSED: #1810
GetTerminus · Dec 5, 2019 · f85857b · f85857b
1 parent d53067f
commit f85857b
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 214 deletions.
diff --git a/demo/app/components/file-upload/file-upload.component.html b/demo/app/components/file-upload/file-upload.component.html
@@ -6,12 +6,14 @@ <h3 tsVerticalSpacing>Demo Controls</h3>
       <ts-toggle [(ngModel)]="multiple">Allow multiple selections</ts-toggle>
       <br>
       <ts-toggle [(ngModel)]="hideButton">Hide button</ts-toggle>
+      <br>
+      <ts-toggle [(ngModel)]="disabled">Disabled</ts-toggle>
     </div>
     <div fxLayout="row" fxLayoutGap="24px">
       <div>
         <ts-input label="Max Size (kb)" type="number" [(ngModel)]="maxKb"></ts-input>
       </div>
-      <div>
+      <div fxFlex="noshrink">
         <ts-select
           label="Allowed MIME types"
           [allowMultiple]="true"
@@ -30,6 +32,7 @@ <h3 tsVerticalSpacing>Demo Controls</h3>
 
 <ts-card tsVerticalSpacing>
   <ts-file-upload
+    [isDisabled]="disabled"
     [hideButton]="hideButton"
     [maximumKilobytesPerFile]="maxKb"
     [multiple]="multiple"

diff --git a/demo/app/components/file-upload/file-upload.component.ts b/demo/app/components/file-upload/file-upload.component.ts
@@ -164,7 +164,7 @@ export class FileUploadComponent {
   maxKb: number | undefined;
   mimeTypeOptions = ['image/png', 'image/jpg', 'image/jpeg', 'text/csv', 'video/mp4', 'video/x-flv', 'video/webm', 'video/quicktime', 'video/mpeg'];
   ratioConstraints = ['1:2', '1.9:1', '5:1'];
-
+  disabled = false;
 
   selected(e) {
     console.log('DEMO: selected: ', e);

diff --git a/demo/app/components/file-upload/file-upload.module.ts b/demo/app/components/file-upload/file-upload.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { TsCardModule } from '@terminus/ui/card';
 import { TsFileUploadModule } from '@terminus/ui/file-upload';
@@ -17,6 +18,7 @@ import { FileUploadComponent } from './file-upload.component';
   imports: [
     CommonModule,
     FileUploadRoutingModule,
+    FlexLayoutModule,
     FormsModule,
     TsCardModule,
     TsFileUploadModule,

diff --git a/terminus-ui/file-upload/src/file-upload.component.html b/terminus-ui/file-upload/src/file-upload.component.html
@@ -1,8 +1,10 @@
 <div
   class="c-file-upload qa-file-upload"
+  [class.c-file-upload--disabled]="isDisabled"
   [class.c-file-upload--drag]="dragInProgress"
   [class.c-file-upload--file]="file"
   [class.c-file-upload--error]="file && !file.isValid"
+  [id]="id"
   tabindex="1"
   fxLayout="column"
 >
@@ -85,7 +87,7 @@
       class="c-file-upload__prompt qa-file-upload-prompt"
       [class.c-file-upload__prompt--hidden]="hideButton"
       [theme]="theme"
-      [isDisabled]="dragInProgress"
+      [isDisabled]="dragInProgress || isDisabled"
       (clicked)="promptForFiles()"
     >
       {{ buttonMessage }}

diff --git a/terminus-ui/file-upload/src/file-upload.component.scss b/terminus-ui/file-upload/src/file-upload.component.scss
@@ -21,7 +21,9 @@ $drag-bg: lighten(color(primary, xlight), 50%);
 
   // Top level styles belong here
   .c-file-upload {
-    cursor: cursor(pointer);
+    &:not(.c-file-upload--disabled) {
+      cursor: cursor(pointer);
+    }
   }
 
   // If followed directly by another instance, add vertical spacing
@@ -39,7 +41,9 @@ $drag-bg: lighten(color(primary, xlight), 50%);
 
   &:hover,
   &:focus {
-    border-color: color(primary, xlight);
+    &:not(.c-file-upload--disabled) {
+      border-color: color(primary, xlight);
+    }
   }
 
   // Class added when dragging over
@@ -63,6 +67,12 @@ $drag-bg: lighten(color(primary, xlight), 50%);
     border-color: color(warn);
   }
 
+  &.c-file-upload--disabled {
+    .c-file-upload__empty {
+      color: color(utility, light);
+    }
+  }
+
   // <div> container for the selected file
   .c-file-upload__file {
     @include typography(hint);