diff --git a/apps/files_sharing/css/sharetabview.scss b/apps/files_sharing/css/sharetabview.scss index 28cae27d40..18897802f4 100644 --- a/apps/files_sharing/css/sharetabview.scss +++ b/apps/files_sharing/css/sharetabview.scss @@ -2,164 +2,183 @@ min-height: 100px; } -.shareTabView .oneline { - white-space: nowrap; - position: relative; -} - -.shareTabView .shareWithLoading { - padding-left: 10px; - right: 35px; - top: 0px; -} - -.shareTabView .shareWithConfirm, -.shareTabView .clipboardButton, -.shareTabView .linkPass .icon-loading-small { - position: absolute; - right: -7px; - top: -2px; - padding: 14px; -} - -.shareTabView .shareWithConfirm { - opacity: .5; -} - -.shareTabView .shareWithField:focus ~ .shareWithConfirm { - opacity: 1; -} - -.shareTabView .linkMore { - position: absolute; - right: -7px; - top: -4px; - padding: 14px; +.shareTabView { + .oneline { + white-space: nowrap; + position: relative; + } + .shareWithLoading { + padding-left: 10px; + right: 35px; + top: 0px; + } + .shareWithConfirm, + .clipboardButton, + .linkPass .icon-loading-small { + position: absolute; + right: -7px; + top: -2px; + padding: 14px; + } + .shareWithConfirm { + opacity: 0.5; + } + .shareWithField:focus ~ .shareWithConfirm { + opacity: 1; + } + .linkMore { + position: absolute; + right: -7px; + top: -4px; + padding: 14px; + } + .popovermenu { + &.socialSharingMenu { + 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 */ -.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 { list-style-type: none; 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 { margin-top: 16px; } -.shareTabView .linkPass .icon-loading-small { - margin-right: 0px; +.shareTabView { + .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; - } -} \ No newline at end of file diff --git a/core/css/apps.scss b/core/css/apps.scss index d524dd94bb..b294d8c3fe 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -998,6 +998,11 @@ $popovericon-size: 16px; } } } + + &.hidden { + display: none; + } + /* css hack, only first not hidden*/ &:not(.hidden):not([style*='display:none']) { &:first-of-type { diff --git a/core/js/core.json b/core/js/core.json index 6a6249c294..502e3a5797 100644 --- a/core/js/core.json +++ b/core/js/core.json @@ -38,7 +38,6 @@ "shareitemmodel.js", "sharedialogview.js", "sharedialogexpirationview.js", - "sharedialognoteview.js", "sharedialoglinkshareview.js", "sharedialogresharerinfoview.js", "sharedialogshareelistview.js", diff --git a/core/js/merged-share-backend.json b/core/js/merged-share-backend.json index 48ad5d5340..d39945b8f7 100644 --- a/core/js/merged-share-backend.json +++ b/core/js/merged-share-backend.json @@ -5,7 +5,6 @@ "sharedialogresharerinfoview.js", "sharedialoglinkshareview.js", "sharedialogexpirationview.js", - "sharedialognoteview.js", "sharedialogshareelistview.js", "sharedialogview.js", "share.js" diff --git a/core/js/sharedialognoteview.js b/core/js/sharedialognoteview.js deleted file mode 100644 index 429d9cd942..0000000000 --- a/core/js/sharedialognoteview.js +++ /dev/null @@ -1,149 +0,0 @@ -/* - * @copyright Copyright (c) 2018 John Molakvoæ - * - * @author John Molakvoæ - * - * @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 . - * - */ - -/* global moment, Handlebars */ - -(function() { - if (!OC.Share) { - OC.Share = {}; - } - - var TEMPLATE = - '
' + - ' ' + - ' ' + - '
' + - ' ' - ; - - /** - * @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; - -})(); diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index af4abce17b..2f561aa66e 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -121,7 +121,17 @@ '' + '' + '
  • ' + - '{{addNoteLabel}}' + + '' + + '
    • ' + + '' + '
  • ' + '{{unshareLabel}}' + @@ -161,7 +171,9 @@ events: { '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 .permissions': 'onPermissionChange', 'click .expireDate' : 'onExpireDateChange', @@ -269,6 +281,7 @@ isPasswordSet: hasPassword, secureDropMode: !this.model.hasReadPermission(shareIndex), hasExpireDate: this.model.getExpireDate(shareIndex) !== null, + shareNote: this.model.getNote(shareIndex), expireDate: moment(this.model.getExpireDate(shareIndex), 'YYYY-MM-DD').format('DD-MM-YYYY'), passwordPlaceholder: hasPassword ? PASSWORD_PLACEHOLDER : PASSWORD_PLACEHOLDER_MESSAGE, }); @@ -486,7 +499,78 @@ var $element = $(event.target); var $li = $element.closest('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) { diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js index 4b5dc80e94..b69bc5026c 100644 --- a/core/js/sharedialogview.js +++ b/core/js/sharedialogview.js @@ -28,7 +28,6 @@ '
    ' + '
    ' + '
    ' + - '
    ' + ''; /** @@ -62,10 +61,7 @@ /** @type {object} **/ expirationView: undefined, - - /** @type {object} **/ - noteView: undefined, - + /** @type {object} **/ shareeListView: undefined, @@ -117,7 +113,6 @@ resharerInfoView: 'ShareDialogResharerInfoView', linkShareView: 'ShareDialogLinkShareView', expirationView: 'ShareDialogExpirationView', - noteView: 'ShareDialogNoteView', shareeListView: 'ShareDialogShareeListView' }; @@ -680,9 +675,6 @@ this.expirationView.$el = this.$el.find('.expirationView'); this.expirationView.render(); - this.noteView.$el = this.$el.find('.noteView'); - this.noteView.render(); - this.shareeListView.$el = this.$el.find('.shareeListView'); this.shareeListView.render(); diff --git a/core/js/shareitemmodel.js b/core/js/shareitemmodel.js index 93feba9c88..68e55443dd 100644 --- a/core/js/shareitemmodel.js +++ b/core/js/shareitemmodel.js @@ -366,6 +366,10 @@ return this._shareExpireDate(shareIndex); }, + getNote: function(shareIndex) { + return this._shareNote(shareIndex); + }, + /** * Returns all share entries that only apply to the current item * (file/folder) @@ -502,6 +506,15 @@ return date2; }, + + _shareNote: function(shareIndex) { + var share = this.get('shares')[shareIndex]; + if(!_.isObject(share)) { + throw "Unknown Share"; + } + return share.note; + }, + /** * @return {int} */