article note format updates

classes/article.php

@@ -909,9 +909,18 @@ class Article extends Handler_Protected {
 
 	static function format_article_note($id, $note, $allow_edit = true) {
 
-		$str = "<div class='articleNote'	onclick=\"Plugins.Note.edit($id)\">
-			<div class='noteEdit' onclick=\"Plugins.Note.edit($id)\">".
-			($allow_edit ? __('(edit note)') : "")."</div>$note</div>";
+		if ($allow_edit) {
+			$onclick = "onclick='Plugins.Note.edit($id)'";
+			$note_class = 'editable';
+		} else {
+			$onclick = '';
+			$note_class = '';
+		}
+
+		return "<div class='article-note $note_class'>
+			<i class='material-icons'>note</i>
+			<div $onclick class='body'>$note</div>			
+			</div>";
 
 		return $str;
 	}

css/default.css

@@ -80,15 +80,18 @@ body.ttrss_main div.post div.content iframe {
   min-width: 50%;
   max-width: 98%;
 }
-body.ttrss_main div.articleNote {
+body.ttrss_main .article-note {
   background-color: #fff7d5;
-  padding: 5px;
   margin: 5px;
   border: 1px solid #e7d796;
   color: #9a8c59;
+  display: flex;
 }
-body.ttrss_main div.articleNote div.noteEdit {
-  float: right;
+body.ttrss_main .article-note > * {
+  align-self: center;
+  padding: 5px;
+}
+body.ttrss_main .article-note.editable {
   cursor: pointer;
 }
 body.ttrss_main h1 {

css/tt-rss.less

@@ -81,17 +81,21 @@ body.ttrss_main {
 		}
 	}
 
-	div.articleNote {
+	.article-note {
 		background-color : #fff7d5;
-		padding : 5px;
 		margin : 5px;
 		border: 1px solid #e7d796;
 		color : #9a8c59;
+		display : flex;
 
-		div.noteEdit {
-			float : right;
-			cursor : pointer;
+		> * {
+			align-self : center;
+			padding : 5px;
+		}
 	}
+
+	.article-note.editable {
+		cursor : pointer;
 	}
 
 	h1 {

plugins/note/init.php

@@ -23,7 +23,7 @@ class Note extends Plugin {
 
 	function hook_article_button($line) {
 		return "<i class='material-icons' onclick=\"Plugins.Note.edit(".$line["id"].")\"
-			style='cursor : pointer' title='".__('Edit article note')."'>note_add</i>";
+			style='cursor : pointer' title='".__('Edit article note')."'>note</i>";
 	}
 
 	function edit() {

plugins/note/note.js

@@ -20,14 +20,15 @@ Plugins.Note = {
 						if (reply) {
 							ArticleCache.del(id);
 
-							var elem = $("POSTNOTE-" + id);
+							const elem = $("POSTNOTE-" + id);
 
 							if (elem) {
-								Element.hide(elem);
 								elem.innerHTML = reply.note;
 
 								if (reply.raw_length != 0)
-									new Effect.Appear(elem);
+									Element.show(elem);
+								else
+									Element.hide(elem);
 							}
 						}
 					});

themes/night.css

@@ -196,7 +196,7 @@ body.flat.ttrss_main.ttrss_index .dijitMenu .dijitMenuItemSelected td {
 body.flat.ttrss_main.ttrss_index .dijitMenu .dijitMenuSeparator * {
   border-bottom-color: var(--border-dark) ! important;
 }
-body.flat.ttrss_main.ttrss_index .articleNote {
+body.flat.ttrss_main.ttrss_index .article-note {
   background: var(--bg-panel);
   border-color: #9a8c59;
 }

themes/night.less

@@ -255,7 +255,7 @@ body.flat.ttrss_main.ttrss_index {
     border-bottom-color : var(--border-dark) ! important;
   }
 
-  .articleNote {
+  .article-note {
     background : var(--bg-panel);
     border-color : #9a8c59;
   }