UI set share note!

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-07-14 11:45:04 +02:00
parent 72d2455577
commit 4e08d8342e
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
6 changed files with 202 additions and 0 deletions

View File

@ -131,6 +131,7 @@
display: none !important; display: none !important;
} }
form#newNoteForm,
.linkShareView { .linkShareView {
margin-top: 16px; margin-top: 16px;
} }
@ -142,3 +143,23 @@
.shareTabView .icon { .shareTabView .icon {
background-size: 16px 16px; background-size: 16px 16px;
} }
/* NOTE */
form#newNoteForm {
display: flex;
flex-wrap: wrap;
.message {
flex: 1 1;
min-height: 76px;
margin-right: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
input {
width: 44px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -1px;
}
}

View File

@ -38,6 +38,7 @@
"shareitemmodel.js", "shareitemmodel.js",
"sharedialogview.js", "sharedialogview.js",
"sharedialogexpirationview.js", "sharedialogexpirationview.js",
"sharedialognoteview.js",
"sharedialoglinkshareview.js", "sharedialoglinkshareview.js",
"sharedialogresharerinfoview.js", "sharedialogresharerinfoview.js",
"sharedialogshareelistview.js", "sharedialogshareelistview.js",

View File

@ -5,6 +5,7 @@
"sharedialogresharerinfoview.js", "sharedialogresharerinfoview.js",
"sharedialoglinkshareview.js", "sharedialoglinkshareview.js",
"sharedialogexpirationview.js", "sharedialogexpirationview.js",
"sharedialognoteview.js",
"sharedialogshareelistview.js", "sharedialogshareelistview.js",
"sharedialogview.js", "sharedialogview.js",
"share.js" "share.js"

View File

@ -0,0 +1,149 @@
/*
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
*
* @author John Molakvoæ <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/* global moment, Handlebars */
(function() {
if (!OC.Share) {
OC.Share = {};
}
var TEMPLATE =
' <form id="newNoteForm" data-shareId="{{shareId}}">' +
' <textarea class="message" placeholder="{{placeholder}}">{{note}}</textarea>' +
' <input class="submit icon-confirm has-tooltip" type="submit" value="" title="{{submitText}}"/>' +
' </form>' +
' <div class="error hidden">{{error}}</div>'
;
/**
* @class OCA.Share.ShareDialogNoteView
* @member {OC.Share.ShareItemModel} model
* @member {jQuery} $el
* @memberof OCA.Sharing
* @classdesc
*
* Represents the expiration part in the GUI of the share dialogue
*
*/
var ShareDialogNoteView = OC.Backbone.View.extend({
id: 'shareNote',
className: 'hidden',
shareId: undefined,
events: {
'submit #newNoteForm': '_onSubmitComment'
},
_onSubmitComment: function(e) {
var self = this;
var $form = $(e.target);
var $submit = $form.find('.submit');
var $commentField = $form.find('.message');
var $error = $form.siblings('.error');
var message = $commentField.val().trim();
e.preventDefault();
if (message.length < 1) {
return;
}
$submit.prop('disabled', true);
$form.addClass('icon-loading').prop('disabled', true);
// send data
$.ajax({
method: 'PUT',
url: OC.generateUrl('/ocs/v2.php/apps/files_sharing/api/v1/shares/' + self.shareId),
data: { note: message },
complete : function() {
$submit.prop('disabled', false);
$form.removeClass('icon-loading').prop('disabled', false);
},
error: function() {
$error.show();
setTimeout(function() {
$error.hide();
}, 3000);
}
});
// update local js object
var shares = this.model.get('shares');
var share = shares.filter(function (share) {
return share.id === self.shareId;
});
share[0].note = message;
return message;
},
render: function(shareId) {
this.shareId = shareId;
var shares = this.model.get('shares');
if (!shares) {
return;
}
var share = shares.filter(function (share) {
return share.id === shareId;
});
if (share.length !== 1) {
// should not happend
return;
}
this.$el.show();
this.$el.html(this.template({
note: share[0].note,
submitText: t('core', 'Submit the note'),
placeholder: t('core', 'Add a note…'),
error: t('core', 'An error has occured. Unable to save the note.'),
shareId: shareId
}));
this.delegateEvents();
return this;
},
hide() {
this.$el.hide();
},
/**
* @returns {Function} from Handlebars
* @private
*/
template: function (data) {
if (!this._template) {
this._template = Handlebars.compile(TEMPLATE);
}
return this._template(data);
}
});
OC.Share.ShareDialogNoteView = ShareDialogNoteView;
})();

