extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 17:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Calendar: Sidemenu calendar CSS adjustments

Browse Source 
- smaller font size
- better sizing for header
- re-align header contents to match jQueryUI version
This commit is contained in:
nathan 2022-04-28 15:45:59 -06:00
parent 63b2755dbf
commit f5619e52c8
6 changed files with 196 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;