Spent some time playing around with a new Write panel concept based on Ghost's double-pane editor direction...


It's just a first go, and anyone is welcome to run with it. Maybe it gives some ideas for something truly new admin UI.  For context, this was created in a 13" laptop, full-width. The scale seems very usable to me.

I'll break it down from the top...

NAVIGATION (first row)

0) Moved logo mark far left, and replaced logotype with install version so it's more visible.

1) Instead of the "View site" link label, the label uses {site_name} so the link always reflects as the given site's name. The advantage is now that a separate front-side homepage link is not needed in the nav bar. Just use the link that's already there but dynamically relabel it. (Alternatively it could pull from the {site_url} field to show something like "wion.com", which might be more clear to clients.

2) Moved "Logout" link far right and added "/ {user}".

PLACE / TIME CONTROLS (second row)

Moved all publishing controls to top and streamlined them. They should be self-evident, but a couple notes:

3) A gray box means an option has been selected. A white empty box means nothing has been selected or entered. 

4) It's assumed the date/time controls can be implemented in a drop-down, otherwise it starts getting congested.

5) The post date is moved top and far right of this row so it's more visible. All date/time elements easily seen together now. Note it's edited to account for the user name now being in the "Logout" link (see #2).


I tried to position items in this row say they matched with their underlying pane.

6) Syntax (or "Text filter" but you get the idea). It assumes we'll see the option for Markdown in a next release. The menu options are Textile (default), Markdown, Plain text, and Convert line breaks. The idea is that three things happen whatever filter is selected: 1) the editing panes recognize that filter. 2) It acts as the default for both the Body and Excerpt. (Overrides are at bottom, see #15), and 3) The filter syntax help automatically displays the help for the corresponding syntax (see #16).

7) Preview options begin over preview pain (no longer need the editor icon). Presumably you could still change the preview to show either rendered filter or resulting markup. 

8) Word count is top of preview pane (reflecting the pane with true  count) so it's immediately visible.

9) "Publish" and "New post" buttons. 


10) Title, Body, and Excerpt field labels are abbreviated down to T, B, E. This really shouldn't be a barrier for people.

11) Colored syntax. Concept here borrows from mouapp.com/. I don't know if that's possible or not, but being able to quickly pick out the filter syntax via colors in article content would make for quicker editing later. It's also a easy way to see if your writing the syntax correctly too, because the color only appears if the syntax is correct. Color in this case is arbitrary, and I didn't do it for all the Textile used (e.g., lists and blockquote).

12) Preview pane is designed so that T, B, E, sections correspond exactly with the editor pane.

13) Images will position if selectors are defined by any such CSS. If no image ID or path is ready at time of draft, a thumbnail placeholder is inserted instead until edited later.


Remaining Write panel items are under the editor panes.

14) Custom fields – will likely need a rethink when it's clear what Robert has in mind for the extension of custom fields.

15) Body and Excerpt override filters (default is set in #6).

16) Text filter help is available here. The help auto-adjusts to communicate either Textile or Markdown help depending on what is selected in #6.

Ideas for improvement? Impossibilities? Personally, I would love to have this kind of arrangement. And imagine if Txp offered this before Ghost hit the streets. Ha-ha-ha!
Shared publiclyView activity