зеркало из https://github.com/nextcloud/spreed.git
Sidebar menu bubble
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling
Родитель
bc0afbe238
Коммит
e8aea7d5d6
|
|
@ -63,6 +63,7 @@
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
#participantTabView .avatar,
|
||||
#app-navigation .avatar,
|
||||
#app-navigation .icon-contacts-dark,
|
||||
#app-navigation .app-navigation-entry-link .icon-public {
|
||||
|
|
@ -71,6 +72,7 @@
|
|||
top: 6px;
|
||||
}
|
||||
|
||||
#participantTabView li > a:first-child img,
|
||||
#app-navigation li > a:first-child img {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
|
|
@ -491,6 +493,7 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#participantTabView li > a,
|
||||
#app-navigation li > a {
|
||||
padding-right: 44px !important;
|
||||
}
|
||||
|
|
@ -625,11 +628,70 @@ video {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
#app-sidebar #shareWithList .participant-moderator-indicator {
|
||||
#participantTabView .participant-moderator-indicator {
|
||||
opacity: .5;
|
||||
font-weight: 300;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#app-sidebar #shareWithList .participant-offline {
|
||||
#participantTabView .participant-offline {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#participantTabView li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#participantTabView .with-icon a, #participantTabView a {
|
||||
padding-left: 44px;
|
||||
background-size: 16px 16px;
|
||||
background-position: 14px center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#participantTabView li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 0.57;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* App navigation utils, buttons and counters for drop down menu
|
||||
*/
|
||||
#participantTabView .participant-entry-utils {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 105;
|
||||
}
|
||||
|
||||
#participantTabView .active > .participant-entry-utils li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#participantTabView .participant-entry-utils button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#participantTabView .participant-entry-utils-menu-button button {
|
||||
border: 0;
|
||||
opacity: .5;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url('../../../core/img/actions/more.svg?v=1');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,43 +29,47 @@
|
|||
|
||||
var uiChannel = Backbone.Radio.channel('ui');
|
||||
|
||||
var ITEM_TEMPLATE = '<li data-session-id="{{sessionId}}" data-participant="{{userId}}" class="participant {{#if pariticipantIsOffline}}participant-offline{{/if}}">' +
|
||||
'<div class="avatar" data-user-id="{{userId}}" data-displayname="{{displayName}}"></div>' +
|
||||
'<span class="username" title="">' +
|
||||
'{{displayName}}' +
|
||||
'{{#if participantIsOwner}}<span class="participant-moderator-indicator">(' + t('spreed', 'owner') + ')</span>{{/if}}' +
|
||||
var ITEM_TEMPLATE = '' +
|
||||
'<a class="participant-entry-link" href="#{{sessionId}}" data-token="{{token}}">' +
|
||||
'<div class="avatar" data-user-id="{{userId}}" data-displayname="{{displayName}}"></div>' +
|
||||
' {{displayName}}' +
|
||||
'{{#if participantIsOwner}}<span class="participant-moderator-indicator">(' + t('spreed', 'moderator') + ')</span>{{/if}}' +
|
||||
'{{#if participantIsModerator}}<span class="participant-moderator-indicator">(' + t('spreed', 'moderator') + ')</span>{{/if}}' +
|
||||
'</span>' +
|
||||
'</a>'+
|
||||
'{{#if canModerate}}' +
|
||||
'<span class="actionOptionsGroup">' +
|
||||
'<a href="#"><span class="icon icon-more"></span></a>' +
|
||||
'<div class="popovermenu bubble menu">' +
|
||||
'<ul>' +
|
||||
'<div class="participant-entry-utils">'+
|
||||
'<ul>'+
|
||||
'<li class="participant-entry-utils-menu-button"><button></button></li>'+
|
||||
'</ul>'+
|
||||
'</div>'+
|
||||
'<div class="popovermenu bubble menu">'+
|
||||
'<ul class="popovermenu-list">'+
|
||||
'{{#if participantIsModerator}}' +
|
||||
'<li>' +
|
||||
'<a href="#" class="menuitem action action-demote permanent">' +
|
||||
'<span class="icon icon-star"></span><span>' + t('spreed', 'Demote from moderator') + '</span>' +
|
||||
'</a>' +
|
||||
'<button class="demote-moderator">' +
|
||||
'<span class="icon icon-star"></span>' +
|
||||
'<span>' + t('spreed', 'Demote from moderator') + '</span>' +
|
||||
'</button>' +
|
||||
'</li>' +
|
||||
'{{else}}' +
|
||||
'{{#if participantIsUser}}' +
|
||||
'<li>' +
|
||||
'<a href="#" class="menuitem action action-promote permanent">' +
|
||||
'<span class="icon icon-rename"></span><span>' + t('spreed', 'Promote to moderator') + '</span>' +
|
||||
'</a>' +
|
||||
'<button class="promote-moderator">' +
|
||||
'<span class="icon icon-rename"></span>' +
|
||||
'<span>' + t('spreed', 'Promote to moderator') + '</span>' +
|
||||
'</button>' +
|
||||
'</li>' +
|
||||
'{{/if}}' +
|
||||
'{{/if}}' +
|
||||
'<li>' +
|
||||
'<a href="#" class="menuitem action action-remove permanent">' +
|
||||
'<span class="icon icon-delete"></span><span>' + t('spreed', 'Remove participant') + '</span>' +
|
||||
'</a>' +
|
||||
'<button class="remove-participant">' +
|
||||
'<span class="icon icon-delete"></span>' +
|
||||
'<span>' + t('spreed', 'Remove participant') + '</span>' +
|
||||
'</button>' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'</div>' +
|
||||
'</span>' +
|
||||
'{{/if}}' +
|
||||
'</li>';
|
||||
'</div>' +
|
||||
'{{/if}}';
|
||||
|
||||
OCA.SpreedMe.Views.ParticipantView = Marionette.CollectionView.extend({
|
||||
tagName: 'ul',
|
||||
|
|
@ -92,7 +96,7 @@
|
|||
if (!this.$el.is(target.closest('.participant'))) {
|
||||
// Click was not triggered by this element -> close menu
|
||||
this.menuShown = false;
|
||||
//this.toggleMenuClass();
|
||||
this.toggleMenuClass();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -116,16 +120,25 @@
|
|||
element.avatar(element.data('user-id'), 32);
|
||||
}
|
||||
});
|
||||
|
||||
this.$el.attr('data-session-id', this.model.get('sessionId'));
|
||||
this.$el.attr('data-participant', this.model.get('userId'));
|
||||
this.$el.addClass('participant');
|
||||
if (this.model.get('pariticipantIsOffline')) {
|
||||
this.$el.addClass('participant-offline');
|
||||
}
|
||||
|
||||
this.toggleMenuClass();
|
||||
},
|
||||
events: {
|
||||
'click .actionOptionsGroup .icon-more': 'toggleMenu',
|
||||
'click .actionOptionsGroup .action-promote': 'promoteToModerator',
|
||||
'click .actionOptionsGroup .action-demote': 'demoteFromModerator',
|
||||
'click .actionOptionsGroup .action-remove': 'removeParticipant'
|
||||
'click .participant-entry-utils-menu-button button': 'toggleMenu',
|
||||
'click .popovermenu .promote-moderator': 'promoteToModerator',
|
||||
'click .popovermenu .demote-moderator': 'demoteFromModerator',
|
||||
'click .popovermenu .remove-participant': 'removeParticipant'
|
||||
},
|
||||
ui: {
|
||||
'participant': 'li.participant',
|
||||
'menu': 'li.participant .actionOptionsGroup .menu'
|
||||
'menu': '.popovermenu'
|
||||
},
|
||||
template: Handlebars.compile(ITEM_TEMPLATE),
|
||||
menuShown: false,
|
||||
|
|
@ -135,8 +148,6 @@
|
|||
this.toggleMenuClass();
|
||||
},
|
||||
toggleMenuClass: function() {
|
||||
console.log(this.ui.participant.data('participant'));
|
||||
console.log(this.menuShown);
|
||||
this.ui.menu.toggleClass('open', this.menuShown);
|
||||
},
|
||||
promoteToModerator: function() {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,14 @@ script(
|
|||
<h3>Call name <span class="icon icon-rename"></span></h3>
|
||||
|
||||
<button><?php p($l->t('Start/stop webinary'));?></button>
|
||||
|
||||
<input name="shareLink" id="shareLink" class="checkbox" value="1" type="checkbox">
|
||||
<label for="shareLink"><?php p($l->t('Share link'));?></label><br>
|
||||
<div class="oneline">
|
||||
<label for="linkText" class="hidden-visually">Link</label>
|
||||
<input id="linkText" class="linkText" type="text" readonly value="https://nextcloud13.local/index.php/s/LRDYjaFrAw2oBp7">
|
||||
<a class="clipboardButton icon icon-clippy" data-clipboard-target="#linkText" data-original-title="" title=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="tabHeaders">
|
||||
|
|
@ -58,75 +66,9 @@ script(
|
|||
<div class="tabsContainer">
|
||||
<div id="participantTabView" class="tab participantTabView">
|
||||
<div class="participantListView subView">
|
||||
<ul id="participantWithList" class="participantWithList">
|
||||
<li data-share-id="2" data-share-type="0" data-share-with="test1" class="participant-moderator">
|
||||
<div class="avatar " data-username="test1" data-displayname="User One" style="height: 32px; width: 32px; background-color: rgb(213, 231, 116); color: rgb(255, 255, 255); font-weight: normal; text-align: center; line-height: 32px; font-size: 17.6px;">U</div>
|
||||
<span class="username" title="">
|
||||
User One
|
||||
<span class="participant-moderator-indicator">(moderator)</span>
|
||||
</span>
|
||||
|
||||
<span class="sharingOptionsGroup">
|
||||
<a href="#"><span class="icon icon-more"></span></a>
|
||||
|
||||
<div class="popovermenu bubble hidden menu">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="shareOption menuitem">
|
||||
<input id="canShare-view17-test1" name="share" class="permissions checkbox" checked="checked" data-permissions="16" type="checkbox">
|
||||
<label for="canShare-view17-test1">Demote from moderator</label>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="shareOption menuitem">
|
||||
<input id="canShare-view17-test1" name="share" class="permissions checkbox" checked="checked" data-permissions="16" type="checkbox">
|
||||
<label for="canShare-view17-test1">Remove participant from call</label>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li data-share-id="2" data-share-type="0" data-share-with="test1" class="participant-offline">
|
||||
<div class="avatar " data-username="test1" data-displayname="User One" style="height: 32px; width: 32px; background-color: rgb(213, 231, 116); color: rgb(255, 255, 255); font-weight: normal; text-align: center; line-height: 32px; font-size: 17.6px;">U</div>
|
||||
<span class="username" title="">
|
||||
User Two
|
||||
</span>
|
||||
|
||||
<span class="sharingOptionsGroup">
|
||||
<a href="#"><span class="icon icon-more"></span></a>
|
||||
|
||||
<div class="popovermenu bubble hidden menu">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="shareOption menuitem">
|
||||
<input id="canShare-view17-test1" name="share" class="permissions checkbox" checked="checked" data-permissions="16" type="checkbox">
|
||||
<label for="canShare-view17-test1">Promote to moderator</label>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="shareOption menuitem">
|
||||
<input id="canShare-view17-test1" name="share" class="permissions checkbox" checked="checked" data-permissions="16" type="checkbox">
|
||||
<label for="canShare-view17-test1">Remove participant from call</label>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<ul id="participantWithList" class="participantWithList with-icon">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="linkShareView subView">
|
||||
<input name="shareLink" id="shareLink" class="checkbox" value="1" type="checkbox">
|
||||
<label for="shareLink"><?php p($l->t('Share link'));?></label><br>
|
||||
<div class="oneline">
|
||||
<label for="linkText" class="hidden-visually">Link</label>
|
||||
<input id="linkText" class="linkText" type="text" readonly value="https://nextcloud13.local/index.php/s/LRDYjaFrAw2oBp7">
|
||||
<a class="clipboardButton icon icon-clippy" data-clipboard-target="#linkText" data-original-title="" title=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче