Mild alterations to the Presentation tabs

Bloke · 2010-03-07 14:32:14

I’ve been thinking (dangerous!) that since the demise of the friendly CSS editor there’s very little reason for the left hand column on the Styles tab.

I’m intending to move the ‘You are editing style…’ message above the central textarea (like it is on the Pages tab). That just leaves the ‘Create new’ link which I would propose to be moved above the list on the right (like it is on the Forms tab). Doing that would mean we essentially have a 2-column display and the stylesheet textarea could be widened to fill the space left behind by the absent left column.

Questions:

Is that desirable?
Does it have any detrimental impact on any existing plugins/themes that you know of?

If not, I’ll go ahead and do the deed.

[EDIT: topic changed to better reflect the thread direction]

Last edited by Bloke (2010-03-08 23:13:40)

thebombsite · 2010-03-07 16:15:59

Having the wider textarea would be great from my end. As long as the “Create new..” is at the top of the list. Don’t put it underneath.

Bloke · 2010-03-07 17:20:25

thebombsite wrote:

As long as the “Create new..” is at the top of the list.

Aye aye cap’n. That’s what I intended. I just tried it out: rather good.

One other small point: the text is “Create or load new style”. Any idea why “Create new stylesheet” won’t do? What’s the ‘load’ bit mean? Is it legacy wording from the old (un)friendly editor? Answers on a postcard to the usual address…

masa · 2010-03-07 17:31:19

Sounds good to me.
I’m all for consistency and moving the “Create new” link to the top right brings it in line with other areas.

Extra space is always appreciated.
While on the topic of extra space, I was wondering whether it might be useful/possible to widen the input field in the Forms tab to match that of the Pages tab. Somehow it always feels rather crammed to me, since it contains code fragments with indentations similar to those in the page templates.

Last edited by masa (2010-03-07 17:33:45)

els · 2010-03-07 18:18:32

Nice idea, Stef!

masa wrote:

While on the topic of extra space, I was wondering whether it might be useful/possible to widen the input field in the Forms tab to match that of the Pages tab. Somehow it always feels rather crammed to me, since it contains code fragments with indentations similar to those in the page templates.

+1

Bloke · 2010-03-08 23:11:43

Here’s a sneak-peek of the Pages, Forms and Styles tabs in my local dev version:

Notice there’s a bit more consistency between the panes now, with:

Create new links at the top of the right-hand column on all tabs
You are editing… text above all the central textareas (no idea why the forms one is squashed up… pending investigation)
A wider textarea on the Styles tab with no left-hand-column

Making the Forms textarea wider would be nice. Not sure how much wider we can go, though. What’s the screen size we’re aiming for? Is it still 1024×768?

Any further thoughts on the above? If it’s a hit I’ll consider making it so…

Last edited by Bloke (2010-03-08 23:15:37)

masa · 2010-03-09 00:37:53

Bloke wrote:

What’s the screen size we’re aiming for? Is it still 1024×768?

Sounds fine as the minimum.

Any further thoughts on the above? If it’s a hit I’ll consider making it so…

I like it a lot :)
Since we have All Pages and All Styles you should perhaps add All Forms as the header, too.

phiw13 · 2010-03-09 06:51:00

Bloke wrote:

…

Create new links at the top of the right-hand column on all tabs

You are editing… text above all the central textareas (no idea why the forms one is squashed up… pending investigation)

A wider textarea on the Styles tab with no left-hand-column

Making the Forms textarea wider would be nice. Not sure how much wider we can go, though. What’s the screen size we’re aiming for? Is it still 1024×768?

For the forms tab, have you considered making the ‘all forms’ right-hand side bar a single column ?
Something like this screenshot
(I can send you a patch, I think.) Saves tons of space. You could even make it collapsible, like the left-hand column (e.g. Write tab).

As for the width – don’t force anything wider than 1000px. Think iPad and other non desktop devices. I’ve been reworking my own admin stylesheet a little to make sure things fit on screen on the iPad.
(I don’t know yet how well it will work at the interaction level)

