[TWIG] Note actions extra structural changes to reflect standard note actions styling
[CSS] Note actions extra details styling done
This commit is contained in:
parent
cb276aee81
commit
6303f480f7
@ -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);
|
||||
|
@ -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>
|
Before Width: | Height: | Size: 800 B After Width: | Height: | Size: 804 B |
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user