From 04e9d1818c1a618af38acce03e162448b5e0b801 Mon Sep 17 00:00:00 2001
From: JaeeunCho <anna.jecho@gmail.com>
Date: Tue, 4 Oct 2016 12:23:43 -0700
Subject: [PATCH] HTML 5 - added to display the state of unreaded messages
right next to the user icon
---
.../ui/components/nav-bar/component.jsx | 4 +++-
.../ui/components/nav-bar/container.jsx | 23 +++++++++++++++++--
.../display-unreadmessage/component.jsx | 19 +++++++++++++++
.../nav-bar/recordbutton/component.jsx | 1 -
.../imports/ui/components/nav-bar/styles.scss | 12 ++++++++++
5 files changed, 55 insertions(+), 4 deletions(-)
create mode 100755 bigbluebutton-html5/imports/ui/components/nav-bar/display-unreadmessage/component.jsx
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
index 8d51eb1098..d5fb09bc0f 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@@ -3,6 +3,7 @@ import styles from './styles.scss';
import Button from '../button/component';
import RecordButton from './recordbutton/component';
import SettingsDropdown from './settings-dropdown/component';
+import DisplayUnreadMessage from './display-unreadmessage/component';
const propTypes = {
presentationTitle: PropTypes.string.isRequired,
@@ -28,7 +29,7 @@ class NavBar extends Component {
}
render() {
- const { presentationTitle, beingRecorded } = this.props;
+ const { presentationTitle, hasUnreadMessages, beingRecorded } = this.props;
document.title = presentationTitle;
return (
@@ -44,6 +45,7 @@ class NavBar extends Component {
className={styles.btn}
/>
</div>
+ <DisplayUnreadMessage hasUnreadMessages={hasUnreadMessages}/>
<div className={styles.center}>
<h1 className={styles.presentationTitle}>{presentationTitle}</h1>
<span className={styles.divideBar}> | </span>
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
index 79b9f9a2f2..9bde55eda4 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
@@ -2,11 +2,17 @@ import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { withRouter } from 'react-router';
-import Auth from '/imports/ui/services/auth';
import Meetings from '/imports/api/meetings';
+import Auth from '/imports/ui/services/auth';
+import Service from '../user-list/service';
+import ChatService from '../chat/service';
+
import NavBar from './component';
+const CHAT_CONFIG = Meteor.settings.public.chat;
+const PUBLIC_CHAT_KEY = CHAT_CONFIG.public_id;
+
class NavBarContainer extends Component {
constructor(props) {
super(props);
@@ -35,9 +41,22 @@ export default withRouter(createContainer(({ location, router }) => {
meetingRecorded = meetingObject.currentlyBeingRecorded;
}
+ const users = Service.getUsers();
+ let unreadMessagesFromUsers;
+ let unreadMessagesFromPublic = ChatService.hasUnreadMessages(PUBLIC_CHAT_KEY);
+ let hasUnreadMessages;
+
+ for (let i = 0; i < users.length; i++) {
+ if (users[i].id !== Auth.userID) {
+ unreadMessagesFromUsers = ChatService.hasUnreadMessages(users[i].id);
+ }
+ }
+
+ hasUnreadMessages = unreadMessagesFromPublic || unreadMessagesFromUsers;
+
return {
presentationTitle: meetingTitle,
- hasUnreadMessages: true,
+ hasUnreadMessages: hasUnreadMessages,
beingRecorded: meetingRecorded,
toggleUserList: () => {
if (location.pathname.indexOf('/users') !== -1) {
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/display-unreadmessage/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/display-unreadmessage/component.jsx
new file mode 100755
index 0000000000..5a5cf72b59
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/display-unreadmessage/component.jsx
@@ -0,0 +1,19 @@
+import React, { Component, PropTypes } from 'react';
+import styles from '../styles.scss';
+
+export default class DisplayUnreadMessage extends Component{
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ const { hasUnreadMessages } = this.props;
+ let fillColor = hasUnreadMessages ? '#F0615F' : '#ffffff';
+
+ return (
+ <svg width="30" height="30" className={styles.msgFlag}>
+ <circle cx="13" cy="17.5" r="5" stroke="#2A2D36" strokeWidth="1" fill= {fillColor} />
+ </svg>
+ );
+ }
+};
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recordbutton/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/recordbutton/component.jsx
index c0c346639c..e1c8760411 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recordbutton/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recordbutton/component.jsx
@@ -1,6 +1,5 @@
import React, { Component, PropTypes } from 'react';
import styles from '../styles.scss';
-import Meetings from '/imports/api/meetings';
export default class RecordButton extends Component{
constructor(props) {
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
index ffbd0b2854..1ccfe930c2 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
@@ -52,6 +52,11 @@
margin-left: -5px;
}
+.msgFlag{
+ margin-left: -34px;
+ margin-top: 6px;
+}
+
.hidden {
position:absolute;
left:-10000px;
@@ -61,6 +66,13 @@
overflow:hidden;
}
+.btn{
+ span {
+ border: none;
+ box-shadow: none;
+ }
+}
+
.settingBtn {
transform: rotate(90deg);
span {
--
GitLab