Merge remote-tracking branch 'firedrakes/MAGETWO-59924' into MAGETWO-59924

Author: Sergey Semenov

app/code/Magento/Downloadable/view/adminhtml/web/template/components/file-uploader.html

@@ -1,3 +1,10 @@
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
 <div class="admin__field-control">
     <div class="file-uploader" data-role="drop-zone" css="_loading: isLoading">
         <each args="data: value, as: '$file'">
@@ -16,4 +23,4 @@
             <span class="file-uploader-spinner"/>
         </div>
     </div>
-</div>
+</div>

app/code/Magento/Ui/view/base/web/js/form/element/file-uploader.js

@@ -18,6 +18,7 @@ define([
             value: [],
             maxFileSize: false,
             isMultipleFiles: false,
+            placeholderType: 'document', // 'image', 'video'
             allowedExtensions: false,
             previewTmpl: 'ui/form/element/uploader/preview',
             dropZone: '[data-role=drop-zone]',
@@ -116,6 +117,7 @@ define([
          * @returns {FileUploder} Chainable.
          */
         addFile: function (file) {
+            file.previewType = this.getFilePreviewType(file);
             file = this.processFile(file);
 
             this.isMultipleFiles ?
@@ -234,6 +236,24 @@ define([
             return validator('validate-file-type', file.name, this.allowedExtensions);
         },
 
+        /**
+         * Get simplified file type.
+         *
+         * @param {Object} file - File to be checked.
+         * @returns {String}
+         */
+        getFilePreviewType: function (file) {
+            var type;
+
+            if (!file['type']) {
+                return 'document';
+            }
+
+            type = file['type'].split('/')[0];
+
+            return (type !== 'image' && type !== 'video') ? 'document' : type;
+        },
+
         /**
          * Checks if size of provided file exceeds
          * defined in configuration size limits.

app/code/Magento/Ui/view/base/web/templates/form/element/uploader/preview.html

@@ -6,9 +6,11 @@
 -->
 <div class="file-uploader-summary">
     <div class="file-uploader-preview">
-        <a attr="href: $parent.getFilePreview($file)" target="_blank">
+        <a class="preview-link"
+           css="'preview-' + $file.previewType"
+           attr="href: $parent.getFilePreview($file), title: $file.name" target="_blank">
             <img
-                class="preview-image"
+                if="$file.previewType === 'image'"
                 tabindex="0"
                 event="load: $parent.onPreviewLoad.bind($parent)"
                 attr="
@@ -29,8 +31,11 @@
     </div>
 
     <div class="file-uploader-filename" text="$file.name"/>
+
     <div class="file-uploader-meta">
-        <text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>, 
+        <span if="$file.previewType === 'image'">
+            <text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>,
+        </span>
         <text args="$parent.formatSize($file.size)"/>
     </div>
 </div>

app/code/Magento/Ui/view/base/web/templates/form/element/uploader/uploader.html

@@ -4,6 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
+
 <div class="admin__field" visible="visible" css="$data.additionalClasses">
     <label class="admin__field-label" if="$data.label" attr="for: uid">
         <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
@@ -28,6 +29,15 @@
             <label class="admin__field-error" if="error" attr="for: uid" text="error"/>
 
             <each args="data: value, as: '$file'" render="$parent.getPreviewTmpl($file)"/>
+
+            <div if="isMultipleFiles" class="file-uploader-summary">
+                <label attr="for: uid"
+                       class="file-uploader-placeholder"
+                       css="'placeholder-' + placeholderType">
+                    <span class="file-uploader-placeholder-text"
+                          translate="'Click here or drag and drop to add files.'"/>
+                </label>
+            </div>
         </div>
     </div>
-</div>
+</div>

app/design/adminhtml/Magento/backend/web/css/source/components/_file-uploader.less

@@ -15,6 +15,17 @@
 @file-uploader-preview__background-color: @color-white;
 @file-uploader-preview-focus__color: @color-blue2;
 
+@file-uploader-document-icon__color: @color-gray80;
+@file-uploader-document-icon__size: 7rem;
+@file-uploader-document-icon__z-index: @data-grid-file-uploader-image__z-index + 1;
+
+@file-uploader-video-icon__color: @color-gray80;
+@file-uploader-video-icon__size: 4rem;
+@file-uploader-video-icon__z-index: @data-grid-file-uploader-image__z-index + 1;
+
+@file-uploader-placeholder-icon__color: @color-gray80;
+@file-uploader-placeholder-icon__z-index: @data-grid-file-uploader-image__z-index + 1;
+
 @file-uploader-delete-icon__color: @color-brownie;
 @file-uploader-delete-icon__hover__color: @color-brownie-vanilla;
 @file-uploader-delete-icon__font-size: 2rem;
@@ -48,7 +59,6 @@
 //  ---------------------------------------------
 
 .file-uploader-area {
-    margin-bottom: @indent__xs;
     position: relative;
 
     input[type='file'] {
@@ -66,6 +76,11 @@
     }
 }
 
+.file-uploader-summary {
+    display: inline-block;
+    vertical-align: top;
+}
+
 .file-uploader-button {
     cursor: pointer;
     display: inline-block;
@@ -89,17 +104,6 @@
 }
 
 .file-uploader-preview {
-    background: @file-uploader-preview__background-color;
-    border: 1px solid @file-uploader-preview__border-color;
-    box-sizing: border-box;
-    cursor: pointer;
-    height: @file-uploader-preview__height;
-    line-height: 1;
-    margin-bottom: @indent__s;
-    overflow: hidden;
-    position: relative;
-    width: @file-uploader-preview__width;
-
     .action-remove {
         &:extend(.abs-action-reset all);
         .lib-icon-font (
@@ -123,12 +127,18 @@
     }
 
     &:hover {
-        .preview-image {
+        .preview-image img,
+        .preview-link:before {
             opacity: @file-uploader-preview__opacity;
         }
     }
 
-    .preview-image {
+    .preview-link {
+        display: block;
+        height: 100%;
+    }
+
+    .preview-image img {
         bottom: 0;
         left: 0;
         margin: auto;
@@ -139,6 +149,59 @@
         top: 0;
         z-index: 1;
     }
+
+    .preview-video {
+        .lib-icon-font(
+            @icon-video__content,
+            @_icon-font: @icons-admin__font-name,
+            @_icon-font-size: @file-uploader-video-icon__size,
+            @_icon-font-color: @file-uploader-video-icon__color,
+            @_icon-font-color-hover: @file-uploader-video-icon__color
+        );
+
+        &:before {
+            left: 0;
+            margin-top: -@file-uploader-video-icon__size / 2;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: @file-uploader-video-icon__z-index;
+        }
+    }
+
+    .preview-document {
+        .lib-icon-font(
+            @icon-document__content,
+            @_icon-font: @icons-admin__font-name,
+            @_icon-font-size: @file-uploader-document-icon__size,
+            @_icon-font-color: @file-uploader-document-icon__color,
+            @_icon-font-color-hover: @file-uploader-document-icon__color
+        );
+
+        &:before {
+            left: 0;
+            margin-top: -@file-uploader-document-icon__size / 2;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: @file-uploader-document-icon__z-index;
+        }
+    }
+}
+
+.file-uploader-preview,
+.file-uploader-placeholder {
+    background: @file-uploader-preview__background-color;
+    border: 1px solid @file-uploader-preview__border-color;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: block;
+    height: @file-uploader-preview__height;
+    line-height: 1;
+    margin: @indent__s @indent__m @indent__s 0;
+    overflow: hidden;
+    position: relative;
+    width: @file-uploader-preview__width;
 }
 
 .file-uploader {
@@ -154,6 +217,8 @@
     }
 
     .file-uploader-filename {
+        .lib-text-overflow();
+        max-width: @file-uploader-preview__width;
         word-break: break-all;
 
         &:first-child {
@@ -176,6 +241,76 @@
     }
 }
 
+// Placeholder for multiple uploader
+.file-uploader-placeholder {
+    &.placeholder-document {
+        .lib-icon-font(
+            @icon-document__content,
+            @_icon-font: @icons-admin__font-name,
+            @_icon-font-size: 5rem,
+            @_icon-font-color: @file-uploader-placeholder-icon__color,
+            @_icon-font-color-hover: @file-uploader-placeholder-icon__color
+        );
+
+        &:before {
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 20px;
+            z-index: @file-uploader-placeholder-icon__z-index;
+        }
+    }
+
+    &.placeholder-image {
+        .lib-icon-font(
+            @icon-camera__content,
+            @_icon-font: @icons-admin__font-name,
+            @_icon-font-size: 5rem,
+            @_icon-font-color: @file-uploader-placeholder-icon__color,
+            @_icon-font-color-hover: @file-uploader-placeholder-icon__color
+        );
+
+        &:before {
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 20px;
+            z-index: @file-uploader-placeholder-icon__z-index;
+        }
+    }
+
+    &.placeholder-video {
+        .lib-icon-font(
+            @icon-video__content,
+            @_icon-font: @icons-admin__font-name,
+            @_icon-font-size: 3rem,
+            @_icon-font-color: @file-uploader-placeholder-icon__color,
+            @_icon-font-color-hover: @file-uploader-placeholder-icon__color
+        );
+
+        &:before {
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 30px;
+            z-index: @file-uploader-placeholder-icon__z-index;
+        }
+    }
+}
+
+.file-uploader-placeholder-text {
+    bottom: 0;
+    color: @color-blue-dodger;
+    font-size: 1.1rem;
+    left: 0;
+    line-height: @line-height__base;
+    margin-bottom: 15%;
+    padding: 0 @indent__base;
+    position: absolute;
+    right: 0;
+    text-align: center;
+}
+
 //
 //  Grid image uploader
 //  ---------------------------------------------

app/design/adminhtml/Magento/backend/web/css/source/variables/_icons.less

@@ -80,3 +80,4 @@
 @icon-clip__content: '\e643';
 @icon-module__content: '\e647';
 @icon-alert-round__content: '\e648';
+@icon-document__content: '\e649';