From: Christian Heller <c.heller@plomlompom.de>
Date: Thu, 20 Feb 2025 18:04:31 +0000 (+0100)
Subject: Fix and simplify code switching in file view between editing allowed/disallowed.
X-Git-Url: https://plomlompom.com/repos/%7B%7B%20web_path%20%7D%7D/%7B%7Bprefix%7D%7D/static/%7B%7Bdb.prefix%7D%7D/ledger?a=commitdiff_plain;h=3dc3d24a9e1894e99728cf1f60a91555b0f2004e;p=ytplom

Fix and simplify code switching in file view between editing allowed/disallowed.
---

diff --git a/src/templates/_base.tmpl b/src/templates/_base.tmpl
index 9c61239..007bce9 100644
--- a/src/templates/_base.tmpl
+++ b/src/templates/_base.tmpl
@@ -107,7 +107,7 @@ connect_events();
 html { scroll-padding-top: 5em; } /* so anchor jumps pad off sticky header */
 body { background-color: {{background_color}}; }
 table { width: 100%; }
-td, th { vertical-align: top; text-align: left; }
+td, th { vertical-align: top; text-align: left; margin: 0; padding: 0; }
 #header { position: sticky; top: 0; background-color: {{background_color}}; }
 {% block css %}
 {% endblock %}
diff --git a/src/templates/file_data.tmpl b/src/templates/file_data.tmpl
index c849541..6cdbef1 100644
--- a/src/templates/file_data.tmpl
+++ b/src/templates/file_data.tmpl
@@ -6,26 +6,29 @@ const PATH_FILE_JSON = `/{{page_names.file_json}}/` + "{{file.digest.b64}}";
 
 async function update_file_data() {
     const file_data = await wrapped_fetch(PATH_FILE_JSON).then((response) => response.json());
-    document.getElementById("sync_checkbox").checked = ! file_data.flags.includes("do not sync");
     Array.from(document.getElementsByClassName("listed_tags")).forEach((row) => row.remove());
     file_data.tags_showable.forEach((tag) => {
         const tr = new_child_to("tr", document.getElementById("tags_table"));
         tr.classList.add("listed_tags");
+        {% if allow_edit %}
         td_checkbox = new_child_to("td", tr);
         td_checkbox.classList.add("tag_checkboxes");
         const input = new_child_to("input", td_checkbox);
         input.type = "checkbox";
         input.checked = true;
-        {% if not allow_edit %}input.disabled = true;{% endif %}
         input.onclick = send_update;
+        {% endif %}
         const a = new_child_to("a", new_child_to("td", new_child_to("td", tr)));
         a.href = `${PATH_FILES}?needed_tag=${encodeURIComponent(tag)}`;
         a.textContent = tag;
     });
+    {% if allow_edit %}
+    document.getElementById("sync_checkbox").checked = ! file_data.flags.includes("do not sync");
     document.getElementById("added_tag").value = "";
     const datalist = document.getElementById("unused_tags");
     datalist.innerHTML = "";
     file_data.unused_tags.forEach((tag) => { new_child_to("option", datalist, tag); });
+    {% endif %}
     td_present = document.getElementById("presence");
     td_present.innerHTML = "";
     if (file_data.present) {
@@ -69,7 +72,7 @@ window.addEventListener('load', update_file_data);
 td.top_field { width: 100%; }
 td.tag_checkboxes { width: 1em; }
 td.dangerous { text-align: right}
-td.dangerous > form > input[type=submit], td.dangerous > button { color: red; }
+td.dangerous > form > input[type=submit], td.dangerous > button { background-color: black; color: red; }
 {% endblock %}
 
 
@@ -115,15 +118,15 @@ td.dangerous > form > input[type=submit], td.dangerous > button { color: red; }
 </td>
 </tr>
 
+{% if allow_edit %}
 <tr>
 <th>options</th>
 <td>
 <table>
 <tr>
 <td>
-<input id="sync_checkbox" type="checkbox" {% if not allow_edit %}disabled{% endif %} onclick="send_update()" /> do sync<br />
+<input id="sync_checkbox" type="checkbox" onclick="send_update()" /> do sync<br />
 </td>
-{% if allow_edit %}
 <td class="dangerous">
 <button id="unlink_button" onclick="send_update(this)" />delete locally</button>
 <form action="/{{page_names.file_kill}}/{{file.digest.b64}}" method="POST" />
@@ -131,11 +134,11 @@ td.dangerous > form > input[type=submit], td.dangerous > button { color: red; }
 <input type="submit" value="KILL" />
 </form>
 </td>
-{% endif %}
 </tr>
 </table>
 </td>
 </tr>
+{% endif %}
 
 </table>
 {% endblock %}