Commit 61737af5 authored by Stan Hu's avatar Stan Hu

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: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

For #2520

See merge request !1297
parents 0ad669bb d9af6f79
...@@ -20,27 +20,42 @@ class @BlobFileDropzone ...@@ -20,27 +20,42 @@ class @BlobFileDropzone
headers: headers:
"X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content") "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
success: (header, response) -> init: ->
window.location.href = response.filePath 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 return
error: (temp, errorMessage) -> this.on 'removedfile', (file) ->
stripped = $("<div/>").html(errorMessage).text(); commit_message = form.find('#commit_message')[0]
$('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show()
if /^Upload/.test(commit_message.placeholder)
commit_message.placeholder = 'Upload new file'
return return
maxfilesexceeded: (file) -> this.on 'success', (header, response) ->
@removeFile file window.location.href = response.filePath
return return
removedfile: (file) -> this.on 'maxfilesexceeded', (file) ->
$('.dropzone-previews')[0].removeChild(file.previewTemplate) @removeFile file
$('.dropzone-alerts').html('').hide() return
return true
sending: (file, xhr, formData) -> this.on 'sending', (file, xhr, formData) ->
formData.append('commit_message', form.find('#commit_message').val()) formData.append('commit_message', form.find('#commit_message').val())
return 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
) )
submitButton = form.find('#submit-all')[0] submitButton = form.find('#submit-all')[0]
......
...@@ -382,3 +382,11 @@ table { ...@@ -382,3 +382,11 @@ table {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.dropzone .dz-preview .dz-progress {
border-color: $border-color !important;
}
.dropzone .dz-preview .dz-progress .dz-upload {
background: $gl-success !important;
}
...@@ -121,10 +121,11 @@ ...@@ -121,10 +121,11 @@
text-align: center; text-align: center;
border: 2px; border: 2px;
border-style: dashed; border-style: dashed;
border-color: $border-color;
min-height: 200px; min-height: 200px;
} }
.upload-link { .upload-link {
font-weight: normal; font-weight: normal;
color: #0000EE; color: $md-link-color;
} }
...@@ -18,6 +18,12 @@ class Projects::BlobController < Projects::ApplicationController ...@@ -18,6 +18,12 @@ class Projects::BlobController < Projects::ApplicationController
before_action :after_edit_path, only: [:edit, :update] before_action :after_edit_path, only: [:edit, :update]
def new 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? commit unless @repository.empty?
end end
...@@ -40,6 +46,11 @@ class Projects::BlobController < Projects::ApplicationController ...@@ -40,6 +46,11 @@ class Projects::BlobController < Projects::ApplicationController
end end
def show 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 end
def edit def edit
......
...@@ -17,6 +17,6 @@ ...@@ -17,6 +17,6 @@
tree_join(@commit.sha, @path)), class: 'btn btn-sm' tree_join(@commit.sha, @path)), class: 'btn btn-sm'
- if allowed_tree_edit? - if allowed_tree_edit?
.btn-group{:role => "group"} .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{ 'data-target' => '#modal-upload-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 %button.btn.btn-remove{ 'data-target' => '#modal-remove-blob', 'data-toggle' => 'modal' } Remove
#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')
...@@ -3,26 +3,26 @@ ...@@ -3,26 +3,26 @@
.modal-content .modal-content
.modal-header .modal-header
%a.close{href: "#", "data-dismiss" => "modal"} × %a.close{href: "#", "data-dismiss" => "modal"} ×
%h3.page-title Upload %h3.page-title #{@title}
%p.light %p.light
From branch From branch
%strong= @ref %strong= @ref
.modal-body .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
.dropzone-previews{class: "blob-upload-dropzone-previews"} .dropzone-previews.blob-upload-dropzone-previews
%p.dz-message{class: "hint"}< %p.dz-message.light
Attach files by dragging & dropping or&nbsp; Attach a file by drag &amp; drop or
%a{href: '#', class: "markdown-selector"}>click to upload = link_to 'click to upload', '#', class: "markdown-selector"
%br %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, = render 'shared/commit_message_container', params: params,
placeholder: 'Upload this file because...' placeholder: @placeholder
.form-group .form-group
.col-sm-offset-2.col-sm-10 .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" = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
:coffeescript :coffeescript
disableButtonIfEmptyField $('.blob-file-upload-form-js').find('#commit_message'), '.btn-upload-file' 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}')
%h3.page-title< .gray-content-block.top-block
Create new file or&nbsp; Create a new file or
%a.upload-link{href: '#modal-upload-blob', 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'}>upload existing one = link_to 'upload', '#modal-upload-blob',
{ class: 'upload-link', 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'}
an existing one
.file-title = render 'projects/blob/upload'
= render 'projects/blob/upload'
%br
.file-editor .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 = form_tag(namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'form-horizontal form-new-file js-requires-input') do
......
...@@ -10,4 +10,4 @@ ...@@ -10,4 +10,4 @@
- if allowed_tree_edit? - if allowed_tree_edit?
= render 'projects/blob/remove' = render 'projects/blob/remove'
= render 'projects/blob/replace' = render 'projects/blob/upload'
...@@ -38,8 +38,8 @@ Feature: Project Source Browse Files ...@@ -38,8 +38,8 @@ Feature: Project Source Browse Files
Scenario: I can upload file and commit Scenario: I can upload file and commit
Given I click on "new file" link in repo Given I click on "new file" link in repo
Then I can see new file page Then I can see new file page
And I can see "upload existing one" And I can see "upload an existing one"
And I click on "upload existing one" And I click on "upload"
And I upload a new text file And I upload a new text file
And I fill the upload file commit message And I fill the upload file commit message
And I click on "Upload file" And I click on "Upload file"
......
...@@ -119,12 +119,12 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps ...@@ -119,12 +119,12 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
expect(page).to have_content "Commit message" expect(page).to have_content "Commit message"
end end
step 'I can see "upload existing one"' do step 'I can see "upload an existing one"' do
expect(page).to have_content "upload existing one" expect(page).to have_content "upload an existing one"
end end
step 'I click on "upload existing one"' do step 'I click on "upload"' do
click_link 'upload existing one' click_link 'upload'
end end
step 'I click on "Upload file"' do step 'I click on "Upload file"' do
...@@ -150,7 +150,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps ...@@ -150,7 +150,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
end end
step 'I fill the replace file commit message' do 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' fill_in :commit_message, with: 'Replacement file commit message'
end end
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment