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

Merge pull request #2876 from OZhurbenko/modal-improvements

Browse Source 
Data Handling and Modal Improvements
This commit is contained in:
Chad Pilkey 2015-11-05 13:01:23 -05:00
commit 0e3e902e5a
11 changed files with 241 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -334,7 +334,7 @@ Handlebars.registerHelper "getPollQuestions", ->
$('.shield').removeClass('animatedShield')
@removeFullscreenStyles = ->
$('#whiteboard-paper').removeClass('verticallyCentered')
$('#whiteboard-paper').removeClass('vertically-centered')
$('#chat').removeClass('invisible')
$('#users').removeClass('invisible')
$('#navbar').removeClass('invisible')
@ -364,7 +364,7 @@ Handlebars.registerHelper "getPollQuestions", ->
$('.fullscreenButton').addClass('exitFullscreenButton')
$('.fullscreenButton i').removeClass('ion-arrow-expand')
$('.fullscreenButton i').addClass('ion-arrow-shrink')
$('#whiteboard-paper').addClass('verticallyCentered')
$('#whiteboard-paper').addClass('vertically-centered')
$('#whiteboard').bind 'webkitfullscreenchange', (e) ->
if document.webkitFullscreenElement is null
$('#whiteboard').unbind('webkitfullscreenchange')

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

@ -146,7 +146,6 @@ Template.main.events
closeMenus()
'click .settingsIcon': (event) ->
setInSession("tempFontSize", getInSession("messageFontSize"))
$("#settingsModal").foundation('reveal', 'open');
'click .signOutIcon': (event) ->

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

