Adapt calednar styles for new skin Larry

This commit is contained in:
Thomas Bruederli 2012-01-15 15:56:45 +01:00
parent ee77665dd5
commit 47e3da633d
15 changed files with 1694 additions and 12 deletions

View file

@ -177,8 +177,9 @@ class calendar extends rcube_plugin
'command' => 'calendar-create-from-mail',
'label' => 'calendar.createfrommail',
'type' => 'link',
'classact' => 'calendarlink active',
'class' => 'calendarlink',
'classact' => 'icon calendarlink active',
'class' => 'icon calendarlink',
'innerclass' => 'icon calendar',
))),
'messagemenu');
}

View file

@ -6,7 +6,7 @@
* @author Thomas Bruederli <bruederli@kolabsys.com>
*
* Copyright (C) 2010, Lazlo Westerhof <hello@lazlo.me>
* Copyright (C) 2011, Kolab Systems AG <contact@kolabsys.com>
* Copyright (C) 2012, Kolab Systems AG <contact@kolabsys.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
@ -2146,7 +2146,7 @@ function rcube_calendar_ui(settings)
this.dialog_resize = function(id, height, width)
{
var win = $(window), w = win.width(), h = win.height();
$(id).dialog('option', { height: Math.min(h-20, height+110), width: Math.min(w-20, width+50) })
$(id).dialog('option', { height: Math.min(h-20, height+130), width: Math.min(w-20, width+50) })
.dialog('option', 'position', ['center', 'center']); // only works in a separate call (!?)
};
@ -2154,7 +2154,7 @@ function rcube_calendar_ui(settings)
this.view_resize = function()
{
var footer = fc.fullCalendar('getView').name == 'table' ? $('#agendaoptions').height() + 2 : 0;
fc.fullCalendar('option', 'height', $('#main').height() - footer);
fc.fullCalendar('option', 'height', $('#calendar').height() - footer);
};
@ -2236,7 +2236,7 @@ function rcube_calendar_ui(settings)
month: viewdate.getMonth(),
year: viewdate.getFullYear(),
ignoreTimezone: true, // will treat the given date strings as in local (browser's) timezone
height: $('#main').height(),
height: $('#calendar').height(),
eventSources: event_sources,
monthNames : settings['months'],
monthNamesShort : settings['months_short'],

View file

@ -31,6 +31,7 @@ $labels['day'] = 'Tag';
$labels['week'] = 'Woche';
$labels['month'] = 'Monat';
$labels['agenda'] = 'Agenda';
$labels['new'] = 'Neu';
$labels['new_event'] = 'Neuer Termin';
$labels['edit_event'] = 'Termin bearbeiten';
$labels['edit'] = 'Bearbeiten';
@ -38,11 +39,13 @@ $labels['save'] = 'Speichern';
$labels['remove'] = 'Entfernen';
$labels['cancel'] = 'Abbrechen';
$labels['select'] = 'Auswählen';
$labels['print'] = 'Kalender drucken';
$labels['print'] = 'Drucken';
$labels['printtitle'] = 'Kalender drucken';
$labels['title'] = 'Titel';
$labels['description'] = 'Beschrieb';
$labels['all-day'] = 'ganztägig';
$labels['export'] = 'Exportieren...';
$labels['export'] = 'Exportieren';
$labels['exporttitle'] = 'Kalender als iCalendar exportieren';
$labels['location'] = 'Ort';
$labels['date'] = 'Datum';
$labels['start'] = 'Beginn';

View file

