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