This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 8747b304e1a841644877f4684a8968a43e3df9df Author: Kevin Morin <morin@codelutin.com> Date: Mon Sep 11 17:54:49 2017 +0200 fixes #128 Modification de l'éditeur d'heure, inline plutot que dans une popup --- .../main/web/tag/components/date-picker.tag.html | 1 - .../main/web/tag/components/time-picker.tag.html | 152 +++++---------------- 2 files changed, 36 insertions(+), 117 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html index 85594827..edf517c7 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html @@ -217,7 +217,6 @@ date-picker { position: relative; display: inline-block; - cursor: pointer; } .c-calendar { diff --git a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html index d849eeb8..9b3ec9c5 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html @@ -1,30 +1,30 @@ <time-picker> <i if={opts.iconleftclass} class="fa fa-fw fa-{opts.iconleftclass} c-icon"></i> - <input type="time" + <input if="{session.timeInputSupported}" + type="time" class="calendar-field {opts.inputclass}" - onclick="{open}" value="{opts.time.time ? opts.time.time.format('LT') : undefined}" placeholder="{__.timeplaceholder}" - readonly="{!session.timeInputSupported}" disabled={opts.disabled} required={opts.required} onblur={onTimeChange}/> - <div class="c-calendar c-calendar--higher" if="{opts.time.isVisible && !session.timeInputSupported}"> - - <div class="time"> - <button type="button" class="c-button c-button--ghost-info u-small" onclick={nextHour}><i class="fa fa-chevron-up"></i> </button> - <div class="ti_tx"><input class="timepicki-input" type="text" readonly value="{opts.time.time ? opts.time.time.format('HH') : moment().format('HH')}"></div> - <button type="button" class="c-button c-button--ghost-info u-small" onclick={prevHour}><i class="fa fa-chevron-down"></i> </button> - </div> - <div class="colon"> - <div class="colon_tx">:</div> - </div> - <div class="mins"> - <button type="button" class="c-button c-button--ghost-info u-small" onclick={nextMinute}><i class="fa fa-chevron-up"></i> </button> - <div class="mi_tx"><input class="timepicki-input" type="text" readonly value="{opts.time.time ? opts.time.time.format('mm') : moment().format('mm')}"></div> - <button type="button" class="c-button c-button--ghost-info u-small" onclick={prevMinute}><i class="fa fa-chevron-down"></i> </button> - </div> + <div class="calendar-field {opts.inputclass} timeInputNotSupported" if="{!session.timeInputSupported}"> + <input class="timepicker-input" + ref="hourInput" + type="number" + max="23" + min="0" + value="{opts.time.time ? opts.time.time.format('HH') : moment().format('HH')}" + onchange="{hourChanged}"/> + <span class="colon">:</span> + <input class="timepicker-input" + ref="minuteInput" + type="number" + max="59" + min="0" + value="{opts.time.time ? opts.time.time.format('mm') : moment().format('mm')}" + onchange="{minuteChanged}"/> </div> <script type="es6"> @@ -52,13 +52,6 @@ return this.moment(); }; - let handleClickOutside = e => { - if (!this.root.contains(e.target)) { - this.close(); - } - this.update(); - }; - this.on("mount", () => { if (!this.opts.time) { this.opts.time = {}; @@ -70,58 +63,34 @@ this.on("update", () => { this.opts.time.time = toMoment(this.opts.time.time); - this.positionDropdown(this.opts.time.isVisible, ".calendar"); }); - document.addEventListener("click", handleClickOutside); this.update(); }); - this.on("unmount", () => { - document.removeEventListener("click", handleClickOutside); - }); - - this.open = () => { - this.root.style.overflow = "visible"; - this.opts.time.isVisible = true; - this.trigger("open"); - }; - - this.close = () => { - if (this.opts.time.isVisible) { - this.root.style.overflow = null; - this.opts.time.isVisible = false; - this.trigger("close"); - } + this.minuteChanged = (e) => { + this.initTime(); + this.opts.time.time = this.opts.time.time.minutes(this.refs.minuteInput.value); if (this.opts.onchange) { this.opts.onchange(); } }; - this.prevHour = () => { - this.initTime(); - this.opts.time.time = this.opts.time.time.subtract(1, "hour"); - }; - - this.nextHour = () => { - this.initTime(); - this.opts.time.time = this.opts.time.time.add(1, "hour"); - }; - - this.prevMinute = () => { - this.initTime(); - this.opts.time.time = this.opts.time.time.subtract(1, "minute"); - }; - - this.nextMinute = () => { + this.hourChanged = (e) => { this.initTime(); - this.opts.time.time = this.opts.time.time.add(1, "minute"); + this.opts.time.time = this.opts.time.time.hours(this.refs.hourInput.value); + if (this.opts.onchange) { + this.opts.onchange(); + } }; this.onTimeChange = e => { if (e.currentTarget.value) { var time = this.moment(e.currentTarget.value, "HH:mm"); this.initTime(); - this.opts.time.time.set({hour: time.hour(), minute: time.minute()}); + this.opts.time.time.set({hour: time.hours(), minute: time.minutes()}); + } + if (this.opts.onchange) { + this.opts.onchange(); } }; @@ -134,65 +103,16 @@ </script> <style scoped> - time-picker { - position: relative; - display: inline-block; - cursor: pointer; - } - - .c-calendar { - position: absolute; - margin-top: .5em; - left: 0; - min-width: 205px; - } - - - /* - Created on: 17 Sep, 2014, 4:29:37 PM - Author: senthil - */ - - .ti_tx, - .colon_tx, - .mi_tx { - width: 100%; - text-align: center; - margin: 10px 0; - } - - .time, - .colon, - .mins { - float: left; - margin: 0 10px; - font-size: 20px; - font-family: arial; - font-weight: 700; - } - - .time, - .mins { - width: 60px; - } - - .time .c-button, - .mins .c-button { - border-radius: 4px; + .timeInputNotSupported { + padding: 0 5px; } - .time_pick { - position: relative; + .timepicker-input { + width: 50px; } - input.timepicki-input { - border: none; - float: none; - margin: 0; - text-align: center; - width: 70%; - outline: 0; - font-size: 1em; + .colon { + margin: 0 5px; } </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.