From 6a8e9471b6d1aace5f6572eda3d61418fac24abc Mon Sep 17 00:00:00 2001 From: Ralf Becker 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 @@ -{indent}
+{indent}
{indent} {header} {indent}
{icons}
{indent}
@@ -15,7 +15,7 @@
- {timespan} + {timespan}
{icons}