Frontend Editor (Inline Editor, Sidebar, Topbar, etc)

[balupton]

Implementations:

• saasy by @myplanetdigital

[neilbaylorrulez]

Here's some comps that we've been working on

What do you guys think?

Page Editing: (Inline editor, metadata stuck to the top of the page)

Post Editing:

File browser for editing of media (or inserting links/complex content types)

The Admin Console

More context coming soon :)

[dospuntocero]

how do you add more pages to a menu?
it looks nice btw

francisco arenas
dospuntocero.cl
fb.me/dospuntocero.cl

2013/8/6 Neil Taylor [email protected]

Here's some comps that we've been working on

What do you guys think?

[image: file browser]https://f.cloud.github.com/assets/3968633/919172/2b40fa24-fec4-11e2-8cdb-c3a923da6c55.jpg
[image: page metadata]https://f.cloud.github.com/assets/3968633/919173/2b4c4ad2-fec4-11e2-9b16-f90944f5e92a.jpg
[image: pageafterediting]https://f.cloud.github.com/assets/3968633/919174/2b596ec4-fec4-11e2-9874-c13b4d40478b.jpg
[image: siteconsole]https://f.cloud.github.com/assets/3968633/919175/2b621740-fec4-11e2-8989-12b7bcf696aa.jpg

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-22199312
.

[neilbaylorrulez]

@dospuntocero - Thanks!

As for adding items to the menu - In early versions, this will be accomplished with metadata. In future versions, it should be be further abstracted.

To edit a page's metadata, you use the first comp that is labeled "Page Editing: (Inline editor, metadata stuck to the top of the page)".

From there, a checkbox with a label like "Include in Menu" would be available for the user

This would all be trigged via the contentTypes plugin that I'm hoping to publish tomorrow :)

[patcon]

Quick thoughts on comps:

1. Post-editing screencap: Should the border indicator below "Page" still be present when the metadata section is collapsed? Should that be hidden too, since it seems to be pointed to the content part of the screen, which might be misleading.

2. Page/Post-editting screencap: In the top-right, should the arrow not the the inverse? Would it make sense for it to indicate the action (ie. "Clicking this will push some section down") rather than indicating the current state (ie. "There is a section that's pulled up right now, click it to change that")?

[balupton]

Can we get the source files uploaded somewhere for those mockups?

[neilbaylorrulez]

Here you go :)
https://github.com/docpad/gui/tree/master/mocks

[balupton]

Sweet thanks!

[balupton]

What should the buttons do?

Should save:

• save changes to the source file
• or update the entry in the database without saving the file

Should cancel:

• reset the fields to their non saved value
• or reset the file to its last committed/published version
• or reset the file to the last saved (but not committed/published version)

Should publish:

• save changes to the files
• or commit changes to the saved files
• or perform a deploy with the committed changes

Should commits:

• happen on file save
• or happen on site publish

Should publish:

• git push the site to a specified deploy remote and branch
• or do something else?

[balupton]

Development of the inline cms is underway here: https://github.com/docpad/docpad-plugin-inlinecms 🚀 :)

[balupton]

I'm thinking:

• save will save the changes to the file, and perform a generation
• cancel resets the values to their last saved value, no generation necessary as all client-side changes
• publish opens up a review changes dialog, where you can see the changes and specify a commit message, press confirm, and it will commit the changes and do a deploy

In hindsight, this is kind of like how github for mac works :)

If that is all good, the question then is how to accomplish this with the DocPad APIs... for instance, when regarding that we may move away from git, into a mongodb source instead.

[lisaej]

^^ All sounds good to me.

I'd like to see "Save" and "Cancel" appear when you have made any changes to the page (both meta & inline content changes). So hitting "Save" will save any & all changes, and "Cancel" will reset everything on client-side.

A warning dialog when you're going to a different page without saving changes would be nice too.

[dwynne]

Bit of a left field thought, so feel free to shoot me down... :)

So I agree with the basic workflow you're suggesting:

• save = update file
• publish = commit and push

