From 6a8e9471b6d1aace5f6572eda3d61418fac24abc Mon Sep 17 00:00:00 2001
From: Ralf Becker <ralfbecker@outdoor-training.de>
Date: Sat, 13 Sep 2008 12:43:14 +0000
Subject: [PATCH] make color of writing in event headers depending on the
 brightness of the choosen category color, fix for bug #1717

---
 calendar/inc/class.calendar_uiviews.inc.php | 24 ++++++++++++++++++++-
 calendar/templates/default/app.css          | 18 ++++++++--------
 calendar/templates/default/event_widget.tpl |  4 ++--
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/calendar/inc/class.calendar_uiviews.inc.php b/calendar/inc/class.calendar_uiviews.inc.php
index 843a93d897..74f86cc84f 100644
--- a/calendar/inc/class.calendar_uiviews.inc.php
+++ b/calendar/inc/class.calendar_uiviews.inc.php
@@ -1137,6 +1137,7 @@ class calendar_uiviews extends calendar_ui
 		//$body_height = max(0,$height - $header_height - $corner_radius);
 		$border=1;
 		$headerbgcolor = $color ? $color : '#808080';
+		$headercolor = self::brightness($headerbgcolor) > 128 ? 'black' : 'white';
 		// the body-colors (gradient) are calculated from the headercolor, which depends on the cat of an event
 		$bodybgcolor1 = $this->brighter($headerbgcolor,$headerbgcolor == '#808080' ? 100 : 170);
 		$bodybgcolor2 = $this->brighter($headerbgcolor,220);
@@ -1195,6 +1196,7 @@ class calendar_uiviews extends calendar_ui
 			'border' => $border,
 			'bordercolor' => $headerbgcolor,
 			'headerbgcolor' => $headerbgcolor,
+			'headercolor' => $headercolor,
 			'bodybackground' => ($background = 'url('.$GLOBALS['egw_info']['server']['webserver_url'].
 				'/calendar/inc/gradient.php?color1='.urlencode($bodybgcolor1).'&color2='.urlencode($bodybgcolor2).
 				'&width='.$width.') repeat-y '.$bodybgcolor2),
@@ -1336,7 +1338,7 @@ class calendar_uiviews extends calendar_ui
 	* @param $decr int value to add to each component, default 64
 	* @return string the brighter color
 	*/
-	function brighter($rgb,$decr=64)
+	static function brighter($rgb,$decr=64)
 	{
 		if (!preg_match('/^#?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/',$rgb,$components))
 		{
@@ -1353,6 +1355,26 @@ class calendar_uiviews extends calendar_ui
 		return $brighter;
 	}
 
+	/**
+	 * Calculates the brightness of a hexadecimal rgb color (median of the r, g and b components)
+	 *
+	 * @param string $rgb eg. #808080
+	 * @return int between 0 and 255
+	 */
+	static function brightness($rgb)
+	{
+		if ($rgb[0] != '#' || strlen($rgb) != 7)
+		{
+			return 128;	// no rgb color, return some default
+		}
+		$dec = hexdec(substr($rgb,1));
+		for($i = 0; $i < 24; $i += 8)
+		{
+			$sum += ($dec >> $i) & 255;
+		}
+		return (int)round($sum / 3.0, 0);
+	}
+
 
 	/**
 	 * Creates a planner view: grid with columns for the time and rows for categories or users
diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index 826114bb4d..05bbe89677 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -97,7 +97,7 @@ e.g. the div with class calTimeGrid is generated by the timeGridWidget method of
 /*	bottom: 0px; does NOT work in IE, IE needs height: 100%! */
 	height: 100%;
 	left: 45px;
-	right: 0px; 
+	right: 0px;
 }
 /* 12h timeformat with am/pm
  */
@@ -169,7 +169,7 @@ e.g. the div with class calTimeGrid is generated by the timeGridWidget method of
 .calViewUserNameFirst:after {
 	content: ", ";
 }
-	
+
 /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
  */
 .calGridHeader{
@@ -237,13 +237,13 @@ e.g. the div with class calTimeGrid is generated by the timeGridWidget method of
 	position: relative;	/* as the calEventIcons use postion: absolute! */
 	font-weight: bold;
 	font-size: 9pt;
-	color: white;
 	text-align: left;
 	left: 0px;
 	right: 0px;
 	padding-left: 2px;
 /* set via inline style on runtime
  *  background-color: depending on category
+ *	color: white || black depending on cat;
  */
 }
 .calEventHeaderSmall{
@@ -255,7 +255,7 @@ e.g. the div with class calTimeGrid is generated by the timeGridWidget method of
 	right: 0px;
 	top: 0px;
 }
-.calEventHeaderSmall .calEventIcons img{ 
+.calEventHeaderSmall .calEventIcons img{
 	height: 13px;
 }
 
@@ -290,12 +290,12 @@ e.g. the div with class calTimeGrid is generated by the timeGridWidget method of
 /* calDayTods is the day-view's todo column, containing the calDayTodoHeader and the calDayTodoTable
  */
 .calDayTodos .calDayTodosHeader {
-	margin: 0px; 
+	margin: 0px;
 	padding: 2px;
 	font-weight: bold;
 }
 .calDayTodos .calDayTodosTable {
-	overflow: auto; 
+	overflow: auto;
 	max-height: 400px;
 }
 .calDayTodos {
@@ -310,7 +310,7 @@ e.g. the div with class calTimeGrid is generated by the timeGridWidget method of
 /******************************************************
  * CSS settings for the planner views (plannerWidget) *
  ******************************************************/
- 
+
 /* plannerWidget represents the whole planner, consiting of the plannerHeader and multiple plannerRowWidgets
  */
 .plannerWidget {
@@ -362,8 +362,8 @@ e.g. the div with class calTimeGrid is generated by the timeGridWidget method of
 	height: 100%;
 	border: 1px solid white;
 /* set via inline style on runtime:
- *  left: 
- *  width: 
+ *  left:
+ *  width:
  */
 }
 .plannerHourScale {
diff --git a/calendar/templates/default/event_widget.tpl b/calendar/templates/default/event_widget.tpl
index 0a3633d6e3..44e1ed19c7 100644
--- a/calendar/templates/default/event_widget.tpl
+++ b/calendar/templates/default/event_widget.tpl
@@ -1,5 +1,5 @@
 <!-- BEGIN event_widget -->
-{indent}<div class="calEventHeader{Small}" style="background-color: {bordercolor};">
+{indent}<div class="calEventHeader{Small}" style="background-color: {bordercolor}; color: {headercolor};">
 {indent}	{header}
 {indent}	<div class="calEventIcons">{icons}</div>
 {indent}</div>
@@ -15,7 +15,7 @@
 <!-- BEGIN event_tooltip -->
 <div class="calEventTooltip" style="border-color: {bordercolor}; background: {bodybackground};">
 	<div class="calEventHeaderSmall" style="background-color: {bordercolor};">
-		<font color="white"><b>{timespan}</b></font>
+		<font color="{headercolor}">{timespan}</font>
 		<div  class="calEventIcons">{icons}</div>
 	</div>
 	<div class="calEventBodySmall">