From e14aa19e39baf67bbc5bb4099627ae28844a4f5b Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 15 Sep 2015 14:56:42 +0200 Subject: [PATCH 1/3] Cleanup some html/css for upload feature Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/generic/common.scss | 8 ++++++++ app/assets/stylesheets/pages/tree.scss | 3 ++- app/views/projects/blob/_actions.html.haml | 6 +++--- app/views/projects/blob/_replace.html.haml | 8 ++++---- app/views/projects/blob/_upload.html.haml | 9 +++++---- app/views/projects/blob/new.html.haml | 11 +++++------ 6 files changed, 27 insertions(+), 18 deletions(-) diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss index 3a237bf3228..48fad7701ef 100644 --- a/app/assets/stylesheets/generic/common.scss +++ b/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; +} diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index df7fab07a57..271cc547e2b 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/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; } diff --git a/app/views/projects/blob/_actions.html.haml b/app/views/projects/blob/_actions.html.haml index 5b61846fe6d..131818d2a83 100644 --- a/app/views/projects/blob/_actions.html.haml +++ b/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-replace-blob', 'data-toggle' => 'modal' } Replace + %button.btn.btn-remove{ 'data-target' => '#modal-remove-blob', 'data-toggle' => 'modal' } Remove diff --git a/app/views/projects/blob/_replace.html.haml b/app/views/projects/blob/_replace.html.haml index 84abf0303d0..1d11fb0ae72 100644 --- a/app/views/projects/blob/_replace.html.haml +++ b/app/views/projects/blob/_replace.html.haml @@ -10,10 +10,10 @@ .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  - %a{href: '#', class: "markdown-selector"}>click to upload + .dropzone-previews.blob-upload-dropzone-previews + %p.dz-message.light + Attach files by dragging & dropping or + = link_to 'click to upload', '#', class: "markdown-selector" %br .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"} = render 'shared/commit_message_container', params: params, diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml index 5a6a3358a17..4666faca013 100644 --- a/app/views/projects/blob/_upload.html.haml +++ b/app/views/projects/blob/_upload.html.haml @@ -10,10 +10,11 @@ .modal-body = form_tag namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, 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  - %a{href: '#', class: "markdown-selector"}>click to upload + .dropzone-previews.blob-upload-dropzone-previews + %p.dz-message.light + Attach files by dragging & dropping or + = link_to 'click to upload', '#', class: "markdown-selector" + %br .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"} = render 'shared/commit_message_container', params: params, diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml index 6fb46ea2040..9a50a52c453 100644 --- a/app/views/projects/blob/new.html.haml +++ b/app/views/projects/blob/new.html.haml @@ -1,10 +1,9 @@ -%h3.page-title< - Create new file or  - %a.upload-link{href: '#modal-upload-blob', 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'}>upload existing one +.gray-content-block.top-block + Create new file or + = link_to 'upload existing one', '#modal-upload-blob', + { class: 'upload-link', 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'} -.file-title - = render 'projects/blob/upload' - %br += 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 From 0a8ef29b3d2504ba66cd0a98992c1f5f70b11daa Mon Sep 17 00:00:00 2001 From: Robert Schilling Date: Tue, 15 Sep 2015 15:31:33 +0200 Subject: [PATCH 2/3] Improve wording for header and placeholders --- app/views/projects/blob/_replace.html.haml | 4 ++-- app/views/projects/blob/_upload.html.haml | 5 ++--- app/views/projects/blob/new.html.haml | 5 +++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/views/projects/blob/_replace.html.haml b/app/views/projects/blob/_replace.html.haml index 1d11fb0ae72..ed584d19ed7 100644 --- a/app/views/projects/blob/_replace.html.haml +++ b/app/views/projects/blob/_replace.html.haml @@ -12,12 +12,12 @@ .dropzone .dropzone-previews.blob-upload-dropzone-previews %p.dz-message.light - Attach files by dragging & dropping or + Attach a file by drag & drop or = link_to 'click to upload', '#', class: "markdown-selector" %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...' + placeholder: 'Replace file' .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' diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml index 4666faca013..4ed36cb8aa0 100644 --- a/app/views/projects/blob/_upload.html.haml +++ b/app/views/projects/blob/_upload.html.haml @@ -12,13 +12,12 @@ .dropzone .dropzone-previews.blob-upload-dropzone-previews %p.dz-message.light - Attach files by dragging & dropping or + Attach a file by drag & drop or = link_to 'click to upload', '#', class: "markdown-selector" - %br .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"} = render 'shared/commit_message_container', params: params, - placeholder: 'Upload this file because...' + placeholder: 'Upload new file' .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' diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml index 9a50a52c453..68c9ec7f802 100644 --- a/app/views/projects/blob/new.html.haml +++ b/app/views/projects/blob/new.html.haml @@ -1,7 +1,8 @@ .gray-content-block.top-block - Create new file or - = link_to 'upload existing one', '#modal-upload-blob', + 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' From d9af6f79ed439308d13f44a0cfade6a355607f14 Mon Sep 17 00:00:00 2001 From: Stan Hu Date: Tue, 15 Sep 2015 06:58:49 -0700 Subject: [PATCH 3/3] Change the replace placeholder to use the filename Dynamically adjust placedholder for uploads and fix Dropzone event handlers Override error handler to prevent error messages from being inserted underneath image preview Fix tests Use regexp instead of startsWith for better browser compatibility Remove duplicate code in _replace.html.haml and use one template Remove files upon error and retain alert messages until user adds a new file --- .../blob/blob_file_dropzone.js.coffee | 47 ++++++++++++------- app/controllers/projects/blob_controller.rb | 11 +++++ app/views/projects/blob/_actions.html.haml | 2 +- app/views/projects/blob/_replace.html.haml | 28 ----------- app/views/projects/blob/_upload.html.haml | 12 ++--- app/views/projects/blob/show.html.haml | 2 +- features/project/source/browse_files.feature | 6 +-- features/steps/project/source/browse_files.rb | 10 ++-- 8 files changed, 58 insertions(+), 60 deletions(-) delete mode 100644 app/views/projects/blob/_replace.html.haml diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js.coffee b/app/assets/javascripts/blob/blob_file_dropzone.js.coffee index 090af9bb376..3ab3ba66754 100644 --- a/app/assets/javascripts/blob/blob_file_dropzone.js.coffee +++ b/app/assets/javascripts/blob/blob_file_dropzone.js.coffee @@ -20,27 +20,42 @@ class @BlobFileDropzone headers: "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content") - success: (header, response) -> - window.location.href = response.filePath - return + init: -> + this.on 'addedfile', (file) -> + $('.dropzone-alerts').html('').hide() + commit_message = form.find('#commit_message')[0] - error: (temp, errorMessage) -> + 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 = $("
").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()) - return ) submitButton = form.find('#submit-all')[0] diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb index 8776721d243..d7be212c33a 100644 --- a/app/controllers/projects/blob_controller.rb +++ b/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 diff --git a/app/views/projects/blob/_actions.html.haml b/app/views/projects/blob/_actions.html.haml index 131818d2a83..373b3a0c5b0 100644 --- a/app/views/projects/blob/_actions.html.haml +++ b/app/views/projects/blob/_actions.html.haml @@ -18,5 +18,5 @@ - if allowed_tree_edit? .btn-group{ role: "group" } - %button.btn.btn-default{ 'data-target' => '#modal-replace-blob', 'data-toggle' => 'modal' } Replace + %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 diff --git a/app/views/projects/blob/_replace.html.haml b/app/views/projects/blob/_replace.html.haml deleted file mode 100644 index ed584d19ed7..00000000000 --- a/app/views/projects/blob/_replace.html.haml +++ /dev/null @@ -1,28 +0,0 @@ -#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.blob-upload-dropzone-previews - %p.dz-message.light - Attach a file by drag & drop or - = link_to 'click to upload', '#', class: "markdown-selector" - %br - .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"} - = render 'shared/commit_message_container', params: params, - placeholder: 'Replace file' - .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') diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml index 4ed36cb8aa0..2cfb79486dc 100644 --- a/app/views/projects/blob/_upload.html.haml +++ b/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.blob-upload-dropzone-previews %p.dz-message.light Attach a file by drag & 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 new file' + 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}') diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml index 19e876ec34c..4e66a43bbd5 100644 --- a/app/views/projects/blob/show.html.haml +++ b/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' diff --git a/features/project/source/browse_files.feature b/features/project/source/browse_files.feature index b5b6abe6aff..58574166ef3 100644 --- a/features/project/source/browse_files.feature +++ b/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" diff --git a/features/steps/project/source/browse_files.rb b/features/steps/project/source/browse_files.rb index 7a0ee4df45e..a1a49dd58a6 100644 --- a/features/steps/project/source/browse_files.rb +++ b/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