@ -31,6 +31,7 @@ $labels['day'] = 'Tag';
$labels['week'] = 'Woche';
$labels['month'] = 'Monat';
$labels['agenda'] = 'Agenda';
$labels['new'] = 'Neu';
$labels['new_event'] = 'Neuer Termin';
$labels['edit_event'] = 'Termin bearbeiten';
$labels['edit'] = 'Bearbeiten';
@ -38,11 +39,13 @@ $labels['save'] = 'Speichern';
$labels['remove'] = 'Entfernen';
$labels['cancel'] = 'Abbrechen';
$labels['select'] = 'Auswählen';
$labels['print'] = 'Kalender drucken';
$labels['print'] = 'Drucken';
$labels['printtitle'] = 'Kalender drucken';
$labels['title'] = 'Titel';
$labels['description'] = 'Beschrieb';
$labels['all-day'] = 'ganztägig';
$labels['export'] = 'Exportieren...';
$labels['export'] = 'Exportieren';
$labels['exporttitle'] = 'Kalender als iCalendar exportieren';
$labels['location'] = 'Ort';
$labels['date'] = 'Datum';
$labels['start'] = 'Beginn';

View file

@ -31,6 +31,7 @@ $labels['day'] = 'Day';
$labels['week'] = 'Week';
$labels['month'] = 'Month';
$labels['agenda'] = 'Agenda';
$labels['new'] = 'New';
$labels['new_event'] = 'New event';
$labels['edit_event'] = 'Edit event';
$labels['edit'] = 'Edit';
@ -38,11 +39,13 @@ $labels['save'] = 'Save';
$labels['remove'] = 'Remove';
$labels['cancel'] = 'Cancel';
$labels['select'] = 'Select';
$labels['print'] = 'Print calendars';
$labels['print'] = 'Print';
$labels['printtitle'] = 'Print calendars';
$labels['title'] = 'Summary';
$labels['description'] = 'Description';
$labels['all-day'] = 'all-day';
$labels['export'] = 'Export to iCalendar';
$labels['export'] = 'Export';
$labels['exporttitle'] = 'Export to iCalendar';
$labels['location'] = 'Location';
$labels['date'] = 'Date';
$labels['start'] = 'Start';

View file

