diff --git a/apps/files_sharing/css/sharetabview.scss b/apps/files_sharing/css/sharetabview.scss index 22cc58cbdc..82a04936bf 100644 --- a/apps/files_sharing/css/sharetabview.scss +++ b/apps/files_sharing/css/sharetabview.scss @@ -2,6 +2,19 @@ min-height: 100px; } +.share-autocomplete-item { + display: flex; + .autocomplete-item-text { + margin-left: 10px; + margin-right: 10px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 32px; + vertical-align: middle; + } +} + .shareTabView { .oneline { white-space: nowrap; @@ -33,6 +46,9 @@ padding: 14px; } .popovermenu { + .datepicker { + margin-left: 35px; + } .clipboardButton { position: relative; top: initial; @@ -109,7 +125,8 @@ } } &[type='text'].linkText - &[type='password'].linkPassText { + &[type='password'].linkPassText, + &[type='password'].passwordField { width: 180px !important; } } @@ -175,3 +192,30 @@ } } +.ui-autocomplete { + /* limit dropdown height to 4 1/2 entries */ + max-height: 200px; + overflow-y: auto; + overflow-x: hidden; +} + +.notCreatable { + padding-left: 12px; + padding-top: 12px; + color: var(--color-text-lighter); +} + +.contactsmenu-popover { + left: -6px; + right: auto; + padding: 3px 6px; + top: 100%; + margin-top: 0; + li.hidden { + display: none !important; + } + &:after { + left: 8px; + right: auto; + } +} \ No newline at end of file diff --git a/core/css/styles.scss b/core/css/styles.scss index 30aa25d183..9652b02e9d 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -530,6 +530,7 @@ code { width: auto; border-radius: var(--border-radius); border: none; + z-index: 500 !important; .ui-state-default, .ui-widget-content .ui-state-default, diff --git a/core/js/core.json b/core/js/core.json index 502e3a5797..2ebc2e710e 100644 --- a/core/js/core.json +++ b/core/js/core.json @@ -37,7 +37,6 @@ "shareconfigmodel.js", "shareitemmodel.js", "sharedialogview.js", - "sharedialogexpirationview.js", "sharedialoglinkshareview.js", "sharedialogresharerinfoview.js", "sharedialogshareelistview.js", diff --git a/core/js/merged-share-backend.json b/core/js/merged-share-backend.json index d39945b8f7..63c3575a66 100644 --- a/core/js/merged-share-backend.json +++ b/core/js/merged-share-backend.json @@ -1,11 +1,10 @@ [ - "shareconfigmodel.js", - "shareitemmodel.js", - "sharesocialmanager.js", - "sharedialogresharerinfoview.js", - "sharedialoglinkshareview.js", - "sharedialogexpirationview.js", - "sharedialogshareelistview.js", - "sharedialogview.js", - "share.js" + "shareconfigmodel.js", + "shareitemmodel.js", + "sharesocialmanager.js", + "sharedialogresharerinfoview.js", + "sharedialoglinkshareview.js", + "sharedialogshareelistview.js", + "sharedialogview.js", + "share.js" ] diff --git a/core/js/sharedialogexpirationview.js b/core/js/sharedialogexpirationview.js deleted file mode 100644 index a9849ef916..0000000000 --- a/core/js/sharedialogexpirationview.js +++ /dev/null @@ -1,209 +0,0 @@ -/* - * Copyright (c) 2015 - * - * This file is licensed under the Affero General Public License version 3 - * or later. - * - * See the COPYING-README file. - * - */ - -/* global moment, Handlebars */ - -(function() { - if (!OC.Share) { - OC.Share = {}; - } - - var TEMPLATE = - // currently expiration is only effective for link share. - // this is about to change in future. Therefore this is not included - // in the LinkShareView to ease reusing it in future. Then, - // modifications (getting rid of IDs) are still necessary. - '{{#if isLinkShare}}' + - '' + - '' + - '
' + - ' ' + - ' ' + - '
' + - ' {{#if isExpirationEnforced}}' + - // originally the expire message was shown when a default date was set, however it never had text - '{{defaultExpireMessage}}' + - ' {{/if}}' + - '{{/if}}' - ; - - /** - * @class OCA.Share.ShareDialogExpirationView - * @member {OC.Share.ShareItemModel} model - * @member {jQuery} $el - * @memberof OCA.Sharing - * @classdesc - * - * Represents the expiration part in the GUI of the share dialogue - * - */ - var ShareDialogExpirationView = OC.Backbone.View.extend({ - /** @type {string} **/ - id: 'shareDialogLinkShare', - - /** @type {OC.Share.ShareConfigModel} **/ - configModel: undefined, - - /** @type {Function} **/ - _template: undefined, - - /** @type {boolean} **/ - showLink: true, - - className: 'hidden', - - events: { - 'change .expirationCheckbox': '_onToggleExpiration', - 'change .datepicker': '_onChangeExpirationDate' - }, - - initialize: function(options) { - if(!_.isUndefined(options.configModel)) { - this.configModel = options.configModel; - } else { - throw 'missing OC.Share.ShareConfigModel'; - } - - var view = this; - this.configModel.on('change:isDefaultExpireDateEnforced', function() { - view.render(); - }); - - this.model.on('change:itemType', function() { - view.render(); - }); - - this.model.on('change:linkShare', function() { - view.render(); - }); - }, - - _onToggleExpiration: function(event) { - var $checkbox = $(event.target); - var state = $checkbox.prop('checked'); - // TODO: slide animation - this.$el.find('.expirationDateContainer').toggleClass('hidden', !state); - if (!state) { - // discard expiration date - this.model.get('linkShare').expiration = ''; - this.model.saveLinkShare({ - expireDate: '' - }); - } else { - this.$el.find('#expirationDate').focus(); - } - }, - - _onChangeExpirationDate: function(event) { - var $target = $(event.target); - $target.tooltip('hide'); - $target.removeClass('error'); - - var expiration = moment($target.val(), 'DD-MM-YYYY').format('YYYY-MM-DD'); - this.model.get('linkShare').expiration = expiration; - this.model.saveLinkShare({ - expiration: expiration - }, { - error: function(model, message) { - if (!message) { - $target.attr('title', t('core', 'Error setting expiration date')); - } else { - $target.attr('title', message); - } - $target.tooltip({gravity: 'n'}); - $target.tooltip('show'); - $target.addClass('error'); - } - }); - }, - - render: function() { - var defaultExpireMessage = ''; - var defaultExpireDays = this.configModel.get('defaultExpireDate'); - var isExpirationEnforced = this.configModel.get('isDefaultExpireDateEnforced'); - - if( (this.model.isFolder() || this.model.isFile()) - && isExpirationEnforced) { - defaultExpireMessage = t( - 'core', - 'The public link will expire no later than {days} days after it is created', - {'days': defaultExpireDays } - ); - } - - var isExpirationSet = !!this.model.get('linkShare').expiration || isExpirationEnforced; - - var expiration; - if (isExpirationSet) { - expiration = moment(this.model.get('linkShare').expiration, 'YYYY-MM-DD').format('DD-MM-YYYY'); - } - - this.$el.html(this.template({ - cid: this.cid, - setExpirationLabel: t('core', 'Set expiration date'), - expirationLabel: t('core', 'Expiration'), - expirationDatePlaceholder: t('core', 'Expiration date'), - defaultExpireMessage: defaultExpireMessage, - isLinkShare: this.model.get('linkShare').isLinkShare, - isExpirationSet: isExpirationSet, - isExpirationEnforced: isExpirationEnforced, - disableCheckbox: isExpirationEnforced && isExpirationSet, - expirationValue: expiration - })); - - // what if there is another date picker on that page? - var minDate = new Date(); - var maxDate = null; - // min date should always be the next day - minDate.setDate(minDate.getDate()+1); - - if(isExpirationSet) { - if(isExpirationEnforced) { - // TODO: hack: backend returns string instead of integer - var shareTime = this.model.get('linkShare').stime; - if (_.isNumber(shareTime)) { - shareTime = new Date(shareTime * 1000); - } - if (!shareTime) { - shareTime = new Date(); // now - } - shareTime = OC.Util.stripTime(shareTime).getTime(); - maxDate = new Date(shareTime + defaultExpireDays * 24 * 3600 * 1000); - } - } - $.datepicker.setDefaults({ - minDate: minDate, - maxDate: maxDate - }); - - this.$el.find('.datepicker').datepicker({dateFormat : 'dd-mm-yy'}); - - this.delegateEvents(); - - return this; - }, - - /** - * @returns {Function} from Handlebars - * @private - */ - template: function (data) { - if (!this._template) { - this._template = Handlebars.compile(TEMPLATE); - } - return this._template(data); - } - - }); - - OC.Share.ShareDialogExpirationView = ShareDialogExpirationView; - -})(); diff --git a/core/js/sharedialoglinkshareview.js b/core/js/sharedialoglinkshareview.js index be2a89cd1b..d1d321f986 100644 --- a/core/js/sharedialoglinkshareview.js +++ b/core/js/sharedialoglinkshareview.js @@ -120,7 +120,7 @@ '
  • ' + '' + '{{label}}' + + '>{{label}}' + '' + '' + '
  • ' + @@ -376,6 +376,7 @@ // show elements $menu.find('.share-note-delete').toggle(); $form.toggleClass('hidden'); + $form.find('textarea').focus(); }, deleteNote(event) { @@ -517,6 +518,7 @@ }); }); + var defaultExpireDays = this.configModel.get('defaultExpireDate'); var isExpirationEnforced = this.configModel.get('isDefaultExpireDateEnforced'); var hasExpireDate = !!this.model.get('linkShare').expiration || isExpirationEnforced; @@ -525,6 +527,33 @@ expireDate = moment(this.model.get('linkShare').expiration, 'YYYY-MM-DD').format('DD-MM-YYYY'); } + // what if there is another date picker on that page? + var minDate = new Date(); + var maxDate = null; + // min date should always be the next day + minDate.setDate(minDate.getDate()+1); + + if(hasExpireDate) { + if(isExpirationEnforced) { + // TODO: hack: backend returns string instead of integer + var shareTime = this.model.get('linkShare').stime; + if (_.isNumber(shareTime)) { + shareTime = new Date(shareTime * 1000); + } + if (!shareTime) { + shareTime = new Date(); // now + } + shareTime = OC.Util.stripTime(shareTime).getTime(); + maxDate = new Date(shareTime + defaultExpireDays * 24 * 3600 * 1000); + } + } + $.datepicker.setDefaults({ + minDate: minDate, + maxDate: maxDate + }); + + this.$el.find('.datepicker').datepicker({dateFormat : 'dd-mm-yy'}); + var popover = this.popoverMenuTemplate({ cid: this.model.get('linkShare').id, copyLabel: t('core', 'Copy URL'), @@ -575,6 +604,9 @@ this.delegateEvents(); + // new note autosize + autosize(this.$el.find('.share-note-form .share-note')); + return this; }, @@ -636,8 +668,10 @@ onExpireDateChange: function(event) { var $element = $(event.target); - var datePickerClass = '.expirationDateContainer-' + this.cid; - var datePicker = $(datePickerClass); + var li = $element.closest('li[data-share-id]'); + var shareId = li.data('share-id'); + var expirationDatePicker = '#expirationDateContainer-' + shareId; + var datePicker = $(expirationDatePicker); var state = $element.prop('checked'); datePicker.toggleClass('hidden', !state); @@ -655,7 +689,10 @@ }, showDatePicker: function(event) { - var expirationDatePicker = '#expirationDatePicker-' + this.cid; + var $element = $(event.target); + var li = $element.closest('li[data-share-id]'); + var shareId = li.data('share-id'); + var expirationDatePicker = '#expirationDatePicker-' + shareId; var self = this; $(expirationDatePicker).datepicker({ @@ -664,6 +701,8 @@ self.setExpirationDate(expireDate); } }); + console.log(event, $(expirationDatePicker)); + $(expirationDatePicker).datepicker('show'); $(expirationDatePicker).focus(); }, diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index cdf6972a94..a970415539 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -103,11 +103,13 @@ '' + '' + '' + - '
    ' + - ' ' + - ' ' + - ' ' + - '
    ' + + '
    ' + + '' + + '
  • ' + + '' + + ' ' + + ' ' + + ' ' + '' + '
  • ' + '{{/if}}' + @@ -115,10 +117,12 @@ '' + '' + '' + - '
    ' + - ' ' + - ' ' + - '
    ' + + '
    ' + + '' + + '
  • ' + + '' + + ' ' + + ' ' + '' + '
  • ' + '
  • ' + @@ -496,13 +500,13 @@ event.preventDefault(); event.stopPropagation(); var $element = $(event.target); - var $li = $element.closest('li[data-share-id]'); var $menu = $element.closest('li'); var $form = $menu.next('li.share-note-form'); // show elements $menu.find('.share-note-delete').toggle(); $form.toggleClass('hidden'); + $form.find('textarea').focus(); }, deleteNote(event) { @@ -617,16 +621,21 @@ }, onExpireDateChange: function(event) { - var element = $(event.target); - var li = element.closest('li[data-share-id]'); + var $element = $(event.target); + var li = $element.closest('li[data-share-id]'); var shareId = li.data('share-id'); var datePickerClass = '.expirationDateContainer-' + this.cid + '-' + shareId; var datePicker = $(datePickerClass); - var state = element.prop('checked'); + var state = $element.prop('checked'); datePicker.toggleClass('hidden', !state); if (!state) { + // disabled, let's hide the input and + // set the expireDate to nothing + $element.closest('li').next('li').addClass('hidden'); this.setExpirationDate(shareId, ''); } else { + // enabled, show the input and the datepicker + $element.closest('li').next('li').removeClass('hidden'); this.showDatePicker(event); } @@ -656,7 +665,7 @@ var element = $(event.target); var li = element.closest('li[data-share-id]'); var shareId = li.data('share-id'); - var passwordContainerClass = '.passwordContainer-' + this.cid + '-' + shareId; + var passwordContainerClass = '.passwordMenu-' + this.cid + '-' + shareId; var passwordContainer = $(passwordContainerClass); var loading = this.$el.find(passwordContainerClass + ' .icon-loading-small'); var inputClass = '#passwordField-' + this.cid + '-' + shareId;