From d84d0b65ca5bab0bdfb08635af8c3159d76216cf Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 27 Oct 2016 16:09:27 +0300 Subject: [PATCH 1/2] Adjust alignment of remote video menu --- css/_mixins.scss | 4 +- css/_popup_menu.scss | 92 +++++++++-------- css/_videolayout_default.scss | 2 +- modules/UI/videolayout/RemoteVideo.js | 139 +++++++++++++++++--------- 4 files changed, 146 insertions(+), 91 deletions(-) diff --git a/css/_mixins.scss b/css/_mixins.scss index 89ffa27c9c..d5e8ac25b0 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -59,11 +59,11 @@ left: 0; } -@mixin absoluteAligning($sizeX, $sizeY) { +@mixin absoluteAligning() { top: 50%; left: 50%; position: absolute; - @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2})) + @include transform(translate(-50%, -50%)) } @mixin transform($func) { diff --git a/css/_popup_menu.scss b/css/_popup_menu.scss index 069df31e6d..f129321e0e 100644 --- a/css/_popup_menu.scss +++ b/css/_popup_menu.scss @@ -1,57 +1,69 @@ -/*Initialize*/ -ul.popupmenu { +/** +* Initialize +**/ + +.popupmenu { padding: 0; margin: 2px 0; bottom: 0; width: 100px; height: auto; -} -ul.popupmenu li { - list-style-type: none; - text-align: left; -} + &:first-child { + margin-top: 2px; + } -ul.popupmenu li:hover { - background-color: $popupMenuSelectedItemBackground; -} + &__item { + list-style-type: none; + text-align: left; + height: 35px; -/*Link Appearance*/ -ul.popupmenu li a { - display: block; - text-decoration: none; - color: #fff; - padding: 5px; - font-size: 9pt; - width: 100%; - cursor: hand; -} + &:hover { + background-color: $popupMenuSelectedItemBackground; + } + } -ul.popupmenu li a i.icon-kick { - font-size: 8pt; -} + // Link Appearance + &__link { + display: block; + box-sizing: border-box; + text-decoration: none; + color: #fff; + padding: 5px; + height: 100%; + font-size: 9pt; + width: 100%; + cursor: hand; -ul.popupmenu li a span { - display: inline-block; - width: 20px; - height: 16px; - text-align: center; -} + &.disabled { + color: gray !important; + pointer-events: none; + } + } -ul.popupmenu li a div { - display: inline-block; - line-height: 25px; -} + &__text { + display: inline-block; + vertical-align: middle; + } + + &__icon { + vertical-align: middle; + position: relative; + display: inline-block; + width: 20px; + height: 100%; + text-align: center; -ul.popupmenu li a i { - line-height: 25px; + > * { + @include absoluteAligning(); + } + } + + .icon-kick { + font-size: 8pt; + } } span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover { display:block !important; -} - -a.disabled { - color: gray !important; - pointer-events: none; } \ No newline at end of file diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index bf99c3a0c6..bed8bb805f 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -472,7 +472,7 @@ .userAvatar { @include circle(60px); - @include absoluteAligning(60px, 60px); + @include absoluteAligning(); } .sharedVideoAvatar { diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 87015baa89..d8ce304f4d 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -109,74 +109,117 @@ RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) { * @private */ RemoteVideo.prototype._generatePopupContent = function () { - var popupmenuElement = document.createElement('ul'); + let popupmenuElement = document.createElement('ul'); popupmenuElement.className = 'popupmenu'; popupmenuElement.id = `remote_popupmenu_${this.id}`; - var muteMenuItem = document.createElement('li'); - var muteLinkItem = document.createElement('a'); + let muteTranslationKey; + let muteClassName; + if (this.isAudioMuted) { + muteTranslationKey = 'videothumbnail.muted'; + muteClassName = 'mutelink disabled'; + } else { + muteTranslationKey = 'videothumbnail.domute'; + muteClassName = 'mutelink'; + } - var mutedIndicator = ""; + let muteHandler = this._muteHandler.bind(this); + let kickHandler = this._kickHandler.bind(this); + + let menuItems = [ + { + id: 'mutelink_' + this.id, + handler: muteHandler, + icon: 'icon-mic-disabled', + text: { + className: muteClassName, + data: { + i18n: muteTranslationKey + } + } + }, { + id: 'ejectlink_' + this.id, + handler: kickHandler, + icon: 'icon-kick', + text: { + data: { + i18n: 'videothumbnail.kick' + } + } + } + ]; - var doMuteHTML = mutedIndicator + - "
"; + menuItems.forEach(el => { + let menuItem = this._generatePopupMenuItem(el); + popupmenuElement.appendChild(menuItem); + }); - var mutedHTML = mutedIndicator + - "
"; + APP.translation.translateElement($(popupmenuElement)); - muteLinkItem.id = "mutelink_" + this.id; + return popupmenuElement; +}; - if (this.isAudioMuted) { - muteLinkItem.innerHTML = mutedHTML; - muteLinkItem.className = 'mutelink disabled'; - } - else { - muteLinkItem.innerHTML = doMuteHTML; - muteLinkItem.className = 'mutelink'; - } +RemoteVideo.prototype._muteHandler = function () { + if (this.isAudioMuted) + return; - // Delegate event to the document. - $(document).on("click", "#mutelink_" + this.id, () => { - if (this.isAudioMuted) - return; + RemoteVideo.showMuteParticipantDialog().then(reason => { + if(reason === MUTED_DIALOG_BUTTON_VALUES.muted) { + this.emitter.emit(UIEvents.REMOTE_AUDIO_MUTED, this.id); + } + }).catch(e => { + //currently shouldn't be called + console.error(e); + }); - RemoteVideo.showMuteParticipantDialog().then(reason => { - if(reason === MUTED_DIALOG_BUTTON_VALUES.muted) { - this.emitter.emit(UIEvents.REMOTE_AUDIO_MUTED, this.id); - } - }).catch(e => { - //currently shouldn't be called - console.error(e); - }); + this.popover.forceHide(); +}; - this.popover.forceHide(); - }); +RemoteVideo.prototype._kickHandler = function () { + this.emitter.emit(UIEvents.USER_KICKED, this.id); + this.popover.forceHide(); +}; + +RemoteVideo.prototype._generatePopupMenuItem = function (opts = {}) { + let { + id, + handler, + icon, + text + } = opts; - muteMenuItem.appendChild(muteLinkItem); - popupmenuElement.appendChild(muteMenuItem); + handler = handler || $.noop; - var ejectIndicator = ""; + let menuItem = document.createElement('li'); + menuItem.className = 'popupmenu__item'; - var ejectMenuItem = document.createElement('li'); - var ejectLinkItem = document.createElement('a'); + let linkItem = document.createElement('a'); + linkItem.className = 'popupmenu__link'; - var ejectText = "
"; + if (icon) { + let indicator = document.createElement('span'); + indicator.className = 'popupmenu__icon'; + indicator.innerHTML = ``; + linkItem.appendChild(indicator); + } - ejectLinkItem.className = 'ejectlink'; - ejectLinkItem.innerHTML = ejectIndicator + ' ' + ejectText; - ejectLinkItem.id = "ejectlink_" + this.id; + let textContent = document.createElement('span'); + textContent.className = 'popupmenu__text'; - $(document).on("click", "#ejectlink_" + this.id, function(){ - this.emitter.emit(UIEvents.USER_KICKED, this.id); - this.popover.forceHide(); - }.bind(this)); + let dataKeys = Object.keys(text.data); + dataKeys.forEach(key => { + textContent.dataset[key] = text.data[key]; + }); + textContent.className += ` ${text.className}` || ''; - ejectMenuItem.appendChild(ejectLinkItem); - popupmenuElement.appendChild(ejectMenuItem); + linkItem.appendChild(textContent); + linkItem.id = id; - APP.translation.translateElement($(popupmenuElement)); + // Delegate event to the document. + $(document).on("click", `#${id}`, handler); + menuItem.appendChild(linkItem); - return popupmenuElement; + return menuItem; }; /** From 138ed6a487a25362bfe707421894a47b8ed2e4fe Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 27 Oct 2016 18:19:37 +0300 Subject: [PATCH 2/2] Fixed interface --- modules/UI/videolayout/RemoteVideo.js | 32 ++++++++++++++------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index d8ce304f4d..b0f2902923 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -131,20 +131,16 @@ RemoteVideo.prototype._generatePopupContent = function () { id: 'mutelink_' + this.id, handler: muteHandler, icon: 'icon-mic-disabled', - text: { - className: muteClassName, - data: { - i18n: muteTranslationKey - } + className: muteClassName, + data: { + i18n: muteTranslationKey } }, { id: 'ejectlink_' + this.id, handler: kickHandler, icon: 'icon-kick', - text: { - data: { - i18n: 'videothumbnail.kick' - } + data: { + i18n: 'videothumbnail.kick' } } ]; @@ -185,7 +181,8 @@ RemoteVideo.prototype._generatePopupMenuItem = function (opts = {}) { id, handler, icon, - text + data, + className } = opts; handler = handler || $.noop; @@ -196,6 +193,10 @@ RemoteVideo.prototype._generatePopupMenuItem = function (opts = {}) { let linkItem = document.createElement('a'); linkItem.className = 'popupmenu__link'; + if (className) { + linkItem.className += ` ${className}`; + } + if (icon) { let indicator = document.createElement('span'); indicator.className = 'popupmenu__icon'; @@ -206,11 +207,12 @@ RemoteVideo.prototype._generatePopupMenuItem = function (opts = {}) { let textContent = document.createElement('span'); textContent.className = 'popupmenu__text'; - let dataKeys = Object.keys(text.data); - dataKeys.forEach(key => { - textContent.dataset[key] = text.data[key]; - }); - textContent.className += ` ${text.className}` || ''; + if (data) { + let dataKeys = Object.keys(data); + dataKeys.forEach(key => { + textContent.dataset[key] = data[key]; + }); + } linkItem.appendChild(textContent); linkItem.id = id;