0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 01:22:07 +01:00

Change page listing's add button to icon-only

This commit is contained in:
Sage Abdullah 2023-12-11 13:03:37 +00:00 committed by Thibaud Colas
parent 568e926043
commit b0deeab728
3 changed files with 32 additions and 2 deletions

View File

@ -319,3 +319,33 @@
}
}
}
.header-main-action-button {
// Temporarily copied from .c-sf-add-button
display: flex;
align-items: center;
justify-content: center;
width: theme('spacing.6');
height: theme('spacing.6');
appearance: none;
color: theme('colors.text-button-outline-default');
padding: 0;
cursor: pointer;
.icon {
width: theme('spacing.4');
height: theme('spacing.4');
padding: theme('spacing.[0.5]');
border: 1px solid theme('colors.text-button-outline-default');
border-radius: theme('borderRadius.full');
transition: transform 0.3s ease;
}
&:hover,
&:focus-visible {
.icon {
color: theme('colors.surface-page');
background-color: theme('colors.text-button-outline-default');
}
}
}

View File

@ -2,7 +2,7 @@
{% trans "Actions" as title %}
<nav aria-label="{{ title }}">
{% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-w-12 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
{% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-w-10 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
{% block content %}
{% include "wagtailadmin/pages/listing/_dropdown_items.html" with buttons=buttons only %}
{% endblock %}

View File

@ -13,7 +13,7 @@
{% page_permissions parent_page as parent_page_perms %}
{% if parent_page_perms.can_add_subpage %}
<a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="button button-small bicolor button--icon button-secondary w-ml-3">{% icon name="plus" wrapped=1 %}{% trans "Add child page" %}</a>
<a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="header-main-action-button w-h-slim-header w-ml-3" data-controller="w-tooltip" data-w-tooltip-content-value="{% trans 'Add child page' %}">{% icon name="plus" %}</a>
{% endif %}
{# Page actions dropdown #}