Merge pull request #1075 from BeatC/menu-restyling-editions
Adjust alignment of remote video menu
This commit is contained in:
yanas
GitHub
commit
ae9819a45c
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -472,7 +472,7 @@
|
|||
|
||||
.userAvatar {
|
||||
@include circle(60px);
|
||||
@include absoluteAligning(60px, 60px);
|
||||
@include absoluteAligning();
|
||||
}
|
||||
|
||||
.sharedVideoAvatar {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue