Date time picker position fix & design fixestags/v13.0.0beta4
@@ -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) { |