adi_matrix – Multi-article update tabs

Bloke · 2025-02-15 23:22:10

@phiw13. Any idea why the first column renders like this? It’s currently evening here but I don’t have my site in dark mode.

imgur.com/a/sU4LnML

@media screen and (prefers-color-scheme:dark) { ... }

??

phiw13 · 2025-02-16 00:35:21

Bloke wrote #339066:

@phiw13. Any idea why the first column renders like this? It’s currently evening here but I don’t have my site in dark mode.

imgur.com/a/sU4LnML

That is theme Hive, yes? The way it handles dark mode is such a mess

If your OS is set to use dark mode, Hive theme should respect that, I think. If not, the big big <sigh /> as there is no way to make something cross theme…

Or maybe… ??

.adi_matrix_matrix tbody td:first-child {
  /…/
  background-color: var(--txp-primary-back, hsl(0 5% 97% / .8))
}

and remove the block

@media screen and (prefers-color-scheme:dark) { ... }...@

phiw13 · 2025-02-16 00:55:50

giz wrote #339062:

Would it be possible to move .adi_matrix_button before .txp-listtables in the node order? If its given a class of .txp-save-zone it’ll take on sticky qualities like on the content write page – useful when you’re working your way through editing a long matrix and want to save periodically.

If each row’s edit link is in its own cell, the table will adjust positioning automatically. Note: your .ui class is missing the -icon bit. Maybe it should just be a string ‘Edit’?

Can the form > h1 be given a class of .txp-heading so that picks up on styling cues set by the theme?

Why not put that Save button as I had in my mockup: dev.l-c-n.com/txp-4.9/adi_matrix1.html and dev.l-c-n.com/txp-4.9/adi_matrix_hive.html at the bottom in a class="txp-edit-actions" block? If you want it “always” visible, you can make it position: sticky; bottom: 0;, like the multi-edit widget on list panels…

Absolutely not enthusiast about using txp-save-zone for that, it just does not fit.

Your other points had already flagged “upthread”: https://forum.textpattern.com/viewtopic.php?pid=339021#p339021 and following.

@ Bloke,

Thoughts on implementing the “sticky”first cell as an option – a yes/no checkmark on the matrix admin panel like the “scrolling” that you remove. “Yes” would add a class to the list-table, and then the “sticky” css selectors are prefixed with that class.

This block:

.adi_matrix_matrix thead th:first-child,
.adi_matrix_matrix tbody td:first-child {}

On the matrix-admin panel, the “delete” button is positioned with right: 0.5em;} that should be right: inset-inline-end: 0.5em;@ to automatically support RTL languages.

.adi_matrix_admin_delete { position: absolute; inset-inline-end: 0.5em; z-index:10 }

The rest I have not had an opportunity to test . TY.

phiw13 · 2025-02-16 01:26:01

When I tried to update my local install with the latest .php file, and accessing either the matrix or matrix-admin panel, I get a warning “upgrade required” with no possible way out.

I reinstalled the plugin… Now all is OK

Notes on the matrix panel:

use txp-edit-actions class wrapped around the Save button.
the bottom paging navigation should be wrapped in <div class="txp-layout-cell-row txp-navigation" id="list_navigation">, see my mockup: dev.l-c-n.com/txp-4.9/adi_matrix1.html.

On the matrix-admin panel: I had suggested in my mockup suggested to add a little border at the top of the matrix block, and “hook” the delete button to it. ATM the “delete” button feels disconnected from the matrix block, see dev.l-c-n.com/txp-4.9/adi_matrix_admin.html.

PS – that upgrading issue is something that might need testing against the old plugin, amybe

Last edited by phiw13 (2025-02-16 01:39:24)

Bloke · 2025-02-16 01:36:15

Hmmm, sorry. I’ll test the upgrade script as I’ve probably made a daft assumption. The whole way the plugin handles upgrades is crazy and needs rewriting. It was done to handle both regular installation and plugin temp dir installations, but these days there are better ways to handle it.

phiw13 · 2025-02-16 05:09:57

Here is a better idea to make Save button on the matrix panel always visible: use the same markup pattern as the multi-edit set on all list panels:

Sandspace: dev.l-c-n.com/txp-4.9/adi_matrix1.html
Hive: dev.l-c-n.com/txp-4.9/adi_matrix_hive.html

<p class="multi-edit">
    <input name="do_something" class="publish" type="submit" value="Save">
</p>

.multi-edit { z-index: 2; }

There is the need to set the z-index to make sure that sticky button is above the sticky first-cell td

giz · 2025-02-16 19:11:50

So I can grok this properly, can someone please clarify our approach to using .txp-save and .multi-edit classes when dealing with layout in admin-themes.

My best take:

.multi-edit (sticky-bottom in Hive) allows you to apply actions to selected rows in the table. It’s node is located towards the end of a table.

.txp-save’s job is to save the contents of the page (doh). It can occur near the beginning of its primary container (sticky-top in Content: Write & Presentation), or at the end (non-sticky).

…or is it more nuanced?

Bloke · 2025-02-16 22:52:43

phiw13 wrote #339068:

Absolutely not enthusiast about using txp-save-zone for that, it just does not fit.

I can’t make it work and behave well, so I second this.

