Mirrors
/
nextcloud-spreed
mirror of https://github.com/nextcloud/spreed
3
0
Fork 0
Code Releases Activity
Browse Source

Move add participant to the sidebar 

Signed-off-by: Joas Schilling <coding@schilljs.com>
pull/440/head
Joas Schilling 8 years ago
parent
d954bf137c
commit
d1b85315bb
No known key found for this signature in database GPG Key ID: E166FD8976B3BAC8
4 changed files with 131 additions and 161 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      css/style.css
  2. 3
      js/app.js
  3. 130
      js/views/participantview.js
  4. 143
      js/views/roomlistview.js

16
css/style.css
View File

@ -20,9 +20,8 @@
}
.oca-spreedme-add-person {
width: 225px;
top: 0;
border-bottom: 1px solid #eee;
width: 100%;
border: 1px solid #eee;
}
/**
@ -89,17 +88,6 @@
height: 32px;
}
#oca-spreedme-add-room button {
position: absolute;
background-color: transparent;
border: none;
right: 0;
top: 0;
padding: 23px;
margin: 0;
opacity: .3;
}
.public-room {
display: block !important;
}

3
js/app.js
View File

@ -350,10 +350,11 @@
_showParticipantList: function() {
this._participants = new OCA.SpreedMe.Models.ParticipantCollection();
this._participantsView = new OCA.SpreedMe.Views.ParticipantView({
room: this.activeRoom,
collection: this._participants
});
this._participants.listenTo(this._rooms, 'change:active', function(model, active) {
this._participantsView.listenTo(this._rooms, 'change:active', function(model, active) {
if (active) {
this.setRoom(model);
}

130
js/views/participantview.js
View File

@ -27,11 +27,10 @@
OCA.SpreedMe = OCA.SpreedMe || {};
OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
var TEMPLATE =
'<button class="add-person-button">' +
'<span class="icon-add"></span>' +
'<span>' + t('spreed', 'Add person') + '</span>' +
'</button>' +
var TEMPLATE = ''+
'<form class="oca-spreedme-add-person">'+
' <input class="add-person-input" type="text" placeholder="'+t('spreed', 'Add participant')+'"/>'+
'</form>'+
'<ul class="participantWithList">' +
'</ul>';
@ -40,7 +39,7 @@
tagName: 'div',
ui: {
addButton: '.add-person-button',
addParticipantInput: '.add-person-input',
participantList: '.participantWithList'
},
@ -51,6 +50,8 @@
template: Handlebars.compile(TEMPLATE),
initialize: function(options) {
this.room = options.room;
this.collection = options.collection;
this._participantListView = new OCA.SpreedMe.Views.ParticipantListView({ collection: options.collection });
// In Marionette 3.0 the view is not rendered automatically if
@ -59,6 +60,123 @@
// will be appended exists.
this.render();
this.showChildView('participantList', this._participantListView, { replaceElement: true } );
},
/**
* @param {OCA.SpreedMe.Models.Room} room
* @returns {Array}
*/
setRoom: function(room) {
this.room = room;
this.collection.setRoom(room);
},
onRender: function() {
this.initAddParticipantSelector();
},
initAddParticipantSelector: function() {
this.ui.addParticipantInput.select2({
ajax: {
url: OC.linkToOCS('apps/files_sharing/api/v1') + 'sharees',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
format: 'json',
search: term,
perPage: 200,
itemType: 'call'
};
},
results: function (response) {
// TODO improve error case
if (_.isUndefined(response.ocs.data)) {
return;
}
var results = [],
participants = this.room.get('participants');
$.each(response.ocs.data.exact.users, function(id, user) {
var isExactUserInGroup = false;
$.each(participants, function(participantId) {
if (participantId === user.value.shareWith) {
isExactUserInGroup = true;
}
});
if (!isExactUserInGroup) {
results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
}
});
$.each(response.ocs.data.users, function(id, user) {
var isUserInGroup = false;
$.each(participants, function(participantId) {
if (participantId === user.value.shareWith) {
isUserInGroup = true;
}
});
if (!isUserInGroup) {
results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
}
});
return {
results: results,
more: false
};
}.bind(this)
},
initSelection: function (element, callback) {
callback({id: element.val()});
},
formatResult: function (element) {
return '<span><div class="avatar" data-user="' + escapeHTML(element.id) + '" data-user-display-name="' + escapeHTML(element.displayName) + '"></div>' + escapeHTML(element.displayName) + '</span>';
},
formatSelection: function () {
return '<span class="select2-default" style="padding-left: 0;">'+OC.L10N.translate('spreed', 'Choose person…')+'</span>';
}
});
this.ui.addParticipantInput.on('change', function(e) {
var token = this.room.get('token');
var participant = e.val;
OCA.SpreedMe.app.addParticipantToRoom(token, participant);
$('.select2-drop').find('.avatar').each(function () {
var element = $(this);
if (element.data('user-display-name')) {
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
} else {
element.avatar(element.data('user'), 32);
}
});
}.bind(this));
this.ui.addParticipantInput.on('click', function() {
$('.select2-drop').find('.avatar').each(function () {
var element = $(this);
if (element.data('user-display-name')) {
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
} else {
element.avatar(element.data('user'), 32);
}
});
});
this.ui.addParticipantInput.on('select2-loaded', function() {
$('.select2-drop').find('.avatar').each(function () {
var element = $(this);
if (element.data('user-display-name')) {
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
} else {
element.avatar(element.data('user'), 32);
}
});
});
}
});

143
js/views/roomlistview.js
View File

