diff options
author | Bart Visscher <bartv@thisnet.nl> | 2011-10-03 20:32:31 +0200 |
---|---|---|
committer | Bart Visscher <bartv@thisnet.nl> | 2011-10-03 20:42:47 +0200 |
commit | dec810666538a94c1af69c4a54cd8ed5cc067579 (patch) | |
tree | 9ad64b9d2fe95dfcceeb44e82037f2b4c4b77119 | |
parent | 6159b79715d77b2128934409fcbd81557a67ea37 (diff) | |
download | nextcloud-server-dec810666538a94c1af69c4a54cd8ed5cc067579.tar.gz nextcloud-server-dec810666538a94c1af69c4a54cd8ed5cc067579.zip |
Add user friendly calendar color chooser
-rw-r--r-- | apps/calendar/ajax/editcalendar.php | 11 | ||||
-rw-r--r-- | apps/calendar/ajax/getcal.php | 2 | ||||
-rw-r--r-- | apps/calendar/css/style.css | 3 | ||||
-rw-r--r-- | apps/calendar/js/calendar.js | 31 | ||||
-rw-r--r-- | 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 7ff869f8885..5f61cf50135 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 c59cb873fdc..a65c6cf2602 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 e28bedb6677..5e19b88f55a 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 79689fbf859..131325007a0 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 a7ebe30f8e2..c2c22913bee 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> |