From 63588ede10404d1ede6b8d5855e25aa47682b3e8 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Sun, 2 Aug 2015 14:11:24 -0400 Subject: [PATCH 01/24] Made sure the animation of the userlist's items still works after a pan gesture ends. --- bigbluebutton-html5/app/client/main.coffee | 2 ++ 1 file changed, 2 insertions(+) diff --git a/bigbluebutton-html5/app/client/main.coffee b/bigbluebutton-html5/app/client/main.coffee index 355f0464c4..0a4423ec0d 100755 --- a/bigbluebutton-html5/app/client/main.coffee +++ b/bigbluebutton-html5/app/client/main.coffee @@ -211,9 +211,11 @@ Template.main.gestures $('.left-drawer').addClass('sl-left-drawer') $('.sl-left-drawer').removeClass('left-drawer') + $('.sl-left-drawer').addClass('sl-left-drawer-content-delay') $('.right-drawer').addClass('sl-right-drawer') $('.sl-right-drawer').removeClass('right-drawer') + $('.sl-right-drawer').addClass('sl-right-drawer-content-delay') 'panright #container, panleft #container': (event, template) -> if isPortraitMobile() and isPanHorizontal(event) From 3b73497beac35a7f8eabb9c110e6f420baa36dc9 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Tue, 18 Aug 2015 15:01:49 -0400 Subject: [PATCH 02/24] Added phone/tablet detection, made the navbars look bigger on a mobile phone in landscape orientation. --- .../app/client/stylesheets/style.less | 77 +++++++++++++++++-- .../app/client/stylesheets/users.less | 13 +++- .../app/client/stylesheets/variables.less | 11 +++ 3 files changed, 91 insertions(+), 10 deletions(-) diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less index 9de396779b..d7d379b100 100755 --- a/bigbluebutton-html5/app/client/stylesheets/style.less +++ b/bigbluebutton-html5/app/client/stylesheets/style.less @@ -72,9 +72,25 @@ body { .linear-gradient(rgb(72,76,85), rgb(65,68,77)); } .btn { - @media @desktop-portrait, @landscape { - height: 50px !important; + + @media @tablet-landscape { + height: 50px; width: 51.2px; + } + @media @phone-landscape { + height: 67px; + width: 67px; + } + @media @desktop-landscape { + height: 50px; + width: 51.2px; + } + @media @desktop-portrait { + height: 50px; + width: 51.2px; + } + + @media @desktop-portrait, @landscape { top: 0 !important; padding-left: 1% !important; padding-right: 1% !important; @@ -110,7 +126,15 @@ body { } span { background-color: #469DCF; } } - @media @landscape { + + @media @tablet-landscape { + height: 50px; + } + @media @phone-landscape { + height: 67px; + } + + @media @desktop-landscape { height: 50px; } @media @mobile-portrait-with-keyboard, @mobile-portrait { @@ -140,11 +164,29 @@ body { padding-left: 30px; padding-right: 30px; } - @media @landscape, @desktop-portrait { - color: extract(@darkGrey, 1); + + @media @tablet-landscape { + font-size: 18px; + height: 50px; + padding-top: 25px; // half the height + } + @media @phone-landscape { + font-size: 28px; + height: 67px; + padding-top: 33.5px; // half the height + } + @media @desktop-landscape { font-size: 16px; height: 50px; padding-top: 25px; // half the height + } + @media @desktop-portrait { + height: 50px; + padding-top: 25px; // half the height + } + + @media @landscape, @desktop-portrait { + color: extract(@darkGrey, 1); padding-left: 15px; padding-right: 15px; } @@ -219,11 +261,26 @@ body { font-weight: bold; line-height: 2em; margin: 0; + + @media @tablet-landscape { + font-size: 18px; + height: 50px; + } + @media @phone-landscape { + font-size: 28px; + height: 67px; + } + @media @phone-portrait, @phone-portrait-with-keyboard { + font-size: 36px; + } + @media @tablet-portrait, @tablet-portrait-with-keyboard { + font-size: 3px; + } + @media @mobile-portrait, @mobile-portrait-with-keyboard { .linear-gradient(rgb(72,76,85), rgb(65,68,77)); padding-top: 20px; color: white; - font-size: 4vw; height: 110px; } @media @desktop-portrait { @@ -237,7 +294,8 @@ body { padding-bottom: 5px; padding-top: 5px; } - @media @desktop-portrait, @landscape { + + @media @desktop-portrait, @desktop-landscape { font-size: 18px; height: 50px; } @@ -557,7 +615,10 @@ body { padding-right: 10px; } i { - @media @desktop-portrait, @landscape { + @media @phone-landscape { + font-size: 45px; + } + @media @desktop-portrait, @desktop-landscape, @tablet-landscape { font-size: 30px; } @media @mobile-portrait-with-keyboard, @mobile-portrait { diff --git a/bigbluebutton-html5/app/client/stylesheets/users.less b/bigbluebutton-html5/app/client/stylesheets/users.less index 0b99324f9d..cb9083abb2 100755 --- a/bigbluebutton-html5/app/client/stylesheets/users.less +++ b/bigbluebutton-html5/app/client/stylesheets/users.less @@ -92,7 +92,7 @@ height: 100%; #content:hover { - @media @landscape, @desktop-portrait { + @media @landscape, @desktop-portrait { background-color: #2C4155; } } @@ -135,8 +135,17 @@ .toggleUserlistButton, .toggleMenuButton { span { - @media @landscape, @desktop-portrait { + @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%; diff --git a/bigbluebutton-html5/app/client/stylesheets/variables.less b/bigbluebutton-html5/app/client/stylesheets/variables.less index 1473ee970c..45bad42891 100755 --- a/bigbluebutton-html5/app/client/stylesheets/variables.less +++ b/bigbluebutton-html5/app/client/stylesheets/variables.less @@ -20,6 +20,17 @@ /* 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)"; + /* Fix for FireFox - some ionicons did not display properly */ @font-face { font-family: 'ionicons'; From e98c96bd8b2561789c346f20e98fdc4d299fe74c Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Tue, 18 Aug 2015 18:09:24 -0400 Subject: [PATCH 03/24] Fixed the issue of not being able to toggle userlist in landscape mode on mobile devices. --- bigbluebutton-html5/app/client/main.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bigbluebutton-html5/app/client/main.coffee b/bigbluebutton-html5/app/client/main.coffee index 0a4423ec0d..daa4411887 100755 --- a/bigbluebutton-html5/app/client/main.coffee +++ b/bigbluebutton-html5/app/client/main.coffee @@ -53,7 +53,7 @@ Template.header.events toggleCam @ "click .toggleUserlistButton": (event) -> - if isLandscape() + if isLandscape() or isLandscapeMobile() toggleUsersList() else if $('.sl-right-drawer').hasClass('sl-right-drawer-out') From 9fb02eae05ffe948afbfaf9f34979b98ced04775 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Tue, 18 Aug 2015 19:35:14 -0400 Subject: [PATCH 04/24] Made sure all the side menu elements are clickable. --- bigbluebutton-html5/app/client/globals.coffee | 11 +++++------ .../app/client/views/users/user_item.coffee | 12 +++++++----- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/bigbluebutton-html5/app/client/globals.coffee b/bigbluebutton-html5/app/client/globals.coffee index 9f3c413af9..d7fad85df6 100755 --- a/bigbluebutton-html5/app/client/globals.coffee +++ b/bigbluebutton-html5/app/client/globals.coffee @@ -198,13 +198,12 @@ Handlebars.registerHelper 'whiteboardSize', (section) -> # Meteor.call('userToggleCam', context._id, !context.sharingVideo) @toggleChatbar = -> - if getInSession("display_chatbar") and isOnlyOnePanelOpen() - setInSession "display_usersList", true - setInSession "display_whiteboard", true - setInSession "display_chatbar", true + setInSession "display_chatbar", !getInSession "display_chatbar" + if !getInSession("display_chatbar") + $('#whiteboard').css('width', '100%') else - setInSession "display_chatbar", !getInSession "display_chatbar" - setTimeout(redrawWhiteboard, 0) + $('#whiteboard').css('width', '') + setTimeout redrawWhiteboard, 0 @toggleMic = (event) -> BBB.toggleMyMic() diff --git a/bigbluebutton-html5/app/client/views/users/user_item.coffee b/bigbluebutton-html5/app/client/views/users/user_item.coffee index 158a48ff6c..944f0df771 100755 --- a/bigbluebutton-html5/app/client/views/users/user_item.coffee +++ b/bigbluebutton-html5/app/client/views/users/user_item.coffee @@ -22,7 +22,7 @@ Template.displayUserIcons.helpers settings.disablePubChat return locked and lockInAction -# Opens a private chat tab when a username from the userlist is clicked +# Opens a private chat tab when a username from the userlist is clicked Template.usernameEntry.events 'click .usernameEntry': (event) -> userIdSelected = @.userId @@ -31,18 +31,20 @@ Template.usernameEntry.events setInSession "inChatWith", "PUBLIC_CHAT" else setInSession "inChatWith", userIdSelected - if isLandscape() - $("#newMessageInput").focus() if isPortrait() or isPortraitMobile() - toggleUsersList() + toggleLeftDrawer() + toggleLeftArrowClockwise() + toggleShield() + setTimeout () -> # waits until the end of execution queue $("#newMessageInput").focus() + , 0 'click .gotUnreadMail': (event) -> _this = @ currentId = getInSession('userId') if currentId isnt undefined and currentId is _this.userId _id = "PUBLIC_CHAT" - else + else _id = _this.userId chats = getInSession('chats') if chats isnt undefined From f5fe166b50f04e541947955f6fe712e638ca2254 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Tue, 18 Aug 2015 20:02:00 -0400 Subject: [PATCH 05/24] Styling for the side menus. --- bigbluebutton-html5/app/client/main.html | 1 + .../app/client/stylesheets/style.less | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html index da7809e003..ad8b29044b 100755 --- a/bigbluebutton-html5/app/client/main.html +++ b/bigbluebutton-html5/app/client/main.html @@ -50,6 +50,7 @@ {{> usersList id="users" name="usersList"}}
+
{{> menu id="menu"}}
diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less index d7d379b100..c78d525458 100755 --- a/bigbluebutton-html5/app/client/stylesheets/style.less +++ b/bigbluebutton-html5/app/client/stylesheets/style.less @@ -284,9 +284,9 @@ body { height: 110px; } @media @desktop-portrait { - .linear-gradient(rgb(72,76,85), rgb(65,68,77)); + background-color: white; padding-top: 10px; - color: white; + color: extract(@darkGrey, 1); } @media @landscape { border-bottom: 1px solid extract(@lightGrey, 1); @@ -390,6 +390,17 @@ body { } } +.titleArea { + width: 100%; + @media @mobile-portrait-with-keyboard, @mobile-portrait { + height: 110px; + .linear-gradient(rgb(72,76,85), rgb(65,68,77)); + } + @media @desktop-portrait { + height: 50px; + } +} + /* Notifications */ #browser-icon-container { float: left; @@ -484,6 +495,9 @@ body { @media @landscape { display: none; } + @media @mobile-portrait, @mobile-portrait-with-keyboard { + .linear-gradient(rgb(72,76,85), rgb(65,68,77)); + } } .pressedButton { From 8b06d43aec81dc8b135f65bed94fbff56e798032 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Wed, 19 Aug 2015 12:47:00 -0400 Subject: [PATCH 06/24] Fixed the mechanism of toggling the chat bar and made sure user is unable to resize the whiteboard when the chat is closed. --- bigbluebutton-html5/app/client/globals.coffee | 2 ++ bigbluebutton-html5/app/client/main.html | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/bigbluebutton-html5/app/client/globals.coffee b/bigbluebutton-html5/app/client/globals.coffee index d7fad85df6..c21310e71b 100755 --- a/bigbluebutton-html5/app/client/globals.coffee +++ b/bigbluebutton-html5/app/client/globals.coffee @@ -201,8 +201,10 @@ Handlebars.registerHelper 'whiteboardSize', (section) -> setInSession "display_chatbar", !getInSession "display_chatbar" if !getInSession("display_chatbar") $('#whiteboard').css('width', '100%') + $('#whiteboard .ui-resizable-handle').css('display', 'none') else $('#whiteboard').css('width', '') + $('#whiteboard .ui-resizable-handle').css('display', '') setTimeout redrawWhiteboard, 0 @toggleMic = (event) -> diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html index ad8b29044b..80b3af3348 100755 --- a/bigbluebutton-html5/app/client/main.html +++ b/bigbluebutton-html5/app/client/main.html @@ -58,7 +58,9 @@
{{> whiteboard id="whiteboard" name="whiteboard"}} - {{> chatbar id="chat" title="Chat" name="chatbar"}} + {{#if getInSession "display_chatbar"}} + {{> chatbar id="chat" title="Chat" name="chatbar"}} + {{/if}}
{{> modals}}
From 39e51604a0da23db385709bfc434f9180e3265b1 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Thu, 20 Aug 2015 12:21:48 -0700 Subject: [PATCH 07/24] Made a raise hand button transparent --- bigbluebutton-html5/app/client/stylesheets/whiteboard.less | 1 + 1 file changed, 1 insertion(+) diff --git a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less index 1009e4f362..c26fa240da 100755 --- a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less +++ b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less @@ -225,6 +225,7 @@ padding: 0; border-radius: 50%; background: #3896D3; + opacity: 0.55; &:hover { background: #3A82D4; } From 88fb41263e4e10fd712452a19845937a5cd13abc Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Thu, 20 Aug 2015 15:45:26 -0400 Subject: [PATCH 08/24] Modified the UI styling to start using CSS pixels + separated phone, tablet and desktop views. --- bigbluebutton-html5/app/client/main.coffee | 4 + bigbluebutton-html5/app/client/main.html | 4 + .../app/client/stylesheets/chat.less | 37 +++-- .../app/client/stylesheets/style.less | 148 ++++++++++++------ .../app/client/stylesheets/users.less | 8 +- .../app/client/stylesheets/whiteboard.less | 89 +++++++++-- 6 files changed, 213 insertions(+), 77 deletions(-) diff --git a/bigbluebutton-html5/app/client/main.coffee b/bigbluebutton-html5/app/client/main.coffee index daa4411887..7cb55dd826 100755 --- a/bigbluebutton-html5/app/client/main.coffee +++ b/bigbluebutton-html5/app/client/main.coffee @@ -73,11 +73,15 @@ Template.header.events toggleRightDrawer() toggleRightArrowClockwise() + "click .btn": (event) -> + $(".ui-tooltip").hide() + Template.menu.events 'click .slideButton': (event) -> toggleShield() toggleRightDrawer() toggleRightArrowClockwise() + $('.slideButton').blur() 'click .toggleChatButton': (event) -> toggleChatbar() diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html index 80b3af3348..8f1b3895de 100755 --- a/bigbluebutton-html5/app/client/main.html +++ b/bigbluebutton-html5/app/client/main.html @@ -41,6 +41,10 @@ + + + +