Fix the location of "Publish" "Save Draft"

[pgy866]

In template editing, content editing, etc. Fix the position of buttons such as "Publish" "Save Draft", Will it be better?

[matiasmolleja]

I agree. Not sure if it has to be at the top or at the bottom but I think it's good to have them fixed.

[pgy866]

I also want to put it above, below? But I think she should be on a level alone, not with the user bar interface.

Hidden and hidden near the left side, the mouse moves past, then it shows, how?

[sebastienros]

Fixed at the bottom?(but always visible)

We could have a special zone for it in the content editor template, to be able to add button in this "always visible" zone

[pgy866]

Fixed at the bottom?(but always visible Or hover automatically at the bottom to hide)

[agriffard]

Discussed again in a recent meeting.

Should we display the buttons in a sidebar, find a way to make them always visible?

[agriffard]

See also #1907

[sebastienros]

I think a sidebar would be ok, as long as it will fall back to the bottom on smaller screens. There are other things that could use the sidebar (localization).

@matiasmolleja @deanmarcussen @Skrypt who want to do it? It's just a new zone in the Content.Edit.cshtml template to add (the action zone would be inside the same section)

The tabbed UI (Dean's PR) would be on the left of this zone. BTW, @deanmarcussen , how do the tabs behave when resized?

[deanmarcussen]

I had a tinker with what @agriffard suggested on #1907

Ended up with this?

No tabs in this one, but they'll sit beside it.

Needs to be that far off the top to still show the validation summary and not sit overtop of the title if it extends

[deanmarcussen]

Here's another option I played with - same responsive design as before (not shown - see above), but with a collapse / expand and the title and validation summary moved into a new Header zone

[deanmarcussen]

Third option - not shown - would be to move the collapse / expand to the bottom like the left sidebar and the actions buttons would rise up to sit at the top.

Shame we don't have icons for the action buttons, makes the collapse not so useful.

[Skrypt]

Here is what they do in Ghost CMS. Somehow it seems logic to have the metadata options in a modal sliding tab but they keep the actions buttons in a Bootstrap 4 dropdown menu. The "delete post" option is all the way down in that sliding tab. What we could do is remove the top bar like they do "because it's useless right now". The only thing we have in that top nav bar is the user name and a logout link wich could be moved in the left menu zone. Just getting ideas ; doesn't mean we should copy exactly this. But at least if we have a sidepanel bar we need to have more than just buttons in it else it will look like an other empty blank area. And as far as I know Umbraco does also the same kind of thing.

[deanmarcussen]

Here's the Umbraco version (8) as well, just to keep collecting ideas!

Personally I don't like the fixed save / publish bar at the bottom. With a fixed bar at bottom and top the viewport just keeps shrinking.

I like the breadcrumb, just not where it's placed

In the previous version (7) the Content Cards were Tabs which made navigation simple (but harder to have visibility of the whole content item). In this latest release they've turned them into cards, which gives a better flow of the document as a whole, and included some navigation to the cards via the drop down (probably to appease people that liked having the tabs!)

They don't really differentiate between Edit Content Item and Create Content Item which I always thought was a bit wasteful of space in OC - it's pretty obvious that it's Content Item you're working on.

The title they use as a header bar is not optional, and more of a descriptor for the backoffice than actually used anywhere. (Page title defaults to it, but is stored disconnected)

I agree @Skrypt the sidebar I demo'd looks a bit bare when it just has buttons. A good idea to have some metadata shown as well

• Publish / Draft status
• Creating or Editing status
• Published / Created / Modified Date
• Clickable url to Content Item
• Language links
• Link to edit parent if in a list?

[deanmarcussen]

Do people think having the sidebar collapsable is useful?

A small tab like control fixed to the right side could be the way to show it when collapsed - fitted inside 15p container padding - and would save the wasted white space visible in option 2

[deanmarcussen]

@Skrypt @agriffard @matiasmolleja @hishamco

Here's a couple of ideas with some metadata as suggested

First with a border

Second with the same background as the left sidebar

Any opinions?

[Skrypt]

To be honest this takes more room in the viewport than a fixed bottom or top bar. I personally prefer the Ghost approach where they simplify it by having a single button that opens-up a BS4 navigation dropdown that contains a form with options in the top bar. And I would probably keep the idea of the sidebar for other things like editing SEO details. It's not bad but it takes a lot of view space and adds also a lot of white space 😄

But to make it look more like Ghost or Umbraco that would require more complex changes I'm guessing.

[hishamco]

Frankly I dislike the sidebar one because it takes much room, perhaps the Umbraco one is very closed to what @sebastienros suggested above. I think this doable with bootstrap

I can try this if I have a time ..

[sebastienros]

I think WP also uses it. If it's foldable then it wouldn't take too much space. Even though, looking at the editor, there is a lot of whitespace on the right.

[deanmarcussen]

@sebastienros Sorry didn't really understand your comment. Can you clarify? Do you want a sidebar (collapsable) or a fixed at bottom bar, or an actions dropdown?

Yes width could shrink, Currently around the width of the sidebar, so maybe skinnier. To be fair I'm on a mac with a massive viewport. Will drop it onto the laptop and see how it looks at 1920.

@Skrypt Yes to go more Ghost or Umbraco is a bit more of a redesign of the admin layout as a whole really, rather than just tweaking the Content Edit, but we could totally do the dropdown for actions without too many changes, and drop the whole sidebar idea completely.

I do think editing SEO metadata is more suited to a tab - picking images, and editing metadata feels like big text fields, not little ones. But just opinions :smile:

Edit Also worth noting that tabs don't necessarily have to actually be tabs. They're just a way of grouping things. So could just as easily be accordion-like, or collapse expand / groups

Figure this and the content lists views are the ones editors are going to spend the most time in, so might as well give them the best experience possible (whatever that is :smile:)