From 7c0f89bc9566c7b614c9c356af3e82b1220cb793 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Sun, 10 Sep 2017 21:33:39 -0400
Subject: [PATCH] encrypt / decrypt is now using icons next to note title

---
 src/templates/app.html  |  36 ++++++++++++++++++++++++++----------
 static/icons/lock.png   | Bin 0 -> 323 bytes
 static/icons/unlock.png | Bin 0 -> 337 bytes
 static/style.css        |  15 +++++++++------
 4 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 static/icons/lock.png
 create mode 100644 static/icons/unlock.png

diff --git a/src/templates/app.html b/src/templates/app.html
index 3f3f4a40c..ca84d30e1 100644
--- a/src/templates/app.html
+++ b/src/templates/app.html
@@ -26,11 +26,11 @@
           <span id="matches"></span>
         </p>
 
-        <a onclick="createNewTopLevelNote()" title="Create new top level note">
+        <a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
           <img src="stat/icons/file-plus.png" alt="Create new top level note"/>
         </a>
 
-        <a onclick="collapseTree()" title="Collapse tree">
+        <a onclick="collapseTree()" title="Collapse tree" class="icon-action">
           <img src="stat/icons/list.png" alt="Collapse tree"/>
         </a>
 
@@ -40,14 +40,30 @@
 
       <div id="noteDetailWrapper">
         <div style="float: left; margin: 0 5px 5px 5px;" class="hide-toggle">
-          <button class="btn btn-sm"
-                  onclick="encryptNoteAndSendToServer();"
-                  title="Encrypt the note so that password will be required to view the note"
-                  id="encryptButton">Encrypt</button>
-          <button class="btn btn-sm"
-                  onclick="decryptNoteAndSendToServer();"
-                  title="Decrypt note permamently so that password will not be required to access this note in the future"
-                  id="decryptButton">Decrypt</button>
+          <!--<button class="btn btn-sm"-->
+                  <!--onclick="encryptNoteAndSendToServer();"-->
+                  <!--title="Encrypt the note so that password will be required to view the note"-->
+                  <!--id="encryptButton">Encrypt</button>-->
+          <!--<button class="btn btn-sm"-->
+                  <!--onclick="decryptNoteAndSendToServer();"-->
+                  <!--title="Decrypt note permamently so that password will not be required to access this note in the future"-->
+                  <!--id="decryptButton">Decrypt</button>-->
+
+          <a onclick="encryptNoteAndSendToServer()"
+             title="Encrypt the note so that password will be required to view the note"
+             class="icon-action"
+             id="encryptButton">
+            <img src="stat/icons/lock.png" alt="Encrypt note"/>
+          </a>
+
+          <a onclick="decryptNoteAndSendToServer()"
+             title="Decrypt note permamently so that password will not be required to access this note in the future"
+             class="icon-action"
+             id="decryptButton">
+            <img src="stat/icons/unlock.png" alt="Decrypt note"/>
+          </a>
+
+          &nbsp;
 
           <input autocomplete="off" value="Welcome to Notecase web app!" id="noteTitle" style="font-size: x-large; border: 0; width: 600px;" tabindex="1">
         </div>
diff --git a/static/icons/lock.png b/static/icons/lock.png
new file mode 100644
index 0000000000000000000000000000000000000000..3680e1c63c20997a59380b904142192441792539
GIT binary patch
literal 323
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE)4%caKYZ?lYt_f1s;*b
zKpodXn9)gNb_Gz7y~NYkmHi<nHzO;vUZRIRQ0RiEi(`n#@wZcb`I-zwTK4Z~5Oup=
zCDfbl@P46;^TcjV?Yo-n4BubLnfEUVbg22Nf6O!O>PsK)%VPT&^aL0T3&hqn&g_X?
z$e+`=r%8H2`sPoEYS@1?sLL={D<8SY!qQf`JY^5J%A%QBOi44}T+dKj6q(87XLNJ*
z#VxMIS6D>sFL_<BDm{K*>H(ABgxFlm{m#MD8Bede<;HtvmXQv(Mws1(A4<+2J#wQy
z2du7J?fSprJiAPfUbdmpxhuSf)aN~^jBHT;?va%^hl%^G@Tx<sSH%nC_o#_+1O3L}
M>FVdQ&MBb@00U)qN&o-=

literal 0
HcmV?d00001

diff --git a/static/icons/unlock.png b/static/icons/unlock.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d3d792c6e9b48f35eba5dfe1f5caea5c6491d58
GIT binary patch
literal 337
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE)4%caKYZ?lYt_f1s;*b
zKpodXn9)gNb_Gz7y~NYkmHi<nHzTv<K65i}pwK-}7sn8f<8P<>^Br^$IaZ&!M9he@
zQ&wH^T);cWe#fsu+wvZ8?MiBA-okev?8Y87;a}}D%_e?O&Hs9@X8*}Avo&iPXEpG<
z90<+gKC>i!soe(lca~e3tIVwZ&+<30YpgUZxT3I*^T72pw<Z7b6-=7Bl2c*Q(YS+W
zT++<c8oG7DSdF<Nn6-r+ekq>5!WvcSyL^$xYAZ(G2jB8^oE0=r)JCcvFw)<)u=Qgx
zYh**obLQ^HQeEyjlV|l`dVb|^&_70dHjC^?v#TDvgY~(z_MH5z)1dv{BPUUYnfr45
biivWqvy0Eh9A8!d^eKa<tDnm{r-UW|m4bg|

literal 0
HcmV?d00001

diff --git a/static/style.css b/static/style.css
index e133a523e..18b3eae7a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -71,12 +71,15 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {
     overflow-x: hidden;
 }
 
-#encryptButton {
-    position: absolute;
-    left: 950px;
+.icon-action:hover {
+    text-decoration: none;
 }
 
-#decryptButton {
-    position: absolute;
-    left: 950px;
+#encryptButton, #decryptButton {
+    display: none;
+}
+
+#encryptButton img, #decryptButton img {
+    top: -5px;
+    position: relative;
 }
\ No newline at end of file