From dec810666538a94c1af69c4a54cd8ed5cc067579 Mon Sep 17 00:00:00 2001
From: Bart Visscher <bartv@thisnet.nl>
Date: Mon, 3 Oct 2011 20:32:31 +0200
Subject: [PATCH] Add user friendly calendar color chooser

---
 apps/calendar/ajax/editcalendar.php           | 11 +++++++
 apps/calendar/ajax/getcal.php                 |  2 +-
 apps/calendar/css/style.css                   |  3 ++
 apps/calendar/js/calendar.js                  | 31 ++++++++++++++++++-
 apps/calendar/templates/part.editcalendar.php |  9 +++++-
 5 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/apps/calendar/ajax/editcalendar.php b/apps/calendar/ajax/editcalendar.php
index 7ff869f888..5f61cf5013 100644
--- a/apps/calendar/ajax/editcalendar.php
+++ b/apps/calendar/ajax/editcalendar.php
@@ -11,10 +11,21 @@ $l10n = new OC_L10N('calendar');
 if(!OC_USER::isLoggedIn()) {
 	die("<script type=\"text/javascript\">document.location = oc_webroot;</script>");
 }
+$calendarcolor_options = array(
+	'ff0000', // "Red"
+	'00ff00', // "Green"
+	'ffff00', // "Yellow"
+	'808000', // "Olive"
+	'ffa500', // "Orange"
+	'ff7f50', // "Coral"
+	'ee82ee', // "Violet"
+	'ecc255', // dark yellow
+);
 OC_JSON::checkAppEnabled('calendar');
 $calendar = OC_Calendar_Calendar::findCalendar($_GET['calendarid']);
 $tmpl = new OC_Template("calendar", "part.editcalendar");
 $tmpl->assign('new', false);
+$tmpl->assign('calendarcolor_options', $calendarcolor_options);
 $tmpl->assign('calendar', $calendar);
 $tmpl->printPage();
 ?>
diff --git a/apps/calendar/ajax/getcal.php b/apps/calendar/ajax/getcal.php
index c59cb873fd..a65c6cf260 100644
--- a/apps/calendar/ajax/getcal.php
+++ b/apps/calendar/ajax/getcal.php
@@ -20,7 +20,7 @@ foreach($calendars as $calendar) {
 	$events = array_merge($events, $tmp);
 	$return['calendars'][$calendar['id']] = array(
 		'displayname' => $calendar['displayname'],
-		'color'       => $calendar['calendarcolor']
+		'color'       => '#'.$calendar['calendarcolor']
 	);
 }
 
diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css
index e28bedb667..5e19b88f55 100644
--- a/apps/calendar/css/style.css
+++ b/apps/calendar/css/style.css
@@ -58,3 +58,6 @@ color:#A9A9A9;
 }
 select#category{width:140px;}
 button.category{margin:0 3px;}
+
+.calendar-colorpicker-color{display:inline-block;width:20px;height:20px;margin-right:2px;cursor:pointer;}
+.calendar-colorpicker-color.active{background-image:url("../../../core/img/jquery-ui/ui-icons_222222_256x240.png");background-position:-62px -143px;}
diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js
index 79689fbf85..131325007a 100644
--- a/apps/calendar/js/calendar.js
+++ b/apps/calendar/js/calendar.js
@@ -483,9 +483,38 @@ Calendar={
 			},
 			edit:function(object, calendarid){
 				var tr = $(document.createElement('tr'))
-					.load(OC.filePath('calendar', 'ajax', 'editcalendar.php') + "?calendarid="+calendarid);
+					.load(OC.filePath('calendar', 'ajax', 'editcalendar.php') + "?calendarid="+calendarid,
+						function(){Calendar.UI.Calendar.colorPicker(this)});
 				$(object).closest('tr').after(tr).hide();
 			},
+			colorPicker:function(container){
+				// based on jquery-colorpicker at jquery.webspirited.com
+				var obj = $('.colorpicker', container);
+				var picker = $('<div class="calendar-colorpicker"></div>');
+				var size = 20;
+
+				//build an array of colors
+				var colors = {};
+				$(obj).children('option').each(function(i, elm) {
+					colors[i] = {};
+					colors[i].color = $(elm).val();
+					colors[i].label = $(elm).text();
+				});
+				for (var i in colors) {
+					picker.append('<span class="calendar-colorpicker-color ' + (colors[i].color == $(obj).children(":selected").val() ? ' active' : '') + '" rel="' + colors[i].label + '" style="background-color: #' + colors[i].color + '; width: ' + size + 'px; height: ' + size + 'px;"></span>');
+				}
+				picker.delegate(".calendar-colorpicker-color", "click", function() {
+					$(obj).val($(this).attr('rel'));
+					$(obj).change();
+					picker.children('.calendar-colorpicker-color.active').removeClass('active');
+					$(this).addClass('active');
+				});
+				$(obj).after(picker);
+				$(obj).css({
+					position: 'absolute',
+					left: -10000
+				});
+			},
 			submit:function(button, calendarid){
 				var displayname = $("#displayname_"+calendarid).val();
 				var active = $("#edit_active_"+calendarid+":checked").length;
diff --git a/apps/calendar/templates/part.editcalendar.php b/apps/calendar/templates/part.editcalendar.php
index a7ebe30f8e..c2c22913be 100644
--- a/apps/calendar/templates/part.editcalendar.php
+++ b/apps/calendar/templates/part.editcalendar.php
@@ -34,7 +34,14 @@
 <tr>
 	<th><?php echo $l->t('Calendar color') ?></th>
 	<td>
-		<input id="calendarcolor_<?php echo $_['calendar']['id'] ?>" type="text" value="<?php echo $_['calendar']['calendarcolor'] ?>">
+		<select id="calendarcolor_<?php echo $_['calendar']['id'] ?>" class="colorpicker">
+			<?php
+			if (!isset($_['calendar']['calendarcolor'])) {$_['calendar']['calendarcolor'] = false;}
+			foreach($_['calendarcolor_options'] as $color){
+				echo '<option value="' . $color . '"' . ($_['calendar']['calendarcolor'] == $color ? ' selected="selected"' : '') . '>' . $color . '</option>';
+			}
+			?>
+		</select>
 	</td>
 </tr>
 </table>