[TWIG] Note actions extra structural changes to reflect standard note actions styling

[CSS] Note actions extra details styling done

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);

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"
+    width="16px"
-    height="16">
+    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>

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) %}
+            <ul>
-                <a title="{{ current_action["title"] | trans }}" class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}"></a>
+                <li class="note-actions-extra">
-            {% endfor %}
+                    <details class="note-actions-extra-details">
-            <details>
+                        <summary>
-                <summary>
+                            {{ icon('kebab', 'icon icon-note-actions-extra') | raw }} {# button-container #}
-                    {{ icon('kebab', 'icon icon-extra-note-actions') | raw }} {# button-container #}
+                        </summary>
-                </summary>
+                        <ul>
-                <ul>
+                            {% for current_action in get_extra_note_actions(note) %}
-                    {% for current_action in get_extra_note_actions(note) %}
+                                <li>
-                        <li>
+                                    <a class="{{ current_action["classes"] }}"
-                            <a class="{{ current_action["classes"] }}" href="{{ current_action["url"] }}">{{ current_action['title'] }}</a>
+                                       href="{{ current_action["url"] }}">{{ current_action['title'] }}</a>
-                        </li>
+                                </li>
-                    {% endfor %}
+                            {% endfor %}
-                </ul>
+                        </ul>
-            </details>
+                    </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 %}