diff --git a/api/js/etemplate/Et2Date/Et2Date.ts b/api/js/etemplate/Et2Date/Et2Date.ts index 8f8282b2ce..cce4e1ee57 100644 --- a/api/js/etemplate/Et2Date/Et2Date.ts +++ b/api/js/etemplate/Et2Date/Et2Date.ts @@ -17,6 +17,11 @@ import {dateStyles} from "./DateStyles"; import {LitFlatpickr} from "lit-flatpickr"; import "flatpickr/dist/plugins/scrollPlugin.js"; +import(egw.webserverUrl + "/node_modules/flatpickr/dist/l10n/" + (egw.preference('lang') + ".js")).then(() => +{ + // @ts-ignore + flatpickr.localize(flatpickr.l10ns[egw.preference('lang')]); +}); /** * Parse a date string into a Date object @@ -369,6 +374,8 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl options.dateFormat = "Y-m-dT00:00:00\\Z"; options.weekNumbers = true; + this._localize(options); + if(this.inline) { options.inline = this.inline; @@ -384,6 +391,20 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl return options; } + /** + * Set localize options & translations + * @param options + * @protected + */ + protected _localize(options) + { + let first_dow = this.egw().preference('weekdaystarts', 'calendar') || 'Monday'; + const DOW_MAP = {Monday: 1, Sunday: 0, Saturday: 6}; + options.locale = { + firstDayOfWeek: DOW_MAP[first_dow] + }; + } + set_value(value) { if(!value || value == 0 || value == "0") diff --git a/api/js/etemplate/Et2Dialog/Et2Dialog.ts b/api/js/etemplate/Et2Dialog/Et2Dialog.ts index 1cfebad7f1..20135aed23 100644 --- a/api/js/etemplate/Et2Dialog/Et2Dialog.ts +++ b/api/js/etemplate/Et2Dialog/Et2Dialog.ts @@ -220,6 +220,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo * Automatically destroy the dialog when it closes. Set to false to keep the dialog around. */ destroy_on_close: Boolean, + appendTo: String } } @@ -435,7 +436,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo get value() : Object { let value = this.__value; - if(this._template_widget) + if(this._template_widget && this._template_widget.widgetContainer) { value = this._template_widget.getValues(this._template_widget.widgetContainer); } diff --git a/api/js/etemplate/et2_widget_dialog.ts b/api/js/etemplate/et2_widget_dialog.ts index c12bf2763c..7f2d1a0596 100644 --- a/api/js/etemplate/et2_widget_dialog.ts +++ b/api/js/etemplate/et2_widget_dialog.ts @@ -88,6 +88,27 @@ export class et2_dialog extends Et2Dialog return super._getButtons(); } + _onOpen() + { + super._onOpen(); + + // move the overlay dialog into appendTo dom since we want it to be shown in that container + if (this.appendTo) + { + document.getElementsByClassName(this.appendTo.replace('.',''))[0].appendChild(this._cachedOverlayContentNode); + } + } + + _onClose(ev: PointerEvent) + { + // revert the moved container back to its original position in order to be able to teardown the overlay properly + if (this.appendTo) + { + document.getElementsByClassName('global-overlays__overlay-container')[0].appendChild(this._cachedOverlayContentNode); + } + super._onClose(ev); + } + /** * @deprecated * @returns {any} diff --git a/calendar/js/SidemenuDate.ts b/calendar/js/SidemenuDate.ts index da3833a561..6a294fa66d 100644 --- a/calendar/js/SidemenuDate.ts +++ b/calendar/js/SidemenuDate.ts @@ -62,7 +62,15 @@ export class SidemenuDate extends Et2Date holidays_or_promise.then(holidays => { SidemenuDate._holidays = holidays; - this.requestUpdate(); + if(this._instance) + { + // Already drawn without holidays so redraw + this._instance.redraw(); + } + else + { + this.requestUpdate(); + } }) } else @@ -100,6 +108,12 @@ export class SidemenuDate extends Et2Date this._instance.weekNumbers.addEventListener("mouseover", this._handleDayHover); } + // Customise next / prev buttons + this.querySelector('.flatpickr-next-month').classList.add("et2_button", "et2_button_text"); + this.egw().tooltipBind(this.querySelector('.flatpickr-next-month'), this.egw().lang("next")); + this.querySelector('.flatpickr-prev-month').classList.add("et2_button", "et2_button_text"); + this.egw().tooltipBind(this.querySelector('.flatpickr-prev-month'), this.egw().lang("prev")); + // Move buttons into header if(this._goButton && this._headerNode) { @@ -109,6 +123,7 @@ export class SidemenuDate extends Et2Date { this._headerNode.append(this._todayButton); } + this._updateGoButton(); } /** @@ -123,10 +138,14 @@ export class SidemenuDate extends Et2Date options.inline = true; options.dateFormat = "Y-m-dT00:00:00\\Z"; + options.shorthandCurrentMonth = true; options.onDayCreate = this._onDayCreate; options.onMonthChange = this._updateGoButton; + options.nextArrow = ""; + options.prevArrow = ""; + return options } @@ -325,12 +344,12 @@ export class SidemenuDate extends Et2Date get _goButton() { - return this.querySelector("button[id*='go']"); + return this.querySelector("et2-button[id*='go']"); } get _todayButton() { - return this.querySelector("button[id*='today']"); + return this.querySelector("et2-button[id*='today']"); } /** @@ -347,7 +366,7 @@ export class SidemenuDate extends Et2Date let temp_date = new Date("" + this._instance.currentYear + "-" + (this._instance.currentMonth + 1) + "-01"); temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset()); - this._goButton.setAttribute('title', egw.lang(date('F', temp_date))); + this._goButton.setAttribute('title', egw.lang(this._instance.formatDate(temp_date, "F"))); // Store current _displayed_ date in date button for clicking temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset()); this._goButton.setAttribute('data-date', temp_date.toJSON()); diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 07c194cb45..8050407b7a 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -86,18 +86,12 @@ border: none; box-shadow: none; } -#calendar-sidebox_buttons tbody { - width: 100%; -} -#calendar-sidebox_date_header > button { - width: 45%; -} #calendar-sidebox_header_go, #calendar-sidebox_header_today { width: 12px; height: 12px; - top: 28px; + top: 5px; z-index: 1; overflow: hidden; font-size: 10px; @@ -105,25 +99,24 @@ color: white; background-color: #217bc0; background-image: none; + background-position-y: -1px; border:none; border-radius: 100%; } #calendar-sidebox_header_go { - text-indent: -1px; + margin-right: 10px } +#calendar-sidebox_header_today { + order: 2; + } #calendar-sidebox_header_go:hover, #calendar-sidebox_header_today:hover { - background-color: #0c5da5; + background-color: var(--row-hover); box-shadow: none; } #calendar-sidebox_weekend { /* Special css styling goes here */ } -#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title { - max-width: 10em; -} -#calendar-sidebox_date td.ui-datepicker-week-col { - cursor: pointer; -} + #calendar-sidebox_date .calendar_calHoliday { background-color: rgba(103, 159, 210, 0.5); } @@ -132,33 +125,79 @@ background-color: white; } -#calendar-sidebox_date .flatpickr-months > * { - height: 20px; +#calendar-sidebox_date .flatpickr-months { + gap: 0; + background-color: initial; } +#calendar-sidebox_date .flatpickr-months > * { + background-repeat: no-repeat; +} +#calendar-sidebox_date .flatpickr-months > *:hover { + background-color: initial !important; + box-shadow: none; +} +#calendar-sidebox_date .flatpickr-months .flatpickr-month { + min-width: 16ch; + height: initial; + background-color: initial; +} + #calendar-sidebox_date .flatpickr-current-month { height: 25px; - font-size: 110%; + font-size: 100%; width: 100%; - min-width: 16ch; + min-width: 7ch; left: 0; display: flex; align-items: stretch; padding: 0px; } + +#calendar-sidebox_date .flatpickr-current-month select { + padding: 0 !important; + background-color: initial; +} #calendar-sidebox_date .flatpickr-current-month .numInputWrapper { width: 7ch; min-width: 7ch; + flex: 0; +} +#calendar-sidebox_date .flatpickr-current-month .numInputWrapper:hover { + background-color: initial; } #calendar-sidebox_date .flatpickr-current-month input.cur-year { padding-top: 3px; } #calendar-sidebox_date div.flatpickr-calendar.inline .flatpickr-current-month .flatpickr-monthDropdown-months { - width: 70%; + width: 100%; + padding: 0; + flex: 1 1 auto; } +#calendar-sidebox_date .flatpickr-next-month, +#calendar-sidebox_date .flatpickr-prev-month { + background-size: contain; + background-color: initial; + width: 12px; + height: 12px; + border: none; +} +#calendar-sidebox_date .flatpickr-prev-month { + order: 1; + background-image: url(./images/previous.svg); + margin-right: 0px; +} +#calendar-sidebox_date .flatpickr-next-month { + order: 3; + background-image: url(./images/next.svg); +} #calendar-sidebox_date div.flatpickr-calendar.inline { width: 100% !important; } + +#calendar-sidebox_date .flatpickr-day { + font-size: 11px; +} #calendar-sidebox_date .inRange { background-color: var(--row_hover); box-shadow: none; diff --git a/calendar/templates/default/sidebox.xet b/calendar/templates/default/sidebox.xet index efbfb52677..0cde2f4a95 100644 --- a/calendar/templates/default/sidebox.xet +++ b/calendar/templates/default/sidebox.xet @@ -14,18 +14,18 @@ Egroupware