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

Date time picker position fix & design fixes
This commit is contained in:
Morris Jobke 2018-01-05 10:54:32 +01:00 committed by GitHub
commit 05bcdf937b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 34 deletions

View File

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

View File

@ -1035,15 +1035,6 @@ code {
background-color: inherit; background-color: inherit;
} }
td { 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) { &.ui-datepicker-today a:not(.ui-state-hover) {
background-color: nc-lighten($color-main-text, 86%); background-color: nc-lighten($color-main-text, 86%);
} }
@ -1056,7 +1047,7 @@ code {
font-weight: bold; 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) { .ui-priority-secondary:not(.ui-state-hover) {
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
opacity: .8; opacity: .8;
@ -1099,26 +1090,25 @@ code {
font-weight: 300; font-weight: 300;
} }
} }
/* AM/PM fix */
table.ui-timepicker tr .ui-timepicker-hour-cell:first-child {
margin-left: 30px;
}
.ui-timepicker-table { .ui-timepicker-table {
th { th {
font-weight: normal; font-weight: normal;
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
opacity: .8; opacity: .8;
&.periods {
padding: 0;
width: 30px;
line-height: 30px;
}
} }
tr:hover { tr:hover {
background-color: inherit; background-color: inherit;
} }
td { 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-hour-cell a.ui-state-active,
&.ui-timepicker-minute-cell a.ui-state-active, &.ui-timepicker-minute-cell a.ui-state-active,
.ui-state-hover, .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 ---- */ /* ---- DIALOGS ---- */
#oc-dialog-filepicker-content { #oc-dialog-filepicker-content {

View File

@ -116,7 +116,7 @@
'<label for="expireDate-{{cid}}-{{shareId}}">{{expireDateLabel}}</label>' + '<label for="expireDate-{{cid}}-{{shareId}}">{{expireDateLabel}}</label>' +
'<div class="expirationDateContainer-{{cid}}-{{shareId}} {{#unless hasExpireDate}}hidden{{/unless}}">' + '<div class="expirationDateContainer-{{cid}}-{{shareId}} {{#unless hasExpireDate}}hidden{{/unless}}">' +
' <label for="expirationDatePicker-{{cid}}-{{shareId}}" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' + ' <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>' + '</div>' +
'</span>' + '</span>' +
'</li>' + '</li>' +
@ -266,6 +266,8 @@
expireDateLabel: t('core', 'Set expiration date'), expireDateLabel: t('core', 'Set expiration date'),
passwordLabel: t('core', 'Password protect'), passwordLabel: t('core', 'Password protect'),
crudsLabel: t('core', 'Access control'), 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'), triangleSImage: OC.imagePath('core', 'actions/triangle-s'),
isResharingAllowed: this.configModel.get('isResharingAllowed'), isResharingAllowed: this.configModel.get('isResharingAllowed'),
isPasswordForMailSharesRequired: this.configModel.get('isPasswordForMailSharesRequired'), isPasswordForMailSharesRequired: this.configModel.get('isPasswordForMailSharesRequired'),
@ -513,19 +515,14 @@
var shareId = li.data('share-id'); var shareId = li.data('share-id');
var expirationDatePicker = '#expirationDatePicker-' + this.cid + '-' + shareId; var expirationDatePicker = '#expirationDatePicker-' + this.cid + '-' + shareId;
var view = this; var view = this;
$(expirationDatePicker).closest('div').datepicker({ $(expirationDatePicker).datepicker({
dateFormat : 'dd-mm-yy', 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) { setExpirationDate: function(shareId, expireDate) {