diff --git a/bigbluebutton-html5/.meteor/packages b/bigbluebutton-html5/.meteor/packages
old mode 100755
new mode 100644
index 3c6cc18fe728006fbc1233b072837e50d87fa606..1628a779f187cc6b6360091cc26247bbd33177d9
--- a/bigbluebutton-html5/.meteor/packages
+++ b/bigbluebutton-html5/.meteor/packages
@@ -33,3 +33,4 @@ ecmascript
react-meteor-data
standard-minifier-css
standard-minifier-js
+nathantreid:css-modules
diff --git a/bigbluebutton-html5/.meteor/versions b/bigbluebutton-html5/.meteor/versions
index 8e2a429defde12eb3c4d541cf21dc866cb9d4760..b78ae45efb0fc0799274887a4f55fb86279f6f36 100644
--- a/bigbluebutton-html5/.meteor/versions
+++ b/bigbluebutton-html5/.meteor/versions
@@ -74,6 +74,8 @@ mongo@1.1.7
mongo-id@1.0.4
mrt:external-file-loader@0.1.4
mrt:redis@0.1.3
+nathantreid:css-modules@1.1.1
+nathantreid:css-modules-import-path-helpers@0.1.2
npm-mongo@1.4.43
observe-sequence@1.0.11
ordered-dict@1.0.7
@@ -83,6 +85,7 @@ practicalmeteor:chai@2.1.0_1
practicalmeteor:loglevel@1.2.0_2
promise@0.6.7
raix:eventemitter@0.1.3
+ramda:ramda@0.19.0
random@1.0.9
react-meteor-data@0.2.9
reactive-dict@1.1.7
diff --git a/bigbluebutton-html5/client/main.jsx b/bigbluebutton-html5/client/main.jsx
index 5d93dad744a651044da258a9784556db6859db41..89f634af3dd21f4718fda4559d7ef2227545ba8e 100755
--- a/bigbluebutton-html5/client/main.jsx
+++ b/bigbluebutton-html5/client/main.jsx
@@ -7,7 +7,7 @@ import '/imports/ui/stylesheets/style.less';
import '/imports/ui/stylesheets/chat.less';
import '/imports/ui/stylesheets/mixins.less';
import '/imports/ui/stylesheets/modals.less';
-import '/imports/ui/stylesheets/users.less';
+//import '/imports/ui/stylesheets/users.less';
import '/imports/ui/stylesheets/whiteboard.less';
let loadLib;
diff --git a/bigbluebutton-html5/imports/ui/userlist/UserList.jsx b/bigbluebutton-html5/imports/ui/userlist/UserList.jsx
index c7e11aa5cc6951bac6a5f0638e8a05d77d886da1..4b6933715430b6247bdd6757c1943a0c3292100b 100755
--- a/bigbluebutton-html5/imports/ui/userlist/UserList.jsx
+++ b/bigbluebutton-html5/imports/ui/userlist/UserList.jsx
@@ -1,10 +1,11 @@
import React from 'react';
import {UserListItem} from './UserListItem.jsx';
+import users from './users';
export let UserList = React.createClass({
render() {
return (
- <table className="user-list">
+ <table className={users['user-list']}>
<tbody>
{this.props.users.map((user) => <UserListItem key={user.id} user={user} currentUser={this.props.currentUser}/>)}
</tbody>
diff --git a/bigbluebutton-html5/imports/ui/userlist/UserListItem.jsx b/bigbluebutton-html5/imports/ui/userlist/UserListItem.jsx
index 1a83d2a9bd799c096fde14099404ffccb73e39c1..d9ae1cea0a26efe71f12c695d527cd32cbf36f82 100755
--- a/bigbluebutton-html5/imports/ui/userlist/UserListItem.jsx
+++ b/bigbluebutton-html5/imports/ui/userlist/UserListItem.jsx
@@ -4,6 +4,7 @@ import {Icon} from '../Icon.jsx';
import {EmojiIcon} from '../EmojiIcon.jsx';
import {Tooltip} from '../Tooltip.jsx';
import classNames from 'classnames';
+import users from './users';
export let UserListItem = React.createClass({
@@ -27,11 +28,11 @@ export let UserListItem = React.createClass({
const user = this.props.user;
return (
- <tr className={classNames(
+ <tr className={users[classNames(
'user-list-item',
user.isCurrent ? 'is-current' : null,
user.unreadMessagesCount ? 'has-messages' : null
- )}>
+ )]}>
{this.renderStatusIcons()}
{this.renderUserName()}
{this.renderSharingStatus()}
@@ -62,7 +63,7 @@ export let UserListItem = React.createClass({
}
return (
- <td className="user-list-item-status">
+ <td className={users['user-list-item-status']}>
{statusIcons.map(i => i)}
</td>
);
@@ -78,7 +79,7 @@ export let UserListItem = React.createClass({
}
return (
- <td className="user-list-item-name" onClick={() => this.handleOpenPrivateChat(user)}>
+ <td className={users['user-list-item-name']} onClick={() => this.handleOpenPrivateChat(user)}>
<Tooltip title={userName}>
{userName} {this.renderUnreadBadge()}
</Tooltip>
@@ -94,7 +95,7 @@ export let UserListItem = React.createClass({
}
return (
- <span className="user-list-item-messages">
+ <span className={users['user-list-item-messages']}>
{(unreadMessagesCount > 9) ? '9+' : unreadMessagesCount}
</span>
);
@@ -176,8 +177,8 @@ export let UserListItem = React.createClass({
}
return (
- <td className="user-list-item-sharing">
- <table className="user-list-item-sharing-list">
+ <td className={users['user-list-item-sharing']}>
+ <table className={users['user-list-item-sharing-list']}>
<tbody>
<tr>
{Object.keys(icons).map((key) => {
diff --git a/bigbluebutton-html5/imports/ui/userlist/users.scss b/bigbluebutton-html5/imports/ui/userlist/users.scss
new file mode 100755
index 0000000000000000000000000000000000000000..9914862a0be1fb40d0bba0d80868aba1bced2d65
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/userlist/users.scss
@@ -0,0 +1,364 @@
+/* media queries */
+
+/* standard landscape view: landscape browser window + landscape device screen */
+$landscape: "all and (orientation: landscape) and (min-device-aspect-ratio: 1/1)";
+
+/* keyboard is open on a mobile device: landscape browser window + portrait device screen */
+$mobile-portrait-with-keyboard: "all and (orientation: landscape) and (max-device-aspect-ratio: 1/1)";
+
+/* narrowed desktop window: portrait browser window + landscape device screen */
+$desktop-portrait: "all and (orientation: portrait) and (min-device-aspect-ratio: 1/1)";
+
+/* mobile device in portrait orientation: portrait browser window + portrait device screen */
+$mobile-portrait: "all and (orientation: portrait) and (max-device-aspect-ratio: 1/1)";
+
+/* more specific media queries */
+$phone-portrait: "all and (orientation: portrait) and (max-device-aspect-ratio: 1/1) and (max-device-width: 480px)";
+$phone-portrait-with-keyboard: "all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) and (max-device-width: 480px)";
+
+$tablet-portrait: "all and (orientation: portrait) and (max-device-aspect-ratio: 1/1) and (min-device-width: 481px)";
+$tablet-portrait-with-keyboard: "all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) and (min-device-width: 481px)";
+
+$phone-landscape: "all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) and (max-device-width: 959px)";
+$tablet-landscape: "all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) and (min-device-width: 960px) and (max-device-width: 1366px)";
+$desktop-landscape: "all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) and (min-device-width: 1367px)";
+
+//////////////////////////////
+
+.statusIcon {
+ font-size: 18px;
+}
+
+#usericons {
+ float: right;
+ padding: 0 5px;
+ text-align: right;
+ color: white;
+ span i {
+ @media #{$landscape}, #{$desktop-portrait} {
+ margin-right: 10px;
+ font-size: 20px;
+ }
+ }
+}
+.unreadChatNumber {
+ @media #{$landscape}, #{$desktop-portrait}{
+ float: left;
+ margin-top: 5px;
+ width: 28px;
+ height: 18px;
+ border-radius: 41%;
+ font-size: 12px;
+ color: #fff;
+ text-align: center;
+ background: #3896D3;
+ }
+}
+
+.usernameEntry {
+ cursor: pointer;
+ line-height: 1.1;
+ float:left;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: calc(100% - 120px);
+ // 120px is size of the icon list with all icons enabled (lock, cam, mic/listen)
+
+ @media #{$landscape} {
+ min-height: 30px;
+ font-size: 4.5mm;
+ }
+ @media #{$desktop-portrait} {
+ min-height: 30px;
+ font-size: 4.5mm;
+ }
+ @media #{$phone-portrait}, #{$phone-portrait-with-keyboard} {
+ font-size: 15px;
+ }
+ @media #{$tablet-portrait}, #{$tablet-portrait-with-keyboard} {
+ font-size: 17px;
+ }
+}
+
+#users {
+ border-radius: 0px;
+ @media #{$landscape} {
+ width: 100%;
+ border-left: 0px;
+ border-top: 0px;
+ }
+ @media #{$mobile-portrait-with-keyboard}, #{$desktop-portrait}, #{$mobile-portrait} {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background-color: #34495E;
+ }
+ order: 0;
+ height: 100%;
+}
+
+.darkening-in {
+ opacity: 0;
+ animation: darken-in 0.5s;
+ animation-fill-mode: forwards;
+}
+
+@keyframes darken-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 0.5;
+ }
+}
+
+#user-contents {
+ overflow-y: auto;
+
+ @media #{$phone-landscape} {
+ height: calc(100% - 46px);
+ }
+ @media #{$tablet-landscape}, #{$desktop-landscape},
+ #{$mobile-portrait}, #{$mobile-portrait-with-keyboard}, #{$desktop-portrait} {
+ height: calc(100% - 50px); // user-contents = user-contens - meetingTitle
+ }
+ @media #{$landscape}, #{$desktop-portrait}{
+ background-color: #34495E;
+ }
+ .userlist {
+ max-height: 100% !important;
+ height: 100%;
+
+ #content{
+ .setPresenter{
+ color: #A0A0A0;
+ }
+
+ @media #{$desktop-landscape}, #{$desktop-portrait} {
+ .kickUser, .setPresenter{
+ cursor: pointer;
+ opacity:0;
+ color: #fff;
+ cursor: pointer;
+ display: none;
+ -webkit-animation: fadeInAnimation .5s;
+ animation: fadeInAnimation .5s;
+ }
+ }
+ }
+ #content:hover {
+ @media #{$landscape}, #{$desktop-portrait} {
+ background-color: #2C4155;
+
+ .kickUser, .setPresenter{
+ display: inline;
+ opacity:1;
+ }
+ }
+ }
+ #content {
+ span:hover {
+ @media #{$mobile-portrait-with-keyboard}, #{$desktop-portrait}, #{$mobile-portrait} {
+ background: transparent;
+ }
+ }
+ margin-top: 10px;
+ &:first-child { margin-top: 0px; }
+ overflow: hidden;
+ width: 100%;
+ @media #{$mobile-portrait}, #{$mobile-portrait-with-keyboard} {
+ //background: #E6F0FA;
+ background: transparent;
+ color: white;
+ }
+ }
+
+ @media #{$landscape} {
+ padding:10px;
+ max-height:83vh;
+ }
+ @media #{$desktop-portrait} {
+ padding-top: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: white;
+ }
+ @media #{$desktop-portrait}, #{$mobile-portrait} {
+ max-height: 58vw; //for longer userlist a scrollbar appears
+ padding-top: 10px;
+ }
+ }
+}
+
+.userCurrent {
+ font-weight: bold;
+}
+
+.toggleUserlistButton, .toggleMenuButton {
+ span {
+ @media #{$tablet-landscape} {
+ width: 26px;
+ }
+ @media #{$phone-landscape} {
+ width: 35px;
+ }
+ @media #{$desktop-landscape} {
+ width: 26px;
+ }
+
+ @media #{$landscape}, #{$desktop-portrait} {
+ margin-left: auto;
+ margin-right: auto;
+ height: 8%;
+ }
+ }
+}
+
+// changing mute/unmute icons on hover:
+.muteIcon .ion-ios-mic-outline:hover:before {
+ content: "\f45f";
+}
+.muteIcon .ion-ios-mic:hover:before {
+ content: "\f45f";
+}
+.muteIcon .ion-ios-mic-off:hover:before {
+ content: "\f461";
+}
+
+.userName {
+ color: #E6E6E6;
+ line-height: 1.5;
+}
+
+.status {
+ float: left;
+ width: 15px;
+ min-width: 15px;
+ height: 27px;
+ margin-right: 15px;
+ font-size: 18px;
+ color: #FFFFFF;
+ span {
+ padding-left: 5px;
+ }
+}
+
+@-webkit-keyframes fadeInAnimation {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.table-user-fixed {
+ background-color: transparent;
+ color: #fff;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ table-layout: fixed;
+ width: 100%;
+ font-size: 16px;
+
+ @media #{$mobile-portrait} {
+ font-size: 14px;
+ }
+}
+
+
+// Everything is using EM to be easier to shrink sizes on mobile
+.user-list {
+ @extend .table-user-fixed;
+ margin-bottom: 0.625em;
+
+ &-item {
+ background-color: transparent !important; //need this here to reset bg-color
+
+ @media #{$desktop-landscape}, #{$desktop-portrait} {
+ .kickUser, .setPresenter{
+ opacity:0;
+ color: #fff;
+ cursor: pointer;
+ display: none;
+ -webkit-animation: fadeInAnimation .5s;
+ animation: fadeInAnimation .5s;
+ }
+ }
+
+ &:hover{
+ background-color: #2C4155 !important;
+
+ @media #{$landscape}, #{$desktop-portrait} {
+ background-color: #2C4155;
+
+ .kickUser, .setPresenter{
+ display: inline;
+ opacity:1;
+ }
+ }
+ }
+
+ &-status {
+ color: inherit;
+ width: 1.6em;
+ font-size: 1.25em;
+ text-align: center;
+ padding: 0;
+ }
+
+ &-name {
+ color: inherit;
+ width: auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 1em;
+ padding: 0.625em;
+ cursor: pointer;
+
+ .is-current & {
+ font-weight: bold;
+ }
+
+ .has-messages & {
+ padding-right: 30px;
+ position: relative;
+ }
+ }
+
+ &-messages {
+ position: absolute;
+ width: 28px;
+ height: 18px;
+ border-radius: 41%;
+ font-size: 12px;
+ color: #fff;
+ text-align: center;
+ background: #3896D3;
+ right: 0;
+ top: 9px;
+ }
+
+ &-sharing {
+ padding-right: 10px;
+ color: inherit;
+ width: 7.2em;
+ padding: 0.625em 0.625em 0.625em 0;
+
+ &-list {
+ @extend .table-user-fixed;
+
+ td, th {
+ padding: 0;
+ width: 25%;
+ color: inherit;
+ font-size: 1.25em;
+ text-align: right;
+ }
+ }
+ }
+ }
+}
diff --git a/bigbluebutton-html5/package.json b/bigbluebutton-html5/package.json
old mode 100644
new mode 100755
index b95ccdde5180f96a6747e1fda943e57f56f5f8fe..b62dc4fe0457e39bc5cc968a7da2f39edef3cc66
--- a/bigbluebutton-html5/package.json
+++ b/bigbluebutton-html5/package.json
@@ -24,5 +24,8 @@
"grunt-force-task": "~2.0.0",
"grunt-contrib-watch": "~1.0.0",
"grunt-concurrent": "~2.2.1"
+ },
+ "cssModules": {
+ "extensions": ["scss"]
}
}