Merge pull request #7477 from nextcloud/date-time-picker-position-fix

Date time picker position fix & design fixes

core/css/header.scss

@@ -206,12 +206,15 @@ nav {
 	margin-left: -54px;
 }
 
-.header-left #navigation,
+.header-left #navigation {
-.ui-datepicker,
-.ui-timepicker.ui-widget {
 	position: relative;
 	left: -100%;
 	width: 160px;
+}
+
+.header-left #navigation,
+.ui-datepicker,
+.ui-timepicker.ui-widget {
 	background-color: $color-main-background;
 	filter: drop-shadow(0 1px 10px $color-box-shadow);
 	&:after {

core/css/styles.scss

@@ -1035,15 +1035,6 @@ code {
 			background-color: inherit;
 		}
 		td {
-			> * {
-				border-radius: 50%;
-				text-align: center;
-				font-weight: normal;
-				color: $color-main-text;
-				padding: 6px;
-				line-height: 12px;
-			}
-
 			&.ui-datepicker-today a:not(.ui-state-hover) {
 				background-color: nc-lighten($color-main-text, 86%);
 			}
@@ -1056,7 +1047,7 @@ code {
 				font-weight: bold;
 			}
 
-			&.ui-datepicker-week-end :not(.ui-state-hover),
+			&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
 			.ui-priority-secondary:not(.ui-state-hover) {
 				color: nc-lighten($color-main-text, 33%);
 				opacity: .8;
@@ -1099,26 +1090,25 @@ code {
 			font-weight: 300;
 		}
 	}
+	/* AM/PM fix */
+	table.ui-timepicker tr .ui-timepicker-hour-cell:first-child {
+		margin-left: 30px;
+	}
 	.ui-timepicker-table {
 		th {
 			font-weight: normal;
 			color: nc-lighten($color-main-text, 33%);
 			opacity: .8;
+			&.periods {
+				padding: 0;
+				width: 30px;
+				line-height: 30px;
+			}
 		}
 		tr:hover {
 			background-color: inherit;
 		}
 		td {
-			> * {
-				border-radius: 50%;
-				text-align: center;
-				font-weight: normal;
-				color: $color-main-text;
-				padding: 8px 7px;
-				font-size: .9em;
-				line-height: 12px;
-			}
-
 			&.ui-timepicker-hour-cell a.ui-state-active,
 			&.ui-timepicker-minute-cell a.ui-state-active,
 			.ui-state-hover,
@@ -1139,6 +1129,37 @@ code {
 	}
 }
 
+/* ---- jQuery UI datepicker & timepicker global rules ---- */
+.ui-widget.ui-datepicker .ui-datepicker-calendar,
+.ui-widget.ui-timepicker table.ui-timepicker {
+	tr {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		td {
+			display: block;
+			flex: 1 1;
+			margin: 0;
+			padding: 2px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> * {
+				border-radius: 50%;
+				text-align: center;
+				font-weight: normal;
+				color: $color-main-text;
+				display: block;
+				line-height: 18px;
+				width: 18px;
+				height: 18px;
+				padding: 3px;
+				font-size: .9em;
+			}
+		}
+	}
+}
+
 /* ---- DIALOGS ---- */
 
 #oc-dialog-filepicker-content {

core/js/sharedialogshareelistview.js

@@ -116,7 +116,7 @@
 						'<label for="expireDate-{{cid}}-{{shareId}}">{{expireDateLabel}}</label>' +
 						'<div class="expirationDateContainer-{{cid}}-{{shareId}} {{#unless hasExpireDate}}hidden{{/unless}}">' +
 						'    <label for="expirationDatePicker-{{cid}}-{{shareId}}" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
-						'    <input id="expirationDatePicker-{{cid}}-{{shareId}}" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{expireDate}}" />' +
+						'    <input id="expirationDatePicker-{{cid}}-{{shareId}}" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{#if hasExpireDate}}{{expireDate}}{{else}}{{defaultExpireDate}}{{/if}}" />' +
 						'</div>' +
 					'</span>' +
 				'</li>' +
@@ -266,6 +266,8 @@
 				expireDateLabel: t('core', 'Set expiration date'),
 				passwordLabel: t('core', 'Password protect'),
 				crudsLabel: t('core', 'Access control'),
+				expirationDatePlaceholder: t('core', 'Expiration date'),
+				defaultExpireDate: moment().add(1, 'day').format('DD-MM-YYYY'), // Can't expire today
 				triangleSImage: OC.imagePath('core', 'actions/triangle-s'),
 				isResharingAllowed: this.configModel.get('isResharingAllowed'),
 				isPasswordForMailSharesRequired: this.configModel.get('isPasswordForMailSharesRequired'),
@@ -513,19 +515,14 @@
 			var shareId = li.data('share-id');
 			var expirationDatePicker = '#expirationDatePicker-' + this.cid + '-' + shareId;
 			var view = this;
-			$(expirationDatePicker).closest('div').datepicker({
+			$(expirationDatePicker).datepicker({
 				dateFormat : 'dd-mm-yy',
-				onSelect:
+				onSelect: function (expireDate) {
-					function (expireDate) {
+					view.setExpirationDate(shareId, expireDate);
-						view.setExpirationDate(shareId, expireDate);
+				}
-					},
-				onClose:
-					function () {
-						$(expirationDatePicker).removeClass('hidden-visually');
-					}
 			});
+			$(expirationDatePicker).focus();
 
-			$(expirationDatePicker).addClass('hidden-visually');
 		},
 
 		setExpirationDate: function(shareId, expireDate) {