diff --git a/CHANGELOG b/CHANGELOG index 7bb3c796b54..c79a568661a 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -24,6 +24,9 @@ v 7.7.0 - Trigger GitLab CI when push tags - When accept merge request - do merge using sidaekiq job - Enable web signups by default + - Fixes for diff comments: drag-n-drop images, selecting images + - Fixes for edit comments: drag-n-drop images, preview mode, selecting images, save & update + v 7.6.0 diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index ff2cc7c21d2..fcaaa81eaad 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -261,8 +261,10 @@ class @Notes Updates the current note field. ### updateNote: (xhr, note, status) => - note_li = $("#note_" + note.id) + note_li = $(".note-row-" + note.id) note_li.replaceWith(note.html) + note_li.find('.note-edit-form').hide() + note_li.find('.note-text').show() code = "#note_" + note.id + " .highlight pre code" $(code).each (i, e) -> hljs.highlightBlock(e) @@ -278,11 +280,16 @@ class @Notes e.preventDefault() note = $(this).closest(".note") note.find(".note-text").hide() + form = note.find(".note-edit-form") + form.find('.div-dropzone').remove() # Show the attachment delete link note.find(".js-note-attachment-delete").show() + + # Setup markdown form GitLab.GfmAutoComplete.setup() - form = note.find(".note-edit-form") + new DropzoneInput(form) + form.show() textarea = form.find("textarea") textarea.focus() diff --git a/app/assets/stylesheets/main/mixins.scss b/app/assets/stylesheets/main/mixins.scss index 5f83913b73b..ebf68850f98 100644 --- a/app/assets/stylesheets/main/mixins.scss +++ b/app/assets/stylesheets/main/mixins.scss @@ -65,10 +65,6 @@ max-width: 100%; } - *:first-child { - margin-top: 0; - } - code { padding: 0 4px; } h1 { diff --git a/app/assets/stylesheets/sections/markdown_area.scss b/app/assets/stylesheets/sections/markdown_area.scss new file mode 100644 index 00000000000..8ee8eaa4ee7 --- /dev/null +++ b/app/assets/stylesheets/sections/markdown_area.scss @@ -0,0 +1,9 @@ +.markdown-area { + background: #FFF; + border: 1px solid #ddd; + min-height: 100px; + padding: 5px; + font-size: 14px; + box-shadow: none; + width: 100%; +} diff --git a/app/assets/stylesheets/sections/note_form.scss b/app/assets/stylesheets/sections/note_form.scss new file mode 100644 index 00000000000..61eb515faee --- /dev/null +++ b/app/assets/stylesheets/sections/note_form.scss @@ -0,0 +1,162 @@ +/** + * Note Form + */ + +.comment-btn { + @extend .btn-create; +} +.reply-btn { + @extend .btn-primary; +} +.diff-file .diff-content { + tr.line_holder:hover { + &> td.line_content { + background: $hover !important; + border-color: darken($hover, 10%) !important; + } + &> td.new_line, + &> td.old_line { + background: darken($hover, 4%) !important; + border-color: darken($hover, 10%) !important; + } + } + + tr.line_holder:hover > td .line_note_link { + opacity: 1.0; + filter: alpha(opacity=100); + } +} +.diff-file, +.discussion { + .new_note { + margin: 0; + border: none; + } +} +.new_note { + display: none; +} + +.new_note, .edit_note { + .buttons { + float: left; + margin-top: 8px; + } + .clearfix { + margin-bottom: 0; + } + + .note-preview-holder { + > p { + overflow-x: auto; + } + } + + .note_text { + width: 100%; + } +} + +/* loading indicator */ +.notes-busy { + margin: 18px; +} + +.note-image-attach { + @extend .col-md-4; + @extend .thumbnail; + margin-left: 45px; + float: none; +} + +.common-note-form { + margin: 0; + background: #F9F9F9; + padding: 5px; + border: 1px solid #DDD; +} + +.note-form-actions { + background: #F9F9F9; + height: 45px; + + .note-form-option { + margin-top: 8px; + margin-left: 30px; + @extend .pull-left; + } + + .js-notify-commit-author { + float: left; + } + + .write-preview-btn { + // makes the "absolute" position for links relative to this + position: relative; + + // preview/edit buttons + > a { + position: absolute; + right: 5px; + top: 8px; + } + } +} + +.note-edit-form { + display: none; + font-size: 13px; + + .form-actions { + padding-left: 20px; + + .btn-save { + float: left; + } + + .note-form-option { + float: left; + padding: 2px 0 0 25px; + } + } +} + +.js-note-attachment-delete { + display: none; +} + +.parallel-comment { + padding: 6px; +} + +.error-alert > .alert { + margin-top: 5px; + margin-bottom: 5px; +} + +.discussion-body, +.diff-file { + .notes .note { + border-color: #ddd; + padding: 10px 15px; + } + + .discussion-reply-holder { + background: #f9f9f9; + padding: 10px 15px; + border-top: 1px solid #DDD; + } +} + +.discussion-notes-count { + font-size: 16px; +} + +.edit_note { + .markdown-area { + min-height: 140px; + } + .note-form-actions { + background: #FFF; + } +} diff --git a/app/assets/stylesheets/sections/notes.scss b/app/assets/stylesheets/sections/notes.scss index 1550e30fe53..117e5e7f977 100644 --- a/app/assets/stylesheets/sections/notes.scss +++ b/app/assets/stylesheets/sections/notes.scss @@ -190,169 +190,3 @@ ul.notes { } } -/** - * Note Form - */ - -.comment-btn { - @extend .btn-create; -} -.reply-btn { - @extend .btn-primary; -} -.diff-file .diff-content { - tr.line_holder:hover { - &> td.line_content { - background: $hover !important; - border-color: darken($hover, 10%) !important; - } - &> td.new_line, - &> td.old_line { - background: darken($hover, 4%) !important; - border-color: darken($hover, 10%) !important; - } - } - - tr.line_holder:hover > td .line_note_link { - opacity: 1.0; - filter: alpha(opacity=100); - } -} -.diff-file, -.discussion { - .new_note { - margin: 0; - border: none; - } -} -.new_note { - display: none; - .buttons { - float: left; - margin-top: 8px; - } - .clearfix { - margin-bottom: 0; - } - - .note_text { - background: #FFF; - border: 1px solid #ddd; - min-height: 100px; - padding: 5px; - font-size: 14px; - box-shadow: none; - } - - .note-preview-holder { - > p { - overflow-x: auto; - } - } - - .note_text { - width: 100%; - } -} - -/* loading indicator */ -.notes-busy { - margin: 18px; -} - -.note-image-attach { - @extend .col-md-4; - @extend .thumbnail; - margin-left: 45px; - float: none; -} - -.common-note-form { - margin: 0; - background: #F9F9F9; - padding: 5px; - border: 1px solid #DDD; -} - -.note-form-actions { - background: #F9F9F9; - height: 45px; - - .note-form-option { - margin-top: 8px; - margin-left: 30px; - @extend .pull-left; - } - - .js-notify-commit-author { - float: left; - } - - .write-preview-btn { - // makes the "absolute" position for links relative to this - position: relative; - - // preview/edit buttons - > a { - position: absolute; - right: 5px; - top: 8px; - } - } -} - -.note-edit-form { - display: none; - - .note_text { - border: 1px solid #DDD; - box-shadow: none; - font-size: 14px; - height: 80px; - width: 100%; - } - - .form-actions { - padding-left: 20px; - - .btn-save { - float: left; - } - - .note-form-option { - float: left; - padding: 2px 0 0 25px; - } - } -} - -.js-note-attachment-delete { - display: none; -} - -.parallel-comment { - padding: 6px; -} - -.error-alert > .alert { - margin-top: 5px; - margin-bottom: 5px; -} - -.discussion-body, -.diff-file { - .notes .note { - border-color: #ddd; - padding: 10px 15px; - } - - .discussion-reply-holder { - background: #f9f9f9; - padding: 10px 15px; - border-top: 1px solid #DDD; - } -} - -.discussion-notes-count { - font-size: 16px; -} diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/projects/notes/_edit_form.html.haml new file mode 100644 index 00000000000..a4520787a85 --- /dev/null +++ b/app/views/projects/notes/_edit_form.html.haml @@ -0,0 +1,22 @@ +.note-edit-form + = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f| + = render layout: 'projects/md_preview' do + = render 'projects/zen', f: f, attr: :note, + classes: 'note_text js-note-text' + + .light.clearfix + .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }} + .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }. + + .note-form-actions + .buttons + = f.submit 'Save Comment', class: "btn btn-primary btn-save btn-grouped js-comment-button" + = link_to 'Cancel', "#", class: "btn btn-cancel note-edit-cancel" + + .note-form-option.hidden-xs + %a.choose-btn.btn.js-choose-note-attachment-button + %i.fa.fa-paperclip + %span Choose File ... +   + %span.file_name.js-attachment-filename + = f.file_field :attachment, class: "js-note-attachment-input hidden" diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml index 47ffe1fd2f3..76525966dc3 100644 --- a/app/views/projects/notes/_form.html.haml +++ b/app/views/projects/notes/_form.html.haml @@ -7,7 +7,8 @@ = render layout: 'projects/md_preview' do = render 'projects/zen', f: f, attr: :note, - classes: 'note_text js-note-text' + classes: 'note_text js-note-text' + .light.clearfix .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }} .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }. @@ -24,7 +25,7 @@ %i.fa.fa-paperclip %span Choose File ...   - %span.file_name.js-attachment-filename File name... + %span.file_name.js-attachment-filename = f.file_field :attachment, class: "js-note-attachment-input hidden" :javascript diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml index 80e7342455b..691c169b620 100644 --- a/app/views/projects/notes/_note.html.haml +++ b/app/views/projects/notes/_note.html.haml @@ -1,4 +1,4 @@ -%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), ('system-note' if note.system)], data: { discussion: note.discussion_id } } +%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), "note-row-#{note.id}", ('system-note' if note.system)], data: { discussion: note.discussion_id } } .timeline-entry-inner .timeline-icon - if note.system @@ -42,25 +42,7 @@ .note-text = preserve do = markdown(note.note, {no_header_anchors: true}) - - .note-edit-form - = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f| - = render layout: 'projects/md_preview' do - = f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on' - - .form-actions.clearfix - = f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button" - - .note-form-option - %a.choose-btn.btn.js-choose-note-attachment-button - %i.fa.fa-paperclip - %span Choose File ... -   - %span.file_name.js-attachment-filename File name... - = f.file_field :attachment, class: "js-note-attachment-input hidden" - - = link_to 'Cancel', "#", class: "btn btn-cancel note-edit-cancel" - + = render 'projects/notes/edit_form', note: note - if note.attachment.url .note-attachment