@ -0,0 +1,5 @@
# get all unknown files from default skin folder
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) ../default/$1 [qsappend,last]

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,36 @@
<roundcube:object name="doctype" value="html5" />
<html>
<head>
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
</head>
<body class="extwin">
<div id="header">
<div id="topline">
<div class="topright">
<a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a>
</div>
</div>
<div id="topnav">
<roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" border="0" alt="Logo" />
</div>
<br style="clear:both" />
</div>
<div id="mainscreen">
<div id="partheader" class="uibox">
<roundcube:object name="plugin.attachmentcontrols" class="headers-table" />
</div>
<div id="attachmentcontainer" class="uibox">
<roundcube:object name="plugin.attachmentframe" id="attachmentframe" style="width:100%; height:100%" />
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,202 @@
<roundcube:object name="doctype" value="html5" />
<html>
<head>
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="./plugins/calendar/skins/default/iehacks.css" /><![endif]-->
</head>
<body class="calendarmain">
<roundcube:include file="/includes/header.html" />
<div id="mainscreen">
<div id="sidebar">
<div id="quicksearchbar">
<roundcube:object name="plugin.searchform" id="quicksearchbox" />
<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="return false" title="searchmod" content=" " />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
<div id="datepicker" class="uibox"></div>
<div id="calendars" class="uibox listbox" style="visibility:hidden">
<h2 class="boxtitle"><roundcube:label name="calendar.calendars" /></h2>
<div class="scroller withfooter">
<roundcube:object name="plugin.calendar_list" id="calendarslist" class="listing" />
</div>
<div class="boxfooter">
<roundcube:button command="calendar-create" type="link" title="calendar.createcalendar" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="calendaroptionslink" id="calendaroptionsmenulink" type="link" title="calendar.calendaractions" class="listbutton groupactions" onclick="UI.show_popup('calendaroptionsmenu', undefined, { above:true });return false" innerClass="inner" content="&#9881;" />
</div>
</div>
</div>
<div id="sidebartoggle"></div>
<div id="calendartoolbar" class="toolbar">
<roundcube:button command="addevent" type="link" class="button addevent disabled" classAct="button addevent" classSel="button addevent pressed" label="calendar.new_event" title="calendar.new_event" />
<roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="calendar.print" title="calendar.printtitle" />
<roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="calendar.export" title="calendar.exporttitle" />
<roundcube:container name="toolbar" id="calendartoolbar" />
</div>
<div id="calendar">
<roundcube:object name="plugin.angenda_options" class="boxfooter" id="agendaoptions" />
<roundcube:object name="message" id="message" class="statusbar" />
</div>
</div>
<div id="calendaroptionsmenu" class="popupmenu">
<ul class="toolbarmenu">
<li><roundcube:button command="calendar-edit" label="calendar.edit" classAct="active" /></li>
<li><roundcube:button command="calendar-remove" label="calendar.remove" classAct="active" /></li>
<li><roundcube:button command="events-import" label="calendar.importevents" classAct="active" /></li>
<li><roundcube:button command="calendar-showurl" label="calendar.showurl" classAct="active" /></li>
<roundcube:if condition="env:calendar_driver == 'kolab'" />
<li class="separator_above"><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
<roundcube:endif />
</ul>
</div>
<div id="eventshow" class="uidialog">
<h1 id="event-title">Event Title</h1>
<div class="event-section" id="event-location">Location</div>
<div class="event-section" id="event-date">From-To</div>
<div class="event-section" id="event-description">
<h5 class="label"><roundcube:label name="calendar.description" /></h5>
<div class="event-text"></div>
</div>
<div class="event-section" id="event-repeat">
<h5 class="label"><roundcube:label name="calendar.repeat" /></h5>
<div class="event-text"></div>
</div>
<div class="event-section" id="event-alarm">
<h5 class="label"><roundcube:label name="calendar.alarms" /></h5>
<div class="event-text"></div>
</div>
<div class="event-section" id="event-attendees">
<h5 class="label"><roundcube:label name="calendar.tabattendees" /></h5>
<div class="event-text"></div>
</div>
<div class="event-line" id="event-calendar">
<label><roundcube:label name="calendar.calendar" /></label>
<span class="event-text">Default</span>
</div>
<div class="event-line" id="event-category">
<label><roundcube:label name="calendar.category" /></label>
<span class="event-text"></span>
</div>
<div class="event-line" id="event-free-busy">
<label><roundcube:label name="calendar.freebusy" /></label>
<span class="event-text"></span>
</div>
<div class="event-line" id="event-priority">
<label><roundcube:label name="calendar.priority" /></label>
<span class="event-text"></span>
</div>
<div class="event-line" id="event-sensitivity">
<label><roundcube:label name="calendar.sensitivity" /></label>
<span class="event-text"></span>
</div>
<div class="event-section" id="event-attachments">
<label><roundcube:label name="attachments" /></label>
<div class="event-text attachments-list"></div>
</div>
<roundcube:object name="plugin.event_rsvp_buttons" id="event-rsvp" style="display:none" />
</div>
<roundcube:include file="/templates/eventedit.html" />
<div id="eventfreebusy" class="uidialog">
<roundcube:object name="plugin.attendees_freebusy_table" id="attendees-freebusy-table" cellspacing="0" cellpadding="0" border="0" />
<div class="schedule-options">
&nbsp;
<div class="schedule-buttons">
<button id="shedule-freebusy-prev" title="<roundcube:label name='previouspage' />">&#9668;</button><button id="shedule-freebusy-next" title="<roundcube:label name='nextpage' />">&#9658;</button>
</div>
</div>
<div style="float:left; width:28em">
<div class="form-section">
<label for="schedule-startdate"><roundcube:label name="calendar.start" /></label>
<input type="text" name="startdate" size="10" id="schedule-startdate" disabled="true" /> &nbsp;
<input type="text" name="starttime" size="6" id="schedule-starttime" disabled="true" />
</div>
<div class="form-section">
<label for="schedule-enddate"><roundcube:label name="calendar.end" /></label>
<input type="text" name="enddate" size="10" id="schedule-enddate" disabled="true" /> &nbsp;
<input type="text" name="endtime" size="6" id="schedule-endtime" disabled="true" />
</div>
</div>
<div style="float:left">
<div class="schedule-find-buttons">
<button id="shedule-find-prev">&#9668; <roundcube:label name="calendar.prevslot" /></button>
<button id="shedule-find-next"><roundcube:label name="calendar.nextslot" /> &#9658;</button>
</div>
<div class="schedule-options">
<label><input type="checkbox" id="schedule-freebusy-workinghours" value="1" /><roundcube:label name="calendar.onlyworkinghours" /></label>
</div>
</div>
<br style="clear:both;" />
<roundcube:include file="/templates/freebusylegend.html" />
<div class="attendees-list">
<span class="attendee organizer"><roundcube:label name="calendar.roleorganizer" /></span>
<span class="attendee req-participant"><roundcube:label name="calendar.rolerequired" /></span>
<span class="attendee opt-participant"><roundcube:label name="calendar.roleoptional" /></span>
<span class="attendee chair"><roundcube:label name="calendar.roleresource" /></span>
</div>
</div>
<div id="calendarform" class="uidialog">
<roundcube:label name="loading" />
</div>
<div id="eventsimport" class="uidialog">
<roundcube:object name="plugin.events_import_form" id="events-import-form" uploadFieldSize="30" />
</div>
<div id="calendarurlbox" class="uidialog">
<p><roundcube:label name="calendar.showurldescription" /></p>
<textarea id="calfeedurl" rows="2" readonly="readonly"></textarea>
</div>
<div id="alarm-snooze-dropdown" class="popupmenu">
<roundcube:object name="plugin.snooze_select" type="ul" />
</div>
<roundcube:object name="plugin.calendar_css" />
<script type="text/javascript">
// UI startup
var UI = new rcube_mail_ui();
$(document).ready(function(e){
UI.init();
// initialize sidebar toggle
$('#sidebartoggle').click(function() {
var width = $(this).data('sidebarwidth');
var offset = $(this).data('offset');
var $sidebar = $('#sidebar'), time = 250;
if ($sidebar.is(':visible')) {
$sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#sidebar').hide(); });
$(this).animate({ left:'8px'}, time, function(){ $('#sidebartoggle').addClass('sidebarclosed') });
$('#calendar').animate({ left:'20px'}, time, function(){ $(this).fullCalendar('render'); });
}
else {
$sidebar.show().animate({ left:'10px' }, time);
$(this).animate({ left:offset+'px'}, time, function(){ $('#sidebartoggle').removeClass('sidebarclosed'); });
$('#calendar').animate({ left:(width+16)+'px'}, time, function(){ $(this).fullCalendar('render'); });
}
})
.data('offset', $('#sidebartoggle').position().left)
.data('sidebarwidth', $('#sidebar').width() + $('#sidebar').position().left);
});
</script>
</body>
</html>

