Provide UI to work with versions and audit entries

[bosschaert]

We need the UI to work with Versions https://github.com/adobe/da-admin/issues/6 and Audit entries https://github.com/adobe/da-admin/issues/5

[auniverseaway]

[bosschaert]

I've updated the versions branch to look like the artboard:

Some notes:

• I left the seconds on the timestamps, otherwise you'd get multiple timestamps for the same minute which doesn't look good IMHO.
• I couldn't find the icons on https://spectrum.adobe.com/page/icons/ so I left the old ones for now...
• Also note that there are no named versions yet.

Two questions @auniverseaway : How would we expand the list of audit logs at the top that are overflowing and hidden?

Just reveal them all when clicking on it?

And how should we make visible the hidden audit log entries for previous dates?

Similarly reveal them all when clicking on it?

Any feedback appreciated 😄

[bosschaert]

I made a first attempt at naming versions. You can see it show up in the version list here beside the green circle. Right now I have a button to name the currently selected version in the toolbar but you probably want to change that 😉

@auniverseaway What UI interaction do you have in mind to enter the name for the version?

(note that for this to work some pending changes to da-admin are needed)

[auniverseaway]

How would we expand the list of audit logs at the top that are overflowing and hidden? Just reveal them all when clicking on it?

Yup, I think so. The idea I had was:

1. Small filled gray - collapsed audit log for the day. - lighter text
2. Medium filled green - version - darker text
3. Expanded outline - opened audit log - medium dark text

Which I think you basically already have, right?

And how should we make visible the hidden audit log entries for previous dates?

I think if the transparent history pane can be as tall as the document, and if it's larger than the doc, there's an overflow-y.

For the individual date overflow... maybe we don't try to clamp the height and see how bad things are from a noise perspective.

[bosschaert]

Just reveal them all when clicking on it?

Yup, I think so.

With https://github.com/adobe/da-live/commit/6bd5447ed76b879490ba76ac9906626d310d7abf I added expansion when clicking on it like this:

Initial visual:

After clicking on each hidden element:

Obviously clicking on an expanded item again will hide it again.

Hopefully this is close to what you had in mind. I think the colours when expanded are slightly different, but thats easy to change.

Remaining question is how a version is named. The current implementation allows the naming of a selected version by clicking on this button

And then entering the name in a popup dialog.

I have the feeling you probably want to visualise that differently. Just let me know.

[bosschaert]

With https://github.com/adobe/da-live/commit/544e83403dd1e2eba04361a77a1b95ce69ab4f65 I updated the version naming as follows:

When a new version is created with the top button in the version toolbar an entry appears in the version line with a where the user can type in the version name (using contenteditable=true):

Note that the date is already always stored, so the version name just defaults to some initial version text.

When the user hits enter or clicks somewhere else on the screen, the version is stored in the backend.

It's also still possible to select a version and edit the name or give it a name if it didn't have a name before via this button:

let me know if you want to keep that or not.

If the user hits Escape the version creation/editing is cancelled.

Note that this change needs https://github.com/adobe/da-admin/pull/38