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

[CSS] Note actions extra details styling done
This commit is contained in:
Eliseu Amaro 2021-12-06 20:35:44 +00:00
parent cb276aee81
commit 6303f480f7
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 57 additions and 24 deletions

View File

@ -200,7 +200,7 @@ embed header {
content: '@'; content: '@';
} }
.note-actions { .note-actions ul {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box; display: -moz-box;
@ -209,19 +209,44 @@ embed header {
vertical-align: middle 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 { .note-actions-set {
opacity: 1 !important; opacity: 1 !important;
} }
.button-container { .button-container {
border: none !important; 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; mask-repeat: no-repeat !important;
-webkit-mask-size: cover !important;
mask-size: cover !important; mask-size: cover !important;
display: inline-block;
margin-left: var(--smaller); margin-left: var(--smaller);
width: var(--default); width: var(--default);
height: var(--default); height: var(--default);

View File

@ -14,8 +14,8 @@
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1" version="1.1"
viewBox="0 0 16 16" viewBox="0 0 16 16"
width="16" width="16px"
height="16"> height="16px">
<title>Expand for more options</title> <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> <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> </svg>

Before

Width:  |  Height:  |  Size: 800 B

After

Width:  |  Height:  |  Size: 804 B

View File

@ -1,21 +1,29 @@
{% block note_actions %} {% block note_actions %}
{% if app.user or note_actions_hide is defined %} {% if app.user or note_actions_hide is defined %}
<div class="note-actions"> <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-extra-note-actions') | raw }} {# button-container #} {{ icon('kebab', 'icon icon-note-actions-extra') | 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"] }}" href="{{ current_action["url"] }}">{{ current_action['title'] }}</a> <a class="{{ current_action["classes"] }}"
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> </div>
{% endif %} {% endif %}
{% endblock note_actions %} {% endblock note_actions %}