From 48cb8e3469306543a6dc326b0ed28de7af4c4b70 Mon Sep 17 00:00:00 2001
From: freginold <freginold@users.noreply.github.com>
Date: Thu, 4 May 2017 15:51:00 -0400
Subject: [PATCH] v3.2.4-

   - added ESC button as an option to cancel editing an item
   - fixed typo in CSS
   - added rename note on double click
   - added button icons
---
 _note.css | 19 ++++++++++++++++++-
 _note.js  | 15 +++++++++------
 _note.vbs |  2 +-
 note.hta  | 15 +++++++--------
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/_note.css b/_note.css
index 50e420d..bac2ec1 100644
--- a/_note.css
+++ b/_note.css
@@ -22,6 +22,17 @@ button[disabled]:hover {
   position: relative;
   float: left;
   margin-left: 10px;
+  text-align: left;
+  width: 87%;
+}
+.btnIcon {
+  padding: 0px 4px 0px 4px;
+  position: relative;
+}
+.bottomButton {
+  text-align: left;
+  width: 100%;
+  padding: 1px 0.7em 1px 0.7em;
 }
 .noteButton {
   padding: 6px;
@@ -43,7 +54,7 @@ button[disabled]:hover {
   font-weight: bold;
   font-style: italic;
   border: 2px solid black;
-  backgroundColor: gray;
+  background-color: #lightgray;
 }
 .item {
   display: inline-block;
@@ -301,3 +312,9 @@ button[disabled]:hover {
   background-color: #222222;
   color: #eeeeee;
 }
+#expandAllButton, #collapseAllButton {
+  width: 80%;
+  text-align: center;
+  margin: 0px 3px 1px 1px;
+  float: right;
+}
\ No newline at end of file
diff --git a/_note.js b/_note.js
index dc913bc..0ce96cb 100644
--- a/_note.js
+++ b/_note.js
@@ -68,8 +68,8 @@ var delItem = {
   scroll: 0 }
 var xElBeg = "<button class='x smallFont moveButtons' onclick='DelLine(this)' id='X";
 var xElEnd = "'>X</button>";
-var renButtonHTML = "<button class='upperRightButton' onclick='RenameThisNote()'>Rename</button>";
-var delButtonHTML = "<button class='upperRightButton' onclick='deleteNote();'>Delete</button>";
+var renButtonHTML = "<button class='upperRightButton' onclick='RenameThisNote()'><span class='btnIcon'>&#9998;</span>Rename</button>";
+var delButtonHTML = "<button class='upperRightButton' onclick='deleteNote();'><span class='btnIcon'>&#x2702;</span>Delete</button>";
 var moveButtonsHTMLBeg = "<button class='moveButtons smallFont uBut' id='u";
 var moveButtonsHTMLMid = "' onclick='MoveUp(this)'>&uarr;</button> <button class='moveButtons smallFont dBut' id='d";
 var moveButtonsHTMLEnd = "' onclick='MoveDown(this)'>&darr;</button>";
@@ -125,7 +125,7 @@ function applyOptions() {
 	case "orange":
 	  bgColor = "#FFCF5F";
 	  break;
-    case "charcoal":
+    case "charcoalgray":
       bgColor = "#555555";
       fgColor = "#ffffff";
       break;
@@ -191,7 +191,7 @@ function saveOptions() {
   else if (document.getElementsByName('bg')[4].checked) { Opt2 = 'green'; }
   else if (document.getElementsByName('bg')[5].checked) { Opt2 = 'blue'; }
   else if (document.getElementsByName('bg')[6].checked) { Opt2 = 'orange'; }  
-  else if (document.getElementsByName('bg')[7].checked) { Opt2 = 'charcoal'; }
+  else if (document.getElementsByName('bg')[7].checked) { Opt2 = 'charcoalgray'; }
   else if (document.getElementsByName('bg')[8].checked) { Opt2 = 'forestgreen'; }
   else if (document.getElementsByName('bg')[9].checked) { Opt2 = 'navyblue'; }
   else if (document.getElementsByName('bg')[10].checked) { Opt2 = 'brown'; }    
@@ -273,7 +273,7 @@ function showOptions() {
     case "orange":
       document.getElementsByName('bg')[6].checked=true;
       break;	  
-    case "charcoal":
+    case "charcoalgray":
       document.getElementsByName('bg')[7].checked=true;
       break;
     case "forestgreen":
@@ -364,7 +364,7 @@ function showNotes(cNote) {
   window[currentNote].className = 'noteButton activeNote';
   var currentNoteDisplay = currentNote;
   if (currentNote == "&") { currentNoteDisplay = "&#38;"; }    // to deal w/ & as only char in title
-  noteTitle.innerHTML = "<div class='delBox'>" + renButtonHTML + delButtonHTML + "</div>" + currentNoteDisplay;
+  noteTitle.innerHTML = "<div class='delBox'>" + renButtonHTML + delButtonHTML + "</div>" + "<span ondblclick='document.selection.empty(); RenameThisNote()'>" + currentNoteDisplay + "</span>";
   getLines(currentNote);
   if (currentNote == prevNote) {
     // if reloading the same note
@@ -635,6 +635,9 @@ function goEdit(itemObj) {
   editing = true;
   var editBoxHTML = "<form name='editForm' onsubmit='event.returnValue=false;SubmitEdit(editBox.value);' action='#'><input type='text' size=50 id='editBox' /><input type='submit' style='color: green; margin-left: 2px;' value='&#10004; Change' /><input type='button' style='color: red; margin-left: 2px;' value='&#10008; Cancel' onclick='canceledEdit();' /></form>";
   document.getElementById(itemToEdit).innerHTML = editBoxHTML;
+  document.getElementById('editBox').attachEvent('onkeydown', function(e) {
+  	if (e.keyCode == 27) { canceledEdit(); }	// if ESC key pressed while editing
+  });
   checkCoords();   // to set editBox size right away
   document.getElementById('editBox').value = uneditedString;
   document.getElementById('editBox').focus();
diff --git a/_note.vbs b/_note.vbs
index 88266a6..3a16cc1 100644
--- a/_note.vbs
+++ b/_note.vbs
@@ -1,6 +1,6 @@
 ' Settings (saved in config file):
 ' 1. Time Stamp: hide/show
-' 2. Background Color: gray/yellow/white/pink/green/blue/orange/charcoal/forestgreen/navyblue/brown/black
+' 2. Background Color: gray/yellow/white/pink/green/blue/orange/charcoalgray/forestgreen/navyblue/brown/black
 ' 3. Note Font: p1-serif/p2-sans serif/uf0/uf1/uf2/uf3
 ' 4. Note Font Size: small/medium/large
 ' 5. User Font 1
diff --git a/note.hta b/note.hta
index 28ff392..889eca6 100644
--- a/note.hta
+++ b/note.hta
@@ -9,7 +9,7 @@
   Scroll = no
   Icon = "note_icon.ico"
   navigable = no
-  version = "3.2.3"
+  version = "3.2.4"
 >
 <title>Note</title>
 <link href='_note.css' rel='stylesheet' type='text/css'>
@@ -17,10 +17,9 @@
 <body>
 
 <div id='upperRightBox'> 
-  <button id='aboutButton' class='upperRightButton' onclick='displayAbout();'>About</button>
-  <button id='optionsButton' class='upperRightButton' onclick='showOptions();'>Options</button>
-  <button id='newButton' class='upperRightButton' onclick='showNewNoteBox();'>New 
-  Note</button>
+  <button id='newButton' class='upperRightButton' onclick='showNewNoteBox();'><span class='btnIcon'>&#128220</span>&nbsp;New</button>
+  <button id='optionsButton' class='upperRightButton' onclick='showOptions();'><span class='btnIcon'>&#9874</span>&nbsp;Settings</button>
+  <button id='aboutButton' class='upperRightButton' onclick='displayAbout();'><span class='btnIcon'>&#8505</span>&nbsp;&nbsp;About</button>
 </div>
 
 <div id='noteList'></div>
@@ -43,9 +42,9 @@
       <td>
         <input type='text' size=100 id='inputBox' />
       </td><td>
-        <input type='submit' class='smallFont' value='Add to Bottom' /><br />
+        <input type='submit' class='smallFont bottomButton' value='&#8659;&nbsp;&nbsp;Add to Bottom' /><br />
       </td></tr><tr><td></td><td>
-        <input type='button' class='smallFont' value='Insert Above ...' onclick='insertItem();' />
+        <input type='button' class='smallFont bottomButton' value='&#8662;&nbsp;&nbsp;Insert Above ...' onclick='insertItem();' />
       </td>
     </tr></table>
   </form>
@@ -64,7 +63,7 @@
   <label id='ltgreenL'><input type='radio' name='bg' class='optionInput' value='green' /> Light Green </label><br />
   <label id='ltblueL'><input type='radio' name='bg' class='optionInput' value='blue' /> Light Blue </label><br />
   <label id='orangeL'><input type='radio' name='bg' class='optionInput' value='orange' /> Orange </label><br />
-  <label id='charcoalL'><input type='radio' name='bg' class='optionInput' value='charcoal' /> Charcoal </label><br />
+  <label id='charcoalL'><input type='radio' name='bg' class='optionInput' value='charcoalgray' /> Charcoal Gray </label><br />
   <label id='fgreenL'><input type='radio' name='bg' class='optionInput' value='forestgreen' /> Forest Green </label><br />
   <label id='nblueL'><input type='radio' name='bg' class='optionInput' value='navyblue' /> Navy Blue </label><br />
   <label id='brownL'><input type='radio' name='bg' class='optionInput' value='brown' /> Brown </label><br />