[IMPROVE] UI design for Tables and tabs component on Directory

[karlprieb]

A better design for tables and tab component, applied on Directory page.

Still needs to write a documentation about these new components and how the directory feature works. We can make a blogpost. What you @RocketChat/core think?

[gdelavald]

There is this weird delay when toggling between users and channels, could this be a performance issue?

Also, you can't order channels based on user quantity, and even though the cursor shows as pointer there is no mouse event on clicking the rows, which can be misleading.

[graywolf336]

Why is the name of this pull request labeled as [FIX] when the description says:

New table and tab component applied on Directory page.

[ggazzo]

@graywolf336 ... the design is new, but we didnt change nothing as feature, just fixed the bad UI, or am I wrong?

[geekgonecrazy]

Should we instead use an improve tag? Instead of fix or new.

[vynmera]

@geekgonecrazy Good call, an IMPROVE tag would make the most sense here.

Furthermore, by using a tag like that, we might get more people to polish up the existing parts of RC, something quite important to good UX and code :-)

[ggazzo]

I agree @geekgonecrazy , but I thought we had just NEW, BREAK, FIX

[vynmera]

@ggazzo that's the issue, I think~

[geekgonecrazy]

@ggazzo right we only have the 3. I'm suggesting we consider one more. That way things such as component redesign can be surfaced separately so we can make it more clear the components we improve vs the ones we fix a bug only.

Like some times we completely rework something for the purpose of improving a lot of things and it does close bugs, but over all we improved functionality.

Just an idea. @rodrigok what do you think? That or should we add a tag to PR's that it's design, that way they can be found that way? Could also surface based on that in changelog?

[ggazzo]

• Mobile view
• Scroll or pagination
• Different Icons on each table rooms/users
• loading state
• debounce the search when typing

As we can only search by name I think in small screens (mobile) we should hide the another fields.

My suggestion:

mobile now:

[ggazzo]

I think you should use transition: color .3s; here

[karlprieb]

👍

[ggazzo]

return onItemClick && onItemClick(this)

[karlprieb]

👍

[ggazzo]

I think this way will not work for nested tabs

[karlprieb]

how nested tabs should work? We will have nested tabs? We already have a design for that?

[ggazzo]

we dont have design to nested to show you now, but just to think...
, and we can have more than one per page... you are looking for ALL .tabs and maybe you are creating a bug

you did here, why not keep inside the component?

Template.tabs.onRendered(function() {
	this.$('.tab').first().addClass('active');
	this.data.tabs.onChange(this.data.tabs.tabs[0].value);
});

and more we are using a reactive framework, please change that using reactive vars.

[gdelavald]

Can we do a simple {activeClass} variable on the helper and change according to state?

[karlprieb]

I created a 'ReactiveVar' to keep the state of the active tab and adde a helper to check which tab is active and add an active class to this tab.

Thank you for your suggestions :)

[ggazzo]

const { searchType } = Template.instance();

[karlprieb]

👍

[karlprieb]

@gdelavald it is fixed now 👍

[kaiiiiiiiii]

Hey @karlprieb,

two more things.

1. Room Name and Description look a bit displaced when a channel description is given.
2. Is there a reason why the description width is still limited to 200px? Doesn't make any sense on large screens IMO. Some of our project channels have really long descriptions (100-200 words) and it would be nice to see more than just the first 5 words :)

// 3. Username and Name are swapped?! And it looks like the order is case sensitive =/

[karlprieb]

@kaiiiiiiiii Thank you for your report :)

I already fixed the first problem.
For the second and third problems we will need some help from our design team, so I won't be able to fix that today.

@ggazzo ☝️

[karlprieb]

Hey @kaiiiiiiiii we will remove channel description from this table layout for now. In a near future we will add a extended (with descriptions) and compact layout for this table, just like we did with the sidebar.

Thank again for your reports :)

[gdelavald]

Lgtm