Add user friendly calendar color chooser

diff --git a/apps/calendar/ajax/editcalendar.php b/apps/calendar/ajax/editcalendar.php
index 7ff869f8885dcecfb9e579c0c9be62c22fd13c23..5f61cf501358bbbac4b69e4aa99aea735acbbc55 100644 (file)
--- 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 c59cb873fdcc357645d2af0f7a275092d6e6b605..a65c6cf2602192808f0b0109e1cfb2400178a047 100644 (file)
--- 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 e28bedb66774befd3e5978dde45e83dc70f7048d..5e19b88f55ad66e10bbcc8fcaf6dbc6acbea0d11 100644 (file)
--- 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 79689fbf8591b8cf4287d0ccced0f1c09e827933..131325007a02aab21a2d730fa5df3789961ccb14 100644 (file)
--- 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 a7ebe30f8e2479ff9cb536ffb46be20f231c1100..c2c22913bee3ddf1e2688e4b3bf917734d216efb 100644 (file)
--- 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>