From 909862e44cd81eb57b89b53776ae7a32e735a687 Mon Sep 17 00:00:00 2001
From: JaeeunCho <anna.jecho@gmail.com>
Date: Mon, 14 Nov 2016 14:18:25 -0800
Subject: [PATCH] HTML5-clent messages on chat - changed icon for logged out
 users

---
 .../message-list-item/component.jsx           |  3 ++-
 .../message-list-item/styles.scss             | 20 ++++++++++++++
 .../imports/ui/components/chat/service.js     |  4 ++-
 .../components/user-avatar/color-generator.js | 26 ++++++++++++++++---
 .../ui/components/user-avatar/component.jsx   |  5 ++--
 .../ui/components/user-avatar/styles.scss     | 18 +++++++++++++
 .../ui/components/user-list/service.js        |  1 +
 7 files changed, 69 insertions(+), 8 deletions(-)
 mode change 100644 => 100755 bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js
 mode change 100644 => 100755 bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss

diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/component.jsx
index 018e36d14b..4c664475b3 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/component.jsx
@@ -41,8 +41,9 @@ export default class MessageListItem extends Component {
         </div>
         <div className={styles.content}>
           <div className={styles.meta}>
-            <div className={styles.name}>
+            <div className={user.isLogin ? styles.name : styles.logout}>
               <span>{user.name}</span>
+              {!user.isLogin ? <span className={styles.offline}> (offline)</span> : null}
             </div>
             <time className={styles.time} dateTime={dateTime}>
               <FormattedTime value={dateTime}/>
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
index c1482c4751..b82ed6a0d6 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
@@ -57,6 +57,26 @@
   }
 }
 
+.logout {
+  display: flex;
+  min-width: 0;
+  font-weight: 600;
+  color: $color-gray-light;
+  text-transform: capitalize;
+  font-style: italic;
+
+  > span {
+    @extend %text-elipsis;
+  }
+}
+
+.offline {
+  font-weight: 100;
+  color: $color-gray-light;
+  text-transform: capitalize;
+  font-style: italic;
+}
+
 .time {
   flex-shrink: 0;
   flex-grow: 0;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/service.js b/bigbluebutton-html5/imports/ui/components/chat/service.js
index 6d2e287d6a..9d7d11e845 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/service.js
+++ b/bigbluebutton-html5/imports/ui/components/chat/service.js
@@ -37,18 +37,20 @@ const mapUser = (user) => ({
   isListenOnly: user.listenOnly,
   isSharingWebcam: user.webcam_stream.length,
   isLocked: user.locked,
+  isLogin: true,
 });
 
 const logoutUser = (userID, userName) => ({
   id: userID,
   name: userName,
   emoji: {
-     status: '',
+    status: 'none',
   },
   isPresenter: false,
   isModerator: false,
   isCurrent: false,
   isVoiceUser: false,
+  isLogin: false,
 });
 
 const mapMessage = (messagePayload) => {
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js
old mode 100644
new mode 100755
index a17174de8d..73cd1cb1ad
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js
@@ -25,6 +25,19 @@ const stringToPastelColour = (str) => {
   };
 };
 
+const whiteColour = (str) => {
+
+  let baseRed = 255;
+  let baseGreen = 255;
+  let baseBlue = 255;
+
+  return {
+    r: baseRed,
+    g: baseGreen,
+    b: baseBlue,
+  };
+};
+
 // https://www.w3.org/TR/WCAG20/#relativeluminancedef
 // http://entropymine.com/imageworsener/srgbformula/
 const relativeLuminance = (rgb) => {
@@ -99,10 +112,15 @@ const addShadeIfNoContrast = (rgb) => {
   return addShadeIfNoContrast(shadeColor(rgb, -25));
 };
 
-const getColor = (username) => {
-  let rgb = stringToPastelColour(username);
-  rgb = addShadeIfNoContrast(rgb);
-  return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+const getColor = (username, chkLogin) => {
+  if (chkLogin) {
+    let rgb = stringToPastelColour(username);
+    rgb = addShadeIfNoContrast(rgb);
+    return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+  } else {
+    let rgb = whiteColour();
+    return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+  }
 };
 
 export default getColor;
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
index b108becf15..4886e15372 100755
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
@@ -24,11 +24,12 @@ export default class UserAvatar extends Component {
     } = this.props;
 
     let avatarStyles = {
-      backgroundColor: getColor(user.name),
+      backgroundColor: getColor(user.name, user.isLogin),
     };
 
     return (
-      <div className={styles.userAvatar} style={avatarStyles}>
+      <div className={user.isLogin ? styles.userAvatar : styles.userLogout}
+           style={avatarStyles}>
         <span>
           {this.renderAvatarContent()}
         </span>
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
old mode 100644
new mode 100755
index e380a48f41..4faa1587f5
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
@@ -29,6 +29,24 @@ $moderator-bg: $color-primary;
   text-transform: capitalize;
 }
 
+.userLogout {
+  flex-basis: 2.2rem;
+  height: 2.2rem;
+  flex-shrink: 0;
+  line-height: 2.2rem;
+  justify-content: center;
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  font-size: 1.1rem;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid $color-gray-lighter;
+  color: $color-gray-light;
+  font-style: italic;
+  text-transform: capitalize;
+}
+
 .userStatus {
   position: absolute;
   background-color: $color-white;
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/service.js b/bigbluebutton-html5/imports/ui/components/user-list/service.js
index 1854486602..c9bfed20d1 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/service.js
+++ b/bigbluebutton-html5/imports/ui/components/user-list/service.js
@@ -28,6 +28,7 @@ const mapUser = user => ({
   isListenOnly: user.listenOnly,
   isSharingWebcam: user.webcam_stream.length,
   isPhoneUser: user.phone_user,
+  isLogin: user ? true : false,
 });
 
 const mapOpenChats = chat => {