From 978c0f2f316cded2d0e039a9c8fee146549f1c91 Mon Sep 17 00:00:00 2001 From: yanas Date: Wed, 7 Sep 2016 13:14:51 -0500 Subject: [PATCH 01/18] Remove unused import --- modules/UI/etherpad/Etherpad.js | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/UI/etherpad/Etherpad.js b/modules/UI/etherpad/Etherpad.js index 58315c9a9..d5c9e7e4a 100644 --- a/modules/UI/etherpad/Etherpad.js +++ b/modules/UI/etherpad/Etherpad.js @@ -4,7 +4,6 @@ import VideoLayout from "../videolayout/VideoLayout"; import LargeContainer from '../videolayout/LargeContainer'; import UIUtil from "../util/UIUtil"; import UIEvents from "../../../service/UI/UIEvents"; -import SidePanelToggler from "../side_pannels/SidePanelToggler"; import FilmStrip from '../videolayout/FilmStrip'; /** From ed29db290e48f867b0b43af080e537d26440a56e Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 8 Sep 2016 12:19:15 -0500 Subject: [PATCH 02/18] Add mixins for animations and separate toolbar css --- css/_mixins.scss | 37 ++++++ css/_toolbars.scss | 289 +++++++++++++++++++++++++++++++++++++++++++++ css/main.scss | 7 ++ 3 files changed, 333 insertions(+) create mode 100644 css/_mixins.scss create mode 100644 css/_toolbars.scss diff --git a/css/_mixins.scss b/css/_mixins.scss new file mode 100644 index 000000000..167a25b9d --- /dev/null +++ b/css/_mixins.scss @@ -0,0 +1,37 @@ +/** + * Animation mixin. + */ +@mixin animation($animate...) { + $max: length($animate); + $animations: ''; + + @for $i from 1 through $max { + $animations: #{$animations + nth($animate, $i)}; + + @if $i < $max { + $animations: #{$animations + ", "}; + } + } + -webkit-animation: $animations; + -moz-animation: $animations; + -o-animation: $animations; + animation: $animations; +} + +/** + * Keyframes mixin. + */ +@mixin keyframes($animationName) { + @-webkit-keyframes #{$animationName} { + @content; + } + @-moz-keyframes #{$animationName} { + @content; + } + @-o-keyframes #{$animationName} { + @content; + } + @keyframes #{$animationName} { + @content; + } +} \ No newline at end of file diff --git a/css/_toolbars.scss b/css/_toolbars.scss new file mode 100644 index 000000000..f8be98134 --- /dev/null +++ b/css/_toolbars.scss @@ -0,0 +1,289 @@ +.toolbar { + background-color: rgba(0,0,0,0.5); + position: relative; + z-index: 900; + height: 100%; + pointer-events: auto; +} + +#mainToolbarContainer{ + display: block; + position: absolute; + text-align: center; + top:0; + left:0; + right:0; + z-index:10; + pointer-events: none; + min-height: 100px; + transform: translateY(-100%); + -webkit-transform: translateY(-100%); +} + +#subject { + position: relative; + z-index: 3; + width: auto; + padding: 5px; + margin-left: 40%; + margin-right: 40%; + text-align: center; + background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35)); + box-shadow: 0 0 2px #000000, 0 0 10px #000000; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; +} + +#mainToolbar { + height: $defaultToolbarSize; + display: inline-block; + position: relative; + top: 30px; + margin-left: auto; + margin-right: auto; + width: auto; + border-radius: 4px; +} + +#mainToolbar .first { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} + +#mainToolbar .last { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} + +#extendedToolbar { + display: flex; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + width: $defaultToolbarSize; + height: 100%; + top: 0px; + left: 0px; + padding-top: 10px; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; + transform: translateX(-100%); + -webkit-transform: translateX(-100%); +} + +#extendedToolbarPanel { + display: inline-block; + position:absolute; + top: 0px; + left: $defaultToolbarSize; + width:0%; + height: 100%; + max-width: 200px; + background-color: rgba(0,0,0,0.8); + z-index: 800; + overflow: hidden; + + .extendedToolbarPanel__inner { + display: none; + width: 200px; + color: #FFF; + + > div.title { + text-align: left; + padding: 10px; + margin: 2px; + font-size: 12pt; + } + } +} + +#toolbar_button_hangup { + color: #ff0000; + font-size: 2.2em !important; +} + +#toolbar_button_etherpad { + display: none; +} + +#toolbar_button_chat, +#chatBottomButton, +#contactListButton, +#numberOfParticipants, +#toolbar_button_record { + -webkit-transition: all .5s ease-in-out; + -moz-transition: all .5s ease-in-out; + transition: all .5s ease-in-out; +} + +/*#ffde00*/ +#toolbar_button_chat.active, +#contactListButton.glowing, +#chatBottomButton.glowing { + -webkit-text-shadow: -1px 0 10px #21B9FC, + 0 1px 10px #21B9FC, + 1px 0 10px #21B9FC, + 0 -1px 10px #21B9FC; + -moz-text-shadow: 1px 0 10px #21B9FC, + 0 1px 10px #21B9FC, + 1px 0 10px #21B9FC, + 0 -1px 10px #21B9FC; + text-shadow: -1px 0 10px #21B9FC, + 0 1px 10px #21B9FC, + 1px 0 10px #21B9FC, + 0 -1px 10px #21B9FC; +} + +#numberOfParticipants { + position: absolute; + top: 5px; + line-height: 13px; + font-weight: bold; + font-size: 11px; +} + +#contactListButton.active #numberOfParticipants { + color: #21B9FC; +} + +#mainToolbar a.button:last-child::after { + content: none; +} + +#bottomToolbar { + display:block; + position: absolute; + right: 0; + margin-right: 5px; + bottom: 40px; + width: 29px; + border-radius: 1px; + color: #FFF; + background: rgba(0,0,0,0.5); + z-index: 6; /*+1 from #remoteVideos*/ +} + +.bottomToolbarButton { + display: inline-block; + position: relative; + color: #FFFFFF; + top: 0; + padding-top: 6px; + margin: 2px; + width: 25px; + height: 20px; + cursor: pointer; + font-size: 10pt; + text-align: center; + text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7); + z-index: 1; +} + +.toolbar_span>span { + display: inline-block; + position: absolute; + font-size: 7pt; + color: #ffffff; + text-align:center; + cursor: pointer; +} + +.bottomToolbar_span>span { + display: inline-block; + position: absolute; + font-size: 7pt; + color: #ffffff; + text-align: center; + cursor: pointer; +} + +.button { + display: inline-block; + position: relative; + color: #FFFFFF; + top:0px; + width: 50px; + height: 50px; + cursor: pointer; + text-align: center; + z-index: 1; + font-size: 1.44em !important; + line-height: 50px !important; + vertical-align: middle; +} + +.button[disabled] { + opacity: 0.5; +} + +a.button:hover, +a.bottomToolbarButton:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.8); +} + +a.button>#avatar { + width: 30px; + border-radius: 50%; + padding-top: 10px; + padding-bottom: 10px; +} + +#feedbackButton { + margin-top: auto; +} + +@include keyframes(slideInX) { + 100% { transform: translateX(0%); } +} + +.slideInX { + @include animation('slideInX .5s forwards'); +} + +@include keyframes(slideOutX) { + 0% { transform: translateX(0%); } + 100% { transform: translateX(-100%); } +} + +.slideOutX { + @include animation('slideOutX .5s forwards'); +} + +@include keyframes(slideInY) { + 100% { transform: translateY(0%); } +} + +.slideInY { + @include animation('slideInY .5s forwards'); +} + +@include keyframes(slideOutY) { + 0% { transform: translateY(0%); } + 100% { transform: translateY(-100%); } +} + +.slideOutY { + @include animation('slideOutY .5s forwards'); +} + +@include keyframes(slideInExt) { + from { width: 0%; } + to { width: 20%; } +} + +.slideInExt { + @include animation("slideInExt .5s forwards"); +} + +@include keyframes(slideOutExt) { + from { width: 20%; } + to { width: 0%; } +} + +.slideOutExt { + @include animation("slideOutExt .5s forwards"); +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 3185d20e0..85cfd2679 100644 --- a/css/main.scss +++ b/css/main.scss @@ -4,6 +4,12 @@ /* Variables END */ +/* Mixins BEGIN */ + +@import "mixins"; + +/* Mixins END */ + /* Fonts BEGIN */ @import 'font'; @@ -30,6 +36,7 @@ @import 'welcome_page'; @import 'settingsmenu'; @import 'feedback'; +@import 'toolbars'; @import 'jquery.contextMenu'; @import 'keyboard-shortcuts'; From 8562d3d55d0c019f6ff70592c4b40d35c69dbfd4 Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 8 Sep 2016 13:16:23 -0500 Subject: [PATCH 03/18] Remove bottom toolbar and change side panel position and behavior --- modules/UI/UI.js | 37 ++-- modules/UI/recording/Recording.js | 2 - .../UI/side_pannels/ExtendedToolbarToggler.js | 70 +++++++ modules/UI/side_pannels/SidePanelToggler.js | 186 ------------------ modules/UI/side_pannels/chat/Chat.js | 21 -- .../side_pannels/contactlist/ContactList.js | 23 ++- modules/UI/toolbars/BottomToolbar.js | 130 ------------ modules/UI/toolbars/Toolbar.js | 48 ++++- modules/UI/toolbars/ToolbarToggler.js | 9 - modules/UI/util/UIUtil.js | 21 +- modules/UI/videolayout/FilmStrip.js | 6 +- modules/UI/videolayout/LargeVideo.js | 7 +- modules/UI/videolayout/VideoLayout.js | 23 +-- 13 files changed, 152 insertions(+), 431 deletions(-) create mode 100644 modules/UI/side_pannels/ExtendedToolbarToggler.js delete mode 100644 modules/UI/side_pannels/SidePanelToggler.js delete mode 100644 modules/UI/toolbars/BottomToolbar.js diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 8cb112d86..113d6f042 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -5,10 +5,9 @@ var UI = {}; import Chat from "./side_pannels/chat/Chat"; import Toolbar from "./toolbars/Toolbar"; import ToolbarToggler from "./toolbars/ToolbarToggler"; -import BottomToolbar from "./toolbars/BottomToolbar"; import ContactList from "./side_pannels/contactlist/ContactList"; import Avatar from "./avatar/Avatar"; -import PanelToggler from "./side_pannels/SidePanelToggler"; +import ExtendedToolbarToggler from "./side_pannels/ExtendedToolbarToggler"; import UIUtil from "./util/UIUtil"; import UIEvents from "../../service/UI/UIEvents"; import CQEvents from '../../service/connectionquality/CQEvents'; @@ -134,7 +133,6 @@ function setupChat() { */ function setupToolbars() { Toolbar.init(eventEmitter); - BottomToolbar.setupListeners(eventEmitter); } /** @@ -299,7 +297,7 @@ UI.initConference = function () { //if local role changes buttons state will be again updated UI.updateLocalRole(false); - ToolbarToggler.showToolbar(); + UI.showToolbar(); let displayName = config.displayJids ? id : Settings.getDisplayName(); @@ -337,7 +335,7 @@ UI.mucJoined = function () { */ UI.handleToggleFilmStrip = () => { UI.toggleFilmStrip(); - VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, false); + VideoLayout.resizeVideoArea(true, false); }; /** @@ -362,7 +360,7 @@ function registerListeners() { UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat); UI.addListener(UIEvents.TOGGLE_SETTINGS, function () { - PanelToggler.toggleSettingsMenu(); + ExtendedToolbarToggler.toggle("settingsmenu"); }); UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList); @@ -380,8 +378,7 @@ function registerListeners() { */ function bindEvents() { function onResize() { - PanelToggler.resizeChat(); - VideoLayout.resizeVideoArea(PanelToggler.isVisible()); + ExtendedToolbarToggler.resize(); } // Resize and reposition videos in full screen mode. @@ -430,22 +427,22 @@ UI.start = function () { registerListeners(); ToolbarToggler.init(); - BottomToolbar.init(); + ExtendedToolbarToggler.init(); FilmStrip.init(eventEmitter); VideoLayout.init(eventEmitter); if (!interfaceConfig.filmStripOnly) { - VideoLayout.initLargeVideo(PanelToggler.isVisible()); + VideoLayout.initLargeVideo(); } - VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, true); + VideoLayout.resizeVideoArea(true, true); ContactList.init(eventEmitter); bindEvents(); sharedVideoManager = new SharedVideoManager(eventEmitter); if (!interfaceConfig.filmStripOnly) { - $("#videospace").mousemove(function () { - return ToolbarToggler.showToolbar(); + $("#videoconference_page").mousemove(function () { + return UI.showToolbar(); }); setupToolbars(); setupChat(); @@ -468,9 +465,8 @@ UI.start = function () { elem.href = 'data:application/json;charset=utf-8,\n' + data; }); } else { - $("#header").css("display", "none"); + $("#mainToolbarContainer").css("display", "none"); $("#downloadlog").css("display", "none"); - BottomToolbar.hide(); FilmStrip.setupFilmStripOnly(); messageHandler.enableNotifications(false); $('body').popover("disable"); @@ -499,13 +495,6 @@ UI.start = function () { "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut", - "reposition": function () { - if (PanelToggler.isVisible()) { - $("#toast-container").addClass("notification-bottom-right-center"); - } else { - $("#toast-container").removeClass("notification-bottom-right-center"); - } - }, "newestOnTop": false }; @@ -727,14 +716,14 @@ UI.isFilmStripVisible = function () { * Toggles chat panel. */ UI.toggleChat = function () { - PanelToggler.toggleChat(); + ExtendedToolbarToggler.toggle("chatspace"); }; /** * Toggles contact list panel. */ UI.toggleContactList = function () { - PanelToggler.toggleContactList(); + ExtendedToolbarToggler.toggle("contactlist"); }; /** diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index 5bea4de59..720b19014 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -19,7 +19,6 @@ import UIUtil from '../util/UIUtil'; import VideoLayout from '../videolayout/VideoLayout'; import Feedback from '../Feedback.js'; import Toolbar from '../toolbars/Toolbar'; -import BottomToolbar from '../toolbars/BottomToolbar'; /** * The dialog for user input. @@ -260,7 +259,6 @@ var Recording = { VideoLayout.setLocalVideoVisible(false); Feedback.enableFeedback(false); Toolbar.enable(false); - BottomToolbar.enable(false); APP.UI.messageHandler.enableNotifications(false); APP.UI.messageHandler.enablePopups(false); } diff --git a/modules/UI/side_pannels/ExtendedToolbarToggler.js b/modules/UI/side_pannels/ExtendedToolbarToggler.js new file mode 100644 index 000000000..e12ee9210 --- /dev/null +++ b/modules/UI/side_pannels/ExtendedToolbarToggler.js @@ -0,0 +1,70 @@ +/* global $ */ + +const ExtendedToolbarToggler = { + init() { + document.getElementById("extendedToolbarPanel") + .addEventListener("animationend", function(e) { + console.log("ANIM NAME", e.animationName); + if(e.animationName === "slideOutExt") + $("#extendedToolbarPanel").children().each(function() { + if ($(this).hasClass("show")) + $(this).removeClass("show").addClass("hide"); + }); + }, false); + }, + + toggle(elementId) { + let elementSelector = $(`#${elementId}`); + let isSelectorVisible = elementSelector.hasClass("show"); + + if (isSelectorVisible) { + this.hide(); + } + else { + if (this.isVisible()) + $("#extendedToolbarPanel").children().each(function() { + if ($(this).id !== elementId && $(this).hasClass("show")) + $(this).removeClass("show").addClass("hide"); + }); + + if (!this.isVisible()) + this.show(); + + elementSelector.removeClass("hide").addClass("show"); + } + }, + + /** + * Returns true if this toolbar is currently visible, or false otherwise. + * @return true if currently visible, false - otherwise + */ + isVisible() { + return $("#extendedToolbarPanel").hasClass("slideInExt"); + }, + + /** + * Hides the toolbar with animation or not depending on the animate + * parameter. + */ + hide(elementId) { + $("#extendedToolbarPanel") + .removeClass("slideInExt").addClass("slideOutExt"); + }, + + /** + * Shows the toolbar with animation or not depending on the animate + * parameter. + */ + show(elementId) { + if (!this.isVisible()) + $("#extendedToolbarPanel") + .removeClass("slideOutExt").addClass("slideInExt"); + }, + + resize () { + //let [width, height] = UIUtil.getSidePanelSize(); + //Chat.resizeChat(width, height); + } +}; + +export default ExtendedToolbarToggler; \ No newline at end of file diff --git a/modules/UI/side_pannels/SidePanelToggler.js b/modules/UI/side_pannels/SidePanelToggler.js deleted file mode 100644 index d5e37fed1..000000000 --- a/modules/UI/side_pannels/SidePanelToggler.js +++ /dev/null @@ -1,186 +0,0 @@ -/* global require, $ */ -import Chat from "./chat/Chat"; -import ContactList from "./contactlist/ContactList"; -import Settings from "./../../settings/Settings"; -import SettingsMenu from "./settings/SettingsMenu"; -import VideoLayout from "../videolayout/VideoLayout"; -import ToolbarToggler from "../toolbars/ToolbarToggler"; -import UIUtil from "../util/UIUtil"; - -const buttons = { - '#chatspace': '#chatBottomButton', - '#contactlist': '#contactListButton', - '#settingsmenu': '#toolbar_button_settings' -}; - -var currentlyOpen = null; - -/** - * Toggles the windows in the side panel - * @param object the window that should be shown - * @param selector the selector for the element containing the panel - * @param onOpenComplete function to be called when the panel is opened - * @param onOpen function to be called if the window is going to be opened - * @param onClose function to be called if the window is going to be closed - * @param onVideoResizeComplete function to be called after the video area - * is resized - */ -function toggle (object, selector, onOpenComplete, - onOpen, onClose, onVideoResizeComplete) { - let isSideBarVisible = object.isVisible(); - - UIUtil.buttonClick(buttons[selector], "active"); - - if (isSideBarVisible) { - $("#toast-container").animate({ - right: 5 - }, { - queue: false, - duration: 500 - }); - - $(selector).hide("slide", { - direction: "right", - queue: false, - duration: 500, - // Set the size to 0 at the end of the animation to ensure that - // the is(":visible") function on this selector will return {false} - // when the element is hidden. - complete: function() {$(selector).css("width", "0");} - }); - - resizeVideoArea(false, onVideoResizeComplete); - - if(typeof onClose === "function") { - onClose(); - } - - currentlyOpen = null; - } else { - resizeVideoArea(true, onVideoResizeComplete); - - // Undock the toolbar when the chat is shown and if we're in a - // video mode. - if (VideoLayout.isLargeVideoVisible()) { - ToolbarToggler.dockToolbar(false); - } - - if (currentlyOpen) { - var current = $(currentlyOpen); - UIUtil.buttonClick(buttons[currentlyOpen], "active"); - current.css('z-index', 4); - setTimeout(function () { - current.css('display', 'none'); - current.css('z-index', 5); - }, 500); - } - - $("#toast-container").animate({ - right: (UIUtil.getSidePanelSize()[0] + 5) - }, { - queue: false, - duration: 500 - }); - // Set the size dynamically (not in the css), so that we're sure that - // when is(":visible") is called on this selector the result is {false} - // before it's actually visible. - // (Chrome seems to return {true} for an element which is in the DOM and - // has non-null size set). - $(selector).css("width", "20%"); - $(selector).show("slide", { - direction: "right", - queue: false, - duration: 500, - complete: onOpenComplete - }); - if(typeof onOpen === "function") { - onOpen(); - } - - currentlyOpen = selector; - } -} - -function resizeVideoArea(isSidePanelVisible, completeFunction) { - VideoLayout.resizeVideoArea(isSidePanelVisible, - false,//don't force thumbnail count update - true, //animate - completeFunction); -} - -/** - * Toggler for the chat, contact list, settings menu, etc.. - */ -var PanelToggler = { - - /** - * Opens / closes the chat area. - */ - toggleChat () { - var chatCompleteFunction = Chat.isVisible() - ? function () {} - : function () { - Chat.scrollChatToBottom(); - $('#chatspace').trigger('shown'); - }; - - toggle(Chat, //Object - '#chatspace', // Selector - function () { //onOpenComplete - // Request the focus in the nickname field or the chat input - // field. - if ($('#nickname').css('visibility') === 'visible') { - $('#nickinput').focus(); - } else { - $('#usermsg').focus(); - } - }, - () => this.resizeChat(), //OnOpen - null, - chatCompleteFunction); //OnClose - }, - - resizeChat () { - let [width, height] = UIUtil.getSidePanelSize(); - Chat.resizeChat(width, height); - }, - - /** - * Opens / closes the contact list area. - */ - toggleContactList () { - var completeFunction = ContactList.isVisible() - ? function () {} - : function () { - $('#contactlist').trigger('shown'); - }; - - toggle(ContactList, - '#contactlist', - null, - function() { - ContactList.setVisualNotification(false); - }, - null, - completeFunction); - }, - - /** - * Opens / closes the settings menu - */ - toggleSettingsMenu () { - toggle(SettingsMenu, - '#settingsmenu', - null, - function() {}, - null); - }, - - isVisible () { - return (Chat.isVisible() || - ContactList.isVisible() || - SettingsMenu.isVisible()); - } -}; - -export default PanelToggler; diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index 76064adf1..058343104 100644 --- a/modules/UI/side_pannels/chat/Chat.js +++ b/modules/UI/side_pannels/chat/Chat.js @@ -18,15 +18,11 @@ var unreadMessages = 0; */ function setVisualNotification(show) { var unreadMsgElement = document.getElementById('unreadMessages'); - var unreadMsgBottomElement - = document.getElementById('bottomUnreadMessages'); var glower = $('#toolbar_button_chat'); - var bottomGlower = $('#chatBottomButton'); if (unreadMessages) { unreadMsgElement.innerHTML = unreadMessages.toString(); - unreadMsgBottomElement.innerHTML = unreadMessages.toString(); ToolbarToggler.dockToolbar(true); @@ -42,19 +38,6 @@ function setVisualNotification(show) { 'top:' + topIndent + '; left:' + leftIndent + ';'); - var chatBottomButtonElement - = document.getElementById('chatBottomButton').parentNode; - var bottomLeftIndent = (UIUtil.getTextWidth(chatBottomButtonElement) - - UIUtil.getTextWidth(unreadMsgBottomElement)) / 2; - var bottomTopIndent = (UIUtil.getTextHeight(chatBottomButtonElement) - - UIUtil.getTextHeight(unreadMsgBottomElement)) / 2 - 2; - - unreadMsgBottomElement.setAttribute( - 'style', - 'top:' + bottomTopIndent + - '; left:' + bottomLeftIndent + ';'); - - if (!glower.hasClass('icon-chat-simple')) { glower.removeClass('icon-chat'); glower.addClass('icon-chat-simple'); @@ -62,7 +45,6 @@ function setVisualNotification(show) { } else { unreadMsgElement.innerHTML = ''; - unreadMsgBottomElement.innerHTML = ''; glower.removeClass('icon-chat-simple'); glower.addClass('icon-chat'); } @@ -70,15 +52,12 @@ function setVisualNotification(show) { if (show && !notificationInterval) { notificationInterval = window.setInterval(function () { glower.toggleClass('active'); - bottomGlower.toggleClass('active glowing'); }, 800); } else if (!show && notificationInterval) { window.clearInterval(notificationInterval); notificationInterval = false; glower.removeClass('active'); - bottomGlower.removeClass('glowing'); - bottomGlower.addClass('active'); } } diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js index bad800786..f2e260852 100644 --- a/modules/UI/side_pannels/contactlist/ContactList.js +++ b/modules/UI/side_pannels/contactlist/ContactList.js @@ -14,16 +14,23 @@ let notificationInterval; */ function updateNumberOfParticipants(delta) { numberOfContacts += delta; - if (numberOfContacts === 1) { - // when the user is alone we don't show the number of participants - $("#numberOfParticipants").text(''); - ContactList.setVisualNotification(false); - } else if (numberOfContacts > 1) { - ContactList.setVisualNotification(!ContactList.isVisible()); - $("#numberOfParticipants").text(numberOfContacts); - } else { + + if (numberOfContacts <= 0) { console.error("Invalid number of participants: " + numberOfContacts); + return; } + + let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts; + $("#numberOfParticipants").text(buttonIndicatorText); + + let showVisualNotification + = (numberOfContacts === 1) ? false : !ContactList.isVisible(); + ContactList.setVisualNotification(showVisualNotification); + + $("#contactlist>div.title").text( + APP.translation.translateString( + "contactlist", {participants: numberOfContacts} + )); } /** diff --git a/modules/UI/toolbars/BottomToolbar.js b/modules/UI/toolbars/BottomToolbar.js deleted file mode 100644 index 70fc17fe2..000000000 --- a/modules/UI/toolbars/BottomToolbar.js +++ /dev/null @@ -1,130 +0,0 @@ -/* global $, APP, interfaceConfig, JitsiMeetJS */ -import UIUtil from '../util/UIUtil'; -import UIEvents from '../../../service/UI/UIEvents'; - -const defaultBottomToolbarButtons = { - 'chat': { - id: '#bottom_toolbar_chat' - }, - 'contacts': { - id: '#bottom_toolbar_contact_list' - }, - 'filmstrip': { - id: '#bottom_toolbar_film_strip', - shortcut: "F", - shortcutAttr: "filmstripPopover", - shortcutFunc: function() { - JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled"); - APP.UI.handleToggleFilmStrip(); - }, - shortcutDescription: "keyboardShortcuts.toggleFilmstrip" - } -}; - -const BottomToolbar = { - init () { - this.toolbar = $('#bottomToolbar'); - - // The bottom toolbar is enabled by default. - this.enabled = true; - }, - /** - * Enables / disables the bottom toolbar. - * @param {e} set to {true} to enable the bottom toolbar or {false} - * to disable it - */ - enable (e) { - this.enabled = e; - if (!e && this.isVisible()) - this.hide(false); - }, - /** - * Indicates if the bottom toolbar is currently enabled. - * @return {this.enabled} - */ - isEnabled() { - return this.enabled; - }, - - setupListeners (emitter) { - UIUtil.hideDisabledButtons(defaultBottomToolbarButtons); - - const buttonHandlers = { - "bottom_toolbar_contact_list": function () { - JitsiMeetJS.analytics.sendEvent( - 'bottomtoolbar.contacts.toggled'); - emitter.emit(UIEvents.TOGGLE_CONTACT_LIST); - }, - "bottom_toolbar_film_strip": function () { - JitsiMeetJS.analytics.sendEvent( - 'bottomtoolbar.filmstrip.toggled'); - emitter.emit(UIEvents.TOGGLE_FILM_STRIP); - }, - "bottom_toolbar_chat": function () { - JitsiMeetJS.analytics.sendEvent('bottomtoolbar.chat.toggled'); - emitter.emit(UIEvents.TOGGLE_CHAT); - } - }; - - Object.keys(defaultBottomToolbarButtons).forEach( - id => { - if (UIUtil.isButtonEnabled(id)) { - var button = defaultBottomToolbarButtons[id]; - - if (button.shortcut) - APP.keyboardshortcut.registerShortcut( - button.shortcut, - button.shortcutAttr, - button.shortcutFunc, - button.shortcutDescription - ); - } - } - ); - - Object.keys(buttonHandlers).forEach( - buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId]) - ); - }, - - resizeToolbar (thumbWidth, thumbHeight) { - let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18; - this.toolbar.css({bottom}); - }, - - /** - * Returns true if this toolbar is currently visible, or false otherwise. - * @return true if currently visible, false - otherwise - */ - isVisible() { - return this.toolbar.is(":visible"); - }, - - /** - * Hides the bottom toolbar with animation or not depending on the animate - * parameter. - * @param animate true to hide the bottom toolbar with animation, - * false or nothing to hide it without animation. - */ - hide(animate) { - if (animate) - this.toolbar.hide("slide", {direction: "right", duration: 300}); - else - this.toolbar.css("display", "none"); - }, - - /** - * Shows the bottom toolbar with animation or not depending on the animate - * parameter. - * @param animate true to show the bottom toolbar with animation, - * false or nothing to show it without animation. - */ - show(animate) { - if (animate) - this.toolbar.show("slide", {direction: "right", duration: 300}); - else - this.toolbar.css("display", "block"); - } -}; - -export default BottomToolbar; diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index eb899f478..e6d691717 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -2,6 +2,7 @@ /* jshint -W101 */ import UIUtil from '../util/UIUtil'; import UIEvents from '../../../service/UI/UIEvents'; +import ExtendedToolbarToggler from "../side_pannels/ExtendedToolbarToggler.js"; let roomUrl = null; let emitter = null; @@ -92,6 +93,11 @@ const buttonHandlers = { JitsiMeetJS.analytics.sendEvent('toolbar.chat.toggled'); emitter.emit(UIEvents.TOGGLE_CHAT); }, + "toolbar_contact_list": function () { + JitsiMeetJS.analytics.sendEvent( + 'toolbar.contacts.toggled'); + emitter.emit(UIEvents.TOGGLE_CONTACT_LIST); + }, "toolbar_button_etherpad": function () { JitsiMeetJS.analytics.sendEvent('toolbar.etherpad.clicked'); emitter.emit(UIEvents.ETHERPAD_CLICKED); @@ -150,6 +156,11 @@ const buttonHandlers = { } } ); + }, + "toolbar_film_strip": function () { + JitsiMeetJS.analytics.sendEvent( + 'bottomtoolbar.filmstrip.toggled'); + emitter.emit(UIEvents.TOGGLE_FILM_STRIP); } }; const defaultToolbarButtons = { @@ -199,6 +210,9 @@ const defaultToolbarButtons = { }, shortcutDescription: "keyboardShortcuts.toggleChat" }, + 'contacts': { + id: '#toolbar_contact_list' + }, 'etherpad': { id: '#toolbar_button_etherpad' }, @@ -210,6 +224,16 @@ const defaultToolbarButtons = { }, 'hangup': { id: '#toolbar_button_hangup' + }, + 'filmstrip': { + id: '#toolbar_film_strip', + shortcut: "F", + shortcutAttr: "filmstripPopover", + shortcutFunc: function() { + JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled"); + APP.UI.toggleFilmStrip(); + }, + shortcutDescription: "keyboardShortcuts.toggleFilmstrip" } }; @@ -242,7 +266,8 @@ const Toolbar = { emitter = eventEmitter; // The toolbar is enabled by default. this.enabled = true; - this.toolbarSelector = $("#header"); + this.toolbarSelector = $("#mainToolbarContainer"); + this.extendedToolbarSelector = $("#extendedToolbar"); UIUtil.hideDisabledButtons(defaultToolbarButtons); @@ -507,7 +532,9 @@ const Toolbar = { }); if (hovered) return true; - if ($("#bottomToolbar:hover").length > 0) { + if ($("#bottomToolbar:hover").length > 0 + || $("#extendedToolbar:hover").length > 0 + || ExtendedToolbarToggler.isVisible()) { return true; } return false; @@ -518,7 +545,7 @@ const Toolbar = { * @return true if currently visible, false - otherwise */ isVisible() { - return this.toolbarSelector.is(":visible"); + return this.toolbarSelector.hasClass("slideInY"); }, /** @@ -526,8 +553,9 @@ const Toolbar = { * parameter. */ hide() { - this.toolbarSelector.hide( - "slide", { direction: "up", duration: 300}); + this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY"); + this.extendedToolbarSelector.toggleClass("slideInX") + .toggleClass("slideOutX"); }, /** @@ -535,8 +563,14 @@ const Toolbar = { * parameter. */ show() { - this.toolbarSelector.show( - "slide", { direction: "up", duration: 300}); + if (this.toolbarSelector.hasClass("slideOutY")) + this.toolbarSelector.toggleClass("slideOutY"); + + if (this.extendedToolbarSelector.hasClass("slideOutX")) + this.extendedToolbarSelector.toggleClass("slideOutX"); + + this.toolbarSelector.toggleClass("slideInY"); + this.extendedToolbarSelector.toggleClass("slideInX"); } }; diff --git a/modules/UI/toolbars/ToolbarToggler.js b/modules/UI/toolbars/ToolbarToggler.js index 313defda0..b43198e75 100644 --- a/modules/UI/toolbars/ToolbarToggler.js +++ b/modules/UI/toolbars/ToolbarToggler.js @@ -1,7 +1,6 @@ /* global APP, config, $, interfaceConfig */ import UIUtil from '../util/UIUtil'; -import BottomToolbar from './BottomToolbar'; import Toolbar from './Toolbar'; import FilmStrip from '../videolayout/FilmStrip.js'; @@ -37,9 +36,6 @@ function hideToolbar() { } else { Toolbar.hide(); $('#subject').animate({top: "-=40"}, 300); - if (!FilmStrip.isFilmStripVisible()) { - BottomToolbar.hide(true); - } } } @@ -78,11 +74,6 @@ const ToolbarToggler = { updateTimeout = true; } - if (BottomToolbar.isEnabled() && !BottomToolbar.isVisible()) { - BottomToolbar.show(true); - updateTimeout = true; - } - if (updateTimeout) { if (toolbarTimeoutObject) { clearTimeout(toolbarTimeoutObject); diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index 1c621349f..019586a6f 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -5,31 +5,12 @@ */ var UIUtil = { - /** - * Returns the size of the side panel. - */ - getSidePanelSize () { - var availableHeight = window.innerHeight; - var availableWidth = window.innerWidth; - - var panelWidth = 200; - if (availableWidth * 0.2 < 200) { - panelWidth = availableWidth * 0.2; - } - - return [panelWidth, availableHeight]; - }, - /** * Returns the available video width. */ - getAvailableVideoWidth: function (isSidePanelVisible) { + getAvailableVideoWidth: function () { let rightPanelWidth = 0; - if (isSidePanelVisible) { - rightPanelWidth = UIUtil.getSidePanelSize()[0]; - } - return window.innerWidth - rightPanelWidth; }, diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index 27c3b4875..db74044f0 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/FilmStrip.js @@ -68,10 +68,8 @@ const FilmStrip = { /** * Calculates the thumbnail size. - * @param videoAreaAvailableWidth the currently available video area width - * that we want to take into account when calculating the film strip width. */ - calculateThumbnailSize (isSideBarVisible) { + calculateThumbnailSize () { let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT; let numvids = this.getThumbs(true).length; @@ -84,7 +82,7 @@ const FilmStrip = { * film strip size hasn't been updated yet, but it will be. */ let videoAreaAvailableWidth - = UIUtil.getAvailableVideoWidth(isSideBarVisible) + = UIUtil.getAvailableVideoWidth() - UIUtil.parseCssInt(this.filmStrip.css('right'), 10) - UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10) - UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10) diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js index 7c2595bb0..93f7407d6 100644 --- a/modules/UI/videolayout/LargeVideo.js +++ b/modules/UI/videolayout/LargeVideo.js @@ -536,11 +536,10 @@ export default class LargeVideoManager { } /** - * Update container size optionally taking side bar size into account. - * @param {boolean} isSideBarVisible if side bar is visible. + * Update container size. */ - updateContainerSize (isSideBarVisible) { - this.width = UIUtil.getAvailableVideoWidth(isSideBarVisible); + updateContainerSize () { + this.width = UIUtil.getAvailableVideoWidth(); this.height = window.innerHeight; } diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 47fc05729..712ecae2b 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -3,7 +3,6 @@ import AudioLevels from "../audio_levels/AudioLevels"; import Avatar from "../avatar/Avatar"; -import BottomToolbar from "../toolbars/BottomToolbar"; import FilmStrip from "./FilmStrip"; import UIEvents from "../../../service/UI/UIEvents"; import UIUtil from "../util/UIUtil"; @@ -12,7 +11,6 @@ import RemoteVideo from "./RemoteVideo"; import LargeVideoManager, {VIDEO_CONTAINER_TYPE} from "./LargeVideo"; import {SHARED_VIDEO_CONTAINER_TYPE} from '../shared_video/SharedVideo'; import LocalVideo from "./LocalVideo"; -import PanelToggler from "../side_pannels/SidePanelToggler"; const RTCUIUtil = JitsiMeetJS.util.RTCUIHelper; @@ -115,12 +113,12 @@ var VideoLayout = { this.lastNCount = config.channelLastN; }, - initLargeVideo (isSideBarVisible) { + initLargeVideo () { largeVideo = new LargeVideoManager(); if(localFlipX) { largeVideo.onLocalFlipXChange(localFlipX); } - largeVideo.updateContainerSize(isSideBarVisible); + largeVideo.updateContainerSize(); AudioLevels.init(); }, @@ -487,21 +485,16 @@ var VideoLayout = { */ resizeThumbnails ( animate = false, forceUpdate = false, - isSideBarVisible = null, onComplete = null) { - isSideBarVisible - = (isSideBarVisible !== null) - ? isSideBarVisible : PanelToggler.isVisible(); let {thumbWidth, thumbHeight} - = FilmStrip.calculateThumbnailSize(isSideBarVisible); + = FilmStrip.calculateThumbnailSize(); $('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2); FilmStrip.resizeThumbnails(thumbWidth, thumbHeight, animate, forceUpdate) .then(function () { - BottomToolbar.resizeToolbar(thumbWidth, thumbHeight); AudioLevels.updateCanvasSize(thumbWidth, thumbHeight); if (onComplete && typeof onComplete === "function") onComplete(); @@ -891,31 +884,29 @@ var VideoLayout = { /** * Resizes the video area. * - * @param isSideBarVisible indicates if the side bar is currently visible * @param forceUpdate indicates that hidden thumbnails will be shown * @param completeFunction a function to be called when the video area is * resized. */ - resizeVideoArea (isSideBarVisible, - forceUpdate = false, + resizeVideoArea (forceUpdate = false, animate = false, completeFunction = null) { if (largeVideo) { - largeVideo.updateContainerSize(isSideBarVisible); + largeVideo.updateContainerSize(); largeVideo.resize(animate); } // Calculate available width and height. let availableHeight = window.innerHeight; - let availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible); + let availableWidth = UIUtil.getAvailableVideoWidth(); if (availableWidth < 0 || availableHeight < 0) { return; } // Resize the thumbnails first. - this.resizeThumbnails(false, forceUpdate, isSideBarVisible); + this.resizeThumbnails(false, forceUpdate); // Resize the video area element. $('#videospace').animate({ From 17e28069ab10b304a86ceb9582da012d972c6d15 Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 8 Sep 2016 13:22:50 -0500 Subject: [PATCH 04/18] Re-designs toolbars, side panels like setting, contact list --- css/_base.scss | 229 +++++----------------------------- css/_chat.scss | 13 -- css/_contact_list.scss | 16 +-- css/_settingsmenu.scss | 19 --- css/_variables.scss | 11 +- css/_videolayout_default.scss | 31 ----- index.html | 122 ++++++++---------- lang/main.json | 8 +- 8 files changed, 95 insertions(+), 354 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index 8ecc084c8..4a78f4572 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -17,139 +17,10 @@ html, body, input, textarea, keygen, select, button { font-family: $baseFontFamily !important; } -.right-panel { - display:none; - position:absolute; - float: right; - top: 0px; - bottom: 0px; - right: 0px; - width: 0px; - max-width: 200px; - overflow: hidden; - /* background-color:#dfebf1;*/ - background-color:#FFFFFF; - border-left:1px solid #424242; - z-index: 5; -} - #nowebrtc { display:none; } -#header_container { - z-index: 1014; -} - -.toolbar_span { - display: inline-block; - position: relative; -} - -#toolbar a.button:last-child::after { - content: none; -} - -.button { - display: inline-block; - position: relative; - color: #FFFFFF; - top:0px; - padding-top: 10px; - width: 38px; - height: 28px; - cursor: pointer; - text-align: center; - text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6); - z-index: 1; - font-size: 1.44em !important; - vertical-align: middle; -} - -.button[disabled] { - opacity: 0.5; -} - -.toolbar_span>span { - display: inline-block; - position: absolute; - font-size: 7pt; - color: #ffffff; - text-align:center; - cursor: pointer; -} - -#toolbar_button_chat, #chatBottomButton, #contactListButton, #numberOfParticipants { - -webkit-transition: all .5s ease-in-out; - -moz-transition: all .5s ease-in-out; - transition: all .5s ease-in-out; -} -/*#ffde00*/ -#toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing { - -webkit-text-shadow: -1px 0 10px #21B9FC, - 0 1px 10px #21B9FC, - 1px 0 10px #21B9FC, - 0 -1px 10px #21B9FC; - -moz-text-shadow: 1px 0 10px #21B9FC, - 0 1px 10px #21B9FC, - 1px 0 10px #21B9FC, - 0 -1px 10px #21B9FC; - text-shadow: -1px 0 10px #21B9FC, - 0 1px 10px #21B9FC, - 1px 0 10px #21B9FC, - 0 -1px 10px #21B9FC; -} - -#toolbar_button_hangup { - color: #ff0000; - font-size: 1.4em; -} - -#numberOfParticipants { - position: absolute; - top: 0px; - right: -1px; - color: white; - width: 13px; - height: 13px; - line-height: 13px; - font-weight: bold; - border-radius: 1px; - font-size: 11px; - text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; -} - -#contactListButton.active #numberOfParticipants { - color: #21B9FC; -} - -#toolbar { - display:inline-block; - position:relative; - top:5px; - margin-left:auto; - margin-right:auto; - height:38px; - width:auto; - background-color: rgba(0,0,0,0.5); - border-radius: 1px; - pointer-events: auto; -} - -#toolbar_button_record { - -webkit-transition: all .5s ease-in-out; - -moz-transition: all .5s ease-in-out; - transition: all .5s ease-in-out; -} - -a.button:hover, -a.bottomToolbarButton:hover { - cursor: pointer; - background: rgba(255, 255, 255, 0.1); - border-radius: 1px; - -webkit-border-radius: 1px; -} - .no-fa-video-camera, .fa-microphone-slash { color: #636363; } @@ -222,78 +93,10 @@ form { color: rgba(255,255,255,.50); } -#feedbackButton { - position: absolute; - bottom: 60; - left: 60; - overflow: visible; - color: rgba(255,255,255,.50); -} - -#feedbackButtonDiv { - display: none; - position: absolute; - background-color: rgba(0,0,0,.50); - border-radius: 50%; - width: 100px; - height: 100px; - bottom: -50px; - left: -50px; - z-index: 100; - overflow: hidden; - transition: all 2s ease-in-out; -} - -#feedbackButtonDiv.hidden { - bottom: -246px; -} - -div.feedbackButton:hover { - transform: scale(1.3); -} - -#bottomToolbar { - display:block; - position: absolute; - right: 0; - margin-right: 5px; - bottom: 40px; - width: 29px; - border-radius: 1px; - color: #FFF; - background: rgba(0,0,0,0.5); - z-index: 6; /*+1 from #remoteVideos*/ -} - -.bottomToolbarButton { - display: inline-block; - position: relative; - color: #FFFFFF; - top: 0; - padding-top: 6px; - margin: 2px; - width: 25px; - height: 20px; - cursor: pointer; - font-size: 10pt; - text-align: center; - text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7); - z-index: 1; -} - .active { background-color: #00ccff; } -.bottomToolbar_span>span { - display: inline-block; - position: absolute; - font-size: 7pt; - color: #ffffff; - text-align: center; - cursor: pointer; -} - .glow { text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df; @@ -381,3 +184,35 @@ div.feedbackButton:hover { .toast-message .nickname { font-weight: bold; } + +/** + * Hides an element. + */ +.hide { + display: none !important; +} + +/** + * Shows an element. + */ +.show { + display: block !important; +} + +/** + * Shows an inline element. + */ +.show-inline { + display: inline-block !important; +} + +/** + * Shows a flex element. + */ +.show-flex { + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-flexbox !important; + display: -webkit-flex !important; + display: flex !important; +} \ No newline at end of file diff --git a/css/_chat.scss b/css/_chat.scss index 7b4a0be89..54665bc22 100644 --- a/css/_chat.scss +++ b/css/_chat.scss @@ -1,9 +1,3 @@ -#chatspace { - display: none; - background-color: black; - border-left: 1px solid #424242; -} - #chatspace * { -webkit-user-select: text; user-select: text; @@ -98,13 +92,6 @@ position: absolute; } -#bottomUnreadMessages { - top: 5px; - left: 10px; - position: absolute; - font-size: 8px; -} - #chatspace .username { float: left; padding-left: 5px; diff --git a/css/_contact_list.scss b/css/_contact_list.scss index 6e69a9637..fa11d3c7a 100644 --- a/css/_contact_list.scss +++ b/css/_contact_list.scss @@ -1,21 +1,6 @@ #contactlist { - display: none; - background-color: black; cursor: default; - > div.title { - text-align: left; - padding: 7px 10px; - margin: 2px; - color: #21B9FC; - font-size: 11pt; - border-bottom: 1px solid #676767; - - > span { - margin-left: 5px; - } - } - > ul#contacts { position: absolute; top: 31px; @@ -37,6 +22,7 @@ >li { list-style-type: none; text-align: left; + white-space: nowrap; color: #FFF; font-size: 10pt; padding: 7px 10px; diff --git a/css/_settingsmenu.scss b/css/_settingsmenu.scss index f21aafcf4..3c5ab3bff 100644 --- a/css/_settingsmenu.scss +++ b/css/_settingsmenu.scss @@ -1,10 +1,3 @@ -#settingsmenu { - display: none; - background: black; - color: #21B9FC; - overflow-y: auto; -} - #settingsmenu input, select { margin-top: 10px; margin-left: 10%; @@ -16,18 +9,6 @@ color: #a7a7a7; } -#settingsmenu>div.title { - text-align: left; - padding: 7px 10px; - margin: 2px; - font-size: 11pt; - border-bottom: 1px solid #676767; -} - -#settingsmenu>div.title>span { - margin-left: 5px; -} - #settingsmenu .arrow-up { width: 0; height: 0; diff --git a/css/_variables.scss b/css/_variables.scss index e93e97dce..4469eb64a 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -1,5 +1,10 @@ /** -* Style variables -*/ - + * Style variables + */ $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif; + +/** + * Size variables. + */ +$defaultToolbarSize: 50px; + diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 7cc883ba3..102253886 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -141,10 +141,6 @@ z-index: 0; } -#toolbar_button_etherpad { - display: none; -} - #remoteVideos .videocontainer>span.focusindicator, #remoteVideos .videocontainer>div.remotevideomenu { position: absolute; @@ -357,33 +353,6 @@ z-index: 20; /*The reload button should appear on top of the header!*/ } -#header{ - display:none; - position:absolute; - text-align:center; - top:0; - left:0; - right:0; - z-index:10; - pointer-events: none; - min-height: 100px; -} - -#subject { - position: relative; - z-index: 3; - width: auto; - padding: 5px; - margin-left: 40%; - margin-right: 40%; - text-align: center; - background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35)); - box-shadow: 0 0 2px #000000, 0 0 10px #000000; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; - display: none; -} - .audiolevel { display: inline-block; position: absolute; diff --git a/index.html b/index.html index b094a525e..a01f69676 100644 --- a/index.html +++ b/index.html @@ -96,25 +96,12 @@
-
- +
+ + + + + + + + + + + + + + + + + + + + + +
-
@@ -183,29 +190,9 @@
- - - - - - - - - - - - - - - - - - - - -
- -
-
-
- - - - -
+
+
+
+ +
+ +
+
-
- +
+ -
-
- +
+
+ +
-
-
-
-
    -
    -
    -
    -
    - - - -
    - - +
    +
    +
      -
      - - - +
      +
      +
      + + + +
      + + +
      +
      + + + +
      +
      + +
      +
      -
      - -
      - -
      - +
      @@ -133,6 +133,7 @@ + @@ -141,7 +142,6 @@ -
        - +
        +
        +
        + +
        + +
        +
        + +
        + + +
        +
        + +
        +
        +
        +
        +
        +
          +
          +
          +
          +
          + + + +
          + + +
          +
          + + + +
          +
          + +
          + +
          +
          +
        @@ -169,7 +230,7 @@
        - +
        HD @@ -191,67 +252,6 @@
        -
        -
        -
        - -
        - -
        -
        - -
        - - -
        -
        - -
        -
        -
        -
        -
        -
          -
          -
          -
          -
          - - - -
          - - -
          -
          - - - -
          -
          - -
          - -
          -
          - +
          '; return message; @@ -252,10 +252,10 @@ var Feedback = { { $('#stars >a >i').each(function(index) { if (index <= starCount) { - $(this).removeClass("fa-star-o"); + $(this).removeClass("icon-star"); } else - $(this).addClass("fa-star-o"); + $(this).addClass("icon-star"); }); }, /** @@ -280,7 +280,7 @@ var Feedback = { unhoverStars: function (starCount) { $('#stars >a >i').each(function(index) { - if (index <= starCount && $(this).hasClass("fa-star-o")) + if (index <= starCount && $(this).hasClass("icon-star")) $(this).removeClass("starHover"); }); } diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index b8bd8d6c3..b245ee8e6 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -45,7 +45,7 @@ function createEditDisplayNameButton() { UIUtil.setTooltip(editButton, "videothumbnail.editnickname", "top"); - editButton.innerHTML = ''; + editButton.innerHTML = ''; return editButton; } diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 52d898d20..badd626f7 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -119,7 +119,7 @@ RemoteVideo.prototype._generatePopupContent = function () { muteMenuItem.appendChild(muteLinkItem); popupmenuElement.appendChild(muteMenuItem); - var ejectIndicator = ""; + var ejectIndicator = ""; var ejectMenuItem = document.createElement('li'); var ejectLinkItem = document.createElement('a'); diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index b47c4f9d3..cf42a16dc 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -309,7 +309,7 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () { if (indicatorSpan.children().length !== 0) return; var moderatorIndicator = document.createElement('i'); - moderatorIndicator.className = 'fa fa-star'; + moderatorIndicator.className = 'icon-star'; indicatorSpan[0].appendChild(moderatorIndicator); UIUtil.setTooltip(indicatorSpan[0], From 2b84a149fe2463dd114f1f6a2f30fd3481cc2108 Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Mon, 12 Sep 2016 14:43:34 -0500 Subject: [PATCH 11/18] fix(toolbar): Button popups --- css/_login_menu.scss | 18 ++++++++++++++++-- images/leftDropdownPointer.png | Bin 0 -> 611 bytes index.html | 4 ++-- modules/UI/toolbars/Toolbar.js | 25 +++++++++++++++++++++++++ 4 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 images/leftDropdownPointer.png diff --git a/css/_login_menu.scss b/css/_login_menu.scss index c7ad327bb..5ddb6a956 100644 --- a/css/_login_menu.scss +++ b/css/_login_menu.scss @@ -1,6 +1,7 @@ /*Initialize*/ ul.loginmenu { - font-family: inherit; + font-family: $baseFontFamily; + line-height: normal; display:none; position: absolute; margin: 0; @@ -55,4 +56,17 @@ a.disabled { position: absolute; top: -30px; left: 0px; -} \ No newline at end of file +} + +.loginmenu.extendedToolbarPopup { + left: 55px; + top: 0px; +} + +ul.loginmenu.extendedToolbarPopup:after { + content: url('../images/leftDropdownPointer.png'); + display: block; + position: absolute; + top: 18px; + left: -7px; +} diff --git a/images/leftDropdownPointer.png b/images/leftDropdownPointer.png new file mode 100644 index 0000000000000000000000000000000000000000..2acd76ef471dc04bec67959125da5a6aab974399 GIT binary patch literal 611 zcmeAS@N?(olHy`uVBq!ia0vp^oIuRS!3HG%PBB{nq*&4&eH|GXHuiJ>Nn{1`6_P!I zd>I(3)EF2VS{N990fib~Fff!FFfhDIU|_JC!N4G1FlSew4N!u!z$3Dlfq`2Xgc%uT z&5>YWV2sQRi71Ki^|4CM&(%vz$xlkvtH>8?tx|+mh4pF`@Az>qBQba4#P5KT@vz;Drb zsraL2AdA;L)<^$$h*UDE-g6R7&`4tPGGX`_ufnR))zT<*`=W{?*MqK}#yP(&L>fd@ znN{~c4*Vehgl$KmgIQbx%ao(pvOe1dCNy4uXwb^i%&<(r