From a23dc18c782e63f47555bd269d3a5a06d0018068 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Sat, 31 Oct 2015 21:20:38 -0700 Subject: [PATCH 1/5] Fixed the issue with unselectable text in Chrome. --- bigbluebutton-html5/app/client/stylesheets/style.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less index 0ae8f3e64d..a511ff0a2e 100755 --- a/bigbluebutton-html5/app/client/stylesheets/style.less +++ b/bigbluebutton-html5/app/client/stylesheets/style.less @@ -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; From 1c93dfa588eb5048f332bda89e43d819a79f521c Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Sun, 1 Nov 2015 15:34:49 -0800 Subject: [PATCH 2/5] Replaced the FAB trigger's icon with a raised hand + did some code refactoring for the sliding menu and FAB. --- bigbluebutton-html5/app/.meteor/packages | 1 - bigbluebutton-html5/app/.meteor/versions | 2 - bigbluebutton-html5/app/client/globals.coffee | 61 +++- bigbluebutton-html5/app/client/main.coffee | 88 +++-- bigbluebutton-html5/app/client/main.html | 51 ++- .../app/client/stylesheets/style.less | 345 +++++++++++++++++- .../app/client/stylesheets/whiteboard.less | 165 ++++++++- .../app/client/views/users/user_item.coffee | 4 +- .../app/client/views/users/user_item.html | 10 +- .../app/client/views/users/user_list.coffee | 4 +- .../app/client/views/users/users_list.html | 2 +- .../client/views/whiteboard/whiteboard.coffee | 34 +- .../client/views/whiteboard/whiteboard.html | 28 +- 13 files changed, 681 insertions(+), 114 deletions(-) diff --git a/bigbluebutton-html5/app/.meteor/packages b/bigbluebutton-html5/app/.meteor/packages index 5e64e28636..77cc55261f 100644 --- a/bigbluebutton-html5/app/.meteor/packages +++ b/bigbluebutton-html5/app/.meteor/packages @@ -28,4 +28,3 @@ maibaum:foundation-icons chriswessels:hammer@3.1.1 fastclick standard-minifiers -gthacoder:meteor-sled@0.0.1 diff --git a/bigbluebutton-html5/app/.meteor/versions b/bigbluebutton-html5/app/.meteor/versions index f921d94681..e9380f0073 100644 --- a/bigbluebutton-html5/app/.meteor/versions +++ b/bigbluebutton-html5/app/.meteor/versions @@ -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 diff --git a/bigbluebutton-html5/app/client/globals.coffee b/bigbluebutton-html5/app/client/globals.coffee index 3ac209701a..ffd034d1cc 100755 --- a/bigbluebutton-html5/app/client/globals.coffee +++ b/bigbluebutton-html5/app/client/globals.coffee @@ -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) -> @@ -377,12 +377,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 +616,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') diff --git a/bigbluebutton-html5/app/client/main.coffee b/bigbluebutton-html5/app/client/main.coffee index ff36c06a9e..285d7dabf1 100755 --- a/bigbluebutton-html5/app/client/main.coffee +++ b/bigbluebutton-html5/app/client/main.coffee @@ -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)') diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html index 8f1b3895de..ae2cd24327 100755 --- a/bigbluebutton-html5/app/client/main.html +++ b/bigbluebutton-html5/app/client/main.html @@ -1,6 +1,6 @@ @@ -50,10 +50,10 @@ {{#if isDisconnected}} {{>status}} {{else}} -
+
{{> usersList id="users" name="usersList"}}
-
+
{{> menu id="menu"}}
@@ -92,3 +92,46 @@ {{> makeButton btn_class="slideButton signOutIcon" i_class="ion-log-out" label="Log out"}}
+ + diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less index a511ff0a2e..d877e11ce1 100755 --- a/bigbluebutton-html5/app/client/stylesheets/style.less +++ b/bigbluebutton-html5/app/client/stylesheets/style.less @@ -40,7 +40,7 @@ body { } @media @mobile-portrait { - .sl-toggled-on .unreadChat { + .hamburgerToggledOn .unreadChat { display: none; } } @@ -749,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; @@ -780,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 { @@ -854,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); + } + } +} diff --git a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less index 889218a716..dd0c7e41ee 100755 --- a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less +++ b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less @@ -324,18 +324,175 @@ } } +// 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; + height: 50px; + width: 50px; + right: 10px; + bottom: 10px; +} + +.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; + } } diff --git a/bigbluebutton-html5/app/client/views/users/user_item.coffee b/bigbluebutton-html5/app/client/views/users/user_item.coffee index 63506f6ad8..4b5c755aef 100755 --- a/bigbluebutton-html5/app/client/views/users/user_item.coffee +++ b/bigbluebutton-html5/app/client/views/users/user_item.coffee @@ -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() diff --git a/bigbluebutton-html5/app/client/views/users/user_item.html b/bigbluebutton-html5/app/client/views/users/user_item.html index 0306d5ec96..315cbdbbfb 100755 --- a/bigbluebutton-html5/app/client/views/users/user_item.html +++ b/bigbluebutton-html5/app/client/views/users/user_item.html @@ -59,19 +59,19 @@