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
GitHub
commit
05bcdf937b
|
|
@ -206,12 +206,15 @@ nav {
|
|||
margin-left: -54px;
|
||||
}
|
||||
|
||||
.header-left #navigation,
|
||||
.ui-datepicker,
|
||||
.ui-timepicker.ui-widget {
|
||||
.header-left #navigation {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
function (expireDate) {
|
||||
view.setExpirationDate(shareId, expireDate);
|
||||
},
|
||||
onClose:
|
||||
function () {
|
||||
$(expirationDatePicker).removeClass('hidden-visually');
|
||||
}
|
||||
onSelect: function (expireDate) {
|
||||
view.setExpirationDate(shareId, expireDate);
|
||||
}
|
||||
});
|
||||
$(expirationDatePicker).focus();
|
||||
|
||||
$(expirationDatePicker).addClass('hidden-visually');
|
||||
},
|
||||
|
||||
setExpirationDate: function(shareId, expireDate) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue