Merge branch 'update-votes-when-adding-notes' of https://github.com/riyad/gitlab…

…hq into riyad-update-votes-when-adding-notes

Merge branch 'update-votes-when-adding-notes' of https://github.com/riyad/gitlab…
…hq into riyad-update-votes-when-adding-notes
Dmitriy Zaporozhets
2 parents 249cb19d 6aebb76b
Showing 6 changed files with 64 additions and 6 deletions Show diff stats
app/assets/javascripts/notes.js
app/assets/stylesheets/sections/notes.scss
app/helpers/notes_helper.rb
app/views/issues/show.html.haml
app/views/merge_requests/_show.html.haml
app/views/notes/_note.html.haml
@@ -21,15 +21,18 @@ var NoteList = {
       this.getContent();
       $("#notes-list, #new-notes-list").on("ajax:success", ".delete-note", function() {
-        $(this).closest('li').fadeOut();
+        $(this).closest('li').fadeOut(function() {
+          $(this).remove();
+          NoteList.updateVotes();
+        });
       });
       $(".note-form-holder").on("ajax:before", function(){
-        $(".submit_note").disable()
+        $(".submit_note").disable();
       })
       $(".note-form-holder").on("ajax:complete", function(){
-        $(".submit_note").enable()
+        $(".submit_note").enable();
       })
       disableButtonIfEmptyField(".note-text", ".submit_note");
@@ -159,6 +162,8 @@ var NoteList = {
       if (!this.reversed) {
         this.initRefreshNew();
       }
+      // make sure we are up to date
+      this.updateVotes();
     },
@@ -198,6 +203,7 @@ var NoteList = {
   replaceNewNotes:
     function(html) {
       $("#new-notes-list").html(html);
+      this.updateVotes();
     },
   /**
@@ -210,6 +216,37 @@ var NoteList = {
       } else {
         $("#new-notes-list").append(html);
       }
+      this.updateVotes();
+    },
+
+  /**
+   * Recalculates the votes and updates them (if they are displayed at all).
+   *
+   * Assumes all relevant notes are displayed (i.e. there are no more notes to
+   * load via getMore()).
+   * Might produce inaccurate results when not all notes have been loaded and a
+   * recalculation is triggered (e.g. when deleting a note).
+   */
+  updateVotes:
+    function() {
+      var votes = $("#votes .votes");
+      var notes = $("#notes-list, #new-notes-list").find(".note.vote");
+
+      // only update if there is a vote display
+      if (votes.size()) {
+        var upvotes = notes.filter(".upvote").size();
+        var downvotes = notes.filter(".downvote").size();
+        var votesCount = upvotes + downvotes;
+        var upvotesPercent = votesCount ? (100.0 / votesCount * upvotes) : 0;
+        var downvotesPercent = votesCount ? (100.0 - upvotesPercent) : 0;
+
+        // change vote bar lengths
+        votes.find(".bar-success").css("width", upvotesPercent+"%");
+        votes.find(".bar-danger").css("width", downvotesPercent+"%");
+        // replace vote numbers
+        votes.find(".upvotes").text(votes.find(".upvotes").text().replace(/\d+/, upvotes));
+        votes.find(".downvotes").text(votes.find(".downvotes").text().replace(/\d+/, downvotes));
+      }
     }
 };
@@ -71,6 +71,19 @@
   border-top: 1px solid #eee;
 }
+/* mark vote notes */
+.voting_notes .note {
+  padding: 8px 0 8px 12px;
+  &.upvote {
+    padding-left: 8px;
+    border-left: 4px solid #468847;
+  }
+  &.downvote {
+    padding-left: 8px;
+    border-left: 4px solid #B94A48;
+  }
+}
+
 .notes-status {
   margin: 18px;
 }
@@ -6,4 +6,12 @@ module NotesHelper
   def loading_new_notes?
     params[:loading_new].present?
   end
+
+  def note_vote_class(note)
+    if note.upvote?
+      "vote upvote"
+    elsif note.downvote?
+      "vote downvote"
+    end
+  end
 end
@@ -61,4 +61,4 @@
         = markdown @issue.description
-.issue_notes#notes= render "notes/notes_with_form", tid: @issue.id, tt: "issue"
+.issue_notes.voting_notes#notes= render "notes/notes_with_form", tid: @issue.id, tt: "issue"
@@ -15,7 +15,7 @@
         %i.icon-list-alt
         Diff
-.merge_request_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }
+.merge_request_notes.voting_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }
   = render("notes/notes_with_form", tid: @merge_request.id, tt: "merge_request")
 .merge-request-diffs
   = render "merge_requests/show/diffs" if @diffs
