Download as
Browse Code »

Commit 5cfaf945cdad16baf877c873c26bc58b004707ae

Authored by Dmitriy Zaporozhets
1 parent 0853eebd
Exists in spb-stable and in 2 other branches 7-0-stable, 7-0-stable-spb

Improve notes form UI/UX 

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing 7 changed files with 75 additions and 58 deletions   Show diff stats
app/assets/javascripts/behaviors/toggler_behavior.coffee
  Diff comments   View file @5cfaf94
1 1 $ ->
2   - $("body").on "click", ".js-toggler-target", ->
3   - container = $(".notes-container")
4   - container.toggleClass("on")
5   -
6 2 # Toggle button. Show/hide content inside parent container.
7 3 # Button does not change visibility. If button has icon - it changes chevron style.
8 4 #
... ...
app/assets/javascripts/merge_request.js.coffee
  Diff comments   View file @5cfaf94
... ... @@ -43,7 +43,7 @@ class MergeRequest
43 43 , 'json'
44 44  
45 45 bindEvents: ->
46   - this.$('.nav-tabs').on 'click', 'a', (event) =>
  46 + this.$('.merge-request-tabs').on 'click', 'a', (event) =>
47 47 a = $(event.currentTarget)
48 48  
49 49 href = a.attr('href')
... ... @@ -51,7 +51,7 @@ class MergeRequest
51 51  
52 52 event.preventDefault()
53 53  
54   - this.$('.nav-tabs').on 'click', 'li', (event) =>
  54 + this.$('.merge-request-tabs').on 'click', 'li', (event) =>
55 55 this.activateTab($(event.currentTarget).data('action'))
56 56  
57 57 this.$('.accept_merge_request').on 'click', ->
... ... @@ -71,15 +71,15 @@ class MergeRequest
71 71 this.$('.remove_source_branch_widget.failed').show()
72 72  
73 73 activateTab: (action) ->
74   - this.$('.nav-tabs li').removeClass 'active'
  74 + this.$('.merge-request-tabs li').removeClass 'active'
75 75 this.$('.tab-content').hide()
76 76 switch action
77 77 when 'diffs'
78   - this.$('.nav-tabs .diffs-tab').addClass 'active'
  78 + this.$('.merge-request-tabs .diffs-tab').addClass 'active'
79 79 this.loadDiff() unless @diffs_loaded
80 80 this.$('.diffs').show()
81 81 else
82   - this.$('.nav-tabs .notes-tab').addClass 'active'
  82 + this.$('.merge-request-tabs .notes-tab').addClass 'active'
83 83 this.$('.notes').show()
84 84  
85 85 showState: (state) ->
... ... @@ -107,7 +107,7 @@ class MergeRequest
107 107 loadDiff: (event) ->
108 108 $.ajax
109 109 type: 'GET'
110   - url: this.$('.nav-tabs .diffs-tab a').attr('href')
  110 + url: this.$('.merge-request-tabs .diffs-tab a').attr('href')
111 111 beforeSend: =>
112 112 this.$('.status').addClass 'loading'
113 113 complete: =>
... ...
app/assets/javascripts/notes.js.coffee
  Diff comments   View file @5cfaf94
... ... @@ -32,6 +32,9 @@ class Notes
32 32 # Preview button
33 33 $(document).on "click", ".js-note-preview-button", @previewNote
34 34  
  35 + # Preview button
  36 + $(document).on "click", ".js-note-write-button", @writeNote
  37 +
