mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Popovermenu migration 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-07-18 17:42:30 +02:00
parent fa44300016
commit 0a7e34f6c8
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
8 changed files with 271 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

311
apps/files_sharing/css/sharetabview.scss
View File

@ -2,164 +2,183 @@
min-height: 100px; min-height: 100px;
} }
.shareTabView .oneline { .shareTabView {
white-space: nowrap; .oneline {
position: relative; white-space: nowrap;
} position: relative;
}
.shareTabView .shareWithLoading { .shareWithLoading {
padding-left: 10px; padding-left: 10px;
right: 35px; right: 35px;
top: 0px; top: 0px;
} }
.shareWithConfirm,
.shareTabView .shareWithConfirm, .clipboardButton,
.shareTabView .clipboardButton, .linkPass .icon-loading-small {
.shareTabView .linkPass .icon-loading-small { position: absolute;
position: absolute; right: -7px;
right: -7px; top: -2px;
top: -2px; padding: 14px;
padding: 14px; }
} .shareWithConfirm {
opacity: 0.5;
.shareTabView .shareWithConfirm { }
opacity: .5; .shareWithField:focus ~ .shareWithConfirm {
} opacity: 1;
}
.shareTabView .shareWithField:focus ~ .shareWithConfirm { .linkMore {
opacity: 1; position: absolute;
} right: -7px;
top: -4px;
.shareTabView .linkMore { padding: 14px;
position: absolute; }
right: -7px; .popovermenu {
top: -4px; &.socialSharingMenu {
padding: 14px; right: -7px;
}
.clipboardButton {
position: relative;
top: initial;
right: initial;
padding: 0;
}
.share-add {
input.share-note-delete {
display: none;
border: none;
background-color: transparent;
width: 44px !important;
padding: 0;
flex: 0 0 44px;
margin-left: auto;
}
}
// note
.share-note-form {
span.icon-note {
position: relative;
}
textarea.share-note {
margin: 0;
width: 200px;
min-height: 70px;
resize: none;
+ input.share-note-submit {
position: absolute;
width: 44px !important;
height: 44px;
bottom: 0px;
right: 10px;
margin: 0;
background-color: transparent;
border: none;
opacity: .7;
&:hover,
&:focus,
&:active {
opacity: 1;
}
}
}
}
}
label {
white-space: nowrap;
}
input {
&[type='checkbox'] {
margin: 0 3px 0 8px;
vertical-align: middle;
}
&[type='text'] {
&.shareWithField,
&.emailField,
&.linkText {
width: 100%;
box-sizing: border-box;
padding-right: 32px;
text-overflow: ellipsis;
}
}
&[type='password'] {
width: 100%;
box-sizing: border-box;
padding-right: 32px;
text-overflow: ellipsis;
}
}
form {
font-size: 100%;
margin-left: 0;
margin-right: 0;
}
} }
/* fix the popup menu because the button is shifted and then the menu is not aligned */ /* fix the popup menu because the button is shifted and then the menu is not aligned */
.shareTabView .popovermenu.socialSharingMenu {
right: -7px;
}
.shareTabView .popovermenu .clipboardButton {
position: relative;
top: initial;
right: initial;
padding: 0;
}
.shareTabView label {
white-space: nowrap;
}
.shareTabView input[type="checkbox"] {
margin: 0 3px 0 8px;
vertical-align: middle;
}
.shareTabView input[type="text"].shareWithField,
.shareTabView input[type="text"].emailField,
.shareTabView input[type="text"].linkText,
.shareTabView input[type="password"] {
width: 100%;
box-sizing: border-box;
padding-right: 32px;
text-overflow: ellipsis;
}
.shareTabView form {
font-size: 100%;
margin-left: 0;
margin-right: 0;
}
#shareWithList { #shareWithList {
list-style-type: none; list-style-type: none;
padding: 0 0 16px; padding: 0 0 16px;
> li {
padding-top: 5px;
padding-bottom: 5px;
white-space: normal;
display: inline-flex;
align-items: center;
}
.unshare img {
vertical-align: text-bottom;
/* properly align icons */
}
.sharingOptionsGroup {
> a .icon {
padding: 7px;
vertical-align: middle;
opacity: 0.5;
}
.popovermenu:after {
right: 3px;
}
}
label input[type='checkbox'] {
margin-left: 0;
position: relative;
}
.username {
padding-right: 8px;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
li .sharingOptionsGroup > .shareOption > label {
padding: 6px;
margin-right: 8px;
vertical-align: text-top;
}
} }
#shareWithList > li {
padding-top: 5px;
padding-bottom: 5px;
white-space: normal;
display: inline-flex;
align-items: center;
}
#shareWithList .unshare img {
vertical-align: text-bottom; /* properly align icons */
}
#shareWithList .sharingOptionsGroup > a .icon {
padding: 7px;
vertical-align: middle;
opacity: .5;
}
#shareWithList .sharingOptionsGroup .popovermenu:after {
right: 3px;
}
#shareWithList label input[type=checkbox] {
margin-left: 0;
position: relative;
}
#shareWithList .username {
padding-right: 8px;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
#shareWithList li .sharingOptionsGroup > .shareOption > label {
padding: 6px;
margin-right: 8px;
vertical-align: text-top;
}
.shareTabView .icon-loading-small {
display: inline-block;
z-index: 1;
vertical-align: text-top;
}
.shareTabView .shareWithList .icon-loading-small:not(.hidden) + span,
.shareTabView .linkShareView .icon-loading-small:not(.hidden) + input + label:before {
/* Hide if loader is visible */
display: none !important;
}
form#newNoteForm,
.linkShareView { .linkShareView {
margin-top: 16px; margin-top: 16px;
} }
.shareTabView .linkPass .icon-loading-small { .shareTabView {
margin-right: 0px; .linkPass .icon-loading-small {
margin-right: 0px;
}
.icon {
background-size: 16px 16px;
}
.icon-loading-small {
display: inline-block;
z-index: 1;
vertical-align: text-top;
}
.shareWithList .icon-loading-small:not(.hidden) + span,
.linkShareView .icon-loading-small:not(.hidden) + input + label:before {
/* Hide if loader is visible */
display: none !important;
}
} }
.shareTabView .icon {
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;
}
}

