Feature/inline edit

[karluxd]

What’s this?

This is a pretty big pr where I've updated our core activities – reading and editing. I’ve also started to list things we need to work on for the first release https://team.spaces.is/pages/31, and I’ll schedule 5-10 interviews in the next few weeks that will help us with priorities and marketing. You can watch a video of the updates in #design on Slack.

Why?

Why do we exist and what should Spaces become? I thought about this and wrote some basic principles and guidelines. The updates in this pr will hopefully help us move in this direction. Let me know if you want to add something!

Spaces will…

• Collect team knowledge
• Turn boring documents and folders into something interesting and delightful
• Encourage collaboration and sharing
• Provide a dynamic, interactive and living canvas
• Encourage updates and battle stale documents
• Help novice writers with templates and guidelines
• Focus on content but always have navigation within reach

Inline editing

Reading and editing have been merged into one dynamic view. Select text to format it or create a new line to see additional controls. The controls are there when you need them but don’t distract you from reading. Medium’s implementation was easier than the one Dropbox Paper built so I started there. We can improve it later but I think that onboarding is more important now to make sure that everyone get familiar with the editor. I hope that this update will make it more fun and intuitive to edit pages. It will also lower the barrier to update things when you just have to click on them. The sidebar follows the same pattern and wakes up when you put your mouse over it. The “New page” link sticks to the bottom left corner when the sidebar gets higher than the viewport.

Cover images

Images are very powerful, they can turn boring things into something interesting. Something that draws you in and makes you curious, something that looks nicer and is more exciting to share with others, something more than just long blocks of text. I’ve watched a lot of recordings from usability tests of various apps and it’s quite common that people comment more on images than UI, e.g. what a nice photo or this page is boring and needs an image. With all of this in mind, why should a cover image be optional? It will just take a few seconds to select one from a grid when you create the space, and we can integrate https://unsplash.com/developers (and uploads) for those who want more options. You don’t have to worry about it on every page when the space has a cover image, but I would love to have the option to override it for a page when I’ve spent an hour writing a scenario that I’ll share with people. Doesn't this

look more interesting than this?

The spaces are displaying random images from Unsplash now and I thought we could keep it like that until you’ve had a chance to try it out. We can build a feature for selecting images in a new pr if you like it.

Topbar

I’ve tried to solve a couple of things with the new topbar:

1. Teams and accounts are tightly coupled and they are now combined in a Slack-ish dropdown. The team icon, name of the team, and the name of the user are visible in the topbar without taking up a lot of space.
2. Sharing is very important and it’s now a prominent cta with text in the top-right corner. “Share” is a logical top-level item whether you want to invite someone or just get the url to the current page. You want to “share” this page/space/spaces with someone and the next step depends on whether they are already in your team.
3. The topbar is symmetrical which anchors the page in the middle of the screen. It has been a challenging a layout since we wanted to center the content with the sidebar on the left and I felt that this helped.

Spaces

I’ve styled the overview page so that things look a little nicer when you log in.

What’s missing?

A couple of things but I think we can merge it as it is unless you want to fix it now:

1. Read/edit pages - Merge the views for read and edit, i.e. remove edit. They are both currently including _temporary.erb.
2. Spaces overlay - order spaces by name (not possible with find_each?)
3. Spaces grid - Add updated x minutes ago
4. Teams/accounts overlay - Add Slack/email for each account in the list. We show the name of the Slack team if they signed in with Slack and the email if they signed up with email.

Bonus

You want a desktop app? Generate it with https://github.com/jiahaog/nativefier nativefier http://what.lvh.me:5510/landing

[karluxd]

@MrTin Should be ready for a merge now 🙂