Skip to content

Commit

Permalink
Sidebar menu bubble
Browse files Browse the repository at this point in the history 
Signed-off-by: Joas Schilling <coding@schilljs.com>
  • Loading branch information
@nickvergessen
nickvergessen committed Sep 4, 2017
1 parent bc0afbe commit e8aea7d
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 100 deletions.
66 changes: 64 additions & 2 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -491,6 +493,7 @@ video {
display: none;
}

#participantTabView li > a,
#app-navigation li > a {
padding-right: 44px !important;
}
Expand Down Expand Up @@ -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');
}
73 changes: 42 additions & 31 deletions js/views/participantview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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();
}
});
},
Expand All @@ -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,
Expand All @@ -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() {
Expand Down
76 changes: 9 additions & 67 deletions templates/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,14 @@
<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">
Expand All @@ -58,75 +66,9 @@
<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>
Expand Down

0 comments on commit e8aea7d

Please sign in to comment.