holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
ralf 2022-04-29 12:44:59 +02:00
commit 21d362b5fa
9 changed files with 240 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
api/js/etemplate/Et2Date/Et2Date.ts
View File

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

3
api/js/etemplate/Et2Dialog/Et2Dialog.ts
View File

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

21
api/js/etemplate/et2_widget_dialog.ts
View File

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

27
calendar/js/SidemenuDate.ts
View File

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

79
calendar/templates/default/app.css
View File

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

8
calendar/templates/default/sidebox.xet
View File

@ -14,18 +14,18 @@ Egroupware
<overlay>
<template id="calendar.sidebox">
<vbox parent_node="calendar-et2_target">
<calendar-date id="date" class="et2_fullWidth" onchange="var view_change = app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view);
<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);">
<buttononly id="header_today" label="•" icon="nope" onclick="
<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;"/>
<buttononly id="header_go" label="&#8629;" icon="nope" class="ui-corner-all"
onclick="var change = {date: widget.btn.attr('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);"/>
<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>
<textbox type="hidden" id="first"/>

75
calendar/templates/mobile/app.css
View File

@ -107,17 +107,11 @@
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;
@ -125,26 +119,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);
}
@ -152,34 +144,78 @@
padding: 2px;
background-color: white;
}
#calendar-sidebox_date .flatpickr-months {
gap: 0;
background-color: initial;
}
#calendar-sidebox_date .flatpickr-months > * {
height: 20px;
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;
}
/* Conflict display */
div.calendar_conflicts {
@ -2755,7 +2791,6 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
#calendar-sidebox_header_today {
width: 2em;
height: 2em;
margin-left: 6px;
background-image: url('../../../pixelegg/images/bullet.svg');
text-indent: 140%;
border: none;

75
calendar/templates/pixelegg/app.css
View File

@ -95,17 +95,11 @@
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;
@ -113,26 +107,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);
}
@ -140,34 +132,78 @@
padding: 2px;
background-color: white;
}
#calendar-sidebox_date .flatpickr-months {
gap: 0;
background-color: initial;
}
#calendar-sidebox_date .flatpickr-months > * {
height: 20px;
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;
}
/* Conflict display */
div.calendar_conflicts {
@ -2743,7 +2779,6 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
#calendar-sidebox_header_today {
width: 2em;
height: 2em;
margin-left: 6px;
background-image: url('../../../pixelegg/images/bullet.svg');
text-indent: 140%;
border: none;

3
calendar/templates/pixelegg/app.less
View File

@ -14,7 +14,6 @@
@import (reference) "../../../pixelegg/less/definitions.less";
@import (less) "../default/app.css";
/*generell*/
// makes svg visible
@ -1176,8 +1175,6 @@ div#calendar-container {
#calendar-sidebox_header_today {
width: 2em;
height: 2em;
margin-left: 6px;
background-image: url('../../../pixelegg/images/bullet.svg');
text-indent: 140%;
border: none;