From dc4ff64600fcb16d0d4ca693decbd4eb865d6683 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Mon, 30 Aug 2021 17:47:33 +1000
Subject: [PATCH] viewer hotkeys are in tooltip now

---
 TODO                  |  3 ---
 templates/viewer.html | 12 ++++++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/TODO b/TODO
index d4fd321..99e8893 100644
--- a/TODO
+++ b/TODO
@@ -1,7 +1,4 @@
 ## GENERAL
-    * viewer:
-        - buttons need tootltips to show shortcut key
-
     * remove dirs after the duplicate cleanup removes all its content
 
     * Face matching:
diff --git a/templates/viewer.html b/templates/viewer.html
index 8631829..c14395a 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -171,15 +171,15 @@
             </button>
         </div>
         <span class="col-auto my-auto">Show:</span>
-        <div title="Toggle showing filename" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
+        <div title="Toggle showing filename (hotkey: n)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
           <input class="form-check-input" type="checkbox" id="fname_toggle" onChange="$('.figure-caption').toggle()" checked>
           <label class="form-check-label ps-1" for="fname_toggle">Filename</label>
         </div>
-        <div title="Toggle showing matched faces" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
+        <div title="Toggle showing matched faces (hotkey: f)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
           <input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces">
           <label class="form-check-label ps-1" for="faces">Faces</label>
         </div>
-        <div title="Toggle showing 'distance' on matched faces" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
+        <div title="Toggle showing 'distance' on matched faces (hotkey: d)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
           <input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance">
           <label class="form-check-label ps-1" for="distance">Distance</label>
         </div>
@@ -204,7 +204,7 @@
             <button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
                 <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
             </button>
-            <button class="btn btn-outline-info p-1" title="View in Fullscreen mode" onClick="fullscreen=true; ViewImageOrVideo()">
+            <button class="btn btn-outline-info p-1" title="View in Fullscreen mode (hotkey: F)" onClick="fullscreen=true; ViewImageOrVideo()">
                 <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
             </button>
         </div>
@@ -234,6 +234,10 @@ $( document ).keydown(function(event) {
         case "n":
             $('#fname_toggle').click()
             break;
+        case "F":
+            fullscreen=!document.fullscreen
+            ViewImageOrVideo()
+            break;
         default:
             return; // Quit when this doesn't handle the key event.
     }