Merge pull request #52 from Ultimaker/icon-updates

improve image upload component

Author: ChrisTerBeke

src/components/image_upload.tsx

@@ -18,6 +18,8 @@ export interface ImageUploadProps {
   shape?: ImageShape;
   /** Default image URL */
   defaultURL?: string
+  /** Placeholder label */
+  placeholderLabel?: string
 }
 
 export interface ImageUploadState {
@@ -57,7 +59,7 @@ export class ImageUpload extends React.Component<ImageUploadProps, ImageUploadSt
     this.setState({
       dropActive: false
     });
-    
+
     const file = files[0];
     this.setState({ fileURL: file.preview });
     this.props.onFileSelection(file);
@@ -76,15 +78,15 @@ export class ImageUpload extends React.Component<ImageUploadProps, ImageUploadSt
   }
 
   render(): JSX.Element {
-    const { size, shape } = this.props;
+    const { size, shape, placeholderLabel } = this.props;
     const { fileURL, dropActive } = this.state;
 
-    const iconClasses = classNames({ 'hide': fileURL !== null });
+    const iconClasses = classNames({ 'hide-icon': fileURL !== null, 'icon-with-label': placeholderLabel });
     const hoverAreaClasses = classNames('hover-area', { 'show': dropActive });
 
     return <Dropzone className="image-upload" style={{ width: size, height: size }}
-      accept="image/jpeg, image/png" 
-      multiple={false} 
+      accept="image/jpeg, image/png"
+      multiple={false}
       onDragEnter={this._onDragEnter}
       onDragLeave={this._onDragLeave}
       onDrop={(files) => this._onDropHandler(files)}
@@ -93,21 +95,27 @@ export class ImageUpload extends React.Component<ImageUploadProps, ImageUploadSt
       <div className={hoverAreaClasses}>
         <div className={iconClasses}>
           <UploadIcon />
+
+          {placeholderLabel &&
+            <div className="placeholder-label">
+              {placeholderLabel}
+            </div>
+          }
         </div>
 
         {fileURL &&
           <div className={`cover cover--${shape}`}></div>
         }
       </div>
-      
+
       {!fileURL &&
         <div className={`placeholder placeholder--${shape}`}></div>
       }
-      
+
       {fileURL &&
         <Image src={fileURL} shape={shape} size={size} />
       }
-      
+
     </Dropzone>
   }
 }

src/components/input_field_input.tsx

@@ -158,6 +158,7 @@ export class InputFieldInput extends React.Component<InputFieldInputProps, {}> {
           defaultURL={defaultValue ? defaultValue.toString() : null}
           onFileSelection={onChangeHandler}
           shape={imageShape}
+          placeholderLabel={placeholder}
         />
       )
     }

src/sass/_icons.sass

@@ -7,8 +7,8 @@
   height: 2.2rem
 
   svg
-    width: 2.2rem
-    height: 2.2rem
+    width: 100%
+    height: 100%
 
   &.icon--circle
     border-radius: 50%

src/sass/_image_upload.sass

@@ -13,7 +13,7 @@
     left: 0
 
     &:hover, &.show
-      .cover, .icon
+      .cover, .icon, .placeholder-label
         visibility: visible !important
         opacity: 1 !important
 
@@ -23,6 +23,9 @@
       .icon svg
         fill: $input-field-color-border-hover
 
+      .placeholder-label
+        color: $color-text 
+
   .cover
     background-color: rgba(255, 255, 255, 0)
     position: absolute
@@ -40,10 +43,20 @@
     position: relative
     height: 100%
     width: 100%
-
+    
     &.placeholder--round
       border-radius: 9999px
 
+  .placeholder-label
+    position: absolute
+    top: 65%
+    left: 50%
+    transform: translate(-50%, 0)
+    color: $color-text-light
+    width: 80%
+    text-align: center
+    z-index: 1
+
   .icon
     position: absolute
     top: 50%
@@ -52,13 +65,19 @@
     width: 50%
     height: 50%
     z-index: 1
+    opacity: 0.5
+    transition: opacity 0.2s ease-out
+
+  .icon-with-label
+    .icon
+      top: 40%
 
-    &.hide
+  .hide-icon
+    .icon, .placeholder-label
       visibility: hidden
       opacity: 0
       transition: opacity 0.2s ease-out
 
     svg
-      fill: rgba(0, 0, 0, 0.35)
       transition: fill 0.2s ease-out
       width: 100%

src/stories/form.stories.tsx

@@ -124,7 +124,11 @@ const defaultValue = 'round';
 stories.add('Image upload', withInfo(
   'Image drag and drop or click to upload'
 )(() =>
-  <ImageUpload shape={selectV2('Image shape', options, defaultValue)} onFileSelection={action('changed')} />
+  <ImageUpload
+    size={text('Size', '18rem')} 
+    shape={selectV2('Image shape', options, defaultValue)}
+    onFileSelection={action('changed')}
+    placeholderLabel={text('Placeholder Label', 'Upload an image')} />
 ));
 
 stories.add('Date picker', withInfo(