From dfd4701e6712a7bfa0d264b717a31f42367d468e Mon Sep 17 00:00:00 2001
From: Matias De lellis <mati86dl@gmail.com>
Date: Wed, 18 May 2022 21:14:40 -0300
Subject: [PATCH] Add 'Title' placeholder to notes..

---
 css/style.scss                | 6 +++++-
 js/script.js                  | 1 -
 js/templates/notes.handlebars | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index 7989517..9fb6d7f 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -38,7 +38,11 @@
 }
 
 .quicknote:hover {
-   box-shadow: 0px 0px 6px #808080;
+    box-shadow: 0px 0px 6px #808080;
+}
+
+#title-editable:empty:before {
+    content: attr(data-placeholder);
 }
 
 .quicknote ul {
diff --git a/js/script.js b/js/script.js
index be2dae7..5eb7710 100644
--- a/js/script.js
+++ b/js/script.js
@@ -327,7 +327,6 @@ View.prototype = {
             });
         }
 
-
         // Show delete and pin icons when hover over the notes.
         $("#notes-grid-div").on("mouseenter", ".quicknote", function() {
             $(this).find(".icon-header-note").addClass( "show-header-icon");
diff --git a/js/templates/notes.handlebars b/js/templates/notes.handlebars
index 28387e0..d3465a8 100644
--- a/js/templates/notes.handlebars
+++ b/js/templates/notes.handlebars
@@ -58,7 +58,7 @@
 			<div class='note-body'>
 				<div>
 					<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
-					<div contenteditable="true" id='title-editable' class='note-title'></div>
+					<div contenteditable="true" id='title-editable' class='note-title' data-placeholder="{{t "quicknotes" "Title"}}"></div>
 				</div>
 				<div contenteditable="true" id='content-editable' class='note-content'></div>
 				<div class='note-shares'></div>