Make images chooser.html inherit from generic template

Remove the `w-tabs__wrapper` element from the generic template, as it isn't needed (its primary purpose is to handle the tab list overflowing/scrolling) and adds unwanted bottom margin.
pull/8931/head
Matt Westcott 2022-07-01 13:56:44 +01:00 zatwierdzone przez Matt Westcott
rodzic 68a265b1c1
commit be368d1361
5 zmienionych plików z 29 dodań i 60 usunięć

Wyświetl plik

@ -41,7 +41,7 @@ window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = {
let searchController;
function ajaxifyLinks(context) {
$('.listing a', context).on('click', (event) => {
$('a.image-choice', context).on('click', (event) => {
modal.loadUrl(event.currentTarget.href);
return false;
});
@ -55,7 +55,7 @@ window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = {
searchController = new SearchController({
form: $('form.image-search', modal.body),
containerElement: modal.body,
resultsContainerSelector: '#image-results',
resultsContainerSelector: '#search-results',
onLoadResults: (context) => {
ajaxifyLinks(context);
},

Wyświetl plik

@ -8,12 +8,10 @@
<div class="w-tabs" data-tabs data-tabs-disable-url>
{% if creation_form %}
<div class="w-tabs__wrapper w-overflow-hidden">
{# Using nice-padding and full width class until the modal header is restyled #}
<div role="tablist" class="w-tabs__list w-w-full nice-padding">
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='search' title=search_tab_label %}
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=view.creation_tab_id title=creation_tab_label %}
</div>
{# Using nice-padding and full width class until the modal header is restyled #}
<div role="tablist" class="w-tabs__list w-w-full nice-padding">
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='search' title=search_tab_label %}
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=view.creation_tab_id title=creation_tab_label %}
</div>
{% endif %}

Wyświetl plik

@ -1,50 +1,20 @@
{% load i18n wagtailadmin_tags wagtailimages_tags %}
{% include "wagtailadmin/shared/header.html" with title=page_title subtitle=page_subtitle merged=1 icon=header_icon %}
{% extends "wagtailadmin/generic/chooser/chooser.html" %}
{% load i18n wagtailadmin_tags %}
{% if creation_form %}
{{ creation_form.media.js }}
{{ creation_form.media.css }}
{% endif %}
<div class="w-tabs" data-tabs data-tabs-disable-url>
{% if creation_form %}
{# Using nice-padding and full width class until the modal header is restyled #}
<div role="tablist" class="w-tabs__list w-w-full nice-padding">
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='search' title=search_tab_label %}
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='upload' title=creation_tab_label %}
</div>
{% endif %}
<div class="tab-content nice-padding">
<section
id="tab-search"
class="w-tabs__panel"
role="tabpanel"
aria-labelledby="tab-label-search"
>
{% block filter_form %}
<form class="image-search search-bar" action="{{ results_url }}{% if will_select_format %}?select_format=true{% endif %}" method="GET" autocomplete="off" novalidate>
<ul class="fields">
{% for field in searchform %}
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}
{% endfor %}
{% if popular_tags %}
<li class="taglist">
<h3>{% trans 'Popular tags' %}</h3>
{% for tag in popular_tags %}
<a class="suggested-tag tag" href="{% url 'wagtailimages:index' %}?tag={{ tag.name|urlencode }}">{{ tag.name }}</a>
{% endfor %}
</li>
{% endif %}
</ul>
</form>
{% endblock %}
<div id="image-results">
{% include view.results_template_name %}
</div>
</section>
{% if creation_form %}
{% include view.creation_form_template_name with form=creation_form will_select_format=will_select_format %}
{% endif %}
</div>
</div>
{% block filter_form %}
<form class="image-search search-bar" action="{{ results_url }}{% if will_select_format %}?select_format=true{% endif %}" method="GET" autocomplete="off" novalidate>
<ul class="fields">
{% for field in searchform %}
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}
{% endfor %}
{% if popular_tags %}
<li class="taglist">
<h3>{% trans 'Popular tags' %}</h3>
{% for tag in popular_tags %}
<a class="suggested-tag tag" href="{% url 'wagtailimages:index' %}?tag={{ tag.name|urlencode }}">{{ tag.name }}</a>
{% endfor %}
</li>
{% endif %}
</ul>
</form>
{% endblock %}

Wyświetl plik

@ -6,11 +6,11 @@
hidden
aria-labelledby="tab-label-upload"
>
{% include "wagtailadmin/shared/non_field_errors.html" with form=form %}
{% include "wagtailadmin/shared/non_field_errors.html" with form=creation_form %}
<form class="image-upload" action="{% url 'wagtailimages:chooser_upload' %}{% if will_select_format %}?select_format=true{% endif %}" method="POST" enctype="multipart/form-data" novalidate>
{% csrf_token %}
<ul class="fields">
{% for field in form %}
{% for field in creation_form %}
{% if field.is_hidden %}
{{ field }}
{% else %}

Wyświetl plik

@ -75,6 +75,7 @@ class BaseChooseView(ModalPageFurnitureMixin, ContextMixin, View):
results_url_name = "wagtailimages:chooser_results"
results_template_name = "wagtailimages/chooser/results.html"
creation_form_template_name = "wagtailimages/chooser/upload_form.html"
creation_tab_id = "upload"
def get_object_list(self):
images = (
@ -300,7 +301,7 @@ class ChooserUploadView(PermissionCheckedMixin, ImageChosenResponseMixin, View):
upload_form_html = render_to_string(
"wagtailimages/chooser/upload_form.html",
{
"form": self.form,
"creation_form": self.form,
"will_select_format": self.request.GET.get("select_format"),
},
self.request,