Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Modifying txp-save-zone / pane-header?
jakob wrote #339219:
Oh, I opened a can of worms here. But it seems we all have opinions and particular workflows. Hence also my initial question being about ways of adapting things for my own uses.
[…]
One option might be to make the entire top row (including the title) sticky, so you have the page title at the left and then buttons over at the right, giving you more space to spread things out (on desktop views at least). Currently the markup doesn’t make that easy. It also feels a bit weird having a text input in the sticky top row.
That is interesting, but a little weird, esp having the Title-as-input-field (it, the textfield, could eventually be styled differently, I am not keen as this break consistency). The other elements/buttons that would be no problem. Would the “Save” button also fit in there? And how would that actually work on small viewports?
Could you make a quick and rough mockup?
Another option is to make the sidebar a bit wider to relax space constraints. It’s not really resolving the problem, just making it less acute.
That might work on (very) large monitors; I will guarantee you that on my MBA, where I do most of my work, it will be problematic. The textarea will become uncomfortably narrow.
What I’ve experimented with so far for myself was to bring all the buttons into one row, and make the secondary functions in txp-save-zone just an icon-button with a simple css-tooltip on rollover. […]
So, coming full circle to my original question: I (speaking for me personally) would like to change the grouping, so that the txp-save-zone would have “Save/Publish” as a text button and then “Duplicate”, “Preview” and “View” as icon buttons. I’d then drop “New article” as the two clicks necessary to get to Content › Write is, in my opinion, tolerable. The left-hand block would then disappear entirely, and the UI is clearer. Hence my initial question about the best way of rewriting those blocks with my admin theme.
Ditto on Save/ Publish followed by “Duplicate”, “Preview” and “View”. I think it was Yiannis who expressed some need for the “new article” button, in a previous thread here.
Icons only, maybe, when the space gets a little narrower. I am absolutely no fan of the tooltips visible on hover (using the title attribute or separate node), only useful for mouse users. Keyboard users, touch devices, all kind of accessibility tools are all left in the cold. Hmm maybe this markup pattern – the .txp-accessibility class could additionally be used on icon node or text node?
<button><span class=ui-icon>icon</span> <span> label text</span></button>With Sandspace, I do the “icon” only mode on small screens for the “column display options” button on list panels. I might do the same for the save-zone button/links.
PS – I don’t like the idea of putting those 3 or 4 buttons/links inside a twisty thing. Already way to many of those across the UI.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Modifying txp-save-zone / pane-header?
phiw13 wrote #339223:
Ditto on Save/ Publish followed by “Duplicate”, “Preview” and “View”. I think it was Yiannis who expressed some need for the “new article” button, in a previous thread here.
Indeed but if it messes up the interface I can easily live without it and use the duplicate article button instead:)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Modifying txp-save-zone / pane-header?
Sidestepping the general discussion for a moment, I tried out adding two pluggable_ui hooks to /textpattern/include/txp_article.php as follows:
EDIT: Proposed changes now on GitHub
Both essentially just put the existing echoed code into an output variable and route that through pluggable_ui along with the relevant $variables used in that output.
———
To use them: in your admin theme’s php file, register two callbacks:
register_callback('themename_pane_header', 'article_ui', 'pane_header');
register_callback('themename_save_zone', 'article_ui', 'save_zone');replacing themename with whatever your theme is called. Then add two corresponding replacement functions:
// Replacement pane_header element with just the article title
function themename_pane_header($evt, $stp, $data, $rs) {
$out = '<div class="txp-layout-4col-3span">' . '<div id="pane-header">' .
hed(gTxt('tab_write'), 1, array('class' => 'txp-heading')) .
'</div>';
return $out;
}
// Replacement save zone element that includes article_clone
function themename_save_zone($evt, $stp, $data, $push_button, $rs) {
$out = n . '<div id="txp-article-actions" class="txp-save-zone">' . n .
hInput('sPosted', $rs['sPosted']) .
hInput('sLastMod', $rs['sLastMod']) .
hInput('AuthorID', $rs['AuthorID']) .
hInput('LastModID', $rs['LastModID']) . n .
$push_button .
graf(
article_partial_article_clone($rs) .
article_partial_article_view($rs),
array('class' => 'txp-actions')
) . n .
'</div>';
return $out;
}which are just slightly re-arranged versions of the core output, again replacing themename in the function name with the matching theme name.
———
Should I add a PR for those two hooks? Even if those code blocks end up being modified in the course of this discussion, the pluggable_ui hooks wouldn’t affect that.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Modifying txp-save-zone / pane-header?
Yes please! Those hooks seem really useful. Thank you.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Modifying txp-save-zone / pane-header?
Bloke wrote #339229:
Yes please! Those hooks seem really useful. Thank you.
Brilliant. PR submitted.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Modifying txp-save-zone / pane-header?
And merged. Can’t believe we never did that before! Thank you.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Modifying txp-save-zone / pane-header?
Yes, thanks for adding that. It makes that much easier for themes to adapt the save-zone block to needs.
Back to the other part of the discussion: what is the consensus for the organisation of those 3 (or 4) links/buttons: “Preview”, “View” and “Duplicate” (and “New”) ? And which icons are considered most appropriate? The icons for New and Duplicate are OK I think. The other two?
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Modifying txp-save-zone / pane-header?
Options for Preview? Or is that too much like search?
Maybe stick with the eye concept for full view?
Last edited by Bloke (2025-03-09 11:30:52)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Modifying txp-save-zone / pane-header?
I’m glad these preview features/interface are being discussed by UX-competent folks. Just few remarks for background.
towndock wrote #339218:
Having “View” come from the database, and “Preview” (in effect pre… view) come from just the browser, actually makes sense. It makes sense for the whole page to be previewed. I like it.
We all have different workflows & sites, but to me all the additional Previews (body, excerpt, custom fields) lead to confusion, with little benefit in return.
These ‘partial’ preview links were intended as security features for site admins inspecting the input of low-privileged authors. Even cf can contain some harmful code, but the ‘global’ article preview is not always able to detect it, because
- it uses the currently selected (or default) article form, that does not always contain cfs;
- script and other evil detection is not run in the global page preview, because of multiple ‘false’ warnings (meta, styles and so on).
Offline
Re: Modifying txp-save-zone / pane-header?
Bravo jakob!
I’m looking forward to how this develops for the UI as a whole; maybe everyone can have cake (and eat it too).
Offline
Re: Modifying txp-save-zone / pane-header?
Bloke wrote #339234:
Options for Preview? Or is that too much like search?
Maybe stick with the eye concept for full view?
I was thinking the eye icon fits better for Preview (by analogy with the QuickLook icon on macOS and iOS). For the full View icon, I am not sure. A quick search in the usual icon repos yields many very similar icons as what you posted. Is that something originating in Windows OS?
For the full View icon, perhaps a File icon with a diagonal upwards arrow?
Other takes and suggestions?
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Modifying txp-save-zone / pane-header?
phiw13 wrote #339241:
I was thinking the eye icon fits better for Preview (by analogy with the QuickLook icon on macOS and iOS). For the full View icon, I am not sure. For the full View icon, perhaps a File icon with a diagonal upwards arrow?
Other takes and suggestions?
I think that distinct icons make things clearer, too. I suggested something similar (but with just a diagonal upwards arrow) in an earlier post.
TXP Builders – finely-crafted code, design and txp
Offline