Commit 7c6a58a7 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'ui-improvements' into 'master'

Comment UI improvements

* use tabs for preview/write comment form because its better UX
* fix paddings for comment form and unnecessary borders
* remove unused css/js
* cleanup messy comment form html
parents cc28b21a 50f3280e
$ -> $ ->
$("body").on "click", ".js-toggler-target", ->
container = $(".notes-container")
container.toggleClass("on")
# Toggle button. Show/hide content inside parent container. # Toggle button. Show/hide content inside parent container.
# Button does not change visibility. If button has icon - it changes chevron style. # Button does not change visibility. If button has icon - it changes chevron style.
# #
......
...@@ -43,7 +43,7 @@ class MergeRequest ...@@ -43,7 +43,7 @@ class MergeRequest
, 'json' , 'json'
bindEvents: -> bindEvents: ->
this.$('.nav-tabs').on 'click', 'a', (event) => this.$('.merge-request-tabs').on 'click', 'a', (event) =>
a = $(event.currentTarget) a = $(event.currentTarget)
href = a.attr('href') href = a.attr('href')
...@@ -51,7 +51,7 @@ class MergeRequest ...@@ -51,7 +51,7 @@ class MergeRequest
event.preventDefault() event.preventDefault()
this.$('.nav-tabs').on 'click', 'li', (event) => this.$('.merge-request-tabs').on 'click', 'li', (event) =>
this.activateTab($(event.currentTarget).data('action')) this.activateTab($(event.currentTarget).data('action'))
this.$('.accept_merge_request').on 'click', -> this.$('.accept_merge_request').on 'click', ->
...@@ -71,15 +71,15 @@ class MergeRequest ...@@ -71,15 +71,15 @@ class MergeRequest
this.$('.remove_source_branch_widget.failed').show() this.$('.remove_source_branch_widget.failed').show()
activateTab: (action) -> activateTab: (action) ->
this.$('.nav-tabs li').removeClass 'active' this.$('.merge-request-tabs li').removeClass 'active'
this.$('.tab-content').hide() this.$('.tab-content').hide()
switch action switch action
when 'diffs' when 'diffs'
this.$('.nav-tabs .diffs-tab').addClass 'active' this.$('.merge-request-tabs .diffs-tab').addClass 'active'
this.loadDiff() unless @diffs_loaded this.loadDiff() unless @diffs_loaded
this.$('.diffs').show() this.$('.diffs').show()
else else
this.$('.nav-tabs .notes-tab').addClass 'active' this.$('.merge-request-tabs .notes-tab').addClass 'active'
this.$('.notes').show() this.$('.notes').show()
showState: (state) -> showState: (state) ->
...@@ -107,7 +107,7 @@ class MergeRequest ...@@ -107,7 +107,7 @@ class MergeRequest
loadDiff: (event) -> loadDiff: (event) ->
$.ajax $.ajax
type: 'GET' type: 'GET'
url: this.$('.nav-tabs .diffs-tab a').attr('href') url: this.$('.merge-request-tabs .diffs-tab a').attr('href')
beforeSend: => beforeSend: =>
this.$('.status').addClass 'loading' this.$('.status').addClass 'loading'
complete: => complete: =>
......
...@@ -32,6 +32,9 @@ class Notes ...@@ -32,6 +32,9 @@ class Notes
# Preview button # Preview button
$(document).on "click", ".js-note-preview-button", @previewNote $(document).on "click", ".js-note-preview-button", @previewNote
# Preview button
$(document).on "click", ".js-note-write-button", @writeNote
# reset main target form after submit # reset main target form after submit
$(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm $(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm
...@@ -68,6 +71,7 @@ class Notes ...@@ -68,6 +71,7 @@ class Notes
$(document).off "click", ".js-note-delete" $(document).off "click", ".js-note-delete"
$(document).off "click", ".js-note-attachment-delete" $(document).off "click", ".js-note-attachment-delete"
$(document).off "click", ".js-note-preview-button" $(document).off "click", ".js-note-preview-button"
$(document).off "click", ".js-note-write-button"
$(document).off "ajax:complete", ".js-main-target-form" $(document).off "ajax:complete", ".js-main-target-form"
$(document).off "click", ".js-choose-note-attachment-button" $(document).off "click", ".js-choose-note-attachment-button"
$(document).off "click", ".js-discussion-reply-button" $(document).off "click", ".js-discussion-reply-button"
...@@ -144,16 +148,36 @@ class Notes ...@@ -144,16 +148,36 @@ class Notes
# cleanup after successfully creating a diff/discussion note # cleanup after successfully creating a diff/discussion note
@removeDiscussionNoteForm(form) @removeDiscussionNoteForm(form)
###
Shows write note textarea.
###
writeNote: (e) ->
e.preventDefault()
form = $(this).closest("form")
# toggle tabs
form.find(".js-note-write-button").parent().addClass "active"
form.find(".js-note-preview-button").parent().removeClass "active"
# toggle content
form.find(".note-write-holder").show()
form.find(".note-preview-holder").hide()
### ###
Shows the note preview. Shows the note preview.
Lets the server render GFM into Html and displays it. Lets the server render GFM into Html and displays it.
Note: uses the Toggler behavior to toggle preview/edit views/buttons
### ###
previewNote: (e) -> previewNote: (e) ->
e.preventDefault() e.preventDefault()
form = $(this).closest("form") form = $(this).closest("form")
# toggle tabs
form.find(".js-note-write-button").parent().removeClass "active"
form.find(".js-note-preview-button").parent().addClass "active"
# toggle content
form.find(".note-write-holder").hide()
form.find(".note-preview-holder").show()
preview = form.find(".js-note-preview") preview = form.find(".js-note-preview")
noteText = form.find(".js-note-text").val() noteText = form.find(".js-note-text").val()
if noteText.trim().length is 0 if noteText.trim().length is 0
...@@ -179,7 +203,7 @@ class Notes ...@@ -179,7 +203,7 @@ class Notes
form.find(".js-errors").remove() form.find(".js-errors").remove()
# reset text and preview # reset text and preview
previewContainer = form.find(".js-toggler-container.note_text_and_preview") previewContainer = form.find(".note-edit-and-preview")
previewContainer.removeClass "on" if previewContainer.is(".on") previewContainer.removeClass "on" if previewContainer.is(".on")
form.find(".js-note-text").val("").trigger "input" form.find(".js-note-text").val("").trigger "input"
......
...@@ -4,20 +4,3 @@ ...@@ -4,20 +4,3 @@
.js-details-container .content.hide { display: block; } .js-details-container .content.hide { display: block; }
.js-details-container.open .content { display: block; } .js-details-container.open .content { display: block; }
.js-details-container.open .content.hide { display: none; } .js-details-container.open .content.hide { display: none; }
// Toggler
//--------
.write-preview-btn .turn-on { display: inherit; }
.write-preview-btn .turn-off { display: none; }
.js-toggler-container .turn-off { display: none; }
.js-toggler-container.on .turn-on { display: none; }
.js-toggler-container.on .turn-off { display: inherit; }
.js-toggler-container.on ~ .note-form-actions {
.write-preview-btn .turn-on { display: none; }
}
.js-toggler-container.on ~ .note-form-actions {
.write-preview-btn .turn-off { display: inherit; }
}
...@@ -43,12 +43,6 @@ ...@@ -43,12 +43,6 @@
display: none; display: none;
} }
} }
.hint {
float: left;
padding: 0;
margin: 0;
}
} }
.div-dropzone-alert { .div-dropzone-alert {
......
...@@ -83,6 +83,7 @@ ul.notes { ...@@ -83,6 +83,7 @@ ul.notes {
overflow: hidden; overflow: hidden;
display: block; display: block;
position:relative; position:relative;
border-bottom: 1px solid #eee;
p { color: $style_color; } p { color: $style_color; }
.avatar { .avatar {
...@@ -98,22 +99,16 @@ ul.notes { ...@@ -98,22 +99,16 @@ ul.notes {
.note-header { .note-header {
padding-bottom: 3px; padding-bottom: 3px;
} }
&:last-child {
border-bottom: none;
}
} }
.note:target { .note:target {
-webkit-animation:target-note 2s linear; -webkit-animation:target-note 2s linear;
background: #fffff0; background: #fffff0;
} }
// paint top or bottom borders depending on notes direction
&:not(.reversed) .note,
&:not(.reversed) .discussion {
border-bottom: 1px solid #eee;
}
&.reversed .note,
&.reversed .discussion {
border-top: 1px solid #eee;
}
} }
.diff-file .notes_holder { .diff-file .notes_holder {
...@@ -140,10 +135,6 @@ ul.notes { ...@@ -140,10 +135,6 @@ ul.notes {
border-width: 1px 0; border-width: 1px 0;
padding-top: 0; padding-top: 0;
vertical-align: top; vertical-align: top;
li {
padding: 5px;
}
} }
} }
...@@ -271,24 +262,33 @@ ul.notes { ...@@ -271,24 +262,33 @@ ul.notes {
.clearfix { .clearfix {
margin-bottom: 0; margin-bottom: 0;
} }
.note_text_and_preview {
.note_preview { .note-preview-holder,
background: #f5f5f5; .note_text {
border: 1px solid #ddd; background: #FFF;
@include border-radius(4px); border: 1px solid #ddd;
min-height: 80px; min-height: 100px;
padding: 4px 6px; padding: 5px;
font-size: 14px;
> p { box-shadow: none;
overflow-x: auto; }
}
.note-preview-holder {
> p {
overflow-x: auto;
} }
.note_text { }
.note_text {
width: 100%;
}
.nav-tabs {
margin-bottom: 0;
border: none;
li a,
li.active a {
border: 1px solid #DDD; border: 1px solid #DDD;
box-shadow: none;
font-size: 14px;
height: 80px;
width: 100%;
} }
} }
} }
...@@ -308,14 +308,13 @@ ul.notes { ...@@ -308,14 +308,13 @@ ul.notes {
.common-note-form { .common-note-form {
margin: 0; margin: 0;
background: #F9F9F9; background: #F9F9F9;
padding: 3px; padding: 5px;
border: 1px solid #DDD; border: 1px solid #DDD;
} }
.note-form-actions { .note-form-actions {
background: #F9F9F9; background: #F9F9F9;
height: 45px; height: 45px;
padding: 0 5px;
.note-form-option { .note-form-option {
margin-top: 8px; margin-top: 8px;
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
= render "projects/merge_requests/show/participants" = render "projects/merge_requests/show/participants"
- if @commits.present? - if @commits.present?
%ul.nav.nav-tabs %ul.nav.nav-tabs.merge-request-tabs
%li.notes-tab{data: {action: 'notes'}} %li.notes-tab{data: {action: 'notes'}}
= link_to project_merge_request_path(@project, @merge_request) do = link_to project_merge_request_path(@project, @merge_request) do
%i.icon-comment %i.icon-comment
......
...@@ -5,21 +5,28 @@ ...@@ -5,21 +5,28 @@
= f.hidden_field :noteable_id = f.hidden_field :noteable_id
= f.hidden_field :noteable_type = f.hidden_field :noteable_type
.note_text_and_preview.js-toggler-container.notes-container %ul.nav.nav-tabs
= f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input turn-on markdown-area' %li.active
.note_preview.js-note-preview.turn-off = link_to '#note-write-holder', class: 'js-note-write-button' do
Write
%li
= link_to '#note-preview-holder', class: 'js-note-preview-button', data: { url: preview_project_notes_path(@project) } do
Preview
%div
.note-write-holder
= f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input markdown-area'
.hint .light.clearfix
.pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}. .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
.pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }. .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
.clearfix
.error-alert .note-preview-holder.hide
.js-note-preview
.note-form-actions .note-form-actions
.buttons .buttons
= f.submit 'Add Comment', class: "btn comment-btn btn-grouped js-comment-button" = f.submit 'Add Comment', class: "btn comment-btn btn-grouped js-comment-button"
= yield(:note_actions) = yield(:note_actions)
%a.btn.grouped.js-close-discussion-note-form Cancel %a.btn.grouped.js-close-discussion-note-form Cancel
.note-form-option .note-form-option
...@@ -30,14 +37,5 @@ ...@@ -30,14 +37,5 @@
%span.file_name.js-attachment-filename File name... %span.file_name.js-attachment-filename File name...
= f.file_field :attachment, class: "js-note-attachment-input hidden" = f.file_field :attachment, class: "js-note-attachment-input hidden"
.write-preview-btn
%a.btn.js-note-preview-button.js-toggler-target.turn-off{ href: "javascript:;", data: {url: preview_project_notes_path(@project)} }
%i.icon-eye-open
Preview
%a.btn.btn-primary.js-note-edit-button.js-toggler-target.turn-off{ href: "javascript:;" }
%i.icon-edit
Write
.clearfix
:javascript :javascript
window.project_image_path_upload = "#{upload_image_project_path @project}"; window.project_image_path_upload = "#{upload_image_project_path @project}";
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