5
core/css/apps.scss
View File

@ -998,6 +998,11 @@ $popovericon-size: 16px;
} }
} }
} }
&.hidden {
display: none;
}
/* css hack, only first not hidden*/ /* css hack, only first not hidden*/
&:not(.hidden):not([style*='display:none']) { &:not(.hidden):not([style*='display:none']) {
&:first-of-type { &:first-of-type {

1
core/js/core.json
View File

@ -38,7 +38,6 @@
"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",

1
core/js/merged-share-backend.json
View File

@ -5,7 +5,6 @@
"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"

149
core/js/sharedialognoteview.js
View File

@ -1,149 +0,0 @@
/*
* @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;
})();

90
core/js/sharedialogshareelistview.js
View File

@ -121,7 +121,17 @@
'</span>' + '</span>' +
'</li>' + '</li>' +
'<li>' + '<li>' +
'<a href="#" class="addnote"><span class="icon-loading-small hidden"></span><span class="icon icon-edit"></span><span>{{addNoteLabel}}</span></a>' + '<a href="#" class="share-add"><span class="icon-loading-small hidden"></span>' +
' <span class="icon icon-edit"></span>' +
' <span>{{addNoteLabel}}</span>' +
' <input type="button" class="share-note-delete icon-delete">' +
'</a>' +
'</li>' +
'<li class="share-note-form hidden">' +
'<span class="menuitem icon-note">' +
' <textarea class="share-note">{{shareNote}}</textarea>' +
' <input type="submit" class="icon-confirm share-note-submit" value="" id="add-note-{{shareId}}" />' +
'</span>' +
'</li>' + '</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>' +
@ -161,7 +171,9 @@
events: { events: {
'click .unshare': 'onUnshare', 'click .unshare': 'onUnshare',
'click .addnote': 'showNoteForm', 'click .share-add': 'showNoteForm',
'click .share-note-delete': 'deleteNote',
'click .share-note-submit': 'updateNote',
'click .icon-more': 'onToggleMenu', 'click .icon-more': 'onToggleMenu',
'click .permissions': 'onPermissionChange', 'click .permissions': 'onPermissionChange',
'click .expireDate' : 'onExpireDateChange', 'click .expireDate' : 'onExpireDateChange',
@ -269,6 +281,7 @@
isPasswordSet: hasPassword, isPasswordSet: hasPassword,
secureDropMode: !this.model.hasReadPermission(shareIndex), secureDropMode: !this.model.hasReadPermission(shareIndex),
hasExpireDate: this.model.getExpireDate(shareIndex) !== null, hasExpireDate: this.model.getExpireDate(shareIndex) !== null,
shareNote: this.model.getNote(shareIndex),
expireDate: moment(this.model.getExpireDate(shareIndex), 'YYYY-MM-DD').format('DD-MM-YYYY'), expireDate: moment(this.model.getExpireDate(shareIndex), 'YYYY-MM-DD').format('DD-MM-YYYY'),
passwordPlaceholder: hasPassword ? PASSWORD_PLACEHOLDER : PASSWORD_PLACEHOLDER_MESSAGE, passwordPlaceholder: hasPassword ? PASSWORD_PLACEHOLDER : PASSWORD_PLACEHOLDER_MESSAGE,
}); });
@ -486,7 +499,78 @@
var $element = $(event.target); var $element = $(event.target);
var $li = $element.closest('li[data-share-id]'); var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id'); var shareId = $li.data('share-id');
this._noteView.render(shareId); var $menu = $element.closest('li');
var $form = $menu.next('li.share-note-form');
// show elements
$menu.find('.share-note-delete').toggle();
$form.toggleClass('hidden');
},
deleteNote(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');
var $menu = $element.closest('li');
var $form = $menu.next('li.share-note-form');
console.log($form.find('.share-note'));
$form.find('.share-note').val('');
self.sendNote('', shareId, $menu);
},
updateNote(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');
var $form = $element.closest('li.share-note-form');
var $menu = $form.prev('li');
var message = $form.find('.share-note').val().trim();
if (message.length < 1) {
return;
}
self.sendNote(message, shareId, $menu);
},
sendNote(note, shareId, $menu) {
var $form = $menu.next('li.share-note-form');
var $submit = $form.find('input.share-note-submit');
var $error = $form.find('input.share-note-error');
$submit.prop('disabled', true);
$menu.find('.icon-loading-small').removeClass('hidden');
$menu.find('.icon-edit').hide();
var complete = function() {
$submit.prop('disabled', false);
$menu.find('.icon-loading-small').addClass('hidden');
$menu.find('.icon-edit').show();
};
var error = function() {
$error.show();
setTimeout(function() {
$error.hide();
}, 3000);
};
// send data
$.ajax({
method: 'PUT',
url: OC.generateUrl('/ocs/v2.php/apps/files_sharing/api/v1/shares/' + shareId),
data: { note: note },
complete : complete,
error: error
});
}, },
onUnshare: function(event) { onUnshare: function(event) {

10
core/js/sharedialogview.js
View File

@ -28,7 +28,6 @@
'<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,10 +61,7 @@
/** @type {object} **/ /** @type {object} **/
expirationView: undefined, expirationView: undefined,
/** @type {object} **/
noteView: undefined,
/** @type {object} **/ /** @type {object} **/
shareeListView: undefined, shareeListView: undefined,
@ -117,7 +113,6 @@
resharerInfoView: 'ShareDialogResharerInfoView', resharerInfoView: 'ShareDialogResharerInfoView',
linkShareView: 'ShareDialogLinkShareView', linkShareView: 'ShareDialogLinkShareView',
expirationView: 'ShareDialogExpirationView', expirationView: 'ShareDialogExpirationView',
noteView: 'ShareDialogNoteView',
shareeListView: 'ShareDialogShareeListView' shareeListView: 'ShareDialogShareeListView'
}; };
@ -680,9 +675,6 @@
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();

13
core/js/shareitemmodel.js
View File

@ -366,6 +366,10 @@
return this._shareExpireDate(shareIndex); return this._shareExpireDate(shareIndex);
}, },
getNote: function(shareIndex) {
return this._shareNote(shareIndex);
},
/** /**
* Returns all share entries that only apply to the current item * Returns all share entries that only apply to the current item
* (file/folder) * (file/folder)
@ -502,6 +506,15 @@
return date2; return date2;
}, },
_shareNote: function(shareIndex) {
var share = this.get('shares')[shareIndex];
if(!_.isObject(share)) {
throw "Unknown Share";
}
return share.note;
},
/** /**
* @return {int} * @return {int}
*/ */