forum: replace comment action links with contextual menu

The menu works with HTML/CSS only, and JS support will also allow
closing it by clicking outside of it (instead of closing allow when
clicking on the menu icon again).

app/data/groups.yaml

@@ -20,7 +20,7 @@
 #  edit.tests
 #  edit.accounts
 #  edit.trophies
-#  delete.posts
+#  delete.posts (includes triple XP removal)
 #  delete.tests
 #  delete.accounts
 #  delete.shared-files

app/static/css/table.css

@@ -115,6 +115,12 @@ table.thread td.author {
 table.thread td {
   vertical-align: top;
 }
+table.thread td.message {
+  padding-top: 8px;
+}
+table.thread td.message > *:nth-child(2) {
+  margin-top: 0;
+}
 table.thread td.message img {
   max-width: 100%;
 }
@@ -122,21 +128,45 @@ table.thread td.message img {
 table.thread div.info {
   float: right;
   text-align: right;
-  opacity: 0.7;
-  padding-top: 8px;
-  margin-left: 16px;
+  position: relative;
 }
+table.thread div.info > * {
+  display: inline-block;
+  vertical-align: top;
+}
+table.thread div.info summary {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+}
+table.thread .context-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin: 0;
+  padding: 4px 0;
+  box-shadow: var(--shadow);
+  border-radius: 4px;
+  transition: none;
+
+  background: var(--background);
+  z-index: 2;
+  border: 1px solid var(--border);
+}
+table.thread .context-menu a {
+  display: block;
+  padding: 4px 8px;
+  text-align: center;
+  color: inherit;
+}
+table.thread .context-menu a:hover {
+  background: var(--background-light);
+  text-decoration: none;
+}
+
 @media screen and (max-width: 1199px) {
   table.thread div.info {
     float: none;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-left: 0;
-  }
-  table.thread div.info > *:not(:last-child):after {
-    content: '·';
-    margin: 0 4px;
   }
   table.thread td.author {
     /* Includes padding */

app/static/css/themes/FK_dark_theme.css

@@ -108,6 +108,13 @@ footer {
     --border-xp: 1px solid #d03333;
 }
 
+.context-menu {
+    --background: #1d2326;
+    --shadow: 0 0 12px -9px #000000;
+    --border: #404040;
+    --background-light: #262c2f;
+}
+
 table {
     --border: #404040;
 }

app/static/css/themes/Tituya_v43_theme.css

@@ -102,6 +102,13 @@ footer {
     --border-xp: 1px solid #be1818;
 }
 
+.context-menu {
+    --background: #ffffff;
+    --shadow: 0 0 12px -9px #000000;
+    --border: #d0d0d0;
+    --background-light: #f0f0f0;
+}
+
 div.pagination {
     font-size: 14px;
     margin: 13px;
@@ -129,4 +136,4 @@ div.editor-toolbar {
     --separator: #aaa2a2;
     --text-disabled: #c0c0c0;
     --text: #515151;
-}
+}

app/static/css/themes/default_theme.css

@@ -110,6 +110,13 @@ footer {
     --border-xp: 1px solid #d03333;
 }
 
+.context-menu {
+    --background: #ffffff;
+    --shadow: 0 0 12px -9px #000000;
+    --border: #d0d0d0;
+    --background-light: #f0f0f0;
+}
+
 div.editor-toolbar, div.CodeMirror {
     --border: #c0c0c0;
     --background-light: #d9d9d9;

app/static/scripts/pc-utils.js

@@ -11,3 +11,17 @@ function getCookie(name) {
 	if( end == -1 ) end = document.cookie.length;
 	return unescape( document.cookie.substring( debut+name.length+1, end ) );
 }
+
+/* Automatically close context menus when clicking out of them */
+function closeContextMenus(e) {
+	document.querySelectorAll('details[open]>.context-menu').forEach(menu => {
+		if(!menu.contains(event.target)) {
+			menu.parentElement.open = false;
+			e.preventDefault();
+		}
+	});
+}
+
+(function(){
+	window.addEventListener("click", closeContextMenus);
+})();

app/templates/widgets/thread.html

@@ -9,17 +9,31 @@
         <td class="author">{{ widget_user.profile(c.author) }}</td>
         <td class="message">
             <div class="info">
-                <div>Posté le {{ c.date_created|dyndate }}</div>
+                <div>Posté le <a href="{{ request.path }}#{{ c.id }}">{{ c.date_created | dyndate }}</a></div>
                 {% if c.date_created != c.date_modified %}
-                    <div>Modifié le {{ c.date_modified|dyndate }}</div>
+                    <div>Modifié le <a href="{{ request.path }}#{{ c.id }}">{{ c.date_modified | dyndate }}</a></div>
                 {% endif %}
-                <div><a href="{{ request.path }}#{{ c.id }}">Permalien</a></div>
+
                 {# TODO: Let guests edit their posts #}
-                {% if current_user.is_authenticated and current_user.can_edit_post(c) %}
-                    <div><a href="{{ url_for('edit_post', postid=c.id, r=request.path) }}">Modifier</a></div>
-                {% endif %}
-                {% if current_user.is_authenticated and current_user.can_delete_post(c) %}
-                    <div><a href="{{ url_for('delete_post', postid=c.id, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé')">Supprimer</a></div>
+                {% set can_edit   = current_user.is_authenticated and current_user.can_edit_post(c) %}
+                {% set can_delete = current_user.is_authenticated and current_user.can_delete_post(c) %}
+                {% set can_punish = current_user.is_authenticated and current_user.priv("delete.posts") %}
+
+                {% if can_edit or can_delete or can_punish %}
+                <details>
+                    <summary><b>⋮</b></summary>
+                    <div class='context-menu'>
+                        {% if can_edit %}
+                            <a href="{{ url_for('edit_post', postid=c.id, r=request.path) }}">Modifier</a>
+                        {% endif %}
+                        {% if can_punish %}
+                            <a href="{{ url_for('delete_post', postid=c.id, penalty=False, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé.')">Supprimer (normal)</a>
+                            <a href="{{ url_for('delete_post', postid=c.id, penalty=True, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé avec pénalité d\'XP.')">Supprimer (pénalité)</a>
+                        {% elif can_delete %}
+                            <a href="{{ url_for('delete_post', postid=c.id, penalty=False, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé !')">Supprimer</a>
+                        {% endif %}
+                    </div>
+                </details>
                 {% endif %}
             </div>