35 38 # reset main target form after submit
36 39 $(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm
37 40  
... ... @@ -68,6 +71,7 @@ class Notes
68 71 $(document).off "click", ".js-note-delete"
69 72 $(document).off "click", ".js-note-attachment-delete"
70 73 $(document).off "click", ".js-note-preview-button"
  74 + $(document).off "click", ".js-note-write-button"
71 75 $(document).off "ajax:complete", ".js-main-target-form"
72 76 $(document).off "click", ".js-choose-note-attachment-button"
73 77 $(document).off "click", ".js-discussion-reply-button"
... ... @@ -145,15 +149,35 @@ class Notes
145 149 @removeDiscussionNoteForm(form)
146 150  
147 151 ###
  152 + Shows write note textarea.
  153 + ###
  154 + writeNote: (e) ->
  155 + e.preventDefault()
  156 + form = $(this).closest("form")
  157 + # toggle tabs
  158 + form.find(".js-note-write-button").parent().addClass "active"
  159 + form.find(".js-note-preview-button").parent().removeClass "active"
  160 +
  161 + # toggle content
  162 + form.find(".note-write-holder").show()
  163 + form.find(".note-preview-holder").hide()
  164 +
  165 + ###
148 166 Shows the note preview.
149 167  
150 168 Lets the server render GFM into Html and displays it.
151   -
152   - Note: uses the Toggler behavior to toggle preview/edit views/buttons
153 169 ###
154 170 previewNote: (e) ->
155 171 e.preventDefault()
156 172 form = $(this).closest("form")
  173 + # toggle tabs
  174 + form.find(".js-note-write-button").parent().removeClass "active"
  175 + form.find(".js-note-preview-button").parent().addClass "active"
  176 +
  177 + # toggle content
  178 + form.find(".note-write-holder").hide()
  179 + form.find(".note-preview-holder").show()
  180 +
157 181 preview = form.find(".js-note-preview")
158 182 noteText = form.find(".js-note-text").val()
159 183 if noteText.trim().length is 0
... ... @@ -179,7 +203,7 @@ class Notes
179 203 form.find(".js-errors").remove()
180 204  
181 205 # reset text and preview
182   - previewContainer = form.find(".js-toggler-container.note_text_and_preview")
  206 + previewContainer = form.find(".note-edit-and-preview")
183 207 previewContainer.removeClass "on" if previewContainer.is(".on")
184 208 form.find(".js-note-text").val("").trigger "input"
185 209  
... ...
app/assets/stylesheets/generic/markdown_area.scss
  Diff comments   View file @5cfaf94
... ... @@ -43,12 +43,6 @@
43 43 display: none;
44 44 }
45 45 }
46   -
47   - .hint {
48   - float: left;
49   - padding: 0;
50   - margin: 0;
51   - }
52 46 }
53 47  
54 48 .div-dropzone-alert {
... ...
app/assets/stylesheets/sections/notes.scss
  Diff comments   View file @5cfaf94
... ... @@ -135,10 +135,6 @@ ul.notes {
135 135 border-width: 1px 0;
136 136 padding-top: 0;
137 137 vertical-align: top;
138   -
139   - li {
140   - padding: 5px;
141   - }
142 138 }
143 139 }
144 140  
... ... @@ -266,24 +262,33 @@ ul.notes {
266 262 .clearfix {
267 263 margin-bottom: 0;
268 264 }
269   - .note_text_and_preview {
270   - .note_preview {
271   - background: #f5f5f5;
272   - border: 1px solid #ddd;
273   - @include border-radius(4px);
274   - min-height: 80px;
275   - padding: 4px 6px;
276   -
277   - > p {
278   - overflow-x: auto;
279   - }
  265 +
  266 + .note-preview-holder,
  267 + .note_text {
  268 + background: #FFF;
  269 + border: 1px solid #ddd;
  270 + min-height: 100px;
  271 + padding: 5px;
  272 + font-size: 14px;
  273 + box-shadow: none;
  274 + }
  275 +
  276 + .note-preview-holder {
  277 + > p {
  278 + overflow-x: auto;
280 279 }
281   - .note_text {
  280 + }
  281 +
  282 + .note_text {
  283 + width: 100%;
  284 + }
  285 + .nav-tabs {
  286 + margin-bottom: 0;
  287 + border: none;
  288 +
  289 + li a,
  290 + li.active a {
282 291 border: 1px solid #DDD;
283   - box-shadow: none;
284   - font-size: 14px;
285   - height: 80px;
286   - width: 100%;
287 292 }
288 293 }
289 294 }
... ...
app/views/projects/merge_requests/_show.html.haml
  Diff comments   View file @5cfaf94
... ... @@ -7,7 +7,7 @@
7 7 = render "projects/merge_requests/show/participants"
8 8  
9 9 - if @commits.present?
10   - %ul.nav.nav-tabs
  10 + %ul.nav.nav-tabs.merge-request-tabs
11 11 %li.notes-tab{data: {action: 'notes'}}
12 12 = link_to project_merge_request_path(@project, @merge_request) do
13 13 %i.icon-comment
... ...
app/views/projects/notes/_form.html.haml
  Diff comments   View file @5cfaf94
... ... @@ -5,21 +5,28 @@
5 5 = f.hidden_field :noteable_id
6 6 = f.hidden_field :noteable_type
7 7  
8   - .note_text_and_preview.js-toggler-container.notes-container
9   - = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input turn-on markdown-area'
10   - .note_preview.js-note-preview.turn-off
  8 + %ul.nav.nav-tabs
  9 + %li.active
  10 + = link_to '#note-write-holder', class: 'js-note-write-button' do
  11 + Write
  12 + %li
  13 + = link_to '#note-preview-holder', class: 'js-note-preview-button', data: { url: preview_project_notes_path(@project) } do
  14 + Preview
  15 + %div
  16 + .note-write-holder
  17 + = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input markdown-area'
11 18  
12   - .hint
13   - .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
14   - .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
15   - .clearfix
16   - .error-alert
  19 + .light.clearfix
  20 + .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
  21 + .pull-right Attach images (JPG, PNG, GIF) by dragging &amp; dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
  22 +
  23 + .note-preview-holder.hide
  24 + .js-note-preview
17 25  
18 26 .note-form-actions
19 27 .buttons
20 28 = f.submit 'Add Comment', class: "btn comment-btn btn-grouped js-comment-button"
21 29 = yield(:note_actions)
22   -
23 30 %a.btn.grouped.js-close-discussion-note-form Cancel
24 31  
25 32 .note-form-option
... ... @@ -30,14 +37,5 @@
30 37 %span.file_name.js-attachment-filename File name...
31 38 = f.file_field :attachment, class: "js-note-attachment-input hidden"
32 39  
33   - .write-preview-btn
34   - %a.btn.js-note-preview-button.js-toggler-target.turn-off{ href: "javascript:;", data: {url: preview_project_notes_path(@project)} }
35   - %i.icon-eye-open
36   - Preview
37   - %a.btn.btn-primary.js-note-edit-button.js-toggler-target.turn-off{ href: "javascript:;" }
38   - %i.icon-edit
39   - Write
40   - .clearfix
41   -
42 40 :javascript
43 41 window.project_image_path_upload = "#{upload_image_project_path @project}";
... ...