From 07dcb77b88345da0ab9fc80fbd53431010aa0337 Mon Sep 17 00:00:00 2001 From: Vasanth Date: Wed, 30 Nov 2022 15:33:59 +0100 Subject: [PATCH] Add border to rest of the tab space (#215) * add border to rest of the tab space * All tabs should be False * slugify div ids * bottom padding for horizontal * do not show solo tabs * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * use properties over attribute * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * rename id to class * scrollbar shenanigans * rename tag * wip : button weirdness in safari * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci Co-authored-by: vaz Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- ...8_theme_show_fieldsets_as_tabs_and_more.py | 2 +- admin_interface/models.py | 2 +- .../admin_interface/css/tabbed-changeform.css | 24 +++++++++++++++++-- .../templates/admin/change_form.html | 13 ++++++---- .../templatetags/admin_interface_tags.py | 9 +++++++ 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/admin_interface/migrations/0028_theme_show_fieldsets_as_tabs_and_more.py b/admin_interface/migrations/0028_theme_show_fieldsets_as_tabs_and_more.py index 30c0bc3..d6cb747 100644 --- a/admin_interface/migrations/0028_theme_show_fieldsets_as_tabs_and_more.py +++ b/admin_interface/migrations/0028_theme_show_fieldsets_as_tabs_and_more.py @@ -18,6 +18,6 @@ class Migration(migrations.Migration): migrations.AddField( model_name="theme", name="show_inlines_as_tabs", - field=models.BooleanField(default=True, verbose_name="inlines as tabs"), + field=models.BooleanField(default=False, verbose_name="inlines as tabs"), ), ] diff --git a/admin_interface/models.py b/admin_interface/models.py index 25970ee..e847d36 100644 --- a/admin_interface/models.py +++ b/admin_interface/models.py @@ -356,7 +356,7 @@ class Theme(models.Model): ) show_inlines_as_tabs = models.BooleanField( - default=True, verbose_name=_("inlines as tabs") + default=False, verbose_name=_("inlines as tabs") ) recent_actions_visible = models.BooleanField( diff --git a/admin_interface/static/admin_interface/css/tabbed-changeform.css b/admin_interface/static/admin_interface/css/tabbed-changeform.css index 9a40d09..625a98e 100644 --- a/admin_interface/static/admin_interface/css/tabbed-changeform.css +++ b/admin_interface/static/admin_interface/css/tabbed-changeform.css @@ -3,22 +3,37 @@ flex-direction: row; flex-wrap: nowrap; overflow-x: auto; + padding-bottom: 8px; + scrollbar-width: 4px; } +.admin-interface .tabbed-changeform-tab::-webkit-scrollbar { + height: 4px; + background-color: var(--border-color); +} +.admin-interface .tabbed-changeform-tab::-webkit-scrollbar-thumb { + background: #aaa; + } + + .admin-interface .tabbed-changeform-tab button { + -webkit-appearance: none; border: none; - border-bottom: 1px solid var(--border-color) ; + border-radius: 0; + border-bottom: 1px solid var(--border-color); flex-shrink: 0; flex-grow: 0; cursor: pointer; padding: 8px 12px; + margin: 0; background-color: var(--admin-interface-module-header-text-color); color: var(--admin-interface-module-background-color); } .admin-interface .tabbed-changeform-tab button.active { + outline: none; font-weight: bold; - border: 1px solid var(--border-color) ; + border: 1px solid var(--border-color); border-bottom: none; border-radius: var(--admin-interface-module-border-radius); border-bottom-left-radius: 0px; @@ -33,3 +48,8 @@ .admin-interface .tabbed-changeform-tabcontent.active { display: block; } + +.admin-interface .tabbed-changeform-tabs-remaining-space { + flex: 1; + border-bottom: 1px solid var(--border-color); +} diff --git a/admin_interface/templates/admin/change_form.html b/admin_interface/templates/admin/change_form.html index b281fda..d1f9685 100644 --- a/admin_interface/templates/admin/change_form.html +++ b/admin_interface/templates/admin/change_form.html @@ -6,8 +6,9 @@ {% get_admin_interface_setting "show_fieldsets_as_tabs" as show_fieldsets_as_tabs %} {% get_admin_interface_setting "show_inlines_as_tabs" as show_inlines_as_tabs %} +{% admin_interface_use_changeform_tabs adminform inline_admin_formsets as admin_interface_use_changeform_tabs %} -{% if not show_fieldsets_as_tabs and not show_inlines_as_tabs %} +{% if not admin_interface_use_changeform_tabs %} {{block.super}} @@ -17,7 +18,7 @@ {% if show_fieldsets_as_tabs %} {% for fieldset in adminform %} - {% endfor %} @@ -29,16 +30,18 @@ {% if show_inlines_as_tabs %} {% for inline_admin_formset in inline_admin_formsets %} - {% endfor %} {% endif %} +
+ {% if show_fieldsets_as_tabs %} {% for fieldset in adminform %} -
+
{% include "admin/includes/headerless_fieldset.html" %}
{% endfor %} @@ -51,7 +54,7 @@ {% endif %} {% for inline_admin_formset in inline_admin_formsets %} -
+
{% get_admin_interface_inline_template inline_admin_formset.opts.template as inline_template %} {% include inline_template %}
diff --git a/admin_interface/templatetags/admin_interface_tags.py b/admin_interface/templatetags/admin_interface_tags.py index ea4bb2d..ee2fb1e 100644 --- a/admin_interface/templatetags/admin_interface_tags.py +++ b/admin_interface/templatetags/admin_interface_tags.py @@ -128,3 +128,12 @@ def admin_interface_filter_removal_link(changelist, list_filter): "title": title, } ) + + +@simple_tag() +def admin_interface_use_changeform_tabs(adminform, inline_forms): + theme = get_admin_interface_theme() + has_fieldset_tabs = theme.show_fieldsets_as_tabs and len(adminform.fieldsets) > 1 + has_inline_tabs = theme.show_inlines_as_tabs and len(inline_forms) > 0 + has_tabs = has_fieldset_tabs or has_inline_tabs + return has_tabs