Add user friendly calendar color chooser
This commit is contained in:
parent
6159b79715
commit
dec8106665
|
@ -11,10 +11,21 @@ $l10n = new OC_L10N('calendar');
|
||||||
if(!OC_USER::isLoggedIn()) {
|
if(!OC_USER::isLoggedIn()) {
|
||||||
die("<script type=\"text/javascript\">document.location = oc_webroot;</script>");
|
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');
|
OC_JSON::checkAppEnabled('calendar');
|
||||||
$calendar = OC_Calendar_Calendar::findCalendar($_GET['calendarid']);
|
$calendar = OC_Calendar_Calendar::findCalendar($_GET['calendarid']);
|
||||||
$tmpl = new OC_Template("calendar", "part.editcalendar");
|
$tmpl = new OC_Template("calendar", "part.editcalendar");
|
||||||
$tmpl->assign('new', false);
|
$tmpl->assign('new', false);
|
||||||
|
$tmpl->assign('calendarcolor_options', $calendarcolor_options);
|
||||||
$tmpl->assign('calendar', $calendar);
|
$tmpl->assign('calendar', $calendar);
|
||||||
$tmpl->printPage();
|
$tmpl->printPage();
|
||||||
?>
|
?>
|
||||||
|
|
|
@ -20,7 +20,7 @@ foreach($calendars as $calendar) {
|
||||||
$events = array_merge($events, $tmp);
|
$events = array_merge($events, $tmp);
|
||||||
$return['calendars'][$calendar['id']] = array(
|
$return['calendars'][$calendar['id']] = array(
|
||||||
'displayname' => $calendar['displayname'],
|
'displayname' => $calendar['displayname'],
|
||||||
'color' => $calendar['calendarcolor']
|
'color' => '#'.$calendar['calendarcolor']
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -58,3 +58,6 @@ color:#A9A9A9;
|
||||||
}
|
}
|
||||||
select#category{width:140px;}
|
select#category{width:140px;}
|
||||||
button.category{margin:0 3px;}
|
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;}
|
||||||
|
|
|
@ -483,9 +483,38 @@ Calendar={
|
||||||
},
|
},
|
||||||
edit:function(object, calendarid){
|
edit:function(object, calendarid){
|
||||||
var tr = $(document.createElement('tr'))
|
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();
|
$(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){
|
submit:function(button, calendarid){
|
||||||
var displayname = $("#displayname_"+calendarid).val();
|
var displayname = $("#displayname_"+calendarid).val();
|
||||||
var active = $("#edit_active_"+calendarid+":checked").length;
|
var active = $("#edit_active_"+calendarid+":checked").length;
|
||||||
|
|
|
@ -34,7 +34,14 @@
|
||||||
<tr>
|
<tr>
|
||||||
<th><?php echo $l->t('Calendar color') ?></th>
|
<th><?php echo $l->t('Calendar color') ?></th>
|
||||||
<td>
|
<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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
Loading…
Reference in New Issue