Calendar: remove most sidebox date customisations

Now using regular calendar header.  "Go" button and custom header styles removed. Changing the date in sidebox calendar immediately updates state.
This commit is contained in:
nathan 2022-09-12 15:35:24 -06:00
parent 4c00b812ee
commit 662ea62790
9 changed files with 70 additions and 567 deletions

View File

@ -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

View File

@ -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'),

View File

@ -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);
}
}

View File

@ -4092,81 +4092,7 @@ export class CalendarApp extends EgwApp
*/
_setup_sidebox_filters()
{
// Further date customizations
var date_widget = <et2_date>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 = <et2_button><unknown>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');
}
}
/**

View File

@ -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;
}

View File

@ -14,20 +14,7 @@ Egroupware
<overlay>
<template id="calendar.sidebox">
<vbox parent_node="calendar-et2_target">
<calendar-date id="date" onchange="var view_change = app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view);
var update = {date:widget.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);">
<et2-button id="header_today" label="•" statustext="Today" icon="nope" onclick="
var tempDate = new Date();
var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
var change = {date: today.toJSON()};
app.calendar.update_state(change);
widget.getRoot().getWidgetById('date').set_value(today);
return false;"/>
<et2-button id="header_go" label="&#8629;" icon="nope"
onclick="var change = {date: widget.getAttribute('data-date')}; if ( app.calendar.state.view == 'listview') {change.filter='month';} else if (app.calendar.state.view == 'planner') {} else {change.view = 'month';}app.calendar.update_state(change);"/>
</calendar-date>
<calendar-date id="date"></calendar-date>
<textbox type="hidden" id="first"/>
<textbox type="hidden" id="last"/>
<hrule/>

View File

@ -100,33 +100,6 @@
border: none;
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 */
}
@ -179,23 +152,6 @@
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;
}
@ -242,9 +198,6 @@ div.calendar_conflicts {
min-height: 26px;
justify-content: flex-end;
}
#calendar-toolbar #calendar-toolbar_keywords {
margin-right: 4px;
}
#calendar-toolbar .et2_searchbox input {
height: 14px;
}
@ -270,13 +223,16 @@ div.calendar_conflicts {
left: 0px;
right: 0px;
}
form#calendar-toolbar > div {
column-gap: 1ex;
}
#calendar-todo {
position: absolute;
width: 30%;
margin-top: 0px;
z-index: 10;
bottom: -10px;
height: calc(100% - 75px);
height: calc(100% - 92px);
}
#calendar-view {
width: 100%;
@ -1467,15 +1423,6 @@ Hide subsequent headers in week view with non-consolidated owners
.calendar_freetime_timeframe {
position: relative;
}
.calendar_freetime_dow {
position: absolute;
width: 30ex;
height: 22em;
}
.calendar_freetime_dow ul.ui-multiselect-checkboxes {
overflow-y: visible;
height: 20em;
}
img.calendar_print_button,
img.calendar_print_appicon {
height: 24px;
@ -1524,11 +1471,15 @@ img.calendar_print_appicon {
}
/*weekend slideSwitch in toolbar*/
#calendar-toolbar_app_header {
color: #616161;
color: #000;
font-size: 14px;
height: 16px;
position: absolute;
left: 44%;
height: 1.7em;
padding: 4px 3px 3px;
background: #b4cee773;
border-radius: 3px;
min-width: 19em;
border: 1px solid #d4d4d8;
text-align: center;
}
/* Integration slide switches in toolbar */
#calendar-toolbar_toolbar et2-switch {
@ -1538,7 +1489,7 @@ img.calendar_print_appicon {
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] {
background-size: 16px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7);
@ -2749,79 +2700,6 @@ div#calendar-container div.calendar table tbody tr.daysrow:hover {
div#calendar-container div.calendar table tbody tr.rowhilite td {
background-color: #ffc200;
}
/* Sidebox calendar */
#calendar-sidebox_date .ui-widget-header {
background-color: transparent;
}
#calendar-sidebox_date .ui-widget-content,
#calendar-sidebox_date .ui-state-default,
#calendar-sidebox_date #calendar-sidebox_date .ui-state-hover {
border: none;
padding: 2px;
text-align: center;
}
#calendar-sidebox_date .ui-datepicker td {
padding: 0px;
}
#calendar-sidebox_date .ui-datepicker-header .ui-state-hover {
background-color: transparent;
border: none;
top: 2px;
box-shadow: none;
}
#calendar-sidebox_date .ui-datepicker-today {
background-color: #FFDD73;
}
#calendar-sidebox_date .ui-datepicker-calendar .ui-state-hover {
background-color: rgba(153, 204, 255, 0.4);
}
#calendar-sidebox_date .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
right: 2px;
}
#calendar-sidebox_date .ui-datepicker-year {
padding-right: 0px !important;
min-width: 65px;
}
#calendar-sidebox_date .ui-datepicker-month {
min-width: 60px;
padding-right: 0px !important;
}
#calendar-sidebox_date .ui-datepicker-header a span {
width: 20px;
height: 20px;
}
#calendar-sidebox_date .ui-datepicker-header a.ui-state-hover {
top: 3px;
}
#calendar-sidebox_date .ui-datepicker-header a.ui-state-hover span {
transition: none;
}
#calendar-sidebox_header_go {
width: 20px;
height: 20px;
background-image: url('../../../api/templates/default/images/check.svg');
text-indent: 140%;
border: none;
border-radius: 0px;
background-size: contain;
background-color: transparent;
}
#calendar-sidebox_header_go:hover {
background-color: transparent;
}
#calendar-sidebox_header_today {
width: 2em;
height: 2em;
background-image: url('../../../api/templates/default/images/bullet.svg');
text-indent: 140%;
border: none;
border-radius: 0px;
background-size: contain;
background-color: transparent;
}
#calendar-sidebox_header_today:hover {
background-color: transparent;
}
#calendar_cat_id,
#calendar_filter,
#uical_select_owner,
@ -3006,4 +2884,3 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
color: #707070;
}
}
/*# sourceMappingURL=app.css.map */

