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

Replace custom code with EditableTextLabel for room name 

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
pull/458/head
Daniel Calviño Sánchez 8 years ago
parent
e269597514
commit
b89d385046
4 changed files with 70 additions and 86 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. 138
      js/views/callinfoview.js
  3. 1
      templates/index-public.php
  4. 1
      templates/index.php

16
css/style.css
View File

@ -115,13 +115,13 @@
}
.password-input,
.rename-input {
.room-name input {
margin-top: 0 !important;
margin-bottom: 4px !important;
}
.icon-confirm.password-confirm,
.icon-confirm.rename-confirm {
.icon-confirm.confirm-button {
background-size: 16px;
background-color: transparent;
border: none;
@ -132,7 +132,7 @@
opacity: .5;
}
.icon-confirm.password-confirm:hover,
.icon-confirm.rename-confirm:hover {
.icon-confirm.confirm-button:hover {
opacity: 1;
}
@ -752,31 +752,31 @@ video {
display: inline-block;
}
.detailCallInfoContainer .rename-button {
.detailCallInfoContainer .room-name .edit-button {
display: none;
}
.detailCallInfoContainer .clipboard-button,
.detailCallInfoContainer:hover .rename-button {
.detailCallInfoContainer:hover .room-name .edit-button {
display: inline-block;
}
.detailCallInfoContainer .clipboard-button .icon,
.detailCallInfoContainer .rename-button .icon {
.detailCallInfoContainer .room-name .edit-button .icon {
cursor: pointer;
width: 16px;
height: 16px;
margin: -2px 10px;
}
.detailCallInfoContainer .rename-option,
.detailCallInfoContainer .room-name .input-wrapper,
.detailCallInfoContainer .password-option {
position: relative;
max-width: calc(100% - 72px);
display: inline-block;
}
.detailCallInfoContainer .rename-input,
.detailCallInfoContainer .room-name input,
.detailCallInfoContainer .password-input {
width: 100%;
}

138
js/views/callinfoview.js
View File

@ -29,18 +29,11 @@
OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
var TEMPLATE =
'<h3 class="room-name">{{displayName}}</h3>' +
'<div class="room-name"></div>' +
'{{#if showShareLink}}' +
' <div class="clipboard-button"><span class="icon icon-clippy"></span></div>' +
'{{/if}}' +
'{{#if canModerate}}' +
' <div class="rename-option hidden-important">' +
' <input class="rename-input" maxlength="200" type="text" value="{{displayName}}" placeholder="' + t('spreed', 'Name') + '">'+
' <div class="icon icon-confirm rename-confirm"></div>'+
' </div>' +
' <div class="rename-button"><span class="icon icon-rename" title="' + t('spreed', 'Rename') + '"></span></div>' +
'{{/if}}' +
'{{#if canModerate}}' +
' <div>' +
' <input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
' <label for="link-checkbox">' + t('spreed', 'Share link') + '</label>' +
@ -64,62 +57,80 @@
renderTimeout: undefined,
templateContext: function() {
var canModerate = this.model.get('participantType') === 1 || this.model.get('participantType') === 2;
var canModerate = this._canModerate();
return $.extend(this.model.toJSON(), {
canModerate: canModerate,
isPublic: this.model.get('type') === 3,
showShareLink: !canModerate && this.model.get('type') === 3,
isNameEditable: canModerate && this.model.get('type') !== 1,
isDeletable: canModerate && (Object.keys(this.model.get('participants')).length > 2 || this.model.get('numGuests') > 0)
});
},
ui: {
'roomName': 'h3.room-name',
'roomName': 'div.room-name',
'clipboardButton': '.clipboard-button',
'linkCheckbox': '.link-checkbox',
'renameButton': '.rename-button',
'renameOption': '.rename-option',
'renameInput': '.rename-input',
'renameConfirm': '.rename-confirm',
'passwordOption': '.password-option',
'passwordInput': '.password-input',
'passwordConfirm': '.password-confirm'
},
regions: {
'roomName': '@ui.roomName'
},
events: {
'change @ui.linkCheckbox': 'toggleLinkCheckbox',
'click @ui.renameButton': 'showRenameInput',
'keyup @ui.renameInput': 'keyUpRename',
'click @ui.renameConfirm': 'confirmRename',
'keyup @ui.passwordInput': 'keyUpPassword',
'click @ui.passwordConfirm': 'confirmPassword'
},
modelEvents: {
'change:displayName': function() {
this.renderWhenInactive();
},
'change:hasPassword': function() {
this.renderWhenInactive();
},
'change:participantType': function() {
this._updateNameEditability();
// User permission change, refresh even when typing, because the
// action will fail in the future anyway.
this.render();
},
'change:type': function() {
this._updateNameEditability();
this.renderWhenInactive();
}
},
initialize: function() {
this._nameEditableTextLabel = new OCA.SpreedMe.Views.EditableTextLabel({
model: this.model,
modelAttribute: 'displayName',
modelSaveOptions: {
patch: true,
success: function() {
// Renaming a room by setting "displayName" causes "name" to
// change too in the server, so the model has to be fetched
// again to get the changes.
this.model.fetch();
}
},
extraClassNames: 'room-name',
labelTagName: 'h3',
inputMaxLength: '200',
inputPlaceholder: t('spreed', 'Name'),
buttonTitle: t('spreed', 'Rename')
});
this._updateNameEditability();
},
renderWhenInactive: function() {
if (!this.ui.renameInput.is(':visible') &&
this.ui.passwordInput.val() === '') {
if (this.ui.passwordInput.val() === '') {
this.render();
return;
}
@ -127,12 +138,29 @@
this.renderTimeout = setTimeout(_.bind(this.renderWhenInactive, this), 500);
},
onBeforeRender: function() {
// During the rendering the regions of this view are reset, which
// destroys its child views. If a child view has to be detached
// instead so it can be attached back after the rendering of the
// template finishes it is necessary to call "reset" with the
// "preventDestroy" option (in later Marionette versions a public
// "detachView" function was introduced instead).
// "allowMissingEl" is needed for the first time this view is
// rendered, as the element of the region does not exist yet at that
// time and without that option the call would fail otherwise.
this.getRegion('roomName').reset({ preventDestroy: true, allowMissingEl: true });
},
onRender: function() {
if (!_.isUndefined(this.renderTimeout)) {
clearTimeout(this.renderTimeout);
this.renderTimeout = undefined;
}
// Attach the child view again (or for the first time) after the
// template has been rendered.
this.showChildView('roomName', this._nameEditableTextLabel, { replaceElement: true } );
var roomURL = OC.generateUrl('/call/' + this.model.get('token')),
completeURL = window.location.protocol + '//' + window.location.host + roomURL;
@ -146,61 +174,15 @@
this.initClipboard();
},
/**
* Rename
*/
showRenameInput: function() {
this.ui.renameOption.removeClass('hidden-important');
this.ui.roomName.addClass('hidden-important');
this.ui.renameButton.addClass('hidden-important');
},
hideRenameInput: function() {
this.ui.renameOption.addClass('hidden-important');
this.ui.roomName.removeClass('hidden-important');
this.ui.renameButton.removeClass('hidden-important');
},
confirmRename: function() {
var newRoomName = this.ui.renameInput.val().trim();
if (newRoomName === this.model.get('displayName')) {
this.hideRenameInput();
return;
}
console.log('Changing room name from "' + this.model.get('displayName') + '" to "' + newRoomName + '".');
this.model.save('displayName', newRoomName, {
patch: true,
success: function() {
// Saving the "displayName" will have triggered a
// "change:displayName" event. However, as the input was
// still shown the rendering will have been enqueued until
// the input is hidden, so the room name text has to be
// explicitly set before hiding the input to prevent briefly
// showing the old value.
this.ui.roomName.text(newRoomName);
this.hideRenameInput();
// Renaming a room by setting "displayName" causes "name" to
// change too in the server, so the model has to be fetched
// again to get the changes.
this.model.fetch();
}.bind(this)
});
console.log('.rename-option');
_canModerate: function() {
return this.model.get('participantType') === 1 || this.model.get('participantType') === 2;
},
keyUpRename: function(e) {
if (e.keyCode === 13) {
// Enter
this.confirmRename();
} else if (e.keyCode === 27) {
// ESC
this.hideRenameInput();
this.ui.renameInput.val(this.model.get('displayName'));
_updateNameEditability: function() {
if (this._canModerate() && this.model.get('type') !== 1) {
this._nameEditableTextLabel.enableEdition();
} else {
this._nameEditableTextLabel.disableEdition();
}
},

1
templates/index-public.php
View File

@ -15,6 +15,7 @@ script(
'models/room',
'models/roomcollection',
'views/callinfoview',
'views/editabletextlabel',
'views/roomlistview',
'views/sidebarview',
'views/tabview',

1
templates/index.php
View File

@ -17,6 +17,7 @@ script(
'models/participant',
'models/participantcollection',
'views/callinfoview',
'views/editabletextlabel',
'views/participantlistview',
'views/participantview',
'views/roomlistview',

Write Preview
Loading…
Cancel
Save