Admin UI revamp

[ralf57]

The current Administration UI, while fully working and fast, it's definitely not the sleekest.

@mitsuhiko is there any initiative already started/planned in order to improve it?

[davidism]

This is incredibly vague. Do you have something particular in mind?

[mitsuhiko]

Nothing started but would be clearly good to work on that.

[chipperdoodles]

perhaps if we make the projects more easily themeable (drag a theme folder and select in config) we could do the same for the admin UI

[odeckmyn]

@chipperdoodles not sure admin UI really needs themes...

[jungornti]

Admin needs good embedded markdown editor at first.

[oal]

I've set up a branch in my fork where I've experimented a bit with the admin UI.

https://github.com/oal/lektor/tree/admin-facelift

Still a lot left to do, but I just wanted to post it here to see if there's any interest. Feel free to post ideas and suggestions.

[tariquesani]

Looks impressive. I will try it out soon. Please do write some tests for it as well. Makes the task of merging much much easier

[tariquesani]

My first suggestion would be to move the pages and sub pages away from the side bar on to screens of it own. Also pagination, sorting and title search would be awesome

[oal]

Thanks. The vast majority of the changes I've made so far are CSS only. Only minor adjustments to the React code for tweaking the top bar, really.

I'll need to dig into the JS parts of the UI a bit more before I feel comfortable making changes to the UI logic.

[mitsuhiko]

I like some of the changes but definitely not some of the others. In particular I'm not a fan of the font, the font sizes or the inconsistent paddings.

I think the biggest issue the admin currently has is that it's just overall confusing UX, not necessarily the CSS itself (even though I do admit that it's pretty bad).

[oal]

Valid points. The more time I've spent in the admin while working on the design, I too have found the UX confusing. My first impression was that it looked a bit dated, design wise, but maybe the UX bit is the bigger issue, after all. :)

[ralf57]

@mitsuhiko do you think it would be possible to have different Admin areas (built with different frameworks, Angular, Vue, etc) installed as Lektor plugins?
Or, as an alternative, it should be possible to easily install from git repositories and switch the Admin UI of choice.
If I got it right, as it is now, the only way to have something different, like @oal's work, is to fork the Lektor's repository and hack it. Not very practical, really.

Update: I realised that it's possible to build a custom, decoupled Admin UI (which consumes Lektor's REST API) without touching Lektor at all.
You just need to proxy api requests in order to overcome CORS checks.

[tariquesani]

Let us know if you build something @ralf57

[ralf57]

@tariquesani I am planning to build a custom Admin with OpenUI 5. Will let you know when I have something usable.

[tariquesani]

@ralf57 while you are building it if you can document the API it would be of great help to others wanting to do similar projects.

[ralf57]

@tariquesani Since the REST API is exposed by Lektor, I'll try to document it as much as I can and possibly send a PR to https://github.com/lektor/lektor-website

[nixjdm]

I'm marking this as on-hold pending the outcome of #457.

[nixjdm]

Since we've had further discussion on #457 / #458, I'm removing the on-hold label. Though, it still may be prudent to handle #458 first, but I won't stop someone from picking this up.