@ -93,6 +93,19 @@
</div>
</template>
<template name="loading">
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01"></div>
<div class="f_circleG" id="frotateG_02"></div>
<div class="f_circleG" id="frotateG_03"></div>
<div class="f_circleG" id="frotateG_04"></div>
<div class="f_circleG" id="frotateG_05"></div>
<div class="f_circleG" id="frotateG_06"></div>
<div class="f_circleG" id="frotateG_07"></div>
<div class="f_circleG" id="frotateG_08"></div>
</div>
</template>
<template name="icon">
<svg width="{{size}}" height="{{size}}" viewBox="0 0 50 50">
{{#if equals name "happy-face"}}

6
bigbluebutton-html5/app/client/stylesheets/mixins.less
View File

@ -10,9 +10,3 @@
background: -webkit-linear-gradient(@color1, @color2); /* For Safari 5.1 to 6.0 */
background: linear-gradient(@color1, @color2); /* Standard syntax (must be last) */
}
.vertically-centered {
position: relative;
top: 50%;
transform: translateY(-50%);
}

57
bigbluebutton-html5/app/client/stylesheets/modals.less
View File

@ -76,37 +76,9 @@
height: 55px;
}
border-bottom: 1px solid grey;
p:first-child {
p {
text-align: center;
}
p:nth-child(2) {
float: right;
text-align: right;
.closeSettings {
@media @desktop-portrait, @desktop-landscape {
font-size: 30px;
}
@media @phone-landscape {
font-size: 30px;
top: 2px;
right: 10px;
}
@media @tablet-landscape {
font-size: 33px;
right: 15px;
}
@media @phone-portrait-with-keyboard, @phone-portrait {
font-size: 45px;
top: 2px;
right: 10px;
}
@media @tablet-portrait-with-keyboard, @tablet-portrait {
font-size: 350%;
top: 0;
right: 20px;
}
}
}
}
.bottomBar {
border-top: 1px solid grey;
@ -126,29 +98,6 @@
@media @desktop-portrait, @desktop-landscape {
height: 55px;
}
.closeSettings {
@media @desktop-portrait, @desktop-landscape {
font-size: 16px;
}
@media @phone-landscape {
font-size: 16px;
margin-right: 10px;
}
@media @tablet-landscape {
font-size: 20px;
margin-right: 5px;
}
@media @phone-portrait-with-keyboard, @phone-portrait {
font-size: 25px;
margin-right: 5px; // margin between the Cancel and Save buttons
}
@media @tablet-portrait-with-keyboard, @tablet-portrait {
font-size: 30px;
margin-right: 10px; // margin between the Cancel and Save buttons
}
position: inherit;
}
}
.settingsBody {
padding-top: 1px;
@ -252,15 +201,15 @@
}
}
}
#saveSettings {
#closeSettings {
border-radius: 3px;
padding: 5px 10px 5px 10px;
@media @desktop-portrait, @desktop-landscape {
margin-top: 5px;
font-size: 16px;
width: 80px;
height: 35px;
margin-bottom: 0px; // overrides the value from Foundation
}
@media @phone-landscape {
font-size: 20px;

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

@ -740,12 +740,6 @@ body {
}
}
.verticallyCentered {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* Sliding Menu */
@media @desktop-portrait {
@ -1185,3 +1179,185 @@ body {
}
}
}
/*********************************/
/*Loading Spinning Bar's Styling */
/*********************************/
#floatingCirclesG{
top: calc(~'50% - 60px');
position:relative;
width:128px;
height:128px;
margin:auto;
transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:rgb(238,238,238);
height:23px;
width:23px;
border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
animation-name:f_fadeG;
-o-animation-name:f_fadeG;
-ms-animation-name:f_fadeG;
-webkit-animation-name:f_fadeG;
-moz-animation-name:f_fadeG;
animation-duration:0.672s;
-o-animation-duration:0.672s;
-ms-animation-duration:0.672s;
-webkit-animation-duration:0.672s;
-moz-animation-duration:0.672s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
#frotateG_01{
left:0;
top:52px;
animation-delay:0.2495s;
-o-animation-delay:0.2495s;
-ms-animation-delay:0.2495s;
-webkit-animation-delay:0.2495s;
-moz-animation-delay:0.2495s;
}
#frotateG_02{
left:15px;
top:15px;
animation-delay:0.336s;
-o-animation-delay:0.336s;
-ms-animation-delay:0.336s;
-webkit-animation-delay:0.336s;
-moz-animation-delay:0.336s;
}
#frotateG_03{
left:52px;
top:0;
animation-delay:0.4225s;
-o-animation-delay:0.4225s;
-ms-animation-delay:0.4225s;
-webkit-animation-delay:0.4225s;
-moz-animation-delay:0.4225s;
}
#frotateG_04{
right:15px;
top:15px;
animation-delay:0.509s;
-o-animation-delay:0.509s;
-ms-animation-delay:0.509s;
-webkit-animation-delay:0.509s;
-moz-animation-delay:0.509s;
}
#frotateG_05{
right:0;
top:52px;
animation-delay:0.5955s;
-o-animation-delay:0.5955s;
-ms-animation-delay:0.5955s;
-webkit-animation-delay:0.5955s;
-moz-animation-delay:0.5955s;
}
#frotateG_06{
right:15px;
bottom:15px;
animation-delay:0.672s;
-o-animation-delay:0.672s;
-ms-animation-delay:0.672s;
-webkit-animation-delay:0.672s;
-moz-animation-delay:0.672s;
}
#frotateG_07{
left:52px;
bottom:0;
animation-delay:0.7585s;
-o-animation-delay:0.7585s;
-ms-animation-delay:0.7585s;
-webkit-animation-delay:0.7585s;
-moz-animation-delay:0.7585s;
}
#frotateG_08{
left:15px;
bottom:15px;
animation-delay:0.845s;
-o-animation-delay:0.845s;
-ms-animation-delay:0.845s;
-webkit-animation-delay:0.845s;
-moz-animation-delay:0.845s;
}
@keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(238,238,238);
}
}
@-o-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(238,238,238);
}
}
@-ms-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(238,238,238);
}
}
@-webkit-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(238,238,238);
}
}
@-moz-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(238,238,238);
}
}
/*********************************/
/*End of Spinning Bar's Styling */
/*********************************/

23
bigbluebutton-html5/app/client/views/chat/chat_bar.coffee
View File

@ -209,29 +209,6 @@ Template.message.helpers
minutes = "0" + minutes
hours + ":" + minutes
Template.optionsFontSize.events
"click #decreaseFontSize": (event) ->
if getInSession("messageFontSize") is 8 # min
$('#decreaseFontSize').disabled = true
$('#decreaseFontSize').removeClass('icon fi-minus')
$('#decreaseFontSize').html('MIN')
else
setInSession "messageFontSize", getInSession("messageFontSize") - 2
if $('#increaseFontSize').html() is 'MAX'
$('#increaseFontSize').html('')
$('#increaseFontSize').addClass('icon fi-plus')
"click #increaseFontSize": (event) ->
if getInSession("messageFontSize") is 40 # max
$('#increaseFontSize').disabled = true
$('#increaseFontSize').removeClass('icon fi-plus')
$('#increaseFontSize').html('MAX')
else
setInSession "messageFontSize", getInSession("messageFontSize") + 2
if $('#decreaseFontSize').html() is 'MIN'
$('#decreaseFontSize').html('')
$('#decreaseFontSize').addClass('icon fi-minus')
# make links received from Flash client clickable in HTML
@toClickable = (str) ->
if typeof str is 'string'

13
bigbluebutton-html5/app/client/views/chat/chat_bar.html
View File

