Public fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

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;
+	}
+}

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,

core/js/core.json

@@ -37,7 +37,6 @@
 		"shareconfigmodel.js",
 		"shareitemmodel.js",
 		"sharedialogview.js",
-		"sharedialogexpirationview.js",
 		"sharedialoglinkshareview.js",
 		"sharedialogresharerinfoview.js",
 		"sharedialogshareelistview.js",

core/js/merged-share-backend.json

@@ -1,11 +1,10 @@
 [
-  "shareconfigmodel.js",
+	"shareconfigmodel.js",
-  "shareitemmodel.js",
+	"shareitemmodel.js",
-  "sharesocialmanager.js",
+	"sharesocialmanager.js",
-  "sharedialogresharerinfoview.js",
+	"sharedialogresharerinfoview.js",
-  "sharedialoglinkshareview.js",
+	"sharedialoglinkshareview.js",
-  "sharedialogexpirationview.js",
+	"sharedialogshareelistview.js",
-  "sharedialogshareelistview.js",
+	"sharedialogview.js",
-  "sharedialogview.js",
+	"share.js"
-  "share.js"
 ]

core/js/sharedialogexpirationview.js

@@ -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}}' +
-			'<input type="checkbox" name="expirationCheckbox" class="expirationCheckbox checkbox" id="expirationCheckbox-{{cid}}" value="1" ' +
-				'{{#if isExpirationSet}}checked="checked"{{/if}} {{#if disableCheckbox}}disabled="disabled"{{/if}} />' +
-			'<label for="expirationCheckbox-{{cid}}">{{setExpirationLabel}}</label>' +
-			'<div class="expirationDateContainer {{#unless isExpirationSet}}hidden{{/unless}}">' +
-			'    <label for="expirationDate" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
-			'    <input id="expirationDate" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{expirationValue}}" />' +
-			'</div>' +
-			'    {{#if isExpirationEnforced}}' +
-				// originally the expire message was shown when a default date was set, however it never had text
-			'<em id="defaultExpireMessage">{{defaultExpireMessage}}</em>' +
-			'    {{/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;
-
-})();

core/js/sharedialoglinkshareview.js

@@ -120,7 +120,7 @@
 					'<li>' +
 						'<a href="#" class="shareOption menuitem pop-up" data-url="{{url}}" data-window="{{newWindow}}">' +
 							'<span class="icon {{iconClass}}"' +
-								'></inpu><span>{{label}}' +
+								'></span><span>{{label}}' +
 							'</span>' +
 						'</a>' +
 					'</li>' +
@@ -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 li = $element.closest('li[data-share-id]');
-			var datePicker = $(datePickerClass);
+			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();
 
 		},

core/js/sharedialogshareelistview.js

@@ -103,11 +103,13 @@
 						'<span class="shareOption menuitem">' +
 							'<input id="password-{{cid}}-{{shareId}}" type="checkbox" name="password" class="password checkbox" {{#if isPasswordSet}}checked="checked"{{/if}}{{#if isPasswordSet}}{{#if isPasswordForMailSharesRequired}}disabled=""{{/if}}{{/if}}" />' +
 							'<label for="password-{{cid}}-{{shareId}}">{{passwordLabel}}</label>' +
-							'<div class="passwordContainer-{{cid}}-{{shareId}} {{#unless isPasswordSet}}hidden{{/unless}}">' +
+						'</span>' +
-							'    <label for="passwordField-{{cid}}-{{shareId}}" class="hidden-visually" value="{{password}}">{{passwordLabel}}</label>' +
+					'</li>' +
-							'    <input id="passwordField-{{cid}}-{{shareId}}" class="passwordField" type="password" placeholder="{{passwordPlaceholder}}" value="{{passwordValue}}" autocomplete="new-password" />' +
+					'<li class="passwordMenu-{{cid}}-{{shareId}} {{#unless isPasswordSet}}hidden{{/unless}}">' +
-							'    <span class="icon-loading-small hidden"></span>' +
+						'<span class="passwordContainer-{{cid}}-{{shareId}} icon-passwordmail menuitem">' +
-							'</div>' +
+						'    <label for="passwordField-{{cid}}-{{shareId}}" class="hidden-visually" value="{{password}}">{{passwordLabel}}</label>' +
+						'    <input id="passwordField-{{cid}}-{{shareId}}" class="passwordField" type="password" placeholder="{{passwordPlaceholder}}" value="{{passwordValue}}" autocomplete="new-password" />' +
+						'    <span class="icon-loading-small hidden"></span>' +
 						'</span>' +
 					'</li>' +
 				'{{/if}}' +
@@ -115,10 +117,12 @@
 					'<span class="shareOption menuitem">' +
 						'<input id="expireDate-{{cid}}-{{shareId}}" type="checkbox" name="expirationDate" class="expireDate checkbox" {{#if hasExpireDate}}checked="checked"{{/if}}" />' +
 						'<label for="expireDate-{{cid}}-{{shareId}}">{{expireDateLabel}}</label>' +
-						'<div class="expirationDateContainer-{{cid}}-{{shareId}} {{#unless hasExpireDate}}hidden{{/unless}}">' +
+					'</span>' +
-						'    <label for="expirationDatePicker-{{cid}}-{{shareId}}" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
+				'</li>' +
-						'    <input id="expirationDatePicker-{{cid}}-{{shareId}}" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{#if hasExpireDate}}{{expireDate}}{{else}}{{defaultExpireDate}}{{/if}}" />' +
+				'<li class="expirationDateMenu-{{cid}}-{{shareId}} {{#unless hasExpireDate}}hidden{{/unless}}">' +
-						'</div>' +
+					'<span class="expirationDateContainer-{{cid}}-{{shareId}} icon-expiredate menuitem">' +
+					'    <label for="expirationDatePicker-{{cid}}-{{shareId}}" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
+					'    <input id="expirationDatePicker-{{cid}}-{{shareId}}" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{#if hasExpireDate}}{{expireDate}}{{else}}{{defaultExpireDate}}{{/if}}" />' +
 					'</span>' +
 				'</li>' +
 				'<li>' +
@@ -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 $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 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;