From 6303f480f7dd80fb425fef0534a9ae26bb5aa2e5 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Mon, 6 Dec 2021 20:35:44 +0000
Subject: [PATCH] [TWIG] Note actions extra structural changes to reflect
 standard note actions styling

[CSS] Note actions extra details styling done
---
 public/assets/default_theme/css/base.css      |  2 +-
 .../assets/default_theme/css/pages/feeds.css  | 37 +++++++++++++++---
 public/assets/icons/kebab.svg.twig            |  4 +-
 templates/cards/note/view.html.twig           | 38 +++++++++++--------
 4 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index a257f3ee79..ba3e44ba2b 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -361,7 +361,7 @@ html {
     .page-header {
         width: 100%;
     }
-    
+
     .page-content-wrapper {
         width: 100%;
     }
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 6af6823ae4..79e51d607e 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -200,7 +200,7 @@ embed header {
     content: '@';
 }
 
-.note-actions {
+.note-actions ul {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
@@ -209,19 +209,44 @@ embed header {
     vertical-align: middle
 }
 
+.note-actions-extra-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.note-actions-extra-details summary {
+    display: block;
+    opacity: 0.33;
+    vertical-align: middle;
+}
+
+.note-actions-extra-details[open] > summary {
+    opacity: 1 !important;
+}
+
+.note-actions-extra-details[open] > summary + * {
+    z-index: 1;
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    padding: var(--smaller);
+    border-radius: var(--smaller);
+    background: var(--background-card);
+    box-shadow: var(--shadow);
+    font-size: var(--default);
+    line-height: 1.5;
+    width: max-content;
+}
+
 .note-actions-set {
     opacity: 1 !important;
 }
 
 .button-container {
     border: none !important;
-    -webkit-border-radius: unset !important;
-    -moz-border-radius: unset !important;
-    border-radius: unset !important;
-    -webkit-mask-repeat: no-repeat !important;
     mask-repeat: no-repeat !important;
-    -webkit-mask-size: cover !important;
     mask-size: cover !important;
+    display: inline-block;
     margin-left: var(--smaller);
     width: var(--default);
     height: var(--default);
diff --git a/public/assets/icons/kebab.svg.twig b/public/assets/icons/kebab.svg.twig
index 91c2f3d9c3..ade288a6c3 100644
--- a/public/assets/icons/kebab.svg.twig
+++ b/public/assets/icons/kebab.svg.twig
@@ -14,8 +14,8 @@
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     version="1.1"
     viewBox="0 0 16 16"
-    width="16"
-    height="16">
+    width="16px"
+    height="16px">
     <title>Expand for more options</title>
     <path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
 </svg>
\ No newline at end of file
diff --git a/templates/cards/note/view.html.twig b/templates/cards/note/view.html.twig
index a33519abf5..d164a1f066 100644
--- a/templates/cards/note/view.html.twig
+++ b/templates/cards/note/view.html.twig
@@ -1,21 +1,29 @@
 {% block note_actions %}
     {% if app.user or note_actions_hide is defined %}
         <div class="note-actions">
-            {% for current_action in get_note_actions(note) %}
-                <a title="{{ current_action["title"] | trans }}" class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}"></a>
-            {% endfor %}
-            <details>
-                <summary>
-                    {{ icon('kebab', 'icon icon-extra-note-actions') | raw }} {# button-container #}
-                </summary>
-                <ul>
-                    {% for current_action in get_extra_note_actions(note) %}
-                        <li>
-                            <a class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}">{{ current_action['title'] }}</a>
-                        </li>
-                    {% endfor %}
-                </ul>
-            </details>
+            <ul>
+                <li class="note-actions-extra">
+                    <details class="note-actions-extra-details">
+                        <summary>
+                            {{ icon('kebab', 'icon icon-note-actions-extra') | raw }} {# button-container #}
+                        </summary>
+                        <ul>
+                            {% for current_action in get_extra_note_actions(note) %}
+                                <li>
+                                    <a class="{{ current_action["classes"] }}"
+                                       href="{{ current_action["url"] }}">{{ current_action['title'] }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </details>
+                </li>
+                {% for current_action in get_note_actions(note) %}
+                    <li>
+                        <a title="{{ current_action["title"] | trans }}" class="{{ current_action["classes"] }}"
+                           href="{{ current_action["url"] }}"></a>
+                    </li>
+                {% endfor %}
+            </ul>
         </div>
     {% endif %}
 {% endblock note_actions %}