Upload files modal13284-allow-uploading-of-multiple-files-via-web-interface

4 files changed, 19 insertions, 10 deletions

diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index ab63225147f..5dac9fbcb2d 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -154,9 +154,14 @@
   min-height: 200px;
 }
 
-.upload-link {
-  font-weight: normal;
-  color: $md-link-color;
+.upload-files {
+  .svg-content {
+    padding-top: 5%;
+
+    svg {
+      width: 10%;
+    }
+   }
 }
 
 .tree-controls {
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index e14885f264b..31b72f3defd 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -2,23 +2,26 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %a.close{ href: '#', data: { dismiss: 'modal' } } ×
         %h3.page-title= title
       .modal-body
         = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal', data: { method: method } do
           .dropzone
             .dropzone-previews.blob-upload-dropzone-previews
+              .upload-files
+                .svg-content
+                  = render 'shared/empty_states/icons/upload_files.svg'
               %p.dz-message.light
-                Attach a file by drag & drop or
-                = link_to 'click to upload', '#', class: "markdown-selector"
+                Attach files by drag & drop or
+                = link_to 'click to upload', '#', class: 'markdown-selector'
           %br
-          .dropzone-alerts.alert.alert-danger.data{ style: "display:none" }
+          .dropzone-alerts.alert.alert-danger.data{ style: 'display:none' }
 
           = render 'shared/new_commit_form', placeholder: placeholder
 
           .form-actions
-            = button_tag button_title, class: 'btn btn-small btn-create btn-upload-file', id: 'submit-all'
-            = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
+            = button_tag button_title, class: 'btn btn-create btn-upload-file', id: 'submit-all'
+            = link_to 'Cancel', '#', class: 'btn btn-cancel', data: { dismiss: 'modal' }
 
             - unless can?(current_user, :push_code, @project)
               .inline.prepend-left-10
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index 7854e1305db..2d5a70698c9 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -20,7 +20,7 @@
     = render "projects/tree/readme", readme: tree.readme
 
 - if can_edit_tree?
-  = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post
+  = render 'projects/blob/upload', title: _('Upload files'), placeholder: _('Upload files'), button_title: _('Upload'), form_path: namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post
   = render 'projects/blob/new_dir'
 
 :javascript
diff --git a/app/views/shared/empty_states/icons/_upload_files.svg b/app/views/shared/empty_states/icons/_upload_files.svg
new file mode 100644
index 00000000000..ac2cf9dde28
--- /dev/null
+++ b/app/views/shared/empty_states/icons/_upload_files.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 72" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="0" width="860" height="505" rx="3"/><filter id="1" width="89.18" height="76.54" x="-1.634" y="-2.02" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd" transform="translate(-388-136)"><use fill="#000" filter="url(#1)" xlink:href="#0"/><use fill="#fff" xlink:href="#0"/><g transform="translate(16 87)"><rect width="828" height="200" stroke="#e5e5e5" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6" rx="3"/><g transform="translate(372 48)"><g transform="matrix(.98481-.17365-.17365-.98481 9.849 59.43)"><g stroke="#e5e5e5" stroke-linejoin="round" stroke-width="3"><path fill="#fff" d="m32 52h-27c-2.761 0-5-2.234-5-5.01v-41.981c0-2.767 2.242-5.01 5-5.01h33.991c2.764 0 5 2.241 5 5v34.827l-12 12.168" stroke-linecap="round"/><path d="m32 52v-9.991c0-1.109.902-2.01 2.01-2.01h9.991l-12 12"/></g><rect width="8" height="2.5" x="8" y="33" fill="#b5a7dd" rx="1.25"/><rect width="8" height="2.5" x="14" y="26" fill="#fc6d26" rx="1.25"/><rect width="8" height="2.5" x="8" y="19" fill="#b5a7dd" rx="1.25"/><g fill="#e5e5e5"><rect width="6" height="2.5" x="24" y="26" rx="1.25"/><rect width="6" height="2.5" x="8" y="12" rx="1.25"/><rect width="6" height="2.5" x="18" y="19" rx="1.25"/></g><rect width="4" height="2.5" x="18" y="33" fill="#fde5d8" rx="1.25"/><rect width="4" height="2.5" x="24" y="33" fill="#b5a7dd" rx="1.25"/><rect width="4" height="2.5" x="8" y="26" fill="#e5e5e5" rx="1.25"/><rect width="4" height="2.5" x="16" y="12" fill="#fc6d26" rx="1.25"/><g fill="#fde5d8"><rect width="4" height="2.5" x="32" y="26" rx="1.25"/><rect width="4" height="2.5" x="26" y="19" rx="1.25"/><rect width="4" height="2.5" x="22" y="12" rx="1.25"/></g><rect width="4" height="2.5" x="28" y="12" fill="#fc6d26" rx="1.25"/></g><g transform="matrix(.98481.17365-.17365.98481 38.83 24.22)"><rect width="47" height="40" fill="#fff" stroke="#e5e5e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" rx="5"/><circle cx="15" cy="13" r="5" fill="#b5a7dd"/><path fill="#fde5d8" d="m25.26 26.905l-3.934-5.245c-.659-.879-1.73-.88-2.39 0l-6.61 8.813c-.659.879-.302 1.594.8 1.594h12 10.01c1.1 0 1.434-.7.744-1.563l-5.5-6.875c-.687-.859-1.81-.863-2.5 0l-2.621 3.276"/></g></g></g></g></svg>
\ No newline at end of file