wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add user friendly calendar color chooser

Browse source
This commit is contained in:
Bart Visscher 2011-10-03 20:32:31 +02:00
parent 6159b79715
commit dec8106665
5 changed files with 53 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/calendar/ajax/editcalendar.php
View file

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

2
apps/calendar/ajax/getcal.php
View file

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

3
apps/calendar/css/style.css
View file

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

31
apps/calendar/js/calendar.js
View file

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

9
apps/calendar/templates/part.editcalendar.php
View file

@ -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>