BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2869 from gthacoder/meteor-client

Browse Source 
HTML5 client: UI fixes and code refactoring.
This commit is contained in:
Richard Alam 2015-11-02 14:40:41 -05:00
commit 03a7110a92
13 changed files with 702 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bigbluebutton-html5/app/.meteor/packages
View File

@ -28,4 +28,3 @@ maibaum:foundation-icons
chriswessels:hammer@3.1.1
fastclick
standard-minifiers
gthacoder:meteor-sled@0.0.1

2
bigbluebutton-html5/app/.meteor/versions
View File

@ -34,7 +34,6 @@ ewall:foundation@5.5.2
fastclick@1.0.7
francocatena:status@1.4.0
geojson-utils@1.0.4
gthacoder:meteor-sled@0.0.1
html-tools@1.0.5
htmljs@1.0.5
http@1.1.1
@ -92,7 +91,6 @@ spacebars@1.0.7
spacebars-compiler@1.0.7
standard-app-packages@1.0.6
standard-minifiers@1.0.1
stevezhu:sass@2.0.0
tap:i18n@1.6.1
templating@1.1.4
templating-tools@1.0.0

63
bigbluebutton-html5/app/client/globals.coffee
View File

@ -277,10 +277,10 @@ Handlebars.registerHelper "getPollQuestions", ->
BBB.toggleMyMic()
@toggleUsersList = ->
if $('.sl-left-drawer').hasClass('hiddenInLandscape')
$('.sl-left-drawer').removeClass('hiddenInLandscape')
if $('.userlistMenu').hasClass('hiddenInLandscape')
$('.userlistMenu').removeClass('hiddenInLandscape')
else
$('.sl-left-drawer').addClass('hiddenInLandscape')
$('.userlistMenu').addClass('hiddenInLandscape')
setTimeout(scaleWhiteboard, 0)
@populateNotifications = (msg) ->
@ -338,6 +338,7 @@ Handlebars.registerHelper "getPollQuestions", ->
$('#chat').removeClass('invisible')
$('#users').removeClass('invisible')
$('#navbar').removeClass('invisible')
$('.FABTriggerButton').removeClass('invisible')
$('.fullscreenButton').removeClass('exitFullscreenButton')
$('.fullscreenButton').addClass('whiteboardFullscreenButton')
$('.fullscreenButton i').removeClass('ion-arrow-shrink')
@ -358,6 +359,7 @@ Handlebars.registerHelper "getPollQuestions", ->
$('#chat').addClass('invisible')
$('#users').addClass('invisible')
$('#navbar').addClass('invisible')
$('.FABTriggerButton').addClass('invisible')
$('.fullscreenButton').removeClass('whiteboardFullscreenButton')
$('.fullscreenButton').addClass('exitFullscreenButton')
$('.fullscreenButton i').removeClass('ion-arrow-expand')
@ -377,12 +379,12 @@ Handlebars.registerHelper "getPollQuestions", ->
scaleWhiteboard()
@closeMenus = ->
if $('.sl-left-drawer').hasClass('sl-left-drawer-out')
toggleLeftDrawer()
toggleLeftArrowClockwise()
else if $('.sl-right-drawer').hasClass('sl-right-drawer-out')
toggleRightDrawer()
toggleRightArrowClockwise()
if $('.userlistMenu').hasClass('menuOut')
toggleUserlistMenu()
toggleLeftHamburderIcon()
else if $('.settingsMenu').hasClass('menuOut')
toggleSettingsMenu()
toggleRightHamburderIcon()
# Periodically check the status of the WebRTC call, when a call has been established attempt to hangup,
# retry if a call is in progress, send the leave voice conference message to BBB
@ -616,3 +618,46 @@ Handlebars.registerHelper "getPollQuestions", ->
$('#chatbody').attr('style','')
$('#newMessageInput').attr('style','')
@toggleEmojisFAB = () ->
if $('.FABContainer').hasClass('openedFAB')
$('.FABContainer > button:nth-child(2)').css('opacity', $('.FABContainer > button:nth-child(2)').css('opacity'))
$('.FABContainer > button:nth-child(3)').css('opacity', $('.FABContainer > button:nth-child(3)').css('opacity'))
$('.FABContainer > button:nth-child(4)').css('opacity', $('.FABContainer > button:nth-child(4)').css('opacity'))
$('.FABContainer > button:nth-child(5)').css('opacity', $('.FABContainer > button:nth-child(5)').css('opacity'))
$('.FABContainer > button:nth-child(6)').css('opacity', $('.FABContainer > button:nth-child(6)').css('opacity'))
$('.FABContainer > button:nth-child(7)').css('opacity', $('.FABContainer > button:nth-child(7)').css('opacity'))
$('.FABContainer').removeClass('openedFAB')
$('.FABContainer').addClass('closedFAB')
else
$('.FABContainer > button:nth-child(2)').css('opacity', $('.FABContainer > button:nth-child(2)').css('opacity'))
$('.FABContainer > button:nth-child(3)').css('opacity', $('.FABContainer > button:nth-child(3)').css('opacity'))
$('.FABContainer > button:nth-child(4)').css('opacity', $('.FABContainer > button:nth-child(4)').css('opacity'))
$('.FABContainer > button:nth-child(5)').css('opacity', $('.FABContainer > button:nth-child(5)').css('opacity'))
$('.FABContainer > button:nth-child(6)').css('opacity', $('.FABContainer > button:nth-child(6)').css('opacity'))
$('.FABContainer > button:nth-child(7)').css('opacity', $('.FABContainer > button:nth-child(7)').css('opacity'))
$('.FABContainer').removeClass('closedFAB')
$('.FABContainer').addClass('openedFAB')
@toggleLeftHamburderIcon = () ->
if $('.leftHamburgerButton').hasClass('hamburgerToggledOn')
$('.leftHamburgerButton').removeClass('hamburgerToggledOn')
else
$('.leftHamburgerButton').addClass('hamburgerToggledOn')
@toggleRightHamburderIcon = () ->
if $('.rightHamburgerButton').hasClass('hamburgerToggledOn')
$('.rightHamburgerButton').removeClass('hamburgerToggledOn')
else
$('.rightHamburgerButton').addClass('hamburgerToggledOn')
@toggleUserlistMenu = () ->
if $('.userlistMenu').hasClass('menuOut')
$('.userlistMenu').removeClass('menuOut')
else
$('.userlistMenu').addClass('menuOut')
@toggleSettingsMenu = () ->
if $('.settingsMenu').hasClass('menuOut')
$('.settingsMenu').removeClass('menuOut')
else
$('.settingsMenu').addClass('menuOut')

