[IMPROVE] UI design for Tables and tabs component on Directory by karlprieb · Pull Request #11026 · RocketChat/Rocket.Chat

karlprieb · 2018-06-06T22:34:53Z

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 · 2018-06-07T14:42:41Z

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 · 2018-06-08T06:01:37Z

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 · 2018-06-08T20:22:32Z

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

geekgonecrazy · 2018-06-08T23:42:01Z

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

vynmera · 2018-06-09T09:12:51Z

@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 · 2018-06-09T13:31:01Z

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

vynmera · 2018-06-09T13:41:16Z

@ggazzo that's the issue, I think~

geekgonecrazy · 2018-06-09T19:04:20Z

@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

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

My suggestion:

mobile now:

ggazzo · 2018-06-11T23:02:41Z

+}
+
+.tab {
+	margin: 0 1rem;


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

ggazzo · 2018-06-11T23:22:22Z

+Template.table.events({
+	'click tbody tr'() {
+		const onItemClick = Template.instance().data.onItemClick;
+		if (onItemClick) {


return onItemClick && onItemClick(this)

ggazzo · 2018-06-11T23:23:20Z

+
+Template.tabs.events({
+	'click .tab'(e) {
+		$('.tab').removeClass('active');


I think this way will not work for nested tabs

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

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.

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

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 · 2018-06-11T23:26:15Z

+		};
+	},
+	onTableItemClick() {
+		const searchType = Template.instance().searchType;


const { searchType } = Template.instance();

karlprieb · 2018-06-14T18:47:35Z

@gdelavald it is fixed now 👍

kaiiiiiiiii · 2018-06-14T19:41:11Z

Hey @karlprieb,

two more things.

Room Name and Description look a bit displaced when a channel description is given.
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 =/

…nto table-component

karlprieb · 2018-06-14T20:40:30Z

@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 · 2018-06-18T00:00:26Z

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

karlprieb added 3 commits June 5, 2018 14:02

table component

eaf9f8f

table component: fixed header

2c83691

tabs component

1f05bc2

karlprieb added the area: ui/ux Related to UI/UX, frontend code, accessibility, and user interaction label Jun 6, 2018

karlprieb added this to the 0.66.0 milestone Jun 6, 2018

karlprieb requested review from gdelavald and ggazzo June 6, 2018 22:34

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 6, 2018 22:35 Inactive

change directory header paddings

f7375a9

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 7, 2018 18:02 Inactive

add onItemClick to the table component

d5435d2

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 7, 2018 18:47 Inactive

karlprieb changed the title ~~[WIP] [FIX] Table and tabs component for Directory~~ [FIX] Table and tabs component for Directory Jun 7, 2018

Merge branch 'develop' into table-component

29e1086

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 7, 2018 18:49 Inactive

ggazzo changed the title ~~[FIX] Table and tabs component for Directory~~ [FIX] UI design for Tables and tabs component on Directory Jun 8, 2018

ggazzo requested changes Jun 11, 2018

View reviewed changes

ggazzo changed the title ~~[FIX] UI design for Tables and tabs component on Directory~~ [IMPROVE] UI design for Tables and tabs component on Directory Jun 12, 2018

remove table horizontal padding and add animation to tabs

20fa94a

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 12, 2018 18:00 Inactive

improve readability on table and directory methods

72ec73b

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 12, 2018 18:02 Inactive

karlprieb added 2 commits June 14, 2018 17:07

fix directory table sort

06a0671

Merge branch 'table-component' of github.com:RocketChat/Rocket.Chat i…

dc4b1ff

…nto table-component

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 14, 2018 20:08 Inactive

fix user table columns on directory

3e8a048

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 14, 2018 20:38 Inactive

Merge branch 'develop' into table-component

7079c2a

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 15, 2018 17:49 Inactive

gdelavald mentioned this pull request Jun 15, 2018

[IMPROVE] Listing of apps in the admin page #11166

Merged

remove channel description on directory

ff25674

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 17, 2018 23:59 Inactive

Merge branch 'develop' into table-component

fd3b0e2

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 18, 2018 00:00 Inactive

ggazzo mentioned this pull request Jun 18, 2018

[LAYOUT] Directory label is cutting for channels names and usernames #11134

Closed

karlprieb added 2 commits June 19, 2018 13:48

Merge branch 'develop' into table-component

74677ca

remove @ from users and add topic from channel search on directory

d0e16de

engelgabriel temporarily deployed to rocket-chat-pr-11026 June 19, 2018 17:40 Inactive

Update table.css

b9f6aa3

ggazzo temporarily deployed to rocket-chat-pr-11026 June 19, 2018 18:43 Inactive

remove package

4321d06

ggazzo deployed to rocket-chat-pr-11026 June 19, 2018 19:26 View deployment

ggazzo approved these changes Jun 19, 2018

View reviewed changes

gdelavald approved these changes Jun 19, 2018

View reviewed changes

ggazzo merged commit 9a93ccb into develop Jun 19, 2018

ggazzo deleted the table-component branch June 19, 2018 21:11

ggazzo mentioned this pull request Jun 20, 2018

Change Directorysearchbar Text to "Search" #10305

Closed

rodrigok mentioned this pull request Jun 28, 2018

Release 0.66.0 #11278

Merged

Uh oh!

Conversation

karlprieb commented Jun 6, 2018 • edited by ggazzo Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gdelavald commented Jun 7, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

graywolf336 commented Jun 8, 2018

Uh oh!

ggazzo commented Jun 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

geekgonecrazy commented Jun 8, 2018

Uh oh!

vynmera commented Jun 9, 2018

Uh oh!

ggazzo commented Jun 9, 2018

Uh oh!

vynmera commented Jun 9, 2018

Uh oh!

geekgonecrazy commented Jun 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ggazzo left a comment

Choose a reason for hiding this comment

My suggestion:

mobile now:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ggazzo Jun 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

karlprieb commented Jun 14, 2018

Uh oh!

kaiiiiiiiii commented Jun 14, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

karlprieb commented Jun 14, 2018

Uh oh!

karlprieb commented Jun 18, 2018

Uh oh!

gdelavald left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

karlprieb commented Jun 6, 2018 •

edited by ggazzo

Loading

gdelavald commented Jun 7, 2018 •

edited

Loading

ggazzo commented Jun 8, 2018 •

edited

Loading

geekgonecrazy commented Jun 9, 2018 •

edited

Loading

ggazzo Jun 12, 2018 •

edited

Loading

kaiiiiiiiii commented Jun 14, 2018 •

edited

Loading