View file

@ -0,0 +1,100 @@
<div id="eventedit" class="uidialog uidialog-tabbed">
<form id="eventtabs" action="#" method="post" enctype="multipart/form-data">
<ul>
<li><a href="#event-tab-1"><roundcube:label name="calendar.tabsummary" /></a></li><li id="edit-tab-recurrence"><a href="#event-tab-2"><roundcube:label name="calendar.tabrecurrence" /></a></li><li id="edit-tab-attendees"><a href="#event-tab-3"><roundcube:label name="calendar.tabattendees" /></a></li><li id="edit-tab-attachments"><a href="#event-tab-4"><roundcube:label name="calendar.tabattachments" /></a></li>
</ul>
<!-- basic info -->
<div id="event-tab-1">
<div class="event-section">
<label for="edit-title"><roundcube:label name="calendar.title" /></label>
<br />
<input type="text" class="text" name="title" id="edit-title" size="40" />
</div>
<div class="event-section">
<label for="edit-location"><roundcube:label name="calendar.location" /></label>
<br />
<input type="text" class="text" name="location" id="edit-location" size="40" />
</div>
<div class="event-section">
<label for="edit-description"><roundcube:label name="calendar.description" /></label>
<br />
<textarea name="description" id="edit-description" class="text" rows="5" cols="40"></textarea>
</div>
<div class="event-section">
<label style="float:right;padding-right:0.5em"><input type="checkbox" name="allday" id="edit-allday" value="1" /><roundcube:label name="calendar.all-day" /></label>
<label for="edit-startdate"><roundcube:label name="calendar.start" /></label>
<input type="text" name="startdate" size="10" id="edit-startdate" /> &nbsp;
<input type="text" name="starttime" size="6" id="edit-starttime" />
</div>
<div class="event-section">
<label for="edit-enddate"><roundcube:label name="calendar.end" /></label>
<input type="text" name="enddate" size="10" id="edit-enddate" /> &nbsp;
<input type="text" name="endtime" size="6" id="edit-endtime" />
</div>
<div class="event-section" id="edit-alarms">
<label for="edit-alarm"><roundcube:label name="calendar.alarms" /></label>
<roundcube:object name="plugin.alarm_select" />
</div>
<div class="event-section" id="calendar-select">
<label for="edit-calendar"><roundcube:label name="calendar.calendar" /></label>
<roundcube:object name="plugin.calendar_select" id="edit-calendar" />
</div>
<div class="event-section">
<label for="edit-categories"><roundcube:label name="calendar.category" /></label>
<roundcube:object name="plugin.category_select" id="edit-categories" />
</div>
<div class="event-section">
<label for="edit-free-busy"><roundcube:label name="calendar.freebusy" /></label>
<roundcube:object name="plugin.freebusy_select" id="edit-free-busy" />
</div>
<div class="event-section">
<label for="edit-priority"><roundcube:label name="calendar.priority" /></label>
<roundcube:object name="plugin.priority_select" id="edit-priority" />
</div>
<div class="event-section">
<label for="edit-sensitivity"><roundcube:label name="calendar.sensitivity" /></label>
<roundcube:object name="plugin.sensitivity_select" id="edit-sensitivity" />
</div>
</div>
<!-- recurrence settings -->
<div id="event-tab-2">
<div class="event-section border-after">
<roundcube:object name="plugin.recurrence_form" part="frequency" />
</div>
<div class="recurrence-form border-after" id="recurrence-form-daily">
<roundcube:object name="plugin.recurrence_form" part="daily" class="event-section" />
</div>
<div class="recurrence-form border-after" id="recurrence-form-weekly">
<roundcube:object name="plugin.recurrence_form" part="weekly" class="event-section" />
</div>
<div class="recurrence-form border-after" id="recurrence-form-monthly">
<roundcube:object name="plugin.recurrence_form" part="monthly" class="event-section" />
</div>
<div class="recurrence-form border-after" id="recurrence-form-yearly">
<roundcube:object name="plugin.recurrence_form" part="yearly" class="event-section" />
</div>
<div class="recurrence-form" id="recurrence-form-until">
<roundcube:object name="plugin.recurrence_form" part="until" class="event-section" />
</div>
</div>
<!-- attendees list -->
<div id="event-tab-3">
<roundcube:object name="plugin.attendees_list" id="edit-attendees-table" class="records-table" />
<roundcube:object name="plugin.attendees_form" id="edit-attendees-form" />
<roundcube:include file="/templates/freebusylegend.html" />
</div>
<!-- attachments list (with upload form) -->
<div id="event-tab-4">
<div id="edit-attachments" class="attachment-list">
<roundcube:object name="plugin.attachments_list" id="attachment-list" deleteIcon="/images/icons/delete.png" cancelIcon="/images/icons/delete.png" loadingIcon="/images/display/loading_blue.gif" />
</div>
<div id="edit-attachments-form">
<roundcube:object name="plugin.attachments_form" id="calendar-attachment-form" attachmentFieldSize="30" />
</div>
</div>
</form>
<roundcube:object name="plugin.edit_attendees_notify" id="edit-attendees-notify" class="event-dialog-message" style="display:none" />
<roundcube:object name="plugin.edit_recurring_warning" class="event-dialog-message edit-recurring-warning" style="display:none" />
<div id="edit-localchanges-warning" class="event-dialog-message" style="display:none"><roundcube:label name="calendar.localchangeswarning" /></div>
</div>

