Tabbed changeform #211

VaZark · 2022-11-23T14:55:01Z

Related to #209

These are purely visual changes based on a boolean field.

Significant changes are,

Two new fields show_fieldsets_as_tabs & show_inlines_as_tabs and it's migration.
headless_* version of fieldsets and inlines templates in order to hide the header. They are exact copies except for the title line.
Template tag to fetch headerless_* version of fieldset and inlines when in tabbed mode
JS file with basic tab logic
Static CSS for tab buttons

for more information, see https://pre-commit.ci

codecov · 2022-11-23T14:57:24Z

Codecov Report

Base: 95.58% // Head: 95.70% // Increases project coverage by +0.11% 🎉

Coverage data is based on head (18e63db) compared to base (18f865b).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #211      +/-   ##
==========================================
+ Coverage   95.58%   95.70%   +0.11%     
==========================================
  Files          36       37       +1     
  Lines         408      419      +11     
==========================================
+ Hits          390      401      +11     
  Misses         18       18

Flag	Coverage Δ
unittests	`95.70% <100.00%> (+0.11%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
admin_interface/admin.py	`100.00% <ø> (ø)`
...ions/0028_theme_show_fieldsets_as_tabs_and_more.py	`100.00% <100.00%> (ø)`
admin_interface/models.py	`100.00% <100.00%> (ø)`
...min_interface/templatetags/admin_interface_tags.py	`85.00% <100.00%> (+1.00%)`	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

fabiocaccamo · 2022-11-23T16:42:45Z

@VaZark thank you for this PR, I will test and review it as soon as possible.

lint step failed because you added some translatable strings, but you have not updated translations files running tox -e translations (I should update the README).

I also updated the .tox config file on the main branch.

admin_interface/static/admin_interface/css/tabbed-changeform.css

admin_interface/static/admin_interface/js/tabbed_changeform.js

for more information, see https://pre-commit.ci

fabiocaccamo

I think that using the tabs, fieldsets should be always displayed as stacked.
There is already tabs CSS for django-modeltranslation and django-tabbed-admin apps, the tabs style could be based on that:

admin_interface/static/admin_interface/css/tabbed-changeform.css

admin_interface/templatetags/admin_interface_tags.py

admin_interface/templates/admin/change_form.html

VaZark · 2022-11-24T13:03:36Z

Regarding tabs, a quick look through the CSS shows that there are assumptions about the structure of the tab.

For example in jquery.ui.tabs.css, we have this line

django-admin-interface/admin_interface/static/admin_interface/css/jquery.ui.tabs.css

Line 167 in 85fb723

.admin-interface .ui-tabs .ui-tabs-nav li a {

So it assumes the items are hyperlinks within a list. This is not at all in line with my implementation, which is just a bunch of buttons with flex and wrap. I don't there is a way I can reliably reuse them. :(

I'll give it shot tho

admin_interface/static/admin_interface/css/tabbed-changeform.css

fabiocaccamo · 2022-11-24T13:37:15Z

Regarding tabs, you can't reuse that CSS, but you can replicate the same design of django-tabbed-admin with CSS customizations.

VaZark · 2022-11-24T14:05:28Z

I have not used django-tabbed-admin and the image link on the project page is broken. Can you share a screenshot if u have one ? I'm lost on which CSS customisations that I am missing.

fabiocaccamo · 2022-11-24T14:24:15Z

This is how django-admin-interface + django-tabbed-admin looks:

merwok · 2022-11-24T16:51:03Z

admin_interface/templates/admin/change_form.html

+
+      {% 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}}')">


Is there any appetite for making the tabs work purely with CSS?

https://www.sitepoint.com/css3-tabs-using-target-selector/

Avoiding JavaScript at all for this feature would be great!

I find that using JS is the most readable way to handle the logic.

Most CSS-only solutions I've come across are not easy to implement to be responsive and handle a dynamic no of tabs 😓

You're welcome to change it up though. 👍

Personally I have not any experience with CSS only tabs, I can't evaluate implementation complexity.

VaZark · 2022-11-25T08:58:57Z

Current state of the tabs

fabiocaccamo · 2022-11-25T09:55:00Z

Cool the tabs style, I would just make the border of a neutral color (medium grey).

VaZark · 2022-11-25T10:19:23Z

Used the --border-color css var

fabiocaccamo · 2022-11-25T10:40:46Z

Does the horizontal scroll already work?

VaZark · 2022-11-25T11:07:03Z

Yup.

fabiocaccamo · 2022-11-25T22:35:48Z

Could you update the translations files?

python -m django makemessages --all --add-location=file
python -m django compilemessages --ignore ".tox" --ignore ".venv" --ignore "build" --ignore "venv"

VaZark · 2022-11-26T12:31:09Z

Thanks for updating the translations :)

fabiocaccamo · 2022-11-28T17:04:10Z

@VaZark I finally tested this feature in a real project and I noticed that there are some issues to fix and some improvements needed before releasing it:

After installation, I noticed that "inlines as tabs" option is set because its default value is True, it should be False (sorry I missed it during the review).
When "inlines as tabs is set", there is a tab even if the model admin has not inlines, in this case there should be not any tab (if the sum of all tabs is one, don't show tabs at all).
On page load the tab has an unexpected border/outline visible.

When there are many tabs and there is horizontal overflow, the scrollbar overlaps the tabs (bad UX), it should be placed below the bordered bottom line.
When "saving and continue editing" the selected tabs is lost, should click it again. This should be solved using a slugified URL fragment of the selected tab (to check on page load and update on tab change), eg. http://localhost:8000/en-us/admin/admin_interface/theme/1/change/#form-controls.

I tested it with Chrome and Firefox.

VaZark · 2022-11-28T17:17:12Z

Thanks. I’ll take a look tmrw

merwok · 2022-12-06T22:23:26Z

One difference between collapsed fieldsets and tabbed fieldsets is that it’s not possible anymore to go to the next section using Tab. Could we add tabindex attributes?

fabiocaccamo · 2022-12-07T10:06:52Z

@VaZark can you handle the tabindex problem?

VaZark · 2022-12-07T13:31:22Z

if i'm reading this right, the goal is to open and move to the next tab instead of the save/submit section when we are the end of a fieldset on clicking the "tab" button?

It currently does not work as the tabs are hidden with display:hidden and not part of the DOM generated, so just adding a tabindex should not fix the problem.

However, if the goal is to just switch section from tab header using "tab" button, it still works. we just need to add a visual cue

merwok · 2022-12-07T15:00:57Z

I didn’t meant the sections, which are hidden as you say, but the tabs themselves, the little rectangles with labels which are javascript links.

VaZark · 2022-12-09T09:15:53Z

If this is what is expected, I can send in the PR in a sec

Screencast.from.2022-12-09.10-16-37.webm

merwok · 2022-12-09T15:57:54Z

Does this mean:

Tab goes through the tabs, then the form controls of the currently visible section
if you click inside the form, Tab goes to the next form control

I think it would be good then, although I’m unsure if it’s best to go through tabs then form controls, or form controls then tabs.

VaZark · 2022-12-09T16:20:51Z

Conventional fieldsets are just dividers that contain text in a continuous form, tabs are closer to sub-pages.

Even github scrolls through the tab headers before stepping into the tab content. Jumping back to the top of the page when tabbing through is not a nice experience.

merwok · 2022-12-09T16:36:00Z

Sorry, could you reply yes/no to my two points so that I understand the behaviour?

VaZark · 2022-12-10T00:14:10Z

It’s yes and yes :)

VaZark and others added 8 commits November 23, 2022 11:59

WIP : basic templates

4d10e0b

Add params

d610dd2

Working override

5abb1e4

Use headerless version only during tabs

4c5b829

Move CSS to separate file

d2c488d

Extract js to static folder

5a4231c

script is not self-closing

f0af446

[pre-commit.ci] auto fixes from pre-commit.com hooks

8d55d39

for more information, see https://pre-commit.ci

merwok reviewed Nov 23, 2022

View reviewed changes

admin_interface/static/admin_interface/css/tabbed-changeform.css Outdated Show resolved Hide resolved

merwok reviewed Nov 23, 2022

View reviewed changes

admin_interface/static/admin_interface/js/tabbed_changeform.js Outdated Show resolved Hide resolved

VaZark and others added 4 commits November 24, 2022 09:58

use classList for updating classes

a81e08a

Add EOF (newline) to new text files

39f7067

a simple test to keep up code coverage

e94a322

[pre-commit.ci] auto fixes from pre-commit.com hooks

102171c

for more information, see https://pre-commit.ci

fabiocaccamo requested changes Nov 24, 2022

View reviewed changes

VaZark added 5 commits November 24, 2022 13:38

Fieldsets are not tabbed by default

0e04ddb

rename templatetag

a4c32d8

use default page if show_*_tabs are false

f9c6154

Narrow down css to admin-interface

0686c1e

Fix typo

2cd5181

keep codacy happy

9e0a410

fabiocaccamo requested changes Nov 24, 2022

View reviewed changes

admin_interface/static/admin_interface/css/tabbed-changeform.css Show resolved Hide resolved

prefix tab classes with tabbed-changeform-

5171d9e

fabiocaccamo previously approved these changes Nov 24, 2022

View reviewed changes

merwok reviewed Nov 24, 2022

View reviewed changes

horizontal scrolling

0e71a30

VaZark dismissed fabiocaccamo’s stale review via 0e71a30 November 25, 2022 00:36

Update colors

4df8f05

color updates

c6e6200

add back missing font bold

18e63db

fabiocaccamo merged commit cc1f72b into fabiocaccamo:master Nov 26, 2022

VaZark deleted the tabbed-changeform branch November 26, 2022 12:31

fabiocaccamo mentioned this pull request Nov 28, 2022

Add border to rest of the tab space #215

Merged

6 tasks

fabiocaccamo added the enhancement New feature or request label Dec 7, 2022

fabiocaccamo assigned fabiocaccamo and VaZark Dec 7, 2022

Uh oh!

Tabbed changeform #211

Tabbed changeform #211

Uh oh!

Conversation

VaZark commented Nov 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Nov 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

fabiocaccamo commented Nov 23, 2022

Uh oh!

Uh oh!

Uh oh!

fabiocaccamo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

VaZark commented Nov 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

fabiocaccamo commented Nov 24, 2022

Uh oh!

VaZark commented Nov 24, 2022

Uh oh!

fabiocaccamo commented Nov 24, 2022

Uh oh!

merwok Nov 24, 2022

Choose a reason for hiding this comment

Uh oh!

fabiocaccamo Nov 24, 2022

Choose a reason for hiding this comment

Uh oh!

VaZark Nov 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fabiocaccamo Nov 25, 2022

Choose a reason for hiding this comment

Uh oh!

VaZark commented Nov 25, 2022

Uh oh!

fabiocaccamo commented Nov 25, 2022

Uh oh!

VaZark commented Nov 25, 2022

Uh oh!

fabiocaccamo commented Nov 25, 2022

Uh oh!

VaZark commented Nov 25, 2022

Uh oh!

fabiocaccamo commented Nov 25, 2022

Uh oh!

VaZark commented Nov 26, 2022

Uh oh!

fabiocaccamo commented Nov 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VaZark commented Nov 28, 2022

Uh oh!

merwok commented Dec 6, 2022

Uh oh!

fabiocaccamo commented Dec 7, 2022

Uh oh!

VaZark commented Dec 7, 2022

Uh oh!

merwok commented Dec 7, 2022

Uh oh!

VaZark commented Dec 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

merwok commented Dec 9, 2022

Uh oh!

VaZark commented Dec 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

VaZark commented Nov 23, 2022 •

edited

Loading

codecov bot commented Nov 23, 2022 •

edited

Loading

VaZark commented Nov 24, 2022 •

edited

Loading

VaZark Nov 25, 2022 •

edited

Loading

fabiocaccamo commented Nov 28, 2022 •

edited

Loading

VaZark commented Dec 9, 2022 •

edited

Loading

VaZark commented Dec 9, 2022 •

edited

Loading