But how about getting rid of an explicit save/cancel operation and stream the updates back to the server in [near] real-time? It would facilitate real-time collaboration by multiple users on the same file ala Google Docs (which would be awesome). It would also help to reduce conflicts and accidental overwrites.

To 'cancel' changes, you could select to revert files.

[0xgeert]

@neilbaylorrulez: This looks nice!

About the meta-data: I noticed you use typed fields, i.e: publishdate = calendar, author = a dropdown to select a particular user .

Have you implemented some kind of meta-data schema to describe the semantics of each field, how they should be rendered etc? I'm thinking of a declarative way to describe custom meta-data fields. If so, perhaps it's worth discussing to make the "meta-data schema" -stuff something separate, which other parts of Docpad can feed from as well?

E.g: the following automatically generates a forms including callbacks etc from a json-declaration. https://github.com/daffl/jquery.dform

[neilbaylorrulez]

@gebrits Yes, we have a docpad-plugin-contenttypes to handle this mapping (unlinked to github at the moment)

ContentTypes also generates some default landing pages for you and is a place to define validation for each content-type

Fields like publishdate are 'inherited' by each type so you don't need to re-define them each time

[balupton]

Video: https://cloudup.com/iatj4CYkkE0

Changes:

• Now hides status, save, cancel, and toggle buttons when in site mode
• When in page mode, site link stays orange and site aarow goes to the right from the bottom
• Page link/title in the header now becomes the file title or filename
• File listing is now up, renders on server-side using eco and database collection
• Fixed up toggle and button interactions

Source on branch master: https://github.com/docpad/docpad-plugin-inlinegui/tree/master

[neilbaylorrulez]

Looks amazing!!

[balupton]

Video: https://cloudup.com/iY1G9dnUSMX

Changes:

• Now does client side rendering using spine.js
• Loads in data via the rest api
• Listing rendered client side
• Edit page rendered client side

Source on branch spine: https://github.com/docpad/docpad-plugin-inlinegui/tree/spine

[balupton]

@neilbaylorrulez if you could work on the inline editing (contenteditable, create.js) side of things, and I'll continue working on the admin gui side of things that should work quite well (not that much overlap, less conflicts) - thoughts? :-)

[neilbaylor]

Sounds perfect. Ill get started today or Monday at the latest

[balupton]

... do you have two twitter accounts? one for when you rulez and for other times? ;-)

[DjebbZ]

The docpad/docpad-plugin-inlinegui repo is empty... Something's wrong ?

[balupton]

It's being split up into multiple projects as we speak!

• Web Write's Inline GUI - https://github.com/webwrite/inlinegui/
• DocPad REST API Plugin - http://github.com/docpad/docpad-plugin-restapi
• DocPad Authenticate Plugin - currently figuring this one out

Trying to figure out how they can all play together nicely. See #20

[balupton]

We need a screen for adding content. Perhaps something that asks for the title, and beneath the relativePath. If they enter the title, we slug it for the relativePath. Should probably be a modal.

@neilbaylorrulez this would be a good time for the contentypes plugin to go live, as we will need info like - when creating a document for the "posts" collection, where should it go, what fields should it have, etc.

[neilbaylor]

@balupton sorry dude crazy couple of days for me, haven't had a chance to get in to this yet :(

Will publish content types today

[0xgeert]

Just wanted to point to the following for an inline-editor to possibly cherrypick ideas from:

http://madebymany.github.io/sir-trevor-js/ + related HN: https://news.ycombinator.com/item?id=6570042

nice things:

• save content as markdown
• the notion of blocks (i.e: contenttypes?) that are extensible

[balupton]

Just wanted to point to the following for an inline-editor to possibly cherrypick ideas from:

http://madebymany.github.io/sir-trevor-js/ + related HN: https://news.ycombinator.com/item?id=6570042

AMAZING! Thanks for sharing!

/cc @neilbaylorrulez @neilbaylor @yrassoulli what are your thoughts

[yoshitamagoshi]

Love Trevor's UI. Would be nice to us it tie it into layout regions.

[JosefJezek]

Sir Trevor
+1