88
bigbluebutton-html5/app/client/main.coffee
View File

@ -56,22 +56,22 @@ Template.header.events
if isLandscape() or isLandscapeMobile()
toggleUsersList()
else
if $('.sl-right-drawer').hasClass('sl-right-drawer-out')
toggleRightDrawer()
toggleRightArrowClockwise()
if $('.settingsMenu').hasClass('menuOut')
toggleSettingsMenu()
toggleRightHamburderIcon()
else
toggleShield()
toggleLeftDrawer()
toggleLeftArrowClockwise()
toggleUserlistMenu()
toggleLeftHamburderIcon()
"click .toggleMenuButton": (event) ->
if $('.sl-left-drawer').hasClass('sl-left-drawer-out')
toggleLeftDrawer()
toggleLeftArrowClockwise()
if $('.userlistMenu').hasClass('menuOut')
toggleUserlistMenu()
toggleLeftHamburderIcon()
else
toggleShield()
toggleRightDrawer()
toggleRightArrowClockwise()
toggleSettingsMenu()
toggleRightHamburderIcon()
"click .btn": (event) ->
$(".ui-tooltip").hide()
@ -79,8 +79,8 @@ Template.header.events
Template.menu.events
'click .slideButton': (event) ->
toggleShield()
toggleRightDrawer()
toggleRightArrowClockwise()
toggleSettingsMenu()
toggleRightHamburderIcon()
$('.slideButton').blur()
'click .toggleChatButton': (event) ->
@ -191,16 +191,16 @@ Template.main.gestures
if parseInt($('.left-drawer').css('transform').split(',')[4]) < leftDrawerWidth / 2
$('.shield').removeClass('animatedShield')
$('.shield').css('opacity', '')
$('.left-drawer').removeClass('sl-left-drawer-out')
$('.left-drawer').removeClass('menuOut')
$('.left-drawer').css('transform', '')
$('.toggleUserlistButton').removeClass('sl-toggled-on')
$('.toggleUserlistButton').removeClass('hamburgerToggledOn')
$('.shield').removeClass('darken') # in case it was opened by clicking a button
else
$('.left-drawer').css('transform', 'translateX(' + leftDrawerWidth + 'px)')
$('.shield').css('opacity', 0.5)
$('.left-drawer').addClass('sl-left-drawer-out')
$('.left-drawer').addClass('menuOut')
$('.left-drawer').css('transform', '')
$('.toggleUserlistButton').addClass('sl-toggled-on')
$('.toggleUserlistButton').addClass('hamburgerToggledOn')
if panIsValid and
menuPanned is 'right' and
@ -210,24 +210,22 @@ Template.main.gestures
$('.shield').removeClass('animatedShield')
$('.shield').css('opacity', '')
$('.right-drawer').css('transform', 'translateX(' + screenWidth + 'px)')
$('.right-drawer').removeClass('sl-right-drawer-out')
$('.right-drawer').removeClass('menuOut')
$('.right-drawer').css('transform', '')
$('.toggleMenuButton').removeClass('sl-toggled-on')
$('.toggleMenuButton').removeClass('hamburgerToggledOn')
$('.shield').removeClass('darken') # in case it was opened by clicking a button
else
$('.shield').css('opacity', 0.5)
$('.right-drawer').css('transform', 'translateX(' + (screenWidth - $('.right-drawer').width()) + 'px)')
$('.right-drawer').addClass('sl-right-drawer-out')
$('.right-drawer').addClass('menuOut')
$('.right-drawer').css('transform', '')
$('.toggleMenuButton').addClass('sl-toggled-on')
$('.toggleMenuButton').addClass('hamburgerToggledOn')
$('.left-drawer').addClass('sl-left-drawer')
$('.sl-left-drawer').removeClass('left-drawer')
$('.sl-left-drawer').addClass('sl-left-drawer-content-delay')
$('.left-drawer').addClass('userlistMenu')
$('.userlistMenu').removeClass('left-drawer')
$('.right-drawer').addClass('sl-right-drawer')
$('.sl-right-drawer').removeClass('right-drawer')
$('.sl-right-drawer').addClass('sl-right-drawer-content-delay')
$('.right-drawer').addClass('settingsMenu')
$('.settingsMenu').removeClass('right-drawer')
'panright #container, panleft #container': (event, template) ->
if isPortraitMobile() and isPanHorizontal(event)
@ -265,26 +263,24 @@ Template.main.gestures
setInSession 'eventType', event.type
if getInSession('menuPanned') is 'left'
if $('.sl-left-drawer').css('transform') isnt 'none' # menu is already transformed
setInSession 'initTransform', parseInt($('.sl-left-drawer').css('transform').split(',')[4]) # translateX value
else if $('.sl-left-drawer').hasClass('sl-left-drawer-out')
setInSession 'initTransform', $('.sl-left-drawer').width()
if $('.userlistMenu').css('transform') isnt 'none' # menu is already transformed
setInSession 'initTransform', parseInt($('.userlistMenu').css('transform').split(',')[4]) # translateX value
else if $('.userlistMenu').hasClass('menuOut')
setInSession 'initTransform', $('.userlistMenu').width()
else
setInSession 'initTransform', 0
$('.sl-left-drawer').addClass('left-drawer')
$('.left-drawer').removeClass('sl-left-drawer') # to prevent animations from Sled library
$('.left-drawer').removeClass('sl-left-drawer-content-delay') # makes the menu content movable too
$('.userlistMenu').addClass('left-drawer')
$('.left-drawer').removeClass('userlistMenu') # to prevent animations from Sled library
else if getInSession('menuPanned') is 'right'
if $('.sl-right-drawer').css('transform') isnt 'none' # menu is already transformed
setInSession 'initTransform', parseInt($('.sl-right-drawer').css('transform').split(',')[4]) # translateX value
else if $('.sl-right-drawer').hasClass('sl-right-drawer-out')
setInSession 'initTransform', $('.sl-right-drawer').width()
if $('.settingsMenu').css('transform') isnt 'none' # menu is already transformed
setInSession 'initTransform', parseInt($('.settingsMenu').css('transform').split(',')[4]) # translateX value
else if $('.settingsMenu').hasClass('menuOut')
setInSession 'initTransform', $('.settingsMenu').width()
else
setInSession 'initTransform', 0
$('.sl-right-drawer').addClass('right-drawer')
$('.right-drawer').removeClass('sl-right-drawer') # to prevent animations from Sled library
$('.right-drawer').removeClass('sl-right-drawer-content-delay') # makes the menu content movable too
$('.settingsMenu').addClass('right-drawer')
$('.right-drawer').removeClass('settingsMenu') # to prevent animations from Sled library
initTransformValue = getInSession('initTransform')
panIsValid = getInSession('panIsValid')
@ -299,9 +295,9 @@ Template.main.gestures
initTransformValue + event.deltaX >= 0 and
initTransformValue + event.deltaX <= leftDrawerWidth
if $('.sl-right-drawer').hasClass('sl-right-drawer-out')
toggleRightDrawer()
toggleRightArrowClockwise()
if $('.settingsMenu').hasClass('menuOut')
toggleSettingsMenu()
toggleRightHamburderIcon()
$('.left-drawer').css('transform', 'translateX(' + (initTransformValue + event.deltaX) + 'px)')
@ -316,9 +312,9 @@ Template.main.gestures
initTransformValue + event.deltaX >= screenWidth - rightDrawerWidth and
initTransformValue + event.deltaX <= screenWidth
if $('.sl-left-drawer').hasClass('sl-left-drawer-out')
toggleLeftDrawer()
toggleLeftArrowClockwise()
if $('.userlistMenu').hasClass('menuOut')
toggleUserlistMenu()
toggleLeftHamburderIcon()
$('.right-drawer').css('transform', 'translateX(' + (initTransformValue + event.deltaX) + 'px)')

