From 629f537d06d557b7073083546a5b36fe81eacb56 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Sat, 17 Jul 2021 01:05:26 +0200
Subject: [PATCH] add more hotkey tooltips

---
 README.md                |  2 +-
 copyparty/httpcli.py     |  2 +-
 copyparty/web/browser.js | 10 +++++-----
 copyparty/web/md.css     | 41 ++++++++++++++++++++++++++++++++++++++++
 copyparty/web/md.html    | 10 +++++-----
 copyparty/web/md.js      |  3 +++
 6 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 728e1b9f..618602fd 100644
--- a/README.md
+++ b/README.md
@@ -158,7 +158,7 @@ small collection of user feedback
 * Windows: python 3.7 and older cannot read tags with ffprobe, so use mutagen or upgrade
 * Windows: python 2.7 cannot index non-ascii filenames with `-e2d`
 * Windows: python 2.7 cannot handle filenames with mojibake
-* MacOS: `--th-ff-jpg` may fix thumbnails using macports-FFmpeg
+* `--th-ff-jpg` may fix video thumbnails on some FFmpeg versions
 
 ## general bugs
 
diff --git a/copyparty/httpcli.py b/copyparty/httpcli.py
index 106391a8..b948805d 100644
--- a/copyparty/httpcli.py
+++ b/copyparty/httpcli.py
@@ -1376,7 +1376,7 @@ class HttpCli(object):
             for c, v in [[b"&", 4], [b"<", 3], [b">", 3]]:
                 sz_md += (len(buf) - len(buf.replace(c, b""))) * v
 
-        file_ts = max(ts_md, ts_html)
+        file_ts = max(ts_md, ts_html, E.t0)
         file_lastmod, do_send = self._chk_lastmod(file_ts)
         self.out_headers["Last-Modified"] = file_lastmod
         self.out_headers.update(NO_CACHE)
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index ff629f50..aaadf4f7 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -149,8 +149,8 @@ ebi('op_cfg').innerHTML = (
 ebi('tree').innerHTML = (
 	'<div id="treeh">\n' +
 	'	<a href="#" id="detree" tt="show breadcrumbs$NHotkey: B">🍞...</a>\n' +
-	'	<a href="#" class="btn" step="2" id="twobytwo">+</a>\n' +
-	'	<a href="#" class="btn" step="-2" id="twig">&ndash;</a>\n' +
+	'	<a href="#" class="btn" step="2" id="twobytwo" tt="Hotkey: A">+</a>\n' +
+	'	<a href="#" class="btn" step="-2" id="twig" tt="Hotkey: D">&ndash;</a>\n' +
 	'	<a href="#" class="tgl btn" id="dyntree" tt="autogrow as tree expands">a</a>\n' +
 	'</div>\n' +
 	'<ul id="treeul"></ul>\n' +
@@ -1458,8 +1458,8 @@ var thegrid = (function () {
 	gfiles.innerHTML = (
 		'<div id="ghead">' +
 		'<a href="#" class="tgl btn" id="gridsel" tt="enable file selection; ctrl-click a file to override$NHotkey: S">multiselect</a> &nbsp; zoom ' +
-		'<a href="#" class="btn" z="-1.2" tt="Hotkey: A">&ndash;</a> ' +
-		'<a href="#" class="btn" z="1.2" tt="Hotkey: D">+</a> &nbsp; sort by: ' +
+		'<a href="#" class="btn" z="-1.2" tt="Hotkey: shift-A">&ndash;</a> ' +
+		'<a href="#" class="btn" z="1.2" tt="Hotkey: shift-D">+</a> &nbsp; sort by: ' +
 		'<a href="#" s="href">name</a>, ' +
 		'<a href="#" s="sz">size</a>, ' +
 		'<a href="#" s="ts">date</a>, ' +
@@ -2520,7 +2520,7 @@ function apply_perms(newperms) {
 
 	var o = QSA('#ops>a[data-perm], #u2footfoot');
 	for (var a = 0; a < o.length; a++) {
-		var display = 'inline';
+		var display = '';
 		var needed = o[a].getAttribute('data-perm').split(' ');
 		for (var b = 0; b < needed.length; b++) {
 			if (!has(perms, needed[b])) {
diff --git a/copyparty/web/md.css b/copyparty/web/md.css
index 1e834386..2dcf0e00 100644
--- a/copyparty/web/md.css
+++ b/copyparty/web/md.css
@@ -8,6 +8,47 @@ html, body {
 	font-family: sans-serif;
 	line-height: 1.5em;
 }
+#tt {
+	position: fixed;
+	max-width: 34em;
+	background: #222;
+	border: 0 solid #777;
+	overflow: hidden;
+	margin-top: 1em;
+	padding: 0 1.3em;
+	height: 0;
+	opacity: .1;
+	transition: opacity 0.14s, height 0.14s, padding 0.14s;
+	box-shadow: 0 .2em .5em #222;
+	border-radius: .4em;
+	z-index: 9001;
+}
+#tt.b {
+	padding: 0 2em;
+	border-radius: .5em;
+	box-shadow: 0 .2em 1em #000;
+}
+#tt.show {
+	padding: 1em 1.3em;
+	border-width: .4em 0;
+	height: auto;
+	opacity: 1;
+}
+#tt.show.b {
+	padding: 1.5em 2em;
+	border-width: .5em 0;
+}
+#tt code {
+	background: #3c3c3c;
+	padding: .1em .3em;
+	border-top: 1px solid #777;
+	border-radius: .3em;
+	font-family: monospace, monospace;
+	line-height: 1.7em;
+}
+#tt em {
+	color: #f6a;
+}
 #mtw {
 	display: none;
 }
diff --git a/copyparty/web/md.html b/copyparty/web/md.html
index 8dc6a618..ae085441 100644
--- a/copyparty/web/md.html
+++ b/copyparty/web/md.html
@@ -14,9 +14,9 @@
 		<a id="lightswitch" href="#">go dark</a>
 		<a id="navtoggle" href="#">hide nav</a>
 		{%- if edit %}
-			<a id="save" href="?edit">save</a>
-			<a id="sbs" href="#">sbs</a>
-			<a id="nsbs" href="#">editor</a>
+			<a id="save" href="?edit" tt="Hotkey: ctrl-s">save</a>
+			<a id="sbs" href="#" tt="editor and preview side by side">sbs</a>
+			<a id="nsbs" href="#" tt="switch between editor and preview$NHotkey: ctrl-e">editor</a>
 			<div id="toolsbox">
 				<a id="tools" href="#">tools</a>
 				<a id="fmt_table" href="#">prettify table (ctrl-k)</a>
@@ -26,8 +26,8 @@
 				<a id="help" href="#">help</a>
 			</div>
 		{%- else %}
-			<a href="?edit">edit (basic)</a>
-			<a href="?edit2">edit (fancy)</a>
+			<a href="?edit" tt="good: higher performance$Ngood: same document width as viewer$Nbad: assumes you know markdown">edit (basic)</a>
+			<a href="?edit2" tt="not in-house so probably less buggy">edit (fancy)</a>
 			<a href="?raw">view raw</a>
 		{%- endif %}
 	</div>
diff --git a/copyparty/web/md.js b/copyparty/web/md.js
index 5ae305ba..20b0bd3a 100644
--- a/copyparty/web/md.js
+++ b/copyparty/web/md.js
@@ -530,3 +530,6 @@ dom_navtgl.onclick = function () {
 
 if (sread('hidenav') == 1)
     dom_navtgl.onclick();
+
+if (window['tt'])
+    tt.init();