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 3a237bf322..48fad7701e 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 df7fab07a5..271cc547e2 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 5b61846fe6..131818d2a8 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 84abf0303d..1d11fb0ae7 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 5a6a3358a1..4666faca01 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 6fb46ea204..9a50a52c45 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 1d11fb0ae7..ed584d19ed 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 4666faca01..4ed36cb8aa 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 9a50a52c45..68c9ec7f80 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 090af9bb37..3ab3ba6675 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 8776721d24..d7be212c33 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 131818d2a8..373b3a0c5b 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 ed584d19ed..0000000000 --- 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 4ed36cb8aa..2cfb79486d 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 19e876ec34..4e66a43bbd 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 b5b6abe6af..58574166ef 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 7a0ee4df45..a1a49dd58a 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