diff --git a/api/js/etemplate/Et2Date/Et2Date.ts b/api/js/etemplate/Et2Date/Et2Date.ts index 24f48217d2..89f53c18ba 100644 --- a/api/js/etemplate/Et2Date/Et2Date.ts +++ b/api/js/etemplate/Et2Date/Et2Date.ts @@ -355,6 +355,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl { super.connectedCallback(); this._updateValueOnChange = this._updateValueOnChange.bind(this); + this._handleShortcutButtonClick = this._handleShortcutButtonClick.bind(this); } disconnectedCallback() @@ -419,10 +420,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl // @ts-ignore TypeScript can't find ShortcutButtonsPlugin, but rollup does ShortcutButtonsPlugin({ button: [{label: this.egw().lang("Today")}], - onClick: (button_index, fp) => - { - fp.setDate(new Date()); - } + onClick: this._handleShortcutButtonClick }) ]; @@ -432,6 +430,17 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl return options; } + /** + * Handle click on shortcut button(s) like "Today" + * + * @param button_index + * @param fp Flatpickr instance + */ + public _handleShortcutButtonClick(button_index, fp) + { + fp.setDate(new Date()); + } + /** * Set localize options & translations * @param options diff --git a/calendar/inc/class.calendar_hooks.inc.php b/calendar/inc/class.calendar_hooks.inc.php index 218b7be28d..b782779ee0 100644 --- a/calendar/inc/class.calendar_hooks.inc.php +++ b/calendar/inc/class.calendar_hooks.inc.php @@ -352,13 +352,6 @@ class calendar_hooks 'admin' => False, 'default' => ['weekN', 'month'], ), - 'auto_update_on_sidebox_change' => array( - 'type' => 'check', - 'label' => 'Update calendar view immediately when navigation calendar in sidebox is changed', - 'name' => 'auto_update_on_sidebox_change', - 'help' => 'When changing the month', - 'default'=> false - ), '2.section' => array( 'type' => 'section', 'title' => lang('appointment settings'), diff --git a/calendar/js/SidemenuDate.ts b/calendar/js/SidemenuDate.ts index b36a9dec6d..dc1fefa321 100644 --- a/calendar/js/SidemenuDate.ts +++ b/calendar/js/SidemenuDate.ts @@ -43,7 +43,7 @@ export class SidemenuDate extends Et2Date this._handleChange = this._handleChange.bind(this); this._handleDayHover = this._handleDayHover.bind(this); this._clearHover = this._clearHover.bind(this); - this._updateGoButton = this._updateGoButton.bind(this); + this._handleHeaderChange = this._handleHeaderChange.bind(this); } async connectedCallback() @@ -83,23 +83,6 @@ export class SidemenuDate extends Et2Date this._instance.weekNumbers.addEventListener("mouseover", this._handleDayHover); this._instance.weekNumbers.addEventListener("mouseout", this._clearHover); } - - // 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) - { - this._headerNode.append(this._goButton); - } - if(this._todayButton && this._headerNode) - { - this._headerNode.append(this._todayButton); - } - this._updateGoButton(); } /** @@ -114,13 +97,9 @@ export class SidemenuDate extends Et2Date options.inline = true; options.dateFormat = "Y-m-dT00:00:00\\Z"; - options.shorthandCurrentMonth = true; - options.onMonthChange = this._updateGoButton; - options.onYearChange = this._updateGoButton; - - options.nextArrow = ""; - options.prevArrow = ""; + options.onMonthChange = this._handleHeaderChange; + options.onYearChange = this._handleHeaderChange; return options } @@ -154,7 +133,41 @@ export class SidemenuDate extends Et2Date _ev.stopPropagation(); return false; } - this._oldChange(_ev); + let view_change = app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view); + let update = {date: this.getValue()}; + + if(view_change >= 0) + { + update.view = app.calendar.sidebox_changes_views[view_change ? view_change - 1 : view_change]; + } + else if(app.calendar.state.view == 'listview') + { + update.filter = 'after'; + } + else if(app.calendar.state.view == 'planner') + { + update.planner_view = 'day'; + } + app.calendar.update_state(update); + + } + + /** + * Handle click on shortcut button(s) like "Today" + * + * @param button_index + * @param fp Flatpickr instance + */ + public _handleShortcutButtonClick(button_index, fp) + { + // This just changes the calendar to today + super._handleShortcutButtonClick(button_index, fp); + + let temp_date = new Date("" + this._instance.currentYear + "-" + (this._instance.currentMonth + 1) + "-" + (this._instance.selectedDates[0].getDate() || "01")); + + // Go directly + let update = {date: temp_date}; + app.calendar.update_state(update); } _handleClick(_ev : MouseEvent) : boolean @@ -276,34 +289,19 @@ export class SidemenuDate extends Et2Date return this._instance?.monthNav; } - get _goButton() - { - return this.querySelector("et2-button[id*='go']"); - } - - get _todayButton() - { - return this.querySelector("et2-button[id*='today']"); - } - /** - * Update the go button + * Year or month changed * * @protected */ - protected _updateGoButton() + protected _handleHeaderChange() { - if(!this._goButton) - { - return; - } 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(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()); + // Go directly + let update = {date: temp_date}; + app.calendar.update_state(update); } } diff --git a/calendar/js/app.ts b/calendar/js/app.ts index 9e6253b38a..31b1092a3d 100644 --- a/calendar/js/app.ts +++ b/calendar/js/app.ts @@ -4092,81 +4092,7 @@ export class CalendarApp extends EgwApp */ _setup_sidebox_filters() { - // Further date customizations - var date_widget = this.sidebox_et2.getWidgetById('date'); - if(date_widget) - { - // Dynamic resize of sidebox calendar to fill sidebox - var preferred_width = jQuery('#calendar-sidebox_date .ui-datepicker-inline').outerWidth(); - var go_button_widget = date_widget.getRoot().getWidgetById('header_go'); - var auto_update = this.egw.preference('auto_update_on_sidebox_change', 'calendar') === '1'; - if(auto_update) - { - go_button_widget.set_disabled(true); - } - /* - const datepicker = date_widget.input_date.datepicker("option", { - showButtonPanel: false, - onChangeMonthYear: function(year, month, inst) - { - // Update month button label - if(go_button_widget) - { - var temp_date = new Date(year, month-1, 1,0,0,0); - //temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset()); - go_button_widget.btn.attr('title',egw.lang(date('F',temp_date))); - - // Store current _displayed_ date in date button for clicking - temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset()); - go_button_widget.btn.attr('data-date', temp_date.toJSON()); - } - if(auto_update) - { - go_button_widget.click(); - } - window.setTimeout(calendar_resize,0); - }, - // Mark holidays - beforeShowDay: function (date) - { - var day_holidays = holidays['' + date.getFullYear() + - sprintf("%02d", date.getMonth() + 1) + - sprintf("%02d", date.getDate())]; - var css_class = ''; - var tooltip = ''; - if (typeof day_holidays !== 'undefined' && day_holidays.length) - { - for (var i = 0; i < day_holidays.length; i++) - { - if (typeof day_holidays[i]['birthyear'] !== 'undefined') - { - css_class += 'calendar_calBirthday '; - } - else - { - css_class += 'calendar_calHoliday '; - } - tooltip += day_holidays[i]['name'] + "\n"; - } - } - return [true, css_class, tooltip]; - } - }); - - -*/ - - - } - - // Avoid wrapping owner icons if user has group + search - var button = jQuery('#calendar-sidebox_owner ~ span.et2_clickable'); - if(button.length == 1) - { - button.parent().css('margin-right',button.outerWidth(true)+2); - button.parent().parent().css('white-space','nowrap'); - } } /** diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index a6d5c8b18d..951d84776d 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -80,106 +80,12 @@ box-shadow: none; } -#calendar-sidebox_header_go, -#calendar-sidebox_header_today { - width: 12px; - height: 12px; - top: 5px; - z-index: 1; - overflow: hidden; - font-size: 10px; - line-height: 50%; - color: white; - background-color: #217bc0; - background-image: none; - background-position-y: -1px; - border:none; - border-radius: 100%; -} -#calendar-sidebox_header_go { - margin-right: 10px -} -#calendar-sidebox_header_today { - order: 2; - } -#calendar-sidebox_header_go:hover, #calendar-sidebox_header_today:hover { - background-color: var(--row-hover); - box-shadow: none; -} #calendar-sidebox_weekend { /* Special css styling goes here */ } -#calendar-sidebox_date .calendar_calHoliday { - background-color: rgba(103, 159, 210, 0.5); -} -#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: 100%; - width: 100%; - 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: 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(../default/images/previous.svg); - margin-right: 0px; -} -#calendar-sidebox_date .flatpickr-next-month { - order: 3; - background-image: url(../default/images/next.svg); -} #calendar-sidebox_date div.flatpickr-calendar.inline { width: 100% !important; } diff --git a/calendar/templates/default/sidebox.xet b/calendar/templates/default/sidebox.xet index 259088ad9c..cc66559b50 100644 --- a/calendar/templates/default/sidebox.xet +++ b/calendar/templates/default/sidebox.xet @@ -14,20 +14,7 @@ Egroupware