Add user friendly calendar color chooser

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

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']
 	);
 }
 

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

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;

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>