From a49a545161a696009e616c26f96ede57ae849fd8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 14 Jul 2016 17:41:07 +0100 Subject: [PATCH 1/4] CSS classes to colour offline users differently So we can use the same 66% opacity as idle tiles for offline-with-last-active-time to reduce the visual jarring --- src/components/views/rooms/EntityTile.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index 91874ed45a0..eb351143e9e 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -29,6 +29,23 @@ var PRESENCE_CLASS = { "unavailable": "mx_EntityTile_unavailable" }; + +function presence_class_for_member(presence_state, last_active_ago) { + // offline is split into two categories depending on whether we have + // a last_active_ago for them. + if (presence_state == 'offline') { + if (last_active_ago) { + return PRESENCE_CLASS['offline'] + '_beenactive'; + } else { + return PRESENCE_CLASS['offline'] + '_neveractive'; + } + } else if (presence_state) { + return PRESENCE_CLASS[presence_state]; + } else { + return PRESENCE_CLASS['offline']; + } +} + module.exports = React.createClass({ displayName: 'EntityTile', @@ -79,7 +96,10 @@ module.exports = React.createClass({ }, render: function() { - var presenceClass = PRESENCE_CLASS[this.props.presenceState] || "mx_EntityTile_offline"; + const presenceClass = presence_class_for_member( + this.props.presenceState, this.props.presenceLastActiveAgo + ); + var mainClassName = "mx_EntityTile "; mainClassName += presenceClass + (this.props.className ? (" " + this.props.className) : ""); var nameEl; From 7c1b4f4fc965deebde58031bc932fc9e4899b5a8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 14 Jul 2016 18:13:15 +0100 Subject: [PATCH 2/4] Obey my own code style --- src/components/views/rooms/EntityTile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index eb351143e9e..b406f4f06f5 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -30,7 +30,7 @@ var PRESENCE_CLASS = { }; -function presence_class_for_member(presence_state, last_active_ago) { +function presenceClassForMember(presence_state, last_active_ago) { // offline is split into two categories depending on whether we have // a last_active_ago for them. if (presence_state == 'offline') { @@ -96,7 +96,7 @@ module.exports = React.createClass({ }, render: function() { - const presenceClass = presence_class_for_member( + const presenceClass = presenceClassForMember( this.props.presenceState, this.props.presenceLastActiveAgo ); From 2fd690ea2b14ef1881e203d8ad3db1a3f5d9f9fa Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 14 Jul 2016 18:13:54 +0100 Subject: [PATCH 3/4] Oops, removed the pure offline class --- src/components/views/rooms/EntityTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index b406f4f06f5..ef460fe74af 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -42,7 +42,7 @@ function presenceClassForMember(presence_state, last_active_ago) { } else if (presence_state) { return PRESENCE_CLASS[presence_state]; } else { - return PRESENCE_CLASS['offline']; + return PRESENCE_CLASS['offline'] + '_neveractive'; } } From 9fd0ea1e328fb066d567a468404920c9fc989286 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 14 Jul 2016 18:18:44 +0100 Subject: [PATCH 4/4] More variable case --- src/components/views/rooms/EntityTile.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index ef460fe74af..8a99b4c5654 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -30,17 +30,17 @@ var PRESENCE_CLASS = { }; -function presenceClassForMember(presence_state, last_active_ago) { +function presenceClassForMember(presenceState, lastActiveAgo) { // offline is split into two categories depending on whether we have // a last_active_ago for them. - if (presence_state == 'offline') { - if (last_active_ago) { + if (presenceState == 'offline') { + if (lastActiveAgo) { return PRESENCE_CLASS['offline'] + '_beenactive'; } else { return PRESENCE_CLASS['offline'] + '_neveractive'; } - } else if (presence_state) { - return PRESENCE_CLASS[presence_state]; + } else if (presenceState) { + return PRESENCE_CLASS[presenceState]; } else { return PRESENCE_CLASS['offline'] + '_neveractive'; }