Switching interface panels option

candyman · 2018-05-10 23:33:42

Many months that culpably I don’t use Texpattern (from 4.3… I plan to adjust my template and re-open my site obviously after upgrading to 4.7) and some months away from the forum: for this reason my question probably has already been discussed.

It’s a question about the user interface: couldn’t be interesting a toggle/switch button (maybe beside the “Create now” and “Duplicate” icons) that allows to move the interface panels (“Sort and display”, “Date and time” etc.…) to the left side of the screen according to the taste of the user?

I personally consider inhomogeneous that all the panels are on the right except the ones of the Presentation (“Pages”, “Forms” etc…) that are on the left by default: the content area is on the extreme left when I write an article but is on the right when I have to modify the page code.

Last edited by candyman (2018-05-11 04:40:17)

phiw13 · 2018-05-11 06:05:14

There is a good reason for the difference – on the Pages / Forms / Styles panels, the side column is a navigation box, on the Write panel, the side column is a group of secondary actions.

Personally I’m not much convinced there is a need for a Preference setting. But! You can easily change the order yourself with a little bit of CSS. A note of caution though: if you are a keyboard user, the tab order will not match the visual order.

Open the custom-examples.css file that ships with your theme of choice, add the following code, save it as custom.css and (force) reload the pages.

For Textpattern 4.6.x, for both Hive and my Sandspace theme, this will do:

#page-page .txp-layout-4col-alt,
#page-form .txp-layout-4col-alt,
#page-css .txp-layout-4col-alt { order: 2 }

For Textpattern 4.7 rc, if you use Hive theme you can use the same code; if you prefer Sandspace admin theme, use the code below:

#page-page .txp-layout-4col-alt,
#page-form .txp-layout-4col-alt,
#page-css .txp-layout-4col-alt { grid-column: 4 / 5; }
#page-page .txp-layout-4col-3span,
#page-form .txp-layout-4col-3span,
#page-css .txp-layout-4col-3span { grid-column: 1 / 4;  grid-row: 2;}

Have fun.

candyman · 2018-05-11 19:30:44

Didn’t think about the navigation reason.
Many thanks for the tips to customize the themes!

jakob · 2018-05-11 20:39:13

Philippe, great answer BTW. Shows just how easy it is to make amends to the admin area via the custom.css file.

phiw13 · 2018-05-12 02:19:02

jakob wrote #311705:

Philippe, great answer BTW.

:-)

Shows just how easy it is to make amends to the admin area via the custom.css file.

Yes. A pretty solid layout structure combined with the use of display:flex or display:grid offers some easy (relatively…) possibilities. For the next version of Sandspace, I’ll start using CSS variables; that would offer one more level for custom styles¹.

Hmm, come to think of it. Using CSS variables might offer some possibilities to simplify life for extension developers. For example, a plugin inserts a block of “something” in the middle of the Write panel; by using CSS variables, the plugin developer wouldn’t need to worry about layout compatibility for various themes (e.g. margins, padding, color). But we’d have to come to an agreement on naming conventions for a set of Core variables.

¹ That also means dropping support for IE 11…

Textpattern CMS

Textpattern CMS support forum

#1 2018-05-10 23:33:42

Switching interface panels option

#2 2018-05-11 06:05:14

Re: Switching interface panels option

#3 2018-05-11 19:30:44

Re: Switching interface panels option

#4 2018-05-11 20:39:13

Re: Switching interface panels option

#5 2018-05-12 02:19:02

Re: Switching interface panels option

jakob wrote #311705:

Board footer