-%li{id: dom_id(note), class: "note"}
+%li{id: dom_id(note), class: "note #{note_vote_class(note)}"}
   = image_tag gravatar_icon(note.author.email), class: "avatar s32"
   %div.note-author
     %strong= note.author_name
	@@ -21,15 +21,18 @@ var NoteList = {		@@ -21,15 +21,18 @@ var NoteList = {
21	this.getContent();	21	this.getContent();
22		22
23	$("#notes-list, #new-notes-list").on("ajax:success", ".delete-note", function() {	23	$("#notes-list, #new-notes-list").on("ajax:success", ".delete-note", function() {
24	- $(this).closest('li').fadeOut();	24	+ $(this).closest('li').fadeOut(function() {
		25	+ $(this).remove();
		26	+ NoteList.updateVotes();
		27	+ });
25	});	28	});
26		29
27	$(".note-form-holder").on("ajax:before", function(){	30	$(".note-form-holder").on("ajax:before", function(){
28	- $(".submit_note").disable()	31	+ $(".submit_note").disable();
29	})	32	})
30		33
31	$(".note-form-holder").on("ajax:complete", function(){	34	$(".note-form-holder").on("ajax:complete", function(){
32	- $(".submit_note").enable()	35	+ $(".submit_note").enable();
33	})	36	})
34		37
35	disableButtonIfEmptyField(".note-text", ".submit_note");	38	disableButtonIfEmptyField(".note-text", ".submit_note");
	@@ -159,6 +162,8 @@ var NoteList = {		@@ -159,6 +162,8 @@ var NoteList = {
159	if (!this.reversed) {	162	if (!this.reversed) {
160	this.initRefreshNew();	163	this.initRefreshNew();
161	}	164	}
		165	+ // make sure we are up to date
		166	+ this.updateVotes();
162	},	167	},
163		168
164		169
	@@ -198,6 +203,7 @@ var NoteList = {		@@ -198,6 +203,7 @@ var NoteList = {
198	replaceNewNotes:	203	replaceNewNotes:
199	function(html) {	204	function(html) {
200	$("#new-notes-list").html(html);	205	$("#new-notes-list").html(html);
		206	+ this.updateVotes();
201	},	207	},
202		208
203	/**	209	/**
	@@ -210,6 +216,37 @@ var NoteList = {		@@ -210,6 +216,37 @@ var NoteList = {
210	} else {	216	} else {
211	$("#new-notes-list").append(html);	217	$("#new-notes-list").append(html);
212	}	218	}
		219	+ this.updateVotes();
		220	+ },
		221	+
		222	+ /**
		223	+ * Recalculates the votes and updates them (if they are displayed at all).
		224	+ *
		225	+ * Assumes all relevant notes are displayed (i.e. there are no more notes to
		226	+ * load via getMore()).
		227	+ * Might produce inaccurate results when not all notes have been loaded and a
		228	+ * recalculation is triggered (e.g. when deleting a note).
		229	+ */
		230	+ updateVotes:
		231	+ function() {
		232	+ var votes = $("#votes .votes");
		233	+ var notes = $("#notes-list, #new-notes-list").find(".note.vote");
		234	+
		235	+ // only update if there is a vote display
		236	+ if (votes.size()) {
		237	+ var upvotes = notes.filter(".upvote").size();
		238	+ var downvotes = notes.filter(".downvote").size();
		239	+ var votesCount = upvotes + downvotes;
		240	+ var upvotesPercent = votesCount ? (100.0 / votesCount * upvotes) : 0;
		241	+ var downvotesPercent = votesCount ? (100.0 - upvotesPercent) : 0;
		242	+
		243	+ // change vote bar lengths
		244	+ votes.find(".bar-success").css("width", upvotesPercent+"%");
		245	+ votes.find(".bar-danger").css("width", downvotesPercent+"%");
		246	+ // replace vote numbers
		247	+ votes.find(".upvotes").text(votes.find(".upvotes").text().replace(/\d+/, upvotes));
		248	+ votes.find(".downvotes").text(votes.find(".downvotes").text().replace(/\d+/, downvotes));
		249	+ }
213	}	250	}
214	};	251	};
215		252
	@@ -71,6 +71,19 @@		@@ -71,6 +71,19 @@
71	border-top: 1px solid #eee;	71	border-top: 1px solid #eee;
72	}	72	}
73		73
		74	+/* mark vote notes */
		75	+.voting_notes .note {
		76	+ padding: 8px 0 8px 12px;
		77	+ &.upvote {
		78	+ padding-left: 8px;
		79	+ border-left: 4px solid #468847;
		80	+ }
		81	+ &.downvote {
		82	+ padding-left: 8px;
		83	+ border-left: 4px solid #B94A48;
		84	+ }
		85	+}
		86	+
74	.notes-status {	87	.notes-status {
75	margin: 18px;	88	margin: 18px;
76	}	89	}
	@@ -6,4 +6,12 @@ module NotesHelper		@@ -6,4 +6,12 @@ module NotesHelper
6	def loading_new_notes?	6	def loading_new_notes?
7	params[:loading_new].present?	7	params[:loading_new].present?
8	end	8	end
		9	+
		10	+ def note_vote_class(note)
		11	+ if note.upvote?
		12	+ "vote upvote"
		13	+ elsif note.downvote?
		14	+ "vote downvote"
		15	+ end
		16	+ end
9	end	17	end
	@@ -61,4 +61,4 @@		@@ -61,4 +61,4 @@
61	= markdown @issue.description	61	= markdown @issue.description
62		62
63		63
64	-.issue_notes#notes= render "notes/notes_with_form", tid: @issue.id, tt: "issue"	64	+.issue_notes.voting_notes#notes= render "notes/notes_with_form", tid: @issue.id, tt: "issue"
	@@ -15,7 +15,7 @@		@@ -15,7 +15,7 @@
15	%i.icon-list-alt	15	%i.icon-list-alt
16	Diff	16	Diff
17		17
18	-.merge_request_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }	18	+.merge_request_notes.voting_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }
19	= render("notes/notes_with_form", tid: @merge_request.id, tt: "merge_request")	19	= render("notes/notes_with_form", tid: @merge_request.id, tt: "merge_request")
20	.merge-request-diffs	20	.merge-request-diffs
21	= render "merge_requests/show/diffs" if @diffs	21	= render "merge_requests/show/diffs" if @diffs
1	-%li{id: dom_id(note), class: "note"}	1	+%li{id: dom_id(note), class: "note #{note_vote_class(note)}"}
2	= image_tag gravatar_icon(note.author.email), class: "avatar s32"	2	= image_tag gravatar_icon(note.author.email), class: "avatar s32"
3	%div.note-author	3	%div.note-author
4	%strong= note.author_name	4	%strong= note.author_name