Merge remote-tracking branch 'origin/455-datepicker-interagieren-schlecht-mit-modals'
This commit is contained in:
commit
ed846df453
@ -3,6 +3,7 @@ import { Utility } from '../../core/utility';
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
|
||||||
const KEYCODE_ESCAPE = 27;
|
const KEYCODE_ESCAPE = 27;
|
||||||
|
const Z_INDEX_MODAL = 9999;
|
||||||
|
|
||||||
// INTERNAL (Uni2work specific) formats for formatting dates and/or times
|
// INTERNAL (Uni2work specific) formats for formatting dates and/or times
|
||||||
const FORM_DATE_FORMAT = {
|
const FORM_DATE_FORMAT = {
|
||||||
@ -42,9 +43,6 @@ const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
|
|||||||
|
|
||||||
const DATEPICKER_CONFIG = {
|
const DATEPICKER_CONFIG = {
|
||||||
'global': {
|
'global': {
|
||||||
// minimize overlaps with other date inputs
|
|
||||||
position: 'right',
|
|
||||||
|
|
||||||
// set default time to 00:00:00
|
// set default time to 00:00:00
|
||||||
timeHours: 0,
|
timeHours: 0,
|
||||||
timeMinutes: 0,
|
timeMinutes: 0,
|
||||||
@ -131,6 +129,14 @@ export class Datepicker {
|
|||||||
// initialize tail.datetime (datepicker) instance
|
// initialize tail.datetime (datepicker) instance
|
||||||
this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig });
|
this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig });
|
||||||
|
|
||||||
|
// insert the datepicker element (dt) after the form
|
||||||
|
this._element.form.parentNode.insertBefore(this.datepickerInstance.dt, this._element.form.nextSibling);
|
||||||
|
|
||||||
|
// if the input element is in any open modal, increase the z-index of the datepicker
|
||||||
|
if (this._element.closest('.modal--open')) {
|
||||||
|
this.datepickerInstance.dt.style.zIndex = Z_INDEX_MODAL;
|
||||||
|
}
|
||||||
|
|
||||||
// register this datepicker instance with the formID of the given element in the datepicker collection
|
// register this datepicker instance with the formID of the given element in the datepicker collection
|
||||||
const formID = this._element.form.id;
|
const formID = this._element.form.id;
|
||||||
const elemID = this._element.id;
|
const elemID = this._element.id;
|
||||||
|
|||||||
@ -27,7 +27,6 @@
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
color: var(--color-font);
|
color: var(--color-font);
|
||||||
padding: 0 40px;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -114,6 +113,6 @@ div.modal__trigger {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal__content {
|
.modal__content {
|
||||||
margin: 20px 0;
|
margin: 20px 40px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -15317,7 +15317,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tail.datetime": {
|
"tail.datetime": {
|
||||||
"version": "git+https://github.com/uni2work/tail.DateTime.git#d3256920fcedbf32c84b8065e77628097c7f2410",
|
"version": "git+https://github.com/uni2work/tail.DateTime.git#57e4feb2d6a53c7e1d3630a2da7eb9a213fa288d",
|
||||||
"from": "git+https://github.com/uni2work/tail.DateTime.git#master"
|
"from": "git+https://github.com/uni2work/tail.DateTime.git#master"
|
||||||
},
|
},
|
||||||
"tapable": {
|
"tapable": {
|
||||||
|
|||||||
@ -163,8 +163,8 @@ examOccurrenceForm prev = wFormToAForm $ do
|
|||||||
(eofNameRes, eofNameView) <- mpreq (textField & cfStrip & cfCI) ("" & addName (nudge "name")) (eofName <$> mPrev)
|
(eofNameRes, eofNameView) <- mpreq (textField & cfStrip & cfCI) ("" & addName (nudge "name")) (eofName <$> mPrev)
|
||||||
(eofRoomRes, eofRoomView) <- mpreq (textField & cfStrip) ("" & addName (nudge "room")) (eofRoom <$> mPrev)
|
(eofRoomRes, eofRoomView) <- mpreq (textField & cfStrip) ("" & addName (nudge "room")) (eofRoom <$> mPrev)
|
||||||
(eofCapacityRes, eofCapacityView) <- mpreq (natFieldI MsgExamRoomCapacityNegative) ("" & addName (nudge "capacity")) (eofCapacity <$> mPrev)
|
(eofCapacityRes, eofCapacityView) <- mpreq (natFieldI MsgExamRoomCapacityNegative) ("" & addName (nudge "capacity")) (eofCapacity <$> mPrev)
|
||||||
(eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start") & addDatepickerPositionAttr DPBottom) (eofStart <$> mPrev)
|
(eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start")) (eofStart <$> mPrev)
|
||||||
(eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end") & addDatepickerPositionAttr DPBottom) (eofEnd <$> mPrev)
|
(eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end")) (eofEnd <$> mPrev)
|
||||||
(eofDescRes, eofDescView) <- mopt htmlFieldSmall ("" & addName (nudge "description")) (eofDescription <$> mPrev)
|
(eofDescRes, eofDescView) <- mopt htmlFieldSmall ("" & addName (nudge "description")) (eofDescription <$> mPrev)
|
||||||
|
|
||||||
return ( ExamOccurrenceForm
|
return ( ExamOccurrenceForm
|
||||||
|
|||||||
Reference in New Issue
Block a user