From 2f9a990663efeb6eec77b585a5bc69a2029d059f Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Fri, 23 Oct 2015 16:29:24 -0700 Subject: [PATCH 1/5] Moving options' template to modal --- .../app/client/views/chat/chat_bar.coffee | 23 ------------------- .../app/client/views/chat/chat_bar.html | 13 ----------- .../app/client/views/modals/modals.coffee | 23 +++++++++++++++++++ .../app/client/views/modals/modals.html | 13 +++++++++++ 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/bigbluebutton-html5/app/client/views/chat/chat_bar.coffee b/bigbluebutton-html5/app/client/views/chat/chat_bar.coffee index ca40ff72c4..86f3d45585 100755 --- a/bigbluebutton-html5/app/client/views/chat/chat_bar.coffee +++ b/bigbluebutton-html5/app/client/views/chat/chat_bar.coffee @@ -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' diff --git a/bigbluebutton-html5/app/client/views/chat/chat_bar.html b/bigbluebutton-html5/app/client/views/chat/chat_bar.html index b1ba1376c1..fb9532e7e4 100755 --- a/bigbluebutton-html5/app/client/views/chat/chat_bar.html +++ b/bigbluebutton-html5/app/client/views/chat/chat_bar.html @@ -75,16 +75,3 @@
{{{sanitizeAndFormat message.message}}}
{{autoscroll}} - - diff --git a/bigbluebutton-html5/app/client/views/modals/modals.coffee b/bigbluebutton-html5/app/client/views/modals/modals.coffee index e9d5c81eed..2eb2a8574e 100755 --- a/bigbluebutton-html5/app/client/views/modals/modals.coffee +++ b/bigbluebutton-html5/app/client/views/modals/modals.coffee @@ -20,3 +20,26 @@ Template.settingsAudio.events Template.settingsModal.events "click .closeSettings": -> setInSession "messageFontSize", getInSession("tempFontSize") "click #saveSettings": -> $("#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') diff --git a/bigbluebutton-html5/app/client/views/modals/modals.html b/bigbluebutton-html5/app/client/views/modals/modals.html index b4863e2695..7010d40256 100755 --- a/bigbluebutton-html5/app/client/views/modals/modals.html +++ b/bigbluebutton-html5/app/client/views/modals/modals.html @@ -49,3 +49,16 @@ {{> makeButton id="yes" btn_class="logoutButton" label="Yes"}} {{> makeButton id="no" btn_class="logoutButton" label="No"}} + + \ No newline at end of file From a97eba6d8b7c41c88d112a4e08c0887fe124e6f2 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Tue, 3 Nov 2015 12:03:05 -0800 Subject: [PATCH 2/5] Making sure that the data is downloaded before starting rendering the client --- bigbluebutton-html5/app/lib/router.coffee | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/bigbluebutton-html5/app/lib/router.coffee b/bigbluebutton-html5/app/lib/router.coffee index 7b52cae94f..dc0851b8b2 100755 --- a/bigbluebutton-html5/app/lib/router.coffee +++ b/bigbluebutton-html5/app/lib/router.coffee @@ -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) From 2b96e6f723c8c4bec28fb18eff85cc018a37837e Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Tue, 3 Nov 2015 12:04:02 -0800 Subject: [PATCH 3/5] Added spinning bar which is displayed while the data is loading --- bigbluebutton-html5/app/client/main.html | 13 ++ .../app/client/stylesheets/style.less | 185 ++++++++++++++++++ 2 files changed, 198 insertions(+) diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html index 8f1b3895de..448daec74f 100755 --- a/bigbluebutton-html5/app/client/main.html +++ b/bigbluebutton-html5/app/client/main.html @@ -92,3 +92,16 @@ {{> makeButton btn_class="slideButton signOutIcon" i_class="ion-log-out" label="Log out"}} + + \ No newline at end of file diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less index 0ae8f3e64d..f80cbd780e 100755 --- a/bigbluebutton-html5/app/client/stylesheets/style.less +++ b/bigbluebutton-html5/app/client/stylesheets/style.less @@ -850,3 +850,188 @@ body { .linear-gradient(rgb(65,68,77), rgb(58,60,69)); width: 60vw; } + +/*********************************/ +/*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 */ +/*********************************/ From cb610535bb9a74a99fe62b915f2c9202cda924ec Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Wed, 4 Nov 2015 15:33:29 -0800 Subject: [PATCH 4/5] Modal window changes: removed cancel buttons and a save button, added 'Close' instead, fixed centering problem --- bigbluebutton-html5/app/client/main.coffee | 1 - .../app/client/stylesheets/modals.less | 57 +------------------ .../app/client/views/modals/modals.coffee | 3 +- .../app/client/views/modals/modals.html | 6 +- 4 files changed, 5 insertions(+), 62 deletions(-) diff --git a/bigbluebutton-html5/app/client/main.coffee b/bigbluebutton-html5/app/client/main.coffee index ff36c06a9e..f3bb22e82f 100755 --- a/bigbluebutton-html5/app/client/main.coffee +++ b/bigbluebutton-html5/app/client/main.coffee @@ -146,7 +146,6 @@ Template.main.events closeMenus() 'click .settingsIcon': (event) -> - setInSession("tempFontSize", getInSession("messageFontSize")) $("#settingsModal").foundation('reveal', 'open'); 'click .signOutIcon': (event) -> diff --git a/bigbluebutton-html5/app/client/stylesheets/modals.less b/bigbluebutton-html5/app/client/stylesheets/modals.less index 211dd702c6..fae475a627 100755 --- a/bigbluebutton-html5/app/client/stylesheets/modals.less +++ b/bigbluebutton-html5/app/client/stylesheets/modals.less @@ -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; diff --git a/bigbluebutton-html5/app/client/views/modals/modals.coffee b/bigbluebutton-html5/app/client/views/modals/modals.coffee index 2eb2a8574e..59aba7b20f 100755 --- a/bigbluebutton-html5/app/client/views/modals/modals.coffee +++ b/bigbluebutton-html5/app/client/views/modals/modals.coffee @@ -18,8 +18,7 @@ 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) -> diff --git a/bigbluebutton-html5/app/client/views/modals/modals.html b/bigbluebutton-html5/app/client/views/modals/modals.html index 7010d40256..c79b868b3f 100755 --- a/bigbluebutton-html5/app/client/views/modals/modals.html +++ b/bigbluebutton-html5/app/client/views/modals/modals.html @@ -27,9 +27,6 @@

BigBlueButton Settings

-

- × -

@@ -39,8 +36,7 @@
- Cancel - {{> 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"}}
From 12a00553d26ec8168c1bc4bfff8dafc9db1d2e49 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Wed, 4 Nov 2015 15:34:54 -0800 Subject: [PATCH 5/5] Getting rid of duplicating code --- bigbluebutton-html5/app/client/globals.coffee | 4 ++-- bigbluebutton-html5/app/client/stylesheets/mixins.less | 6 ------ bigbluebutton-html5/app/client/stylesheets/style.less | 8 -------- 3 files changed, 2 insertions(+), 16 deletions(-) diff --git a/bigbluebutton-html5/app/client/globals.coffee b/bigbluebutton-html5/app/client/globals.coffee index a5ec23903d..4050099c73 100755 --- a/bigbluebutton-html5/app/client/globals.coffee +++ b/bigbluebutton-html5/app/client/globals.coffee @@ -330,7 +330,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') @@ -358,7 +358,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') diff --git a/bigbluebutton-html5/app/client/stylesheets/mixins.less b/bigbluebutton-html5/app/client/stylesheets/mixins.less index 288e88360f..4ec3ad0465 100755 --- a/bigbluebutton-html5/app/client/stylesheets/mixins.less +++ b/bigbluebutton-html5/app/client/stylesheets/mixins.less @@ -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%); -} diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less index f80cbd780e..1c25591029 100755 --- a/bigbluebutton-html5/app/client/stylesheets/style.less +++ b/bigbluebutton-html5/app/client/stylesheets/style.less @@ -736,12 +736,6 @@ body { } } -.verticallyCentered { - position: relative; - top: 50%; - transform: translateY(-50%); -} - /* Sliding Menu */ @media @desktop-portrait { @@ -980,8 +974,6 @@ body { -moz-animation-delay:0.845s; } - - @keyframes f_fadeG{ 0%{ background-color:rgb(0,0,0);