From b533f8a161c18425fae6a1adbc62f0d1cc72fa04 Mon Sep 17 00:00:00 2001 From: Lephe Date: Sat, 10 Jul 2021 21:43:41 +0200 Subject: [PATCH] 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 | 2 +- app/static/css/table.css | 52 +++++++++++++++++----- app/static/css/themes/FK_dark_theme.css | 7 +++ app/static/css/themes/Tituya_v43_theme.css | 9 +++- app/static/css/themes/default_theme.css | 7 +++ app/static/scripts/pc-utils.js | 14 ++++++ app/templates/widgets/thread.html | 30 +++++++++---- 7 files changed, 100 insertions(+), 21 deletions(-) diff --git a/app/data/groups.yaml b/app/data/groups.yaml index 6f5d93d..79fd3b0 100644 --- a/app/data/groups.yaml +++ b/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 diff --git a/app/static/css/table.css b/app/static/css/table.css index 092b97a..6683524 100644 --- a/app/static/css/table.css +++ b/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 */ diff --git a/app/static/css/themes/FK_dark_theme.css b/app/static/css/themes/FK_dark_theme.css index de4393d..2769142 100644 --- a/app/static/css/themes/FK_dark_theme.css +++ b/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; } diff --git a/app/static/css/themes/Tituya_v43_theme.css b/app/static/css/themes/Tituya_v43_theme.css index 1d6fcb3..de83f15 100644 --- a/app/static/css/themes/Tituya_v43_theme.css +++ b/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; -} \ No newline at end of file +} diff --git a/app/static/css/themes/default_theme.css b/app/static/css/themes/default_theme.css index e4d0972..5c74f31 100644 --- a/app/static/css/themes/default_theme.css +++ b/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; diff --git a/app/static/scripts/pc-utils.js b/app/static/scripts/pc-utils.js index 16c7619..98948d4 100644 --- a/app/static/scripts/pc-utils.js +++ b/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); +})(); diff --git a/app/templates/widgets/thread.html b/app/templates/widgets/thread.html index 9635acf..e27e8d9 100644 --- a/app/templates/widgets/thread.html +++ b/app/templates/widgets/thread.html @@ -9,17 +9,31 @@ {{ widget_user.profile(c.author) }}
-
Posté le {{ c.date_created|dyndate }}
+
Posté le {{ c.date_created | dyndate }}
{% if c.date_created != c.date_modified %} -
Modifié le {{ c.date_modified|dyndate }}
+
Modifié le {{ c.date_modified | dyndate }}
{% endif %} -
Permalien
+ {# TODO: Let guests edit their posts #} - {% if current_user.is_authenticated and current_user.can_edit_post(c) %} -
Modifier
- {% endif %} - {% if current_user.is_authenticated and current_user.can_delete_post(c) %} -
Supprimer
+ {% 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 %} +
+ ⋮ +
+ {% if can_edit %} + Modifier + {% endif %} + {% if can_punish %} + Supprimer (normal) + Supprimer (pénalité) + {% elif can_delete %} + Supprimer + {% endif %} +
+
{% endif %}