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
headers:
"X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
success: (header, response) ->
window.location.href = response.filePath
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
error: (temp, errorMessage) ->
stripped = $("<div/>").html(errorMessage).text();
$('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show()
this.on 'removedfile', (file) ->
commit_message = form.find('#commit_message')[0]
if /^Upload/.test(commit_message.placeholder)
commit_message.placeholder = 'Upload new file'
return
maxfilesexceeded: (file) ->
@removeFile file
this.on 'success', (header, response) ->
window.location.href = response.filePath
return
removedfile: (file) ->
$('.dropzone-previews')[0].removeChild(file.previewTemplate)
$('.dropzone-alerts').html('').hide()
return true
this.on 'maxfilesexceeded', (file) ->
@removeFile file
return
sending: (file, xhr, formData) ->
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
)
submitButton = form.find('#submit-all')[0]
......
......@@ -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;
}
......@@ -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;
}
......@@ -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
......
......@@ -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
#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 @@
.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}')
%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
.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
.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
......
......@@ -10,4 +10,4 @@
- if allowed_tree_edit?
= render 'projects/blob/remove'
= render 'projects/blob/replace'
= render 'projects/blob/upload'
......@@ -38,8 +38,8 @@ Feature: Project Source Browse Files
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"
......
......@@ -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
......
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