Merge branch 'fix-upload-ui' into 'master'

Cleanup some html/css for upload feature

* fix colors to match UI style
* cleanup templates from meaningless code
* improve placeholders
* remove code duplication in template
* improve error handling: remove file automatically

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

For #2520

See merge request !1297

app/assets/javascripts/blob/blob_file_dropzone.js.coffee

@@ -20,26 +20,41 @@ class @BlobFileDropzone
       headers:
         "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
-      success: (header, response) ->
-        window.location.href = response.filePath
-        return
-      error: (temp, errorMessage) ->
-        stripped = $("<div/>").html(errorMessage).text();
-        $('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show()
-        return
-      maxfilesexceeded: (file) ->
-        @removeFile file
-        return
-      removedfile: (file) ->
-        $('.dropzone-previews')[0].removeChild(file.previewTemplate)
-        $('.dropzone-alerts').html('').hide()
-        return true
-      sending: (file, xhr, formData) ->
-        formData.append('commit_message', form.find('#commit_message').val())
+      init: ->
+        this.on 'addedfile', (file) ->
+          $('.dropzone-alerts').html('').hide()
+          commit_message = form.find('#commit_message')[0]
+          if /^Upload/.test(commit_message.placeholder)
+            commit_message.placeholder = 'Upload ' + file.name
+          return
+
+        this.on 'removedfile', (file) ->
+          commit_message = form.find('#commit_message')[0]
+          if /^Upload/.test(commit_message.placeholder)
+            commit_message.placeholder = 'Upload new file'
+          return
+
+        this.on 'success', (header, response) ->
+          window.location.href = response.filePath
+          return
+
+        this.on 'maxfilesexceeded', (file) ->
+          @removeFile file
+          return
+
+        this.on 'sending', (file, xhr, formData) ->
+          formData.append('commit_message', form.find('#commit_message').val())
+          return
+
+      # Override behavior of adding error underneath preview
+      error: (file, errorMessage) ->
+        stripped = $("<div/>").html(errorMessage).text();
+        $('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show()
+        @removeFile file
         return
     )

app/assets/stylesheets/generic/common.scss

@@ -382,3 +382,11 @@ table {
     margin-bottom: 0;
   }
 }
+
+.dropzone .dz-preview .dz-progress {
+  border-color: $border-color !important;
+}
+
+.dropzone .dz-preview .dz-progress .dz-upload {
+  background: $gl-success !important;
+}

app/assets/stylesheets/pages/tree.scss

@@ -121,10 +121,11 @@
   text-align: center;
   border: 2px;
   border-style: dashed;
+  border-color: $border-color;
   min-height: 200px;
 }
 .upload-link {
   font-weight: normal;
-  color: #0000EE;
+  color: $md-link-color;
 }

app/controllers/projects/blob_controller.rb

@@ -18,6 +18,12 @@ class Projects::BlobController < Projects::ApplicationController
   before_action :after_edit_path, only: [:edit, :update]
   def new
+    @title = 'Upload'
+    @placeholder = 'Upload new file'
+    @button_title = 'Upload file'
+    @form_path = namespace_project_create_blob_path(@project.namespace, @project, @id)
+    @method = :post
+
     commit unless @repository.empty?
   end
@@ -40,6 +46,11 @@ class Projects::BlobController < Projects::ApplicationController
   end
   def show
+    @title = "Replace #{@blob.name}"
+    @placeholder = @title
+    @button_title = 'Replace file'
+    @form_path = namespace_project_update_blob_path(@project.namespace, @project, @id)
+    @method = :put
   end
   def edit

app/views/projects/blob/_actions.html.haml

@@ -17,6 +17,6 @@
         tree_join(@commit.sha, @path)), class: 'btn btn-sm'
 - if allowed_tree_edit?
-  .btn-group{:role => "group"}
-    %button.btn.btn-default{class: 'btn-primary', href: '#modal-replace-blob', 'data-target' => '#modal-replace-blob', 'data-toggle' => 'modal'} Replace
-    %button.btn.btn-default{class: 'btn-remove', href: '#modal-remove-blob', 'data-target' => '#modal-remove-blob', 'data-toggle' => 'modal'} Remove
+  .btn-group{ role: "group" }
+    %button.btn.btn-default{ 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } Replace
+    %button.btn.btn-remove{ 'data-target' => '#modal-remove-blob', 'data-toggle' => 'modal' } Remove

app/views/projects/blob/_replace.html.haml

-#modal-replace-blob.modal
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3.page-title Replace #{@blob.name}
-        %p.light
-          From branch
-          %strong= @ref
-      .modal-body
-        = form_tag namespace_project_update_blob_path(@project.namespace, @project, @id), method: :put, class: 'blob-file-upload-form-js form-horizontal' do
-          .dropzone
-            .dropzone-previews{class: "blob-upload-dropzone-previews"}
-              %p.dz-message{class: "hint"}<
-                Attach files by dragging & dropping or&nbsp;
-                %a{href: '#', class: "markdown-selector"}>click to upload
-          %br
-          .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"}
-          = render 'shared/commit_message_container', params: params,
-            placeholder: 'Replace this file because...'
-          .form-group
-            .col-sm-offset-2.col-sm-10
-              = button_tag 'Replace file', class: 'btn btn-small btn-primary btn-replace-file', id: 'submit-all'
-              = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
-
-:coffeescript
-  disableButtonIfEmptyField $('.blob-file-upload-form-js').find('#commit_message'), '.btn-replace-file'
-  new BlobFileDropzone($('.blob-file-upload-form-js'), 'put')

app/views/projects/blob/_upload.html.haml

@@ -3,26 +3,26 @@
     .modal-content
       .modal-header
         %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3.page-title Upload
+        %h3.page-title #{@title}
         %p.light
           From branch
           %strong= @ref
       .modal-body
-        = form_tag namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'blob-file-upload-form-js form-horizontal' do
+        = form_tag @form_path, method: @method, class: 'blob-file-upload-form-js form-horizontal' do
           .dropzone
-            .dropzone-previews{class: "blob-upload-dropzone-previews"}
-              %p.dz-message{class: "hint"}<
-                Attach files by dragging & dropping or&nbsp;
-                %a{href: '#', class: "markdown-selector"}>click to upload
+            .dropzone-previews.blob-upload-dropzone-previews
+              %p.dz-message.light
+                Attach a file by drag &amp; drop or
+                = link_to 'click to upload', '#', class: "markdown-selector"
           %br
-          .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"}
+          .dropzone-alerts{class: "alert alert-danger data", style: "display:none"}
           = render 'shared/commit_message_container', params: params,
-            placeholder: 'Upload this file because...'
+            placeholder: @placeholder
           .form-group
             .col-sm-offset-2.col-sm-10
-              = button_tag 'Upload file', class: 'btn btn-small btn-primary btn-upload-file', id: 'submit-all'
+              = button_tag @button_title, class: 'btn btn-small btn-primary btn-upload-file', id: 'submit-all'
               = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
 :coffeescript
   disableButtonIfEmptyField $('.blob-file-upload-form-js').find('#commit_message'), '.btn-upload-file'
-  new BlobFileDropzone($('.blob-file-upload-form-js'), 'post')
+  new BlobFileDropzone($('.blob-file-upload-form-js'), '#{@method}')

app/views/projects/blob/new.html.haml

-%h3.page-title<
-  Create new file or&nbsp;
-  %a.upload-link{href: '#modal-upload-blob', 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'}>upload existing one
-.file-title
-  = render 'projects/blob/upload'
-  %br
+.gray-content-block.top-block
+  Create a new file or
+  = link_to 'upload', '#modal-upload-blob',
+    { class: 'upload-link', 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'}
+  an existing one
+= render 'projects/blob/upload'
 .file-editor
   = form_tag(namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'form-horizontal form-new-file js-requires-input') do

app/views/projects/blob/show.html.haml

@@ -10,4 +10,4 @@
 - if allowed_tree_edit?
   = render 'projects/blob/remove'
-  = render 'projects/blob/replace'
+  = render 'projects/blob/upload'

features/project/source/browse_files.feature

@@ -33,13 +33,13 @@ Feature: Project Source Browse Files
     And I click on "Commit Changes"
     Then I am redirected to the new file
     And I should see its new content
-    
+
   @javascript
   Scenario: I can upload file and commit
     Given I click on "new file" link in repo
     Then I can see new file page
-    And I can see "upload existing one"
-    And I click on "upload existing one"
+    And I can see "upload an existing one"
+    And I click on "upload"
     And I upload a new text file
     And I fill the upload file commit message
     And I click on "Upload file"

features/steps/project/source/browse_files.rb

@@ -119,12 +119,12 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
     expect(page).to have_content "Commit message"
   end
-  step 'I can see "upload existing one"' do
-    expect(page).to have_content "upload existing one"
+  step 'I can see "upload an existing one"' do
+    expect(page).to have_content "upload an existing one"
   end
-  step 'I click on "upload existing one"' do
-    click_link 'upload existing one'
+  step 'I click on "upload"' do
+    click_link 'upload'
   end
   step 'I click on "Upload file"' do
@@ -150,7 +150,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
   step 'I fill the replace file commit message' do
-    page.within('#modal-replace-blob') do
+    page.within('#modal-upload-blob') do
       fill_in :commit_message, with: 'Replacement file commit message'
     end
   end