Commit 140652e9 authored by Riyad Preukschas's avatar Riyad Preukschas

Fix common form and note preview

parent 5d3fb35c
...@@ -10,24 +10,25 @@ var NoteList = { ...@@ -10,24 +10,25 @@ var NoteList = {
reversed: false, reversed: false,
init: function(tid, tt, path) { init: function(tid, tt, path) {
this.notes_path = path + ".js"; NoteList.notes_path = path + ".js";
this.target_id = tid; NoteList.target_id = tid;
this.target_type = tt; NoteList.target_type = tt;
this.reversed = $("#notes-list").is(".reversed"); NoteList.reversed = $("#notes-list").is(".reversed");
this.target_params = "target_type=" + this.target_type + "&target_id=" + this.target_id; NoteList.target_params = "target_type=" + NoteList.target_type + "&target_id=" + NoteList.target_id;
if(this.reversed) { if(NoteList.reversed) {
var textarea = $(".note-text"); var form = $("#new_note");
$('.note_advanced_opts').hide(); form.find(".buttons, .note_advanced_opts").hide();
var textarea = form.find(".js-note-text");
textarea.css("height", "40px"); textarea.css("height", "40px");
textarea.on("focus", function(){ textarea.on("focus", function(){
$(this).css("height", "80px"); textarea.css("height", "80px");
$('.note_advanced_opts').show(); form.find(".buttons, .note_advanced_opts").show();
}); });
} }
// get initial set of notes // get initial set of notes
this.getContent(); NoteList.getContent();
disableButtonIfEmptyField(".js-note-text", ".js-comment-button"); disableButtonIfEmptyField(".js-note-text", ".js-comment-button");
...@@ -37,34 +38,21 @@ var NoteList = { ...@@ -37,34 +38,21 @@ var NoteList = {
$(".file_name").text(filename); $(".file_name").text(filename);
}); });
// Setup note preview // add a new diff note
$(document).on('click', '#preview-link', function(e) {
$('#preview-note').text('Loading...');
$(this).text($(this).text() === "Edit" ? "Preview" : "Edit");
var note_text = $('#note_note').val();
if(note_text.trim().length === 0) {
$('#preview-note').text('Nothing to preview.');
} else {
$.post($(this).attr('href'), {note: note_text}).success(function(data) {
$('#preview-note').html(data);
});
}
$('#preview-note, #note_note').toggle();
});+
$(document).on("click", $(document).on("click",
".js-add-diff-note-button", ".js-add-diff-note-button",
NoteList.addDiffNote); NoteList.addDiffNote);
// reply to diff notes // reply to diff/discussion notes
$(document).on("click", $(document).on("click",
".js-discussion-reply-button", ".js-discussion-reply-button",
NoteList.replyToDiscussionNote); NoteList.replyToDiscussionNote);
// setup note preview
$(document).on("click",
".js-note-preview-button",
NoteList.previewNote);
// hide diff note form // hide diff note form
$(document).on("click", $(document).on("click",
".js-close-discussion-note-form", ".js-close-discussion-note-form",
...@@ -83,8 +71,12 @@ var NoteList = { ...@@ -83,8 +71,12 @@ var NoteList = {
// clean up previews for forms // clean up previews for forms
$(document).on("ajax:complete", ".note-form-holder", function(){ $(document).on("ajax:complete", ".note-form-holder", function(){
$(this).find('#preview-note').hide(); //$(this).find('.js-note-preview-button').text('Preview');
$(this).find('#note_note').show(); //$(this).find('.js-note-preview').hide();
$(this).find('.error').remove();
$(this).find('.js-note-text').val("");
$(this).show();
}); });
}, },
...@@ -123,6 +115,31 @@ var NoteList = { ...@@ -123,6 +115,31 @@ var NoteList = {
e.preventDefault(); e.preventDefault();
}, },
/**
* Shows the note preview.
*
* Lets the server render GFM into Html and displays it.
*
* Note: uses the Toggler behavior to toggle preview/edit views/buttons
*/
previewNote: function(e) {
var form = $(this).closest("form");
var preview = form.find('.js-note-preview');
var note_text = form.find('.js-note-text').val();
if(note_text.trim().length === 0) {
preview.text('Nothing to preview.');
} else if($(this).data('url')) {
preview.text('Loading...');
$.post($(this).data('url'), {note: note_text})
.success(function(previewData) {
preview.html(previewData);
});
}
e.preventDefault();
},
/** /**
* Called in response to deleting a note on a diff line. * Called in response to deleting a note on a diff line.
* *
...@@ -233,8 +250,8 @@ var NoteList = { ...@@ -233,8 +250,8 @@ var NoteList = {
*/ */
getContent: function() { getContent: function() {
$.ajax({ $.ajax({
url: this.notes_path, url: NoteList.notes_path,
data: this.target_params, data: NoteList.target_params,
complete: function(){ $('.notes-status').removeClass("loading")}, complete: function(){ $('.notes-status').removeClass("loading")},
beforeSend: function() { $('.notes-status').addClass("loading") }, beforeSend: function() { $('.notes-status').addClass("loading") },
dataType: "script" dataType: "script"
...@@ -246,23 +263,23 @@ var NoteList = { ...@@ -246,23 +263,23 @@ var NoteList = {
* Replaces the content of #notes-list with the given html. * Replaces the content of #notes-list with the given html.
*/ */
setContent: function(newNoteIds, html) { setContent: function(newNoteIds, html) {
this.top_id = newNoteIds.first(); NoteList.top_id = newNoteIds.first();
this.bottom_id = newNoteIds.last(); NoteList.bottom_id = newNoteIds.last();
$("#notes-list").html(html); $("#notes-list").html(html);
if (this.reversed) { if (NoteList.reversed) {
// init infinite scrolling // init infinite scrolling
this.initLoadMore(); NoteList.initLoadMore();
// init getting new notes // init getting new notes
this.initRefreshNew(); NoteList.initRefreshNew();
} }
}, },
/** /**
* Handle loading more notes when scrolling to the bottom of the page. * Handle loading more notes when scrolling to the bottom of the page.
* The id of the last note in the list is in this.bottom_id. * The id of the last note in the list is in NoteList.bottom_id.
* *
* Set up refreshing only new notes after all notes have been loaded. * Set up refreshing only new notes after all notes have been loaded.
*/ */
...@@ -292,8 +309,8 @@ var NoteList = { ...@@ -292,8 +309,8 @@ var NoteList = {
// only load more notes if there are no "new" notes // only load more notes if there are no "new" notes
$('.loading').show(); $('.loading').show();
$.ajax({ $.ajax({
url: this.notes_path, url: NoteList.notes_path,
data: this.target_params + "&loading_more=1&" + (this.reversed ? "before_id" : "after_id") + "=" + this.bottom_id, data: NoteList.target_params + "&loading_more=1&" + (NoteList.reversed ? "before_id" : "after_id") + "=" + NoteList.bottom_id,
complete: function(){ $('.notes-status').removeClass("loading")}, complete: function(){ $('.notes-status').removeClass("loading")},
beforeSend: function() { $('.notes-status').addClass("loading") }, beforeSend: function() { $('.notes-status').addClass("loading") },
dataType: "script" dataType: "script"
...@@ -306,8 +323,8 @@ var NoteList = { ...@@ -306,8 +323,8 @@ var NoteList = {
*/ */
appendMoreNotes: function(newNoteIds, html) { appendMoreNotes: function(newNoteIds, html) {
var lastNewNoteId = newNoteIds.last(); var lastNewNoteId = newNoteIds.last();
if(lastNewNoteId != this.bottom_id) { if(lastNewNoteId != NoteList.bottom_id) {
this.bottom_id = lastNewNoteId; NoteList.bottom_id = lastNewNoteId;
$("#notes-list").append(html); $("#notes-list").append(html);
} }
}, },
...@@ -315,17 +332,12 @@ var NoteList = { ...@@ -315,17 +332,12 @@ var NoteList = {
/** /**
* Called in response to getMore(). * Called in response to getMore().
* Disables loading more notes when scrolling to the bottom of the page. * Disables loading more notes when scrolling to the bottom of the page.
* Initalizes refreshing new notes.
*/ */
finishedLoadingMore: function() { finishedLoadingMore: function() {
this.loading_more_disabled = true; NoteList.loading_more_disabled = true;
// from now on only get new notes
if (!this.reversed) {
this.initRefreshNew();
}
// make sure we are up to date // make sure we are up to date
this.updateVotes(); NoteList.updateVotes();
}, },
...@@ -334,7 +346,7 @@ var NoteList = { ...@@ -334,7 +346,7 @@ var NoteList = {
* *
* New notes are all notes that are created after the site has been loaded. * New notes are all notes that are created after the site has been loaded.
* The "old" notes are in #notes-list the "new" ones will be in #new-notes-list. * The "old" notes are in #notes-list the "new" ones will be in #new-notes-list.
* The id of the last "old" note is in this.bottom_id. * The id of the last "old" note is in NoteList.bottom_id.
*/ */
...@@ -350,8 +362,8 @@ var NoteList = { ...@@ -350,8 +362,8 @@ var NoteList = {
*/ */
getNew: function() { getNew: function() {
$.ajax({ $.ajax({
url: this.notes_path, url: NoteList.notes_path,
data: this.target_params + "&loading_new=1&after_id=" + (this.reversed ? this.top_id : this.bottom_id), data: NoteList.target_params + "&loading_new=1&after_id=" + (NoteList.reversed ? NoteList.top_id : NoteList.bottom_id),
dataType: "script" dataType: "script"
}); });
}, },
...@@ -362,21 +374,20 @@ var NoteList = { ...@@ -362,21 +374,20 @@ var NoteList = {
*/ */
replaceNewNotes: function(newNoteIds, html) { replaceNewNotes: function(newNoteIds, html) {
$("#new-notes-list").html(html); $("#new-notes-list").html(html);
this.updateVotes(); NoteList.updateVotes();
}, },
/** /**
* Adds a single note to #new-notes-list. * Adds a single common note to #(new-)notes-list.
*/ */
appendNewNote: function(id, html) { appendNewNote: function(id, html) {
if (this.reversed) {
$("#notes-list").prepend(html);
} else {
$("#notes-list").append(html); $("#notes-list").append(html);
} NoteList.updateVotes();
this.updateVotes();
}, },
/**
* Adds a single discussion note to #(new-)notes-list.
*/
appendNewDiscussionNote: function(discussionId, diffRowHtml, noteHtml) { appendNewDiscussionNote: function(discussionId, diffRowHtml, noteHtml) {
// is this the first note of discussion? // is this the first note of discussion?
var row = $("form[rel='"+discussionId+"']").closest("tr"); var row = $("form[rel='"+discussionId+"']").closest("tr");
...@@ -401,7 +412,7 @@ var NoteList = { ...@@ -401,7 +412,7 @@ var NoteList = {
*/ */
updateVotes: function() { updateVotes: function() {
var votes = $("#votes .votes"); var votes = $("#votes .votes");
var notes = $("#notes-list").find(".note .vote"); var notes = $("#notes-list .note .vote");
// only update if there is a vote display // only update if there is a vote display
if (votes.size()) { if (votes.size()) {
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
// Toggler // Toggler
//-------- //--------
.js-toggler-container .turn-on { display: inline-block; } .js-toggler-container .turn-on { display: inherit; }
.js-toggler-container .turn-off { display: none; } .js-toggler-container .turn-off { display: none; }
.js-toggler-container.on .turn-on { display: none; } .js-toggler-container.on .turn-on { display: none; }
.js-toggler-container.on .turn-off { display: inline-block; } .js-toggler-container.on .turn-off { display: inherit; }
...@@ -310,24 +310,26 @@ p.notify_controls span{ ...@@ -310,24 +310,26 @@ p.notify_controls span{
padding-right: 15px; padding-right: 15px;
} }
} }
.note-text { .note_preview {
margin: 2px;
border: 1px solid #ddd;
padding: 10px;
min-height: 60px;
background:#f5f5f5;
}
.note_text {
border: 1px solid #aaa; border: 1px solid #aaa;
box-shadow:none; box-shadow: none;
} }
// TODO: end cleanup // TODO: end cleanup
} }
// hide the new discussion note form template // hide the new discussion note form template
.note-forms { #note-forms {
.note-form-holder {
margin-top: 5px;
}
.new_discussion_note { .new_discussion_note {
display: none; display: none;
} }
} }
.preview_note {
margin: 2px;
border: 1px solid #ddd;
padding: 10px;
min-height: 60px;
background:#f5f5f5;
}
...@@ -11,17 +11,32 @@ ...@@ -11,17 +11,32 @@
- @note.errors.full_messages.each do |msg| - @note.errors.full_messages.each do |msg|
%div= msg %div= msg
= f.text_area :note, size: 255, class: 'js-note-text js-gfm-input' .js-toggler-container
#preview-note.preview_note.hide = f.text_area :note, size: 255, class: 'note_text turn-on js-note-text js-gfm-input'
.note_preview.js-note-preview.hide.turn-off
.hint .hint
.right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}. .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
.clearfix .clearfix
.row.note_advanced_opts .buttons
.span3
= f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button" = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
= link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link' %button.btn.grouped.js-note-preview-button.js-toggler-target.turn-on{ data: {url: preview_project_notes_path(@project)} }
.span4.notify_opts Preview
%button.btn.grouped.js-note-preview-button.js-toggler-target.turn-off
Edit
.note_advanced_opts
.attachments.right
%h6.left Attachment:
%span.file_name File name...
.input.input_file
%a.file_upload.btn.small Upload File
= f.file_field :attachment, class: "input-file"
%span.hint Any file less than 10 MB
.notify_opts.right
%h6.left Notify via email: %h6.left Notify via email:
= label_tag :notify do = label_tag :notify do
= check_box_tag :notify, 1, @note.noteable_type != "Commit" = check_box_tag :notify, 1, @note.noteable_type != "Commit"
...@@ -31,11 +46,4 @@ ...@@ -31,11 +46,4 @@
= label_tag :notify_author do = label_tag :notify_author do
= check_box_tag :notify_author, 1 , @note.noteable_type == "Commit" = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
%span Commit author %span Commit author
.span5.attachments .clearfix
%h6.left Attachment:
%span.file_name File name...
.input.input_file
%a.file_upload.btn.small Upload File
= f.file_field :attachment, class: "input-file"
%span.hint Any file less than 10 MB
- if note.valid? - if note.valid?
:plain
$(".note-form-holder .error").remove();
$('.note-form-holder textarea').val("");
$('.note-form-holder #preview-link').text('Preview');
$('.note-form-holder #preview-note').hide();
$('.note-form-holder').show();
NoteList.appendNewNote(#{note.id}, "#{escape_javascript(render "notes/note", note: note)}"); NoteList.appendNewNote(#{note.id}, "#{escape_javascript(render "notes/note", note: note)}");
- else - else
:plain
$(".note-form-holder").replaceWith("#{escape_javascript(render 'notes/common_form')}"); $(".note-form-holder").replaceWith("#{escape_javascript(render 'notes/common_form')}");
GitLab.GfmAutoComplete.setup(); GitLab.GfmAutoComplete.setup();
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
- @note.errors.full_messages.each do |msg| - @note.errors.full_messages.each do |msg|
%div= msg %div= msg
= f.text_area :note, size: 255, class: 'js-note-text js-gfm-input' = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input'
.note_actions .note_actions
.buttons .buttons
= f.submit 'Add Comment', class: "btn comment-btn js-comment-button" = f.submit 'Add Comment', class: "btn comment-btn js-comment-button"
......
%ul#notes-list.notes %ul#notes-list.notes
.notes-status
- if can? current_user, :write_note, @project - if can? current_user, :write_note, @project
.note-forms.js-note-forms #note-forms.js-note-forms
= render "notes/common_form" = render "notes/common_form"
= render "notes/discussion_note_form" = render "notes/discussion_note_form"
......
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