@ -75,16 +75,3 @@
<div style="color:{{colourToHex message.from_color}}">{{{sanitizeAndFormat message.message}}}</div>
{{autoscroll}}
</template>
<template name="optionsFontSize">
<fieldset class="desktopSettingsFieldset">
<legend><span class="chatOptionsText" >Chat Message Font Size</span><br/></legend>
<table id="fontSizeTable" align="center">
<tr>
<td>{{> makeButton id="decreaseFontSize" btn_class="displayButtons" i_class="fi-minus" rel="tooltip" title="Decrease Font Size"}}</td>
<td id="displayLabel"><label class="fontSizeLabel" {{messageFontSize}} >Size({{getInSession "messageFontSize"}})</label></td>
<td>{{> makeButton id="increaseFontSize" btn_class="displayButtons" i_class="fi-plus" rel="tooltip" title="Increase Font Size"}}</td>
</tr>
</table>
</fieldset>
</template>

26
bigbluebutton-html5/app/client/views/modals/modals.coffee
View File

@ -18,5 +18,27 @@ Template.settingsAudio.events
"click #joinMicrophone": (event) -> joinVoiceCall @, isListenOnly: false
Template.settingsModal.events
"click .closeSettings": -> setInSession "messageFontSize", getInSession("tempFontSize")
"click #saveSettings": -> $("#settingsModal").foundation('reveal', 'close');
"click #closeSettings": -> $("#settingsModal").foundation('reveal', 'close');
Template.optionsFontSize.events
"click #decreaseFontSize": (event) ->
if getInSession("messageFontSize") is 8 # min
$('#decreaseFontSize').disabled = true
$('#decreaseFontSize').removeClass('icon fi-minus')
$('#decreaseFontSize').html('MIN')
else
setInSession "messageFontSize", getInSession("messageFontSize") - 2
if $('#increaseFontSize').html() is 'MAX'
$('#increaseFontSize').html('')
$('#increaseFontSize').addClass('icon fi-plus')
"click #increaseFontSize": (event) ->
if getInSession("messageFontSize") is 40 # max
$('#increaseFontSize').disabled = true
$('#increaseFontSize').removeClass('icon fi-plus')
$('#increaseFontSize').html('MAX')
else
setInSession "messageFontSize", getInSession("messageFontSize") + 2
if $('#decreaseFontSize').html() is 'MIN'
$('#decreaseFontSize').html('')
$('#decreaseFontSize').addClass('icon fi-minus')

19
bigbluebutton-html5/app/client/views/modals/modals.html
View File

@ -29,9 +29,6 @@
<p>
<span class="modalTitle">BigBlueButton Settings</span>
</p>
<p>
<a href="#" class="closeSettings close-reveal-modal">&#215;</a>
</p>
</div>
<div class="settingsBody">
@ -41,8 +38,7 @@
</div>
<div class="bar bottomBar">
<a href="#" class="closeSettings close-reveal-modal"><u>Cancel</u></a>
{{> makeButton id="saveSettings" btn_class="settingsButton" rel="tooltip" title="Save Changes" label="Save"}}
{{> makeButton id="closeSettings" btn_class="settingsButton vertically-centered" rel="tooltip" title="Close" label="Close"}}
</div>
</template>
@ -51,3 +47,16 @@
{{> makeButton id="yes" btn_class="logoutButton" label="Yes"}}
{{> makeButton id="no" btn_class="logoutButton" label="No"}}
</template>
<template name="optionsFontSize">
<fieldset class="desktopSettingsFieldset">
<legend><span class="chatOptionsText" >Chat Message Font Size</span><br/></legend>
<table id="fontSizeTable" align="center">
<tr>
<td>{{> makeButton id="decreaseFontSize" btn_class="displayButtons" i_class="fi-minus" rel="tooltip" title="Decrease Font Size"}}</td>
<td id="displayLabel"><label class="fontSizeLabel" {{messageFontSize}} >Size({{getInSession "messageFontSize"}})</label></td>
<td>{{> makeButton id="increaseFontSize" btn_class="displayButtons" i_class="fi-plus" rel="tooltip" title="Increase Font Size"}}</td>
</tr>
</table>
</fieldset>
</template>

5
bigbluebutton-html5/app/lib/router.coffee
View File

@ -57,7 +57,8 @@
Meteor.subscribe 'users', meetingId, userId, authToken, onError: onErrorFunction, onReady: =>
Meteor.subscribe 'whiteboard-clean-status', meetingId, onReady: =>
Meteor.subscribe 'bbb_poll', meetingId, userId, authToken, onReady: =>
# done subscribing
# done subscribing, start rendering the client and set default settings
@render('main')
onLoadComplete()
handleLogourUrlError = () ->
@ -81,7 +82,7 @@
a.fail (data, textStatus, errorThrown) ->
handleLogourUrlError()
@render('main')
@render('loading')
# endpoint - is the html5client running (ready to handle a user)