diff options
author | Bart Visscher <bartv@thisnet.nl> | 2011-10-21 21:47:42 +0200 |
---|---|---|
committer | Bart Visscher <bartv@thisnet.nl> | 2011-10-21 22:08:55 +0200 |
commit | eb68201bc5e8b9c6a23af8aa1f7f8c8990c5b3dc (patch) | |
tree | 7a4782bebabd0fd1f7b94c6e7ef1abb076706c37 /apps/calendar | |
parent | a1eda425ed8db211a8432ed3a375e641246e067c (diff) | |
download | nextcloud-server-eb68201bc5e8b9c6a23af8aa1f7f8c8990c5b3dc.tar.gz nextcloud-server-eb68201bc5e8b9c6a23af8aa1f7f8c8990c5b3dc.zip |
Better event popup
Diffstat (limited to 'apps/calendar')
-rw-r--r-- | apps/calendar/css/style.css | 30 | ||||
-rw-r--r-- | apps/calendar/js/calendar.js | 45 |
2 files changed, 50 insertions, 25 deletions
diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css index e6d212ef532..0204f2fc12f 100644 --- a/apps/calendar/css/style.css +++ b/apps/calendar/css/style.css @@ -24,8 +24,6 @@ #listview #events {width:25em;padding: 4px;} #listview #events .day {width:auto;padding-left:10px;border-bottom: 2px solid #EEEEEE;text-align:left;} -#sysbox{display: none;} - .actions {height: 33px; min-width: 800px;} .controls {min-width: 800px;} .center {text-align: center;} @@ -99,3 +97,31 @@ button.category{margin:0 3px;} { cursor: pointer; } +.tipsy-event .tipsy-inner{ +background-color:#0098E4; +border:2px solid #1d2d44; +max-width:400px; +padding:0; +} +.tipsy-event .tipsy-arrow-s{ +border-top-color:#1d2d44; +} +.tipsy-event .tipsy-arrow-n{ +border-bottom-color:#1d2d44; +} +.tipsy-event .summary, +.tipsy-event .timespan, +.tipsy-event .description{ +padding:0 8px; +} +.tipsy-event .summary{ +background-color:#1d2d44; +font-size:1.2em; +font-weight:bold; +text-align:left; +padding:0 8px 2px; +} +.tipsy-event .description{ +line-height:1.2; +margin-bottom:4px; +} diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js index bf9e2628ff9..a29d6672858 100644 --- a/apps/calendar/js/calendar.js +++ b/apps/calendar/js/calendar.js @@ -148,32 +148,20 @@ Calendar={ $("#advanced_options").css("display", "block"); $("#advanced_options_button").css("display", "none"); }, - createEventPopup:function(event, e, view){ - var popup = $(this).data('popup'); - if (!popup){ - popup = $(document.createElement('div')); - $(this).data('popup', popup).append(popup); - popup.addClass('popup') - popup.addClass('event_popup') - .html(Calendar.UI.getEventPopupText(event)); - } - popup.css('left', -(popup.width() - $(this).width())/2) - .show(); - }, - hideEventPopup:function(){ - $(this).data('popup').hide(); - }, getEventPopupText:function(event){ if (event.allDay){ - var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "MMMM d[ yyyy]{ '—'[ MMMM][ d] yyyy}")); + var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "ddd d MMMM[ yyyy]{ -[ddd d] MMMM yyyy}")); }else{ - var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "HH:mm[ MMMM d yyyy]{ '—' HH:mm MMMM d yyyy}")); + var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "ddd d MMMM[ yyyy] HH:mm{ -[ ddd d MMMM yyyy] HH:mm}")); // Tue 18 October 2011 08:00 - 16:00 } - return '<span class="timespan">' + timespan + '</span>' - + ' ' - + '<span class="summary">' + event.title + '</span>' - + '<span class="description">' + event.description + '</span>'; + var html = + '<div class="summary">' + event.title + '</div>' + + '<div class="timespan">' + timespan + '</div>'; + if (event.description){ + html += '<div class="description">' + event.description + '</div>'; + } + return html; }, lockTime:function(){ if($('#allday_checkbox').is(':checked')) { @@ -522,8 +510,19 @@ $(document).ready(function(){ eventClick: Calendar.UI.editEvent, eventDrop: Calendar.UI.moveEvent, eventResize: Calendar.UI.resizeEvent, - eventMouseover: Calendar.UI.createEventPopup, - eventMouseout: Calendar.UI.hideEventPopup, + eventRender: function(event, element) { + element.tipsy({ + className: 'tipsy-event', + opacity: 0.9, + gravity:$.fn.tipsy.autoBounds(150, 's'), + fade:true, + delayIn: 400, + html:true, + title:function() { + return Calendar.UI.getEventPopupText(event); + } + }); + }, eventSources: eventSources }); $('#oneweekview_radio').click(function(){ |