Bloke · 2010-03-09 09:18:22

phiw13 wrote:

For the forms tab, have you considered making the ‘all forms’ right-hand side bar a single column ?

I considered it. I like the idea a lot. It’s been requested before and I can’t remember the reason for not doing it offhand (there’s probably a thread about it somewhere).

(I can send you a patch, I think.)

Yes please, I’ll see what I can do with it.

As for the width – don’t force anything wider than 1000px

Righty-o. Noted.

masa wrote:

Since we have All Pages and All Styles you should perhaps add All Forms as the header, too.

I thought about it and then unthought about it. On one hand it adds to the vertical real estate, but then the same could be said for the headings on the Pages and Style tabs. I’d be in favour of either adding it to the Forms tab, or removing the heading from all tabs. Is it intuitive enough to go without a heading? I’m not convinced, but then what do I know about UI design!

If anybody has any further thoughts/ideas/comments on this part of the admin interface (besides “all the markup is crap!”) please share them here.

masa · 2010-03-09 09:50:46

Bloke wrote:

I’d be in favour of either adding it to the Forms tab, or removing the heading from all tabs. Is it intuitive enough to go without a heading?

I think, it’s intuitive enough. After all you get there by clicking the named tab at the top and that tab stays highlighted in some form. But then we have the Tag Builder heading on the other side, so perhaps it makes sense to keep the headings?

I’m also for making the Forms menu single column.

Last edited by masa (2010-03-09 09:53:42)

Bloke · 2010-03-09 11:17:55

Sneaky peeky #2 (using Remora).

Not as pretty as phiw13’s version, but styling is not my thing anyway so this is rudimentary and functional. Headings are collapsible as you can see, and the state of the individual panes is remembered, like on the Write tab. We gain an extra 60 pixels or so of width to the Forms textarea by doing this. Makes quite a bit of difference actually. Added the ‘All Forms’ heading as well, as per masa’s suggestion, and it is actually better.

The only ugly thing are the checkboxes — sometimes present, sometimes missing. The ‘files’ group looks a bit weird to me. Not sure how to get round that or if it is indeed a problem at all; perhaps subtle use of colour or lines might help? phiw13’s screenshot shows the checkboxes always present but dimmed if the particular form cannot be deleted — is that better from a UI perspective? I’m not so sure.

Any thoughts, fire them in this direction.

Last edited by Bloke (2010-03-09 11:19:03)

phiw13 · 2010-03-09 12:08:55

For the checkboxes, I’m in favour of having them all. Those forms that can’t be deleted get a disabled=“disabled” attribute on the checkbox.

Structurally, your screenshot looks good. Are the headings (article, comment, etc) th ?

I’m also in favour of having the ‘All forms’ headline, for consistency. That doesn’t take up that much space, and as Martin notes, you’ve got the heading on the other side. Balance and all that :-).

Last edited by phiw13 (2010-03-09 12:11:10)

Textpattern CMS

Textpattern CMS support forum

#1 2010-03-07 14:32:14

Mild alterations to the Presentation tabs

#2 2010-03-07 16:15:59

Re: Mild alterations to the Presentation tabs

#3 2010-03-07 17:20:25

Re: Mild alterations to the Presentation tabs

#4 2010-03-07 17:31:19

Re: Mild alterations to the Presentation tabs

#5 2010-03-07 18:18:32

Re: Mild alterations to the Presentation tabs

#6 2010-03-08 23:11:43

Re: Mild alterations to the Presentation tabs

#7 2010-03-09 00:37:53

Re: Mild alterations to the Presentation tabs

#8 2010-03-09 06:51:00

Re: Mild alterations to the Presentation tabs

#9 2010-03-09 09:18:22

Re: Mild alterations to the Presentation tabs

#10 2010-03-09 09:50:46

Re: Mild alterations to the Presentation tabs

#11 2010-03-09 11:17:55

Re: Mild alterations to the Presentation tabs

#12 2010-03-09 12:08:55

Re: Mild alterations to the Presentation tabs

Board footer