View file

@ -0,0 +1,7 @@
<div id="edit-attendees-legend" class="availability">
<span class="legend"><img class="availabilityicon free" src="./program/blank.gif" /> <roundcube:label name="calendar.availfree" /></span>
<span class="legend"><img class="availabilityicon busy" src="./program/blank.gif" /> <roundcube:label name="calendar.availbusy" /></span>
<span class="legend"><img class="availabilityicon tentative" src="./program/blank.gif" /> <roundcube:label name="calendar.availtentative" /></span>
<span class="legend"><img class="availabilityicon out-of-office" src="./program/blank.gif" /> <roundcube:label name="calendar.availoutofoffice" /></span>
<span class="legend"><img class="availabilityicon unknown" src="./program/blank.gif" /> <roundcube:label name="calendar.availunknown" /></span>
</div>

View file

@ -0,0 +1,36 @@
<roundcube:object name="doctype" value="html5" />
<html>
<head>
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
</head>
<body class="extwin calendaritipattend">
<div id="header">
<div id="topline">
<div class="topright">
<a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a>
</div>
</div>
<div id="topnav">
<roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" border="0" alt="Logo" />
</div>
<br style="clear:both" />
</div>
<div id="mainscreen">
<div class="centerbox">
<roundcube:object name="plugin.event_inviteform" />
<roundcube:object name="plugin.event_invitebox" class="calendar-invitebox" />
<roundcube:object name="plugin.event_rsvp_buttons" type="submit" iname="rsvp" id="event-rsvp" />
</form>
</div>
<roundcube:object name="message" id="message" />
</div>
</body>
</html>

