ResultadosDigitais / matrix

#matrix is the online open-source workplace inspired in sococo.com for distributed teams to have the experience of work together each day, side-by-side. No matter where team members might be. Working in an online workplace is even more productive when people are feeling in the same space.
MIT License
902 stars 238 forks source link

Zoom in and Zoom out in office #157

Open juliemar opened 5 years ago

juliemar commented 5 years ago

Description

Today we have more than 30 rooms and is so difficult to have a complete office view scrolling the office.

Describe alternatives you've considered

We can implement an ability to do a zoom in and zoom out in the office to enable the user to see all rooms without scroll.

Suggestion

Maybe we can considerer this lib: https://github.com/pbakaus/scroller Demo: http://zynga.github.io/scroller/demo/dom.html

hashtegner commented 5 years ago

I like the idea to reduce the zoom office, but the suggested scroller tool has an issue that I didn't like, that is the ability to use the browser scroll (that tool uses click + drag to scroll over office apparently, I don't know if we can change this behavior).

Maybe an alternative is reduce the room size / space between, as datadog implemented in the charts.

Screen Shot 2019-05-15 at 10 13 38
megatroom commented 5 years ago

Instead of working with zoom, which would make it very difficult to use on the mobile, what do you think about having an option to reduce the contents of each room with only the essential information?

The card (the room) could stay by default like this: card-closed And by expanding it would look like this: card-open

Sorry, I'm not a UX, but it could be something like this, something that fill better the free space.

Another way to clean the screen would be through filters. You could have a quick filter to display only the rooms with participants, for example.

Another good solution is also separating rooms by floors, this would work well with tabs.

megatroom commented 5 years ago

Based on the idea I gave above, I created a new layout with a new card:

card-closed

The card limits to 3 users and displays an avatar with the remaining user number. But if you click the card, it expands:

card-opened

Each avatar has a tooltip with the user name.

I even created a quick filter and a search to find fast the meeting room.

All this can be seen and tested in the PR: #174