@ -42,14 +42,6 @@
'</div>'+
'<div class="app-navigation-entry-menu">'+
'<ul class="app-navigation-entry-menu-list">'+
'{{#if canModerate}}'+
'<li>'+
'<button class="add-person-button">'+
'<span class="icon-add"></span>'+
'<span>'+t('spreed', 'Add person')+'</span>'+
'</button>'+
'</li>'+
'{{/if}}'+
'<li>'+
'<button class="leave-room-button">'+
'<span class="{{#if isDeletable}}icon-close{{else}}icon-delete{{/if}}"></span>'+
@ -65,11 +57,6 @@
'</li>'+
'{{/if}}'+
'</ul>'+
'{{#if canModerate}}'+
'<form class="oca-spreedme-add-person hidden">'+
'<input class="add-person-input" type="text" placeholder="'+t('spreed', 'Type name…')+'"/>'+
'</form>'+
'{{/if}}'+
'</div>';
var RoomItemView = Marionette.View.extend({
@ -101,16 +88,14 @@
});
},
templateContext: function() {
var canModerate = this.model.get('participantType') === 1 || this.model.get('participantType') === 2;
return {
canModerate: canModerate,
isDeletable: canModerate && (Object.keys(this.model.get('participants')).length > 2 || this.model.get('numGuests') > 0)
isDeletable: (this.model.get('participantType') === 1 || this.model.get('participantType') === 2) &&
(Object.keys(this.model.get('participants')).length > 2 || this.model.get('numGuests') > 0)
};
},
onRender: function() {
var roomURL;
this.initPersonSelector();
this.checkSharingStatus();
roomURL = OC.generateUrl('/call/' + this.model.get('token'));
@ -132,7 +117,6 @@
},
events: {
'click .app-navigation-entry-utils-menu-button button': 'toggleMenu',
'click .app-navigation-entry-menu .add-person-button': 'addPerson',
'click .app-navigation-entry-menu .leave-room-button': 'leaveRoom',
'click .app-navigation-entry-menu .delete-room-button': 'deleteRoom',
'click .app-navigation-entry-link': 'joinRoom'
@ -140,9 +124,7 @@
ui: {
'room': '.app-navigation-entry-link',
'menu': '.app-navigation-entry-menu',
'menuList': '.app-navigation-entry-menu-list',
'personSelectorForm' : '.oca-spreedme-add-person',
'personSelectorInput': '.add-person-input'
'menuList': '.app-navigation-entry-menu-list'
},
template: Handlebars.compile(ITEM_TEMPLATE),
menuShown: false,
@ -183,11 +165,6 @@
this.addRoomMessage();
}
},
addPerson: function() {
this.ui.menuList.attr('style', 'display: none !important');
this.ui.personSelectorForm.toggleClass('hidden');
this.ui.personSelectorInput.select2('open');
},
leaveRoom: function() {
// If user is in that room, it should leave the associated call first.
if (this.model.get('active')) {
@ -328,120 +305,6 @@
html: 'true',
title: htmlstring
});
},
initPersonSelector: function() {
var _this = this;
this.ui.personSelectorInput.select2({
ajax: {
url: OC.linkToOCS('apps/files_sharing/api/v1') + 'sharees',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
format: 'json',
search: term,
perPage: 200,
itemType: 'call'
};
},
results: function (response) {
// TODO improve error case
if (response.ocs.data === undefined) {
console.error('Failure happened', response);
return;
}
var results = [],
participants = _this.model.get('participants');
$.each(response.ocs.data.exact.users, function(id, user) {
var isExactUserInGroup = false;
$.each(participants, function(participantId) {
if (participantId === user.value.shareWith) {
isExactUserInGroup = true;
}
});
if (!isExactUserInGroup) {
results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
}
});
$.each(response.ocs.data.users, function(id, user) {
var isUserInGroup = false;
$.each(participants, function(participantId) {
if (participantId === user.value.shareWith) {
isUserInGroup = true;
}
});
if (!isUserInGroup) {
results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
}
});
return {
results: results,
more: false
};
}
},
initSelection: function (element, callback) {
console.log(element);
callback({id: element.val()});
},
formatResult: function (element) {
return '<span><div class="avatar" data-user="' + escapeHTML(element.id) + '" data-user-display-name="' + escapeHTML(element.displayName) + '"></div>' + escapeHTML(element.displayName) + '</span>';
},
formatSelection: function () {
return '<span class="select2-default" style="padding-left: 0;">'+OC.L10N.translate('spreed', 'Choose person…')+'</span>';
}
});
this.ui.personSelectorInput.on('change', function(e) {
var token = _this.model.get('token');
var participant = e.val;
OCA.SpreedMe.app.addParticipantToRoom(token, participant);
$('.select2-drop').find('.avatar').each(function () {
var element = $(this);
if (element.data('user-display-name')) {
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
} else {
element.avatar(element.data('user'), 32);
}
});
});
this.ui.personSelectorInput.on('click', function() {
$('.select2-drop').find('.avatar').each(function () {
var element = $(this);
if (element.data('user-display-name')) {
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
} else {
element.avatar(element.data('user'), 32);
}
});
});
this.ui.personSelectorInput.on('select2-loaded', function() {
$('.select2-drop').find('.avatar').each(function () {
var element = $(this);
if (element.data('user-display-name')) {
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
} else {
element.avatar(element.data('user'), 32);
}
});
});
this.ui.personSelectorInput.on('select2-close', function () {
_this.ui.menuList.attr('style', 'display: block !important');
_this.ui.personSelectorForm.toggleClass('hidden');
_this.menuShown = false;
_this.toggleMenuClass();
});
}
});

Write Preview
Loading…
Cancel
Save