View File

@ -88,33 +88,6 @@
border: none;
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 */
}
@ -167,23 +140,6 @@
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;
}
@ -2732,79 +2688,6 @@ div#calendar-container div.calendar table tbody tr.daysrow:hover {
div#calendar-container div.calendar table tbody tr.rowhilite td {
background-color: #ffc200;
}
/* Sidebox calendar */
#calendar-sidebox_date .ui-widget-header {
background-color: transparent;
}
#calendar-sidebox_date .ui-widget-content,
#calendar-sidebox_date .ui-state-default,
#calendar-sidebox_date #calendar-sidebox_date .ui-state-hover {
border: none;
padding: 2px;
text-align: center;
}
#calendar-sidebox_date .ui-datepicker td {
padding: 0px;
}
#calendar-sidebox_date .ui-datepicker-header .ui-state-hover {
background-color: transparent;
border: none;
top: 2px;
box-shadow: none;
}
#calendar-sidebox_date .ui-datepicker-today {
background-color: #FFDD73;
}
#calendar-sidebox_date .ui-datepicker-calendar .ui-state-hover {
background-color: rgba(153, 204, 255, 0.4);
}
#calendar-sidebox_date .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
right: 2px;
}
#calendar-sidebox_date .ui-datepicker-year {
padding-right: 0px !important;
min-width: 65px;
}
#calendar-sidebox_date .ui-datepicker-month {
min-width: 60px;
padding-right: 0px !important;
}
#calendar-sidebox_date .ui-datepicker-header a span {
width: 20px;
height: 20px;
}
#calendar-sidebox_date .ui-datepicker-header a.ui-state-hover {
top: 3px;
}
#calendar-sidebox_date .ui-datepicker-header a.ui-state-hover span {
transition: none;
}
#calendar-sidebox_header_go {
width: 20px;
height: 20px;
background-image: url('../../../api/templates/default/images/check.svg');
text-indent: 140%;
border: none;
border-radius: 0px;
background-size: contain;
background-color: transparent;
}
#calendar-sidebox_header_go:hover {
background-color: transparent;
}
#calendar-sidebox_header_today {
width: 2em;
height: 2em;
background-image: url('../../../api/templates/default/images/bullet.svg');
text-indent: 140%;
border: none;
border-radius: 0px;
background-size: contain;
background-color: transparent;
}
#calendar-sidebox_header_today:hover {
background-color: transparent;
}
#calendar_cat_id,
#calendar_filter,
#uical_select_owner,

View File

@ -1110,82 +1110,6 @@ div#calendar-container {
}
/* Sidebox calendar */
#calendar-sidebox_date {
.ui-widget-header {
background-color: transparent;
}
.ui-widget-content, .ui-state-default, #calendar-sidebox_date .ui-state-hover {
border: none;
padding: 2px;
text-align: center;
}
.ui-datepicker td {
padding: 0px
}
.ui-datepicker-header .ui-state-hover {
background-color: transparent;
border: none;
top: 2px;
box-shadow: none;
}
.ui-datepicker-today {
background-color: @egw_color_1_e;
}
.ui-datepicker-calendar .ui-state-hover {
background-color: @color_hover_row;
}
.ui-datepicker-header .ui-datepicker-next.ui-state-hover {
right: 2px;
}
.ui-datepicker-year {
padding-right: 0px !important;
min-width: 65px;
}
.ui-datepicker-month {
min-width: 60px;
padding-right: 0px !important;
}
.ui-datepicker-header a span {
width: 20px;
height: 20px;
}
.ui-datepicker-header a.ui-state-hover {
top: 3px;
span {
transition: none;
}
}
}
#calendar-sidebox_header_go {
width: 20px;
height: 20px;
background-image: url('../../../api/templates/default/images/check.svg');
text-indent: 140%;
border: none;
border-radius: 0px;
background-size: contain;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
#calendar-sidebox_header_today {
width: 2em;
height: 2em;
background-image: url('../../../api/templates/default/images/bullet.svg');
text-indent: 140%;
border: none;
border-radius: 0px;
background-size: contain;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
// Select Fields in Sidemenu
#calendar_cat_id,
#calendar_filter,