From 79e13b75463852d7059a0d59a71a4e7ec5733a9e Mon Sep 17 00:00:00 2001
From: qilinz <zhangqilinz@outlook.com>
Date: Sat, 15 Jul 2023 22:36:42 +0200
Subject: [PATCH] all edit on the item page

---
 catalog/templates/_item_user_pieces.html | 71 ++++++++++++++++---
 common/static/scss/_mark.scss            | 63 ++++++++++-------
 journal/templates/mark_history.html      | 89 ------------------------
 journal/urls.py                          |  2 -
 journal/views.py                         | 20 ------
 5 files changed, 99 insertions(+), 146 deletions(-)
 delete mode 100644 journal/templates/mark_history.html

diff --git a/catalog/templates/_item_user_pieces.html b/catalog/templates/_item_user_pieces.html
index 387a2637..3bef455e 100644
--- a/catalog/templates/_item_user_pieces.html
+++ b/catalog/templates/_item_user_pieces.html
@@ -159,12 +159,7 @@
     标记历史
     {% if mark.logs %}
       <small>
-        <a href="{% url 'journal:mark_history' item.uuid %}"
-           class="item-mark-icon"
-           hx-target="body"
-           hx-swap="beforeend">
-          <i class="fa-solid fa-pen-to-square"></i>
-        </a>
+        <a href="#" onclick="toggleEditing()" id="edit">编辑</a>
       </small>
     {% endif %}
   </h5>
@@ -172,12 +167,72 @@
     <ul class="log-list">
       {% for log in mark.logs %}
         <li>
-          <span class="log-info">{{ log.timestamp|date }}</span>
-          <span class="log-info">{{ log.action_label }}</span>
+          <form id="mark_log_delete_{{ log.id }}"
+                action="{% url 'journal:mark_log' item.uuid log.id %}"
+                method="post">
+            {% csrf_token %}
+            <div class="log-info-container">
+              <span class="log-info">{{ log.timestamp|date }}</span>
+              <span class="log-info">{{ log.action_label }}</span>
+              <input type="hidden" name="delete" value="1">
+              <input type="hidden" name="log_id" id="{{ log.id }}">
+              <span class="hidden-command log-info" style="display:none">
+                <a href="javascript:void(0)"
+                   onclick="deleteLog('{{ log.id }}')"
+                   class="item-mark-icon">
+                  <i class="fa-solid fa-square-xmark"></i>
+                </a>
+              </span>
+            </div>
+          </form>
         </li>
       {% endfor %}
     </ul>
+    <footer class="log-command">
+      <span class="action hidden-command " style="display:none">
+        <form id="mark_delete"
+              action="{% url 'journal:mark' mark.item.uuid %}"
+              method="post">
+          {% csrf_token %}
+          <input type="hidden" name="delete" value="1">
+          <input type="hidden" name="silence" value="True">
+          <a href="#" onclick="deleteAllLog(event)">清空标记历史</a>
+        </form>
+      </span>
+    </footer>
   {% else %}
     <span class="empty">暂无</span>
   {% endif %}
 </section>
+<script>
+function toggleEditing() {
+  var buttons = document.getElementsByClassName("hidden-command");
+  var toggle = document.getElementById("edit");
+
+  for (var i = 0; i < buttons.length; i++) {
+    var button = buttons[i];
+    if (button.style.display === "none") {
+      button.style.display = "block";
+      toggle.innerHTML = "取消编辑";
+    } else {
+      button.style.display = "none";
+      toggle.innerHTML = "编辑";
+    }
+  }
+};
+
+function deleteAllLog(event) {
+    event.preventDefault(); // Prevent the default link behavior
+
+    const confirmation = confirm('确认清空标记历史？当前标记也会一并删除');
+    if (confirmation) {
+      const form = document.getElementById('mark_delete');
+      form.submit(); // Submit the form
+    }
+};
+
+function deleteLog(logId) {
+    const form = document.getElementById(`mark_log_delete_${logId}`);
+    form.submit(); // Submit the form
+}
+</script>
diff --git a/common/static/scss/_mark.scss b/common/static/scss/_mark.scss
index bd226089..bf38b5ac 100644
--- a/common/static/scss/_mark.scss
+++ b/common/static/scss/_mark.scss
@@ -15,39 +15,48 @@
 // source: https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem
 ul.log-list {
   li {
-  list-style: disc;
-  // You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page
-  position: relative;
+    list-style: disc;
+    position: relative;
+    margin: 0;
+    padding-bottom: 0.5em;
+    padding-left: 0.8em;
 
-  // Use padding to space things out rather than margins as the line would get broken up otherwise
-  margin: 0;
-  padding-bottom: 0.5em;
-  padding-left: 0.8em;
-  }
-  // The actual line being placed before each list item, tweak width and color as appropriate
-  li:before {
-    background-color: var(--pico-color);
-    width: 2px;
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -0.75em;
-  }
-
-  // Start the line further down on the first list item
-  li:first-child:before {
-    top: 15px;
+    // The actual line being placed before each list item, tweak width and color as appropriate
+    &:before {
+      background-color: var(--pico-color);
+      width: 2px;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -0.75em;
     }
 
-  // Stop the line short on the final list item
-  li:last-child:before {
-     height: 15px;
-   }
+    // Start the line further down on the first list item
+    &:first-child:before {
+      top: 15px;
+    }
+
+    // Stop the line short on the final list item
+    &:last-child:before {
+      height: 15px;
+    }
+
+    // Hide the line when there's only one item
+    &:only-child:before {
+      content: none;
+    }
+  }
 }
 