51
bigbluebutton-html5/app/client/main.html
View File

@ -1,6 +1,6 @@
<template name="header">
<nav id="navbar" class="myNavbar top-bar" role="navigation">
{{> makeButton btn_class="btn toggleUserlistButton navbarButton sl-hamburger sl-ham-la-cw sl-portrait-mobile sl-portrait-keyboard" rel="tooltip" title="Toggle Userlist" span=true notification="all_chats"}}
{{> makeButton btn_class="btn toggleUserlistButton navbarButton leftHamburgerButton" rel="tooltip" title="Toggle Userlist" span=true notification="all_chats"}}
{{#if amIInAudio}}
<div class="audioNavbarSection">
@ -37,7 +37,7 @@
{{> makeButton id="logout" btn_class="signOutIcon navbarButton" i_class="ion-log-out" rel="tooltip"
title="Logout"}}
</div>
{{> makeButton btn_class="btn toggleMenuButton navbarButton sl-hamburger sl-ham-ra-cw sl-portrait-mobile sl-portrait-keyboard" rel="tooltip" title="Toggle Menu" span=true}}
{{> makeButton btn_class="btn toggleMenuButton navbarButton rightHamburgerButton" rel="tooltip" title="Toggle Menu" span=true}}
</nav>
</template>
@ -50,10 +50,10 @@
{{#if isDisconnected}}
{{>status}}
{{else}}
<div class="sl-left-drawer sl-left-drawer-content-delay sl-portrait-mobile sl-portrait-keyboard">
<div class="userlistMenu">
{{> usersList id="users" name="usersList"}}
</div>
<div class="sl-right-drawer sl-portrait-mobile sl-portrait-keyboard">
<div class="settingsMenu">
<div class="titleArea"></div>
{{> menu id="menu"}}
</div>
@ -92,3 +92,46 @@
{{> makeButton btn_class="slideButton signOutIcon" i_class="ion-log-out" label="Log out"}}
</div>
</template>
<template name="icon">
<svg width="{{size}}" height="{{size}}" viewBox="0 0 50 50">
{{#if equals name "happy-face"}}
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="m18 30 C 21 33, 29 33, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "neutral-face"}}
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="m18 30 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "confused-face"}}
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="M18 30 C 20 28, 22 28, 25 30 S 30 32, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "sad-face"}}
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="m18 30 C 21 27, 29 27, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "clock"}}
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<path d="m25 25 l 0 -8" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
<path d="m25 25 l 5 5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "plus"}}
<path d="m25 18 l 0 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
<path d="m18 25 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
</svg>
</template>

349
bigbluebutton-html5/app/client/stylesheets/style.less
View File

@ -7,6 +7,10 @@ body {
color: extract(@darkGrey, 1);
left: 0;
right: 0;
// makes text selectable in Chrome (overrides inline style)
-webkit-user-select: all !important;
@media @landscape {
height: 100%;
position: absolute;
@ -36,7 +40,7 @@ body {
}
@media @mobile-portrait {
.sl-toggled-on .unreadChat {
.hamburgerToggledOn .unreadChat {
display: none;
}
}
@ -745,27 +749,27 @@ body {
/* Sliding Menu */
@media @desktop-portrait {
.sl-left-drawer {
.userlistMenu {
z-index: 1000;
position: fixed;
left: -400px;
width: 400px !important; // overrides any width value set manually in landscape
&.sl-left-drawer-out {
&.menuOut {
left: 0px;
}
}
.sl-right-drawer {
.settingsMenu {
z-index: 1000;
position: fixed;
right: -400px;
width: 400px;
&.sl-right-drawer-out {
&.menuOut {
right: 0px;
}
}
}
.sl-left-drawer {
.userlistMenu {
height: 100%;
@media @tablet-landscape {
width: 200px;
@ -776,11 +780,193 @@ body {
@media @desktop-landscape {
width: 300px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
z-index: 1000;
position: fixed;
left: -60vw;
width: 60vw;
transition: transform 0.3s linear;
-moz-transition: transform 0.3s linear;
-webkit-transition: transform 0.3s linear;
-ms-transition: transform 0.3s linear;
-o-transition: transform 0.3s linear;
.userItem {
transition: transform 0.7s;
-moz-transition: -moz-transform 0.7s;
-webkit-transition: -webkit-transform 0.7s;
-o-transition: -o-transform 0.7s;
transform: translateX(-60vw);
-moz-transform: translateX(-60vw);
-webkit-transform: translateX(-60vw);
-ms-transform: translateX(-60vw);
-o-transform: translateX(-60vw);
}
&.menuOut {
transform: translateX(60vw);
-moz-transform: translateX(60vw);
-webkit-transform: translateX(60vw);
-ms-transform: translateX(60vw);
-o-transform: translateX(60vw);
.userItem {
transform: translateX(0);
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
.userItem:nth-child(1) {
transition-delay: 50ms;
-moz-transition-delay: 50ms;
-webkit-transition-delay: 50ms;
-o-transition-delay: 50ms;
}
.userItem:nth-child(2) {
transition-delay: 100ms;
-moz-transition-delay: 100ms;
-webkit-transition-delay: 100ms;
-o-transition-delay: 100ms;
}
.userItem:nth-child(3) {
transition-delay: 150ms;
-moz-transition-delay: 150ms;
-webkit-transition-delay: 150ms;
-o-transition-delay: 150ms;
}
.userItem:nth-child(4) {
transition-delay: 200ms;
-moz-transition-delay: 200ms;
-webkit-transition-delay: 200ms;
-o-transition-delay: 200ms;
}
.userItem:nth-child(5) {
transition-delay: 250ms;
-moz-transition-delay: 250ms;
-webkit-transition-delay: 250ms;
-o-transition-delay: 250ms;
}
.userItem:nth-child(6) {
transition-delay: 300ms;
-moz-transition-delay: 300ms;
-webkit-transition-delay: 300ms;
-o-transition-delay: 300ms;
}
.userItem:nth-child(7) {
transition-delay: 350ms;
-moz-transition-delay: 350ms;
-webkit-transition-delay: 350ms;
-o-transition-delay: 350ms;
}
.userItem:nth-child(8) {
transition-delay: 400ms;
-moz-transition-delay: 400ms;
-webkit-transition-delay: 400ms;
-o-transition-delay: 400ms;
}
.userItem:nth-child(9) {
transition-delay: 450ms;
-moz-transition-delay: 450ms;
-webkit-transition-delay: 450ms;
-o-transition-delay: 450ms;
}
.userItem:nth-child(10) {
transition-delay: 500ms;
-moz-transition-delay: 500ms;
-webkit-transition-delay: 500ms;
-o-transition-delay: 500ms;
}
.userItem:nth-child(11) {
transition-delay: 550ms;
-moz-transition-delay: 550ms;
-webkit-transition-delay: 550ms;
-o-transition-delay: 550ms;
}
.userItem:nth-child(12) {
transition-delay: 600ms;
-moz-transition-delay: 600ms;
-webkit-transition-delay: 600ms;
-o-transition-delay: 600ms;
}
.userItem:nth-child(13) {
transition-delay: 650ms;
-moz-transition-delay: 650ms;
-webkit-transition-delay: 650ms;
-o-transition-delay: 650ms;
}
.userItem:nth-child(14) {
transition-delay: 700ms;
-moz-transition-delay: 700ms;
-webkit-transition-delay: 700ms;
-o-transition-delay: 700ms;
}
.userItem:nth-child(15) {
transition-delay: 750ms;
-moz-transition-delay: 750ms;
-webkit-transition-delay: 750ms;
-o-transition-delay: 750ms;
}
.userItem:nth-child(16) {
transition-delay: 800ms;
-moz-transition-delay: 800ms;
-webkit-transition-delay: 800ms;
-o-transition-delay: 800ms;
}
.userItem:nth-child(17) {
transition-delay: 850ms;
-moz-transition-delay: 850ms;
-webkit-transition-delay: 850ms;
-o-transition-delay: 850ms;
}
.userItem:nth-child(18) {
transition-delay: 900ms;
-moz-transition-delay: 900ms;
-webkit-transition-delay: 900ms;
-o-transition-delay: 900ms;
}
.userItem:nth-child(19) {
transition-delay: 950ms;
-moz-transition-delay: 950ms;
-webkit-transition-delay: 950ms;
-o-transition-delay: 950ms;
}
.userItem:nth-child(20) {
transition-delay: 1000ms;
-moz-transition-delay: 1000ms;
-webkit-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
}
}
}
}
.sl-right-drawer {
.settingsMenu {
height: 100%;
.linear-gradient(rgb(65,68,77), rgb(58,60,69));
@media @mobile-portrait-with-keyboard, @mobile-portrait {
z-index: 1000;
position: fixed;
transform: translateX(100vw);
width: 60vw;
transition: transform 0.3s linear;
-moz-transition: transform 0.3s linear;
-webkit-transition: transform 0.3s linear;
-ms-transition: transform 0.3s linear;
-o-transition: transform 0.3s linear;
&.menuOut {
transform: translate(40vw, 0);
-moz-transform: translate(40vw, 0);
-webkit-transform: translate(40vw, 0);
-ms-transform: translate(40vw, 0);
-o-transform: translate(40vw, 0);
}
}
}
.hiddenInLandscape {
@ -850,3 +1036,152 @@ body {
.linear-gradient(rgb(65,68,77), rgb(58,60,69));
width: 60vw;
}
.leftHamburgerButton, .rightHamburgerButton {
span {
&::before {
top: -225%;
}
&::before, &::after {
background-color: inherit;
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
}
&::after {
bottom: -225%;
}
background-color: inherit;
height: 10%;
position: absolute;
left: 15%;
right: 15%;
top: 45%;
}
}
.leftHamburgerButton {
@media @mobile-portrait-with-keyboard, @mobile-portrait {
span {
&::before {
transform-origin: top right;
-moz-transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transition: width 0.3s, transform 0.3s, top 0.3s;
-moz-transition: width 0.3s, -moz-transform 0.3s, top 0.3s;
-webkit-transition: width 0.3s, -webkit-transform 0.3s, top 0.3s;
-o-transition: width 0.3s, -o-transform 0.3s, top 0.3s;
}
&::after {
transform-origin: bottom right;
-moz-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transition: width 0.3s, transform 0.3s, bottom 0.3s;
-moz-transition: width 0.3s, -moz-transform 0.3s, bottom 0.3s;
-webkit-transition: width 0.3s, -webkit-transform 0.3s, bottom 0.3s;
-ms-transition: width 0.3s, -ms-transform 0.3s, bottom 0.3s;
-o-transition: width 0.3s, -o-transform 0.3s, bottom 0.3s;
}
transition: transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
-o-transition: -o-transform 0.3s;
}
&.hamburgerToggledOn span {
&::before {
transform: translateY(50%) translateX(95%) rotate(45deg);
-moz-transform: translateY(50%) translateX(95%) rotate(45deg);
-webkit-transform: translateY(50%) translateX(95%) rotate(45deg);
-ms-transform: translateY(50%) translateX(95%) rotate(45deg);
-o-transform: translateY(50%) translateX(95%) rotate(45deg);
top: 0px;
}
&::before, &::after {
width: 55%;
}
&::after {
transform: translateY(-50%) translateX(95%) rotate(-45deg);
-moz-transform: translateY(-50%) translateX(95%) rotate(-45deg);
-webkit-transform: translateY(-50%) translateX(95%) rotate(-45deg);
-ms-transform: translateY(-50%) translateX(95%) rotate(-45deg);
-o-transform: translateY(-50%) translateX(95%) rotate(-45deg);
bottom: 0px;
}
transform: rotate(0.5turn);
-moz-transform: rotate(0.5turn);
-webkit-transform: rotate(0.5turn);
-ms-transform: rotate(0.5turn);
-o-transform: rotate(0.5turn);
}
}
}
.rightHamburgerButton {
@media @mobile-portrait-with-keyboard, @mobile-portrait {
span {
&::before {
transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transition: width 0.3s, transform 0.3s, top 0.3s;
-moz-transition: width 0.3s, -moz-transform 0.3s, top 0.3s;
-webkit-transition: width 0.3s, -webkit-transform 0.3s, top 0.3s;
-o-transition: width 0.3s, -o-transform 0.3s, top 0.3s;
}
&::after {
transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
-moz-transition: -moz-transform 0.3s, width 0.3s, bottom 0.3s;
-webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
-ms-transition: -ms-transform 0.3s, width 0.3s, bottom 0.3s;
-o-transition: -o-transform 0.3s, width 0.3s, bottom 0.3s;
}
transition: transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
-o-transition: -o-transform 0.3s;
}
&.hamburgerToggledOn span {
&::before {
transform: translateY(53%) translateX(-20%) rotate(-45deg);
-moz-transform: translateY(53%) translateX(-20%) rotate(-45deg);
-webkit-transform: translateY(53%) translateX(-20%) rotate(-45deg);
-ms-transform: translateY(53%) translateX(-20%) rotate(-45deg);
-o-transform: translateY(53%) translateX(-20%) rotate(-45deg);
top: 0;
}
&::before, &::after {
width: 55%;
}
&::after {
transform: translateY(-53%) translateX(-20%) rotate(45deg);
-moz-transform: translateY(-53%) translateX(-20%) rotate(45deg);
-webkit-transform: translateY(-53%) translateX(-20%) rotate(45deg);
-ms-transform: translateY(-53%) translateX(-20%) rotate(45deg);
-o-transform: translateY(-53%) translateX(-20%) rotate(45deg);
bottom: 0;
}
transform: rotate(0.5turn);
-moz-transform: rotate(0.5turn);
-webkit-transform: rotate(0.5turn);
-ms-transform: rotate(0.5turn);
-o-transform: rotate(0.5turn);
}
}
}

241
bigbluebutton-html5/app/client/stylesheets/whiteboard.less
View File

@ -27,9 +27,6 @@
#whiteboard-paper {
height: 100%;
}
.raiseHandButton {
display: none;
}
}
&:-moz-full-screen {
width: 100%;
@ -41,9 +38,6 @@
#whiteboard-paper {
height: 100%;
}
.raiseHandButton {
display: none;
}
}
&:fullscreen {
width: 100%;
@ -55,9 +49,6 @@
#whiteboard-paper {
height: 100%;
}
.raiseHandButton {
display: none;
}
}
}
@ -191,29 +182,26 @@
}
.whiteboardFullscreenButton {
@media @desktop-landscape {
@media @desktop-landscape, @phone-landscape, @tablet-landscape,
@phone-portrait-with-keyboard, @phone-portrait, @desktop-portrait {
height: 50px;
width: 50px;
}
@media @desktop-landscape {
top: 5px;
right: 5px;
}
@media @phone-landscape {
height: 45px;
width: 45px;
top: 5px;
right: 5px;
top: 4px;
right: 4px;
}
@media @tablet-landscape {
height: 50px;
width: 50px;
top: 5px;
right: 5px;
}
@media @phone-portrait-with-keyboard, @phone-portrait {
height: 50px;
width: 50px;
top: 2px;
right: 2px;
top: 4px;
right: 4px;
}
@media @tablet-portrait-with-keyboard, @tablet-portrait {
height: 53px;
@ -222,52 +210,11 @@
right: 5px;
}
@media @desktop-portrait {
height: 50px;
width: 50px;
top: 5px;
right: 5px;
}
}
.raiseHandButton {
@media @desktop-landscape {
height: 40px;
width: 40px;
bottom: 5px;
right: 5px;
}
@media @phone-landscape {
height: 45px;
width: 45px;
bottom: 5px;
right: 5px;
}
@media @tablet-landscape {
height: 50px;
width: 50px;
bottom: 5px;
right: 5px;
}
@media @phone-portrait-with-keyboard, @phone-portrait {
height: 50px;
width: 50px;
bottom: 2px;
right: 2px;
}
@media @tablet-portrait-with-keyboard, @tablet-portrait {
height: 53px;
width: 53px;
bottom: 5px;
right: 5px;
}
@media @desktop-portrait {
height: 40px;
width: 40px;
bottom: 5px;
right: 5px;
}
}
.exitFullscreenButton {
top: 10px;
right: 10px;
@ -324,18 +271,182 @@
}
}
// Emojis FAB
.activeEmojiButton {
background-color: #34495E;
}
.sl-fab-trigger, .inactiveEmojiButton {
.FABTriggerButton, .inactiveEmojiButton {
background-color: #3896D3;
}
.sl-fab-btn:hover {
.FABTriggerButton:hover {
background-color: #3896D3;
}
.FABTriggerButton {
position: absolute;
right: 4px;
bottom: 4px;
@media @desktop-landscape, @phone-landscape, @tablet-landscape,
@phone-portrait-with-keyboard, @phone-portrait, @desktop-portrait {
height: 50px;
width: 50px;
}
@media @tablet-portrait-with-keyboard, @tablet-portrait {
height: 53px;
width: 53px;
}
}
.openedFAB {
.FABTriggerButton {
i {
opacity: 0.5;
}
}
button:nth-child(2), button:nth-child(3) {
animation: increaseOpacity 0.15s forwards;
}
button:nth-child(4), button:nth-child(5) {
animation: increaseOpacity 0.15s forwards;
animation-delay: 0.075s;
}
button:nth-child(6), button:nth-child(7) {
animation: increaseOpacity 0.15s forwards;
animation-delay: 0.15s;
}
}
.closedFAB {
button:nth-child(2), button:nth-child(3) {
animation: decreaseOpacity 0.15s forwards;
animation-delay: 0.15s;
}
button:nth-child(4), button:nth-child(5) {
animation: decreaseOpacity 0.15s forwards;
animation-delay: 0.075s;
}
button:nth-child(6), button:nth-child(7) {
animation: decreaseOpacity 0.15s forwards;
}
}
.FABContainer > button:nth-child(n + 2):hover {
background-color: #34495E;
}
.sl-fab-trigger:hover {
background-color: #3896D3;
.FABContainer {
button {
padding: 0;
margin: 0;
font-size: 30px;
border-radius: 50%;
&:focus {
outline:0;
}
}
& > button:nth-child(n + 2) {
position: absolute;
height: 50px;
width: 50px;
opacity: 0;
}
& > button:nth-child(2) {
right: 70px;
bottom: 10px;
}
& > button:nth-child(3) {
right: 70px;
bottom: 65px;
}
& > button:nth-child(4) {
right: 130px;
bottom: 10px;
}
& > button:nth-child(5) {
right: 130px;
bottom: 65px;
}
& > button:nth-child(6) {
right: 190px;
bottom: 10px;
}
& > button:nth-child(7) {
right: 190px;
bottom: 65px;
}
}
@keyframes increaseOpacity {
0% {
opacity: 0;
}
5% {
opacity: 0.05;
}
10% {
opacity: 0.1;
}
15% {
opacity: 0.15;
}
20% {
opacity: 0.2;
}
25% {
opacity: 0.25;
}
30% {
opacity: 0.3;
}
35% {
opacity: 0.35;
}
40% {
opacity: 0.4;
}
45% {
opacity: 0.45;
}
50% {
opacity: 0.5;
}
55% {
opacity: 0.55;
}
60% {
opacity: 0.6;
}
65% {
opacity: 0.65;
}
70% {
opacity: 0.7;
}
75% {
opacity: 0.75;
}
80% {
opacity: 0.8;
}
85% {
opacity: 0.85;
}
90% {
opacity: 0.9;
}
95% {
opacity: 0.95;
}
100% {
opacity: 1;
}
}
@keyframes decreaseOpacity {
100% {
opacity: 0;
}
}

4
bigbluebutton-html5/app/client/views/users/user_item.coffee
View File

@ -32,8 +32,8 @@ Template.usernameEntry.events
else
setInSession "inChatWith", userIdSelected
if isPortrait() or isPortraitMobile()
toggleLeftDrawer()
toggleLeftArrowClockwise()
toggleUserlistMenu()
toggleLeftHamburderIcon()
toggleShield()
setTimeout () -> # waits until the end of execution queue
$("#newMessageInput").focus()

10
bigbluebutton-html5/app/client/views/users/user_item.html
View File

@ -59,19 +59,19 @@
<template name="usernameEntry">
<div class="status">
{{#if equals user.emoji_status "happy"}}
{{> slIcon name="happy-face" size="25"}}
{{> icon name="happy-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "neutral"}}
{{> slIcon name="neutral-face" size="25"}}
{{> icon name="neutral-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "confused"}}
{{> slIcon name="confused-face" size="25"}}
{{> icon name="confused-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "sad"}}
{{> slIcon name="sad-face" size="25"}}
{{> icon name="sad-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "away"}}
{{> slIcon name="clock" size="25"}}
{{> icon name="clock" size="25"}}
{{else}}
{{#if equals user.emoji_status "raiseHand"}}
<span rel="tooltip" data-placement="bottom" title="Lower your hand">

4
bigbluebutton-html5/app/client/views/users/user_list.coffee
View File

@ -6,7 +6,7 @@ Template.usersList.helpers
# do not display the label if there are just a few users
Template.usersList.rendered = ->
$('.sl-left-drawer').resizable
$('.userlistMenu').resizable
handles: 'e'
maxWidth: 600
minWidth: 200
@ -19,4 +19,4 @@ Template.usersList.rendered = ->
comp.stop()
if isPhone()
$('.sl-left-drawer').addClass('hiddenInLandscape')
$('.userlistMenu').addClass('hiddenInLandscape')

2
bigbluebutton-html5/app/client/views/users/users_list.html
View File

@ -6,7 +6,7 @@
<div id="user-contents">
<div class="userlist ScrollableWindowY">
{{#each getUsersInMeeting}}
<div id="content" class="sl-left-drawer-item">{{>userItem}}</div>
<div id="content" class="userItem">{{>userItem}}</div>
{{/each}}
</div>
</div>

40
bigbluebutton-html5/app/client/views/whiteboard/whiteboard.coffee
View File

@ -33,57 +33,51 @@ Template.whiteboard.events
else if document.webkitExitFullscreen
document.webkitExitFullscreen()
'click .raiseHand': (event) ->
BBB.raiseHand(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'))
'click .lowerHand': (event) ->
BBB.lowerHand(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'))
'click .sadEmojiButton.inactiveEmojiButton': (event) ->
if $('.sadEmojiButton').css('opacity') is '1'
BBB.setEmojiStatus(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'), "sad")
$('.sl-fab-trigger').blur()
toggleFAB()
$('.FABTriggerButton').blur()
toggleEmojisFAB()
'click .happyEmojiButton.inactiveEmojiButton': (event) ->
if $('.happyEmojiButton').css('opacity') is '1'
BBB.setEmojiStatus(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'), "happy")
$('.sl-fab-trigger').blur()
toggleFAB()
$('.FABTriggerButton').blur()
toggleEmojisFAB()
'click .confusedEmojiButton.inactiveEmojiButton': (event) ->
if $('.confusedEmojiButton').css('opacity') is '1'
BBB.setEmojiStatus(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'), "confused")
$('.sl-fab-trigger').blur()
toggleFAB()
$('.FABTriggerButton').blur()
toggleEmojisFAB()
'click .neutralEmojiButton.inactiveEmojiButton': (event) ->
if $('.neutralEmojiButton').css('opacity') is '1'
BBB.setEmojiStatus(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'), "neutral")
$('.sl-fab-trigger').blur()
toggleFAB()
$('.FABTriggerButton').blur()
toggleEmojisFAB()
'click .awayEmojiButton.inactiveEmojiButton': (event) ->
if $('.awayEmojiButton').css('opacity') is '1'
BBB.setEmojiStatus(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'), "away")
$('.sl-fab-trigger').blur()
toggleFAB()
$('.FABTriggerButton').blur()
toggleEmojisFAB()
'click .raiseHandEmojiButton.inactiveEmojiButton': (event) ->
if $('.raiseHandEmojiButton').css('opacity') is '1'
BBB.setEmojiStatus(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'), "raiseHand")
$('.sl-fab-trigger').blur()
toggleFAB()
$('.FABTriggerButton').blur()
toggleEmojisFAB()
'click .activeEmojiButton': (event) ->
if $('.activeEmojiButton').css('opacity') is '1'
BBB.setEmojiStatus(BBB.getMeetingId(), getInSession('userId'), getInSession('userId'), getInSession('authToken'), "none")
$('.sl-fab-trigger').blur()
toggleFAB()
$('.FABTriggerButton').blur()
toggleEmojisFAB()
'click .sl-fab-trigger': (event) ->
$('.sl-fab-trigger').blur()
toggleFAB()
'click .FABTriggerButton': (event) ->
$('.FABTriggerButton').blur()
toggleEmojisFAB()
Template.presenterBottomControllers.events
'click .previousSlide':(event) ->

28
bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html
View File

@ -6,26 +6,26 @@
<div id="whiteboard-container" class="{{whiteboardSize}}">
<div id="whiteboard-paper">
</div>
<div class="sl-fab-container sl-left-hr-dbl-fab">
<button type="submit" class="sl-fab-trigger">
<i class="ion-plus-round"></i>
<div class="FABContainer">
<button type="submit" class="FABTriggerButton">
<i class="ion-android-hand"></i>
</button>
<button type="submit" class="sl-fab-btn sadEmojiButton {{#if equals getCurrentUserEmojiStatus 'sad'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> slIcon name="sad-face" size="50"}}
<button type="submit" class="sadEmojiButton {{#if equals getCurrentUserEmojiStatus 'sad'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="sad-face" size="50"}}
</button>
<button type="submit" class="sl-fab-btn happyEmojiButton {{#if equals getCurrentUserEmojiStatus 'happy'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> slIcon name="happy-face" size="50"}}
<button type="submit" class="happyEmojiButton {{#if equals getCurrentUserEmojiStatus 'happy'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="happy-face" size="50"}}
</button>
<button type="submit" class="sl-fab-btn confusedEmojiButton {{#if equals getCurrentUserEmojiStatus 'confused'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> slIcon name="confused-face" size="50"}}
<button type="submit" class="confusedEmojiButton {{#if equals getCurrentUserEmojiStatus 'confused'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="confused-face" size="50"}}
</button>
<button type="submit" class="sl-fab-btn neutralEmojiButton {{#if equals getCurrentUserEmojiStatus 'neutral'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> slIcon name="neutral-face" size="50"}}
<button type="submit" class="neutralEmojiButton {{#if equals getCurrentUserEmojiStatus 'neutral'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="neutral-face" size="50"}}
</button>
<button type="submit" class="sl-fab-btn awayEmojiButton {{#if equals getCurrentUserEmojiStatus 'away'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> slIcon name="clock" size="50"}}
<button type="submit" class="awayEmojiButton {{#if equals getCurrentUserEmojiStatus 'away'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="clock" size="50"}}
</button>
<button type="submit" class="sl-fab-btn raiseHandEmojiButton {{#if equals getCurrentUserEmojiStatus 'raiseHand'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
<button type="submit" class="raiseHandEmojiButton {{#if equals getCurrentUserEmojiStatus 'raiseHand'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
<i class="ion-android-hand"></i>
</button>
</div>