Thoughts on implementing the “sticky”first cell as an option – a yes/no checkmark on the matrix admin panel like the “scrolling” that you remove. “Yes” would add a class to the list-table, and then the “sticky” css selectors are prefixed with that class.

Ah right. I thought we were going with that auto-left sticky. No problem. I’ll reinstate the scroll behaviour and make it add the class.

On the matrix-admin panel, the “delete” button is positioned with right: 0.5em;} that should be right: inset-inline-end: 0.5em; to automatically support RTL languages.

Noted. Will fix. I had to add a z-index to it or it disappeared under the white panel background. If there’s a better way without that, I’d love to know it.

Bloke · 2025-02-16 23:19:10

phiw13 wrote #339067:

That is theme Hive, yes?

Yep.

Or maybe… ??

Well I just tried that and it gave me a similar result, with a different colour dark background. But since it’s less CSS, I’ll commit it for now.

Bloke · 2025-02-17 00:01:23

I’ve implemented some CSS tweaks to give the Save button multi-edit status (doesn’t seem to need the z-index for some reason), add the border to the admin panel, and use your CSS for the delete button. It still looks a bit odd with some opacity coming from somewhere, and it doesn’t seem to sit right because of Hive’s white background for the individual panels. Sort of nestled between them but not really attached to either.

Apologies if I’ve got some of the markup or the classes wrong.

The way [Hive] handles dark mode is such a mess

Is there anything we can do to improve it just before 4.9.0 drops? Open to ideas.

phiw13 · 2025-02-17 04:46:59

@ Bloke

Thanks for all that work, plugin looks much better now.

1/ Hive dark mode – the problem here is that the theme‘s dark mode rendering is fully governed by that script where you can toggle the light/dark mode independently of the OS settings. The script sets a class for dark mode (body.darkmode), and styles as needed.

With the plugin I set the dark mode background-colour with a media query (that works perfectly fine with the giz themes I think, with Sandspace certainly). And then you see that issue when the OS is set to dark mode and the theme toggle sets light mode to ON – your case, I think. The plugin CSS still thinks dark mode is on, but the theme CSS says ‘light mode = on’ and styles that way.

2/ The matrix panel looks good I think. One small issue: under Posted and Expired columns, shouldn’t the checkbox come before the label text for “Reset timestamp to now’? (that is the way on the various edit panels, or the Write panel). Ok, a second small issue. the navigation at the bottom: the order seems wrong. To match other panels (the pageby block – 12|24|48|96) should come first in the source code:

<div class="txp-layout-cell-row txp-navigation" id="list_navigation">
  <div class="nav-tertiary pageby"> […] </div>
  <nav class="prev-next" aria-label="Page navigation"> […] </nav>
</div>

If you have some energy (but finish all the rest first) add labels to the date and time fields in the Posted and Expired columns, as I had done in my mockup. And with even more energy to spare, for each input field, select, textarea attach a aria-describedby="idstring" that links to the respective column header (th), and add an id to each th.

3/ the matrix admin panel: the p around the Save button is missing something… source code says: <p txp-edit-actions> I think that would be better as <p class="txp-edit-actions">

The “Select matrix” at the top: Could that be a .txp-control-panel pattern, as used on the languages panel (site language […])?

<div class=txp-control-panel><label for="matrix_id">Select matrix</label> <select …></div>

That way , label and selectdisplay on one line.

Last edited by phiw13 (2025-02-17 04:48:56)

phiw13 · 2025-02-17 04:49:55

giz wrote #339072:

So I can grok this properly, can someone please clarify our approach to using .txp-save and .multi-edit classes when dealing with layout in admin-themes.

Yeah, a little bit more nuanced maybe:

the txp-save-zone + txp-save is used on editor panels: Write, the various Presentation panels, Edit plugin.
the multi-edit contains tools for bulk editing selected elements in a list (article panel and similar, also sidebar on the forms panel). This seems to me the most appropriate pattern for the save button on the matrix panel
the txp-edit-actions is the pattern used on the various Edit panels, and on step2 for plugin upload process

Textpattern CMS

Textpattern CMS support forum

#241 2025-02-15 23:22:10

Re: adi_matrix – Multi-article update tabs

#242 2025-02-16 00:35:21

Re: adi_matrix – Multi-article update tabs

Bloke wrote #339066:

#243 2025-02-16 00:55:50

Re: adi_matrix – Multi-article update tabs

giz wrote #339062:

#244 2025-02-16 01:26:01

Re: adi_matrix – Multi-article update tabs

#245 2025-02-16 01:36:15

Re: adi_matrix – Multi-article update tabs

#246 2025-02-16 05:09:57

Re: adi_matrix – Multi-article update tabs

#247 2025-02-16 19:11:50

Re: adi_matrix – Multi-article update tabs

#248 2025-02-16 22:52:43

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339068:

#249 2025-02-16 23:19:10

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339067:

#250 2025-02-17 00:01:23

Re: adi_matrix – Multi-article update tabs

#251 2025-02-17 04:46:59

Re: adi_matrix – Multi-article update tabs

#252 2025-02-17 04:49:55

Re: adi_matrix – Multi-article update tabs

giz wrote #339072:

Board footer