Calendar: Sidemenu calendar CSS adjustments

- smaller font size
- better sizing for header
- re-align header contents to match jQueryUI version

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

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 > * {
+#calendar-sidebox_date .flatpickr-months {
-    height: 20px;
+    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;

calendar/templates/default/sidebox.xet

@@ -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"
+                <et2-button id="header_go" label="&#8629;" icon="nope"
-                            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);"/>
+                            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"/>

calendar/templates/mobile/app.css

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

calendar/templates/pixelegg/app.css

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

calendar/templates/pixelegg/app.less

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