+.log-info {
+  margin-right: 0.5em;
+}
 
-
+.log-info-container {
+  display: flex;
+  align-items: center;
+}
 
 footer.log-command {
   display: flex;
diff --git a/journal/templates/mark_history.html b/journal/templates/mark_history.html
deleted file mode 100644
index c92540f9..00000000
--- a/journal/templates/mark_history.html
+++ /dev/null
@@ -1,89 +0,0 @@
-{% load static %}
-{% load i18n %}
-{% load admin_url %}
-{% load mastodon %}
-{% load oauth_token %}
-{% load truncate %}
-{% load thumb %}
-<!DOCTYPE html>
-<html lang="zh" class="content-page">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ site_name }} - {{ item.title }} - {% trans '标记历史' %}</title>
-    {% include "common_libs.html" with jquery=0 v2=1 %}
-    <style type="text/css">#id_visibility, #id_visibility li {padding-left:0; margin-bottom:0; display: inline-block !important;}</style>
-  </head>
-  <body>
-    {% include "_header.html" %}
-    <main>
-      <div>
-        <h3>标记历史</h3>
-        {% if mark.logs %}
-          <article>
-            <ul class="log-list">
-              {% for log in mark.logs %}
-                <li>
-                  <form id="mark_log_delete_{{ log.id }}"
-                        action="{% url 'journal:mark_log' item.uuid log.id %}"
-                        method="post">
-                    {% csrf_token %}
-                    <span class="log-info">{{ log.timestamp|date }}</span>
-                    <span class="log-info">{{ log.action_label }}</span>
-                    <input type="hidden" name="delete" value="1">
-                    <input type="hidden" name="log_id" id="{{ log.id }}">
-                    {% if editing %}
-                      <a href="javascript:$('#mark_log_delete_{{ log.id }}').submit()"
-                         class="delete">
-                        <i class="fa-solid fa-square-xmark"></i>
-                      </a>
-                    {% endif %}
-                  </form>
-                </li>
-              {% endfor %}
-            </ul>
-            <footer class="log-command">
-              <span class="action">
-                {% if not editing %}
-                  <a href="{% url 'journal:mark_history_edit' item.uuid %}">{% trans '编辑' %}</a>
-                {% endif %}
-              </span>
-              <span class="action">
-                <form id="mark_delete"
-                      action="{% url 'journal:mark' mark.item.uuid %}"
-                      method="post">
-                  {% csrf_token %}
-                  <input type="hidden" name="delete" value="1">
-                  <input type="hidden" name="silence" value="True">
-                  <a href="#" onclick="deleteAllLog(event)">清空标记历史</a>
-                </form>
-              </span>
-            </footer>
-          </article>
-        {% endif %}
-        <br>
-        <a href="{% url 'catalog:retrieve' item.url_path item.uuid %}">返回条目</a>
-      </div>
-      <aside>
-        {% include "_sidebar_item.html" with item=item %}
-      </aside>
-    </main>
-    <script>
-          $(".spoiler").on('click', function(){
-            $(this).toggleClass('revealed');
-          })
-    </script>
-    <script>
-  function deleteAllLog(event) {
-    event.preventDefault(); // Prevent the default link behavior
-
-    const confirmation = confirm('确认清空标记历史？当前标记也会一并删除');
-    if (confirmation) {
-      const form = document.getElementById('mark_delete');
-      form.submit(); // Submit the form
-    }
-  }
-    </script>
-    {% include "_footer.html" %}
-  </body>
-</html>
diff --git a/journal/urls.py b/journal/urls.py
index d3464d45..050e8c39 100644
--- a/journal/urls.py
+++ b/journal/urls.py
@@ -23,8 +23,6 @@ urlpatterns = [
     path("mark/<str:item_uuid>", mark, name="mark"),
     path("comment/<str:item_uuid>", comment, name="comment"),
     path("mark_log/<str:item_uuid>/<str:log_id>", mark_log, name="mark_log"),
-    path("mark_history/<str:item_uuid>", mark_history, name="mark_history"),
-    path("mark_history/edit/<str:item_uuid>", mark_history, name="mark_history_edit"),
     path(
         "add_to_collection/<str:item_uuid>", add_to_collection, name="add_to_collection"
     ),
diff --git a/journal/views.py b/journal/views.py
index 82038e3d..ed269c56 100644
--- a/journal/views.py
+++ b/journal/views.py
@@ -274,26 +274,6 @@ def mark_log(request, item_uuid, log_id):
     raise BadRequest()
 
 
-@login_required
-def mark_history(request, item_uuid):
-    item = get_object_or_404(Item, uid=get_uuid_or_404(item_uuid))
-    mark = Mark(request.user, item)
-    editing = False
-    if request.path.startswith("/mark_history/edit/"):
-        editing = True
-
-    if request.method == "GET":
-        return render(
-            request,
-            "mark_history.html",
-            {
-                "item": item,
-                "mark": mark,
-                "editing": editing,
-            },
-        )
-
-
 @login_required
 def comment(request, item_uuid):
     item = get_object_or_404(Item, uid=get_uuid_or_404(item_uuid))