Merge pull request #1075 from BeatC/menu-restyling-editions

Adjust alignment of remote video menu

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) {

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;
 }

css/_videolayout_default.scss

@@ -472,7 +472,7 @@
 
 .userAvatar {
     @include circle(60px);
-    @include absoluteAligning(60px, 60px);
+    @include absoluteAligning();
 }
 
 .sharedVideoAvatar {

modules/UI/videolayout/RemoteVideo.js

@@ -127,74 +127,119 @@ RemoteVideo.prototype._isHovered = function () {
  * @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 = "<i class='icon-mic-disabled'></i>";
+    let muteHandler = this._muteHandler.bind(this);
+    let kickHandler = this._kickHandler.bind(this);
+
+    let menuItems = [
+        {
+            id: 'mutelink_' + this.id,
+            handler: muteHandler,
+            icon: 'icon-mic-disabled',
+            className: muteClassName,
+            data: {
+                i18n: muteTranslationKey
+            }
+        }, {
+            id: 'ejectlink_' + this.id,
+            handler: kickHandler,
+            icon: 'icon-kick',
+            data: {
+                i18n: 'videothumbnail.kick'
+            }
+        }
+    ];
 
-    var doMuteHTML = mutedIndicator +
-        " <div data-i18n='videothumbnail.domute'></div>";
+    menuItems.forEach(el => {
+        let menuItem = this._generatePopupMenuItem(el);
+        popupmenuElement.appendChild(menuItem);
+    });
 
-    var mutedHTML = mutedIndicator +
-        " <div data-i18n='videothumbnail.muted'></div>";
+    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();
+};
 
-    muteMenuItem.appendChild(muteLinkItem);
-    popupmenuElement.appendChild(muteMenuItem);
+RemoteVideo.prototype._generatePopupMenuItem = function (opts = {}) {
+    let {
+        id,
+        handler,
+        icon,
+        data,
+        className
+    } = opts;
 
-    var ejectIndicator = "<i style='float:left;' class='icon-kick'></i>";
+    handler = handler || $.noop;
 
-    var ejectMenuItem = document.createElement('li');
-    var ejectLinkItem = document.createElement('a');
+    let menuItem = document.createElement('li');
+    menuItem.className = 'popupmenu__item';
 
-    var ejectText = "<div data-i18n='videothumbnail.kick'></div>";
+    let linkItem = document.createElement('a');
+    linkItem.className = 'popupmenu__link';
 
-    ejectLinkItem.className = 'ejectlink';
-    ejectLinkItem.innerHTML = ejectIndicator + ' ' + ejectText;
-    ejectLinkItem.id = "ejectlink_" + this.id;
+    if (className) {
+        linkItem.className += ` ${className}`;
+    }
 
-    $(document).on("click", "#ejectlink_" + this.id, function(){
-        this.emitter.emit(UIEvents.USER_KICKED, this.id);
-        this.popover.forceHide();
-    }.bind(this));
+    if (icon) {
+        let indicator = document.createElement('span');
+        indicator.className = 'popupmenu__icon';
+        indicator.innerHTML = `<i class="${icon}"></i>`;
+        linkItem.appendChild(indicator);
+    }
 
-    ejectMenuItem.appendChild(ejectLinkItem);
-    popupmenuElement.appendChild(ejectMenuItem);
+    let textContent = document.createElement('span');
+    textContent.className = 'popupmenu__text';
 
-    APP.translation.translateElement($(popupmenuElement));
+    if (data) {
+        let dataKeys = Object.keys(data);
+        dataKeys.forEach(key => {
+            textContent.dataset[key] = data[key];
+        });
+    }
 
-    return popupmenuElement;
+    linkItem.appendChild(textContent);
+    linkItem.id = id;
+
+    // Delegate event to the document.
+    $(document).on("click", `#${id}`, handler);
+    menuItem.appendChild(linkItem);
+
+    return menuItem;
 };
 
 /**