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

Adjust alignment of remote video menu
This commit is contained in:
yanas 2016-10-28 12:43:12 -05:00 committed by GitHub
commit ae9819a45c
4 changed files with 154 additions and 97 deletions

View File

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

View File

@ -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;
}
ul.popupmenu li a i {
line-height: 25px;
&__icon {
vertical-align: middle;
position: relative;
display: inline-block;
width: 20px;
height: 100%;
text-align: center;
> * {
@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;
}

View File

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

View File

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