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 <vmohan@lenbox.io>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

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"),
         ),
     ]

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(

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);
+}

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 %}
-        <button type="button" class="tabbed-changeform-tablinks {{ forloop.counter0|default:"active" }}" onclick="openTab(event, '{{fieldset.name}}')">
+        <button type="button" class="tabbed-changeform-tablinks {{ forloop.counter0|default:"active" }}" onclick="openTab(event, 'tab-{{fieldset.name|slugify}}')">
             {{ fieldset.name|default_if_none:opts.verbose_name|capfirst}}
         </button>
         {% endfor %}
@@ -29,16 +30,18 @@
 
      {% if show_inlines_as_tabs %}
         {% for inline_admin_formset in inline_admin_formsets %}
-        <button type="button" class="tabbed-changeform-tablinks" onclick="openTab(event, '{{inline_admin_formset.opts.verbose_name_plural|capfirst}}')">
+        <button type="button" class="tabbed-changeform-tablinks" onclick="openTab(event, 'tab-{{inline_admin_formset.opts.verbose_name_plural|slugify}}')">
             {{inline_admin_formset.opts.verbose_name_plural|capfirst}}
         </button>
         {% endfor %}
       {% endif %}
+      <div class="tabbed-changeform-tabs-remaining-space"></div>
+
     </div>
 
     {% if show_fieldsets_as_tabs %}
       {% for fieldset in adminform %}
-      <div id="{{fieldset.name}}" class="tabbed-changeform-tabcontent {{ forloop.counter0|default:"active" }}">
+      <div id="tab-{{fieldset.name|slugify}}" class="tabbed-changeform-tabcontent {{ forloop.counter0|default:"active" }}">
           {% include "admin/includes/headerless_fieldset.html" %}
       </div>
       {% endfor %}
@@ -51,7 +54,7 @@
     {% endif %}
 
     {% for inline_admin_formset in inline_admin_formsets  %}
-    <div id="{{inline_admin_formset.opts.verbose_name_plural|capfirst}}" class="tabbed-changeform-tabcontent">
+    <div id="tab-{{inline_admin_formset.opts.verbose_name_plural|slugify}}" class="tabbed-changeform-tabcontent">
       {% get_admin_interface_inline_template inline_admin_formset.opts.template as inline_template %}
       {% include inline_template %}
     </div>

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