View file

@ -0,0 +1,12 @@
<roundcube:object name="doctype" value="html5" />
<html>
<head>
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
</head>
<body class="iframe" style="background:#fff; margin:0">
<roundcube:object name="folderacl" />
</body>
</html>

View file

@ -0,0 +1,6 @@
<div id="calendar-kolabform">
<roundcube:object name="calendarform" />
</div>
<style type="text/css">
#calendarpropform { min-width:680px }
</style>

View file

@ -0,0 +1,28 @@
<roundcube:object name="doctype" value="html5" />
<html>
<head>
<title><roundcube:object name="pagetitle" /></title>
</head>
<body class="calendarprint">
<div id="printconfig" class="noprint">
<div class="calwidth">
<a href="#close" onclick="window.close()" class="rightalign"><roundcube:label name="close" /></a>
<span class="prop"><input type="button" id="printme" value="<roundcube:label name='print' />" onclick="window.print()"></span>
<span class="prop"><label><input type="checkbox" id="propdescription" checked="checked" /> <roundcube:label name="calendar.printdescriptions" /></label></span>
</div>
</div>
<roundcube:object name="message" id="message" class="noprint" />
<div id="calendar" class="calwidth"></div>
<div class="calwidth">
<roundcube:object name="plugin.calendar_list" activeonly="true" id="calendarlist" />
</div>
<roundcube:object name="plugin.calendar_css" printmode="true" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="./plugins/calendar/skins/default/print.iehacks.css" /><![endif]-->
</body>
</html>