View File

@ -120,6 +120,9 @@
'</div>' + '</div>' +
'</span>' + '</span>' +
'</li>' + '</li>' +
'<li>' +
'<a href="#" class="addnote"><span class="icon-loading-small hidden"></span><span class="icon icon-edit"></span><span>{{addNoteLabel}}</span></a>' +
'</li>' +
'<li>' + '<li>' +
'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span>{{unshareLabel}}</span></a>' + '<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span>{{unshareLabel}}</span></a>' +
'</li>' + '</li>' +
@ -154,8 +157,11 @@
/** @type {boolean|number} **/ /** @type {boolean|number} **/
_renderPermissionChange: false, _renderPermissionChange: false,
_noteView: undefined,
events: { events: {
'click .unshare': 'onUnshare', 'click .unshare': 'onUnshare',
'click .addnote': 'showNoteForm',
'click .icon-more': 'onToggleMenu', 'click .icon-more': 'onToggleMenu',
'click .permissions': 'onPermissionChange', 'click .permissions': 'onPermissionChange',
'click .expireDate' : 'onExpireDateChange', 'click .expireDate' : 'onExpireDateChange',
@ -178,6 +184,8 @@
this.model.on('change:shares', function() { this.model.on('change:shares', function() {
view.render(); view.render();
}); });
this._noteView = options.parent.noteView;
}, },
/** /**
@ -269,6 +277,7 @@
getShareProperties: function() { getShareProperties: function() {
return { return {
unshareLabel: t('core', 'Unshare'), unshareLabel: t('core', 'Unshare'),
addNoteLabel: t('core', 'Set share note'),
canShareLabel: t('core', 'Can reshare'), canShareLabel: t('core', 'Can reshare'),
canEditLabel: t('core', 'Can edit'), canEditLabel: t('core', 'Can edit'),
createPermissionLabel: t('core', 'Can create'), createPermissionLabel: t('core', 'Can create'),
@ -470,6 +479,16 @@
return this._popoverMenuTemplate(data); return this._popoverMenuTemplate(data);
}, },
showNoteForm(event) {
event.preventDefault();
event.stopPropagation();
var self = this;
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
this._noteView.render(shareId);
},
onUnshare: function(event) { onUnshare: function(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -493,6 +512,8 @@
self.model.removeShare(shareId) self.model.removeShare(shareId)
.done(function() { .done(function() {
$li.remove(); $li.remove();
// remove note field on sucess
self._noteView.hide();
}) })
.fail(function() { .fail(function() {
$loading.addClass('hidden'); $loading.addClass('hidden');

View File

@ -28,6 +28,7 @@
'<div class="shareeListView subView"></div>' + '<div class="shareeListView subView"></div>' +
'<div class="linkShareView subView"></div>' + '<div class="linkShareView subView"></div>' +
'<div class="expirationView subView"></div>' + '<div class="expirationView subView"></div>' +
'<div class="noteView subView"></div>' +
'<div class="loading hidden" style="height: 50px"></div>'; '<div class="loading hidden" style="height: 50px"></div>';
/** /**
@ -62,6 +63,9 @@
/** @type {object} **/ /** @type {object} **/
expirationView: undefined, expirationView: undefined,
/** @type {object} **/
noteView: undefined,
/** @type {object} **/ /** @type {object} **/
shareeListView: undefined, shareeListView: undefined,
@ -105,6 +109,7 @@
var subViewOptions = { var subViewOptions = {
model: this.model, model: this.model,
parent: this,
configModel: this.configModel configModel: this.configModel
}; };
@ -112,6 +117,7 @@
resharerInfoView: 'ShareDialogResharerInfoView', resharerInfoView: 'ShareDialogResharerInfoView',
linkShareView: 'ShareDialogLinkShareView', linkShareView: 'ShareDialogLinkShareView',
expirationView: 'ShareDialogExpirationView', expirationView: 'ShareDialogExpirationView',
noteView: 'ShareDialogNoteView',
shareeListView: 'ShareDialogShareeListView' shareeListView: 'ShareDialogShareeListView'
}; };
@ -674,6 +680,9 @@
this.expirationView.$el = this.$el.find('.expirationView'); this.expirationView.$el = this.$el.find('.expirationView');
this.expirationView.render(); this.expirationView.render();
this.noteView.$el = this.$el.find('.noteView');
this.noteView.render();
this.shareeListView.$el = this.$el.find('.shareeListView'); this.shareeListView.$el = this.$el.find('.shareeListView');
this.shareeListView.render(); this.shareeListView.render();