From e843a3bb197ea8baafb5bdf80aaa78232e6a72ab Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 9 May 2017 17:03:47 -0400
Subject: [PATCH] 3.5.481. Clean up the mod card note count code.

---
 changelog.html      |  1 +
 src/ui/logviewer.js | 18 ++++++++++++------
 style.css           |  8 --------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/changelog.html b/changelog.html
index 8146bd44..ebe1ce05 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,5 +1,6 @@
 <div class="list-header">3.5.481 <time datetime="2017-05-09">(2017-05-09)</time></div>
 <ul class="chat-menu-content menu-side-padding">
+	<li>Added: Display the number of Notes a user has on moderation cards, once the data is loaded.</li>
 	<li>Fixed: Don't display background colors on custom bits badges.</li>
 	<li>Fixed: Advanced settings search box styling.</li>
 	<li>Fixed: ITAD button showing in places it shouldn't.</li>
diff --git a/src/ui/logviewer.js b/src/ui/logviewer.js
index 6221cffa..f69a28f0 100644
--- a/src/ui/logviewer.js
+++ b/src/ui/logviewer.js
@@ -536,9 +536,9 @@ FFZ.mod_card_pages.history = {
 				msg_line.classList.remove('ffz-mentioned');
 				history.appendChild(msg_line);
 			}
-			
+
 			FFZ.mod_card_pages.notes.update_counter(mod_card, data.comments.length)
-			
+
 			history.scrollTop = history.scrollHeight;
 		});
 	}
@@ -626,10 +626,14 @@ FFZ.mod_stats_blocks = {
 FFZ.mod_card_pages.notes = {
 	title: "<span>N</span>otes",
 	needs_lv: true,
-	
+
 	update_counter: function(mod_card, count) {
-		var tabelement = document.getElementById(mod_card.elementId).querySelector(".moderation-card__actions [data-page=notes]");
-		tabelement.innerHTML = '<span>N</span>otes' + ( count > 0 ? ' <div class="note-counter">' + count + '</div>' : '');
+		var el = mod_card.get('element'),
+			notes_tab = el && el.querySelector('.moderation-card__actions [data-page=notes]');
+
+		if ( notes_tab )
+			notes_tab.innerHTML = FFZ.mod_card_pages.notes.title +
+				(count > 0 ? ' <div class="pill">' + utils.number_commas(count) + '</div>' : '');
 	},
 
 	add_note: function(mod_card, el, note, history, last_line, do_scroll) {
@@ -774,6 +778,8 @@ FFZ.mod_card_pages.notes = {
 				mod_card._lv_sock_user = user_id;
 				f.lv_ws_sub('logs-' + room_id + '-' + user_id);
 
+				FFZ.mod_card_pages.notes.update_counter(mod_card, data.length);
+
 				if ( data.length ) {
 					var last_line = null;
 					for(var i=0; i < data.length; i++)
@@ -787,7 +793,7 @@ FFZ.mod_card_pages.notes = {
 		});
 
 		if ( mod_card.lv_write_notes ) {
-			var textarea = utils.createElement('textarea', 'chat_text_input mousetrap note-text-input'),
+			var textarea = utils.createElement('textarea', 'chat_text_input mousetrap form__input note-text-input'),
 				note_container = utils.createElement('div', 'moderation-card__actions textarea-contain note-input', textarea),
 				btn_submit = utils.createElement('a', 'button float-right', 'Add Note'),
 				btn_container = utils.createElement('div', 'chat-buttons-container clearfix', btn_submit),
diff --git a/style.css b/style.css
index cfebb63d..e16d36a8 100644
--- a/style.css
+++ b/style.css
@@ -4200,12 +4200,4 @@ body.ffz-sidebar-swap .app-main.theatre #main_col:not(.expandRight) #player[data
 	padding: 0;
 	display: block;
 	max-width: 340px;
-}
-
-.moderation-card div.note-counter {
-	display: inline-block;
-	background-color: #555;
-	color: white;
-	padding: 0 8px;
-	border-radius: 100%;
 }
\ No newline at end of file