Drive/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Get classic calendar skin up to speed with the new features

Browse source
This commit is contained in:
Thomas Bruederli 2014-03-11 11:36:58 +01:00
parent 7fe882108a
commit 149dcbaa1a
4 changed files with 200 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

188
plugins/calendar/skins/classic/calendar.css
View file

@ -16,7 +16,7 @@ body.calendarmain {
#main { #main {
position: absolute; position: absolute;
clear: both; clear: both;
top: 90px; top: 72px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 10px; bottom: 10px;
@ -24,13 +24,15 @@ body.calendarmain {
#calendarsidebar { #calendarsidebar {
position: absolute; position: absolute;
top: 37px; top: 0px;
left: 10px; left: 10px;
bottom: 0; bottom: 0;
width: 230px; width: 230px;
} }
#datepicker { #datepicker {
position: relative;
top: 42px;
width: 100%; width: 100%;
} }
@ -62,7 +64,7 @@ body.calendarmain {
position: absolute; position: absolute;
left: 244px; left: 244px;
width: 8px; width: 8px;
top: 37px; top: 4px;
bottom: 0; bottom: 0;
background: url(images/toggle.gif) 0 48% no-repeat transparent; background: url(images/toggle.gif) 0 48% no-repeat transparent;
cursor: pointer; cursor: pointer;
@ -78,7 +80,7 @@ div.sidebarclosed {
#calendar { #calendar {
position: absolute; position: absolute;
top: 0; top: 4px;
left: 256px; left: 256px;
right: 10px; right: 10px;
bottom: 0; bottom: 0;
@ -94,7 +96,7 @@ pre {
#calendars { #calendars {
position: absolute; position: absolute;
top: 220px; top: 228px;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -207,8 +209,8 @@ pre {
#calendartoolbar { #calendartoolbar {
position: absolute; position: absolute;
top: 45px; top: 0px;
left: 256px; left: 0px;
height: 35px; height: 35px;
} }
@ -269,7 +271,8 @@ pre {
background-position: -128px -32px; background-position: -128px -32px;
} }
#quicksearchbar { .calendarmain #quicksearchbar {
top: 82px;
right: 4px; right: 4px;
} }
@ -410,7 +413,7 @@ a.miniColors-trigger {
} }
.event-attendees span.delegated { .event-attendees span.delegated {
background-position: right -160px; background-position: right -180px;
} }
.event-attendees span.organizer { .event-attendees span.organizer {
@ -599,7 +602,7 @@ td.topalign {
border: 1px solid #C2D071; border: 1px solid #C2D071;
} }
#edit-attendees-table { .edit-attendees-table {
width: 100%; width: 100%;
display: table; display: table;
table-layout: fixed; table-layout: fixed;
@ -607,49 +610,51 @@ td.topalign {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
#edit-attendees-table td { .edit-attendees-table td {
padding: 3px; padding: 3px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
#edit-attendees-table td.role { .edit-attendees-table td.role {
width: 8em; width: 8em;
} }
#edit-attendees-table td.availability, .edit-attendees-table td.availability,
#edit-attendees-table td.confirmstate { .edit-attendees-table td.confirmstate {
width: 4em; width: 4em;
} }
#edit-attendees-table td.options { .edit-attendees-table td.options {
width: 3em; width: 3em;
text-align: right; text-align: right;
padding-right: 4px; padding-right: 4px;
} }
#edit-attendees-table td.name { .edit-attendees-table td.name {
width: auto; width: auto;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#edit-attendees-table thead td { .edit-attendees-table thead td {
background: url(images/listheader.gif) top left repeat-x #CCC; background: url(images/listheader.gif) top left repeat-x #CCC;
} }
#edit-attendees-form { #edit-attendees-form,
#edit-resources-form {
position: relative; position: relative;
margin-top: 1em; margin-top: 1em;
} }
#edit-attendees-form #edit-attendee-schedule { #edit-attendees-form #edit-attendee-schedule,
#edit-resources-form #edit-resource-find {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
#edit-attendees-table select.edit-attendee-role { .edit-attendees-table select.edit-attendee-role {
border: 0; border: 0;
padding: 2px; padding: 2px;
background: white; background: white;
@ -722,35 +727,35 @@ td.topalign {
vertical-align: middle; vertical-align: middle;
} }
#edit-attendees-table tbody td.confirmstate { .edit-attendees-table tbody td.confirmstate {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-indent: -2000%; text-indent: -2000%;
} }
#edit-attendees-table td.confirmstate span { .edit-attendees-table td.confirmstate span {
display: block; display: block;
width: 20px; width: 20px;
background: url(images/attendee-status.gif) 5px 0 no-repeat; background: url(images/attendee-status.gif) 5px 0 no-repeat;
} }
#edit-attendees-table td.confirmstate span.needs-action { .edit-attendees-table td.confirmstate span.needs-action {
} }
#edit-attendees-table td.confirmstate span.accepted { .edit-attendees-table td.confirmstate span.accepted {
background-position: 5px -20px; background-position: 5px -20px;
} }
#edit-attendees-table td.confirmstate span.declined { .edit-attendees-table td.confirmstate span.declined {
background-position: 5px -40px; background-position: 5px -40px;
} }
#edit-attendees-table td.confirmstate span.tentative { .edit-attendees-table td.confirmstate span.tentative {
background-position: 5px -60px; background-position: 5px -60px;
} }
#edit-attendees-table td.confirmstate span.delegated { .edit-attendees-table td.confirmstate span.delegated {
background-position: 5px -160px; background-position: 5px -180px;
} }
#attendees-freebusy-table { #attendees-freebusy-table {
@ -814,10 +819,14 @@ td.topalign {
background-position: 2px -117px; background-position: 2px -117px;
} }
.attendees-list .chair { .attendees-list .non-participant {
background-position: 2px -137px; background-position: 2px -137px;
} }
.attendees-list .chair {
background-position: 2px -157px;
}
.attendees-list .loading { .attendees-list .loading {
background: url(images/loading_blue.gif) 1px 50% no-repeat; background: url(images/loading_blue.gif) 1px 50% no-repeat;
} }
@ -1063,12 +1072,124 @@ span.spacer {
padding-right: 10px; padding-right: 10px;
} }
#resource-dialog-right {
position: absolute;
top: 10px;
left: 300px;
right: 8px;
bottom: 10px;
}
#resource-info,
#resource-availability {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 56%;
border: 1px solid #999;
background-color: #F9F9F9;
overflow: auto;
}
#resource-availability {
top: auto;
bottom: 0;
height: 41%;
}
#resource-info .boxtitle,
#resource-availability .boxtitle {
margin-top: 0;
}
#resources-list div.treetoggle {
left: 3px !important;
top: -2px;
}
#resources-list li ul li a {
padding-left: 35px;
}
#resource-selection {
position: absolute;
top: 10px;
bottom: 10px;
left: 8px;
width: 280px;
border: 1px solid #999999;
background-color: #F9F9F9;
overflow: hidden;
}
#resource-selection .boxlistcontent {
top: 25px;
border-top: 1px solid #eee;
}
#resourcequicksearch {
position: absolute;
top: 3px;
left: 7px;
right: 4px;
height: 17px;
background: #fff;
border: 1px solid #888;
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
#resourcesearchbox {
position: absolute;
top: 1px;
left: 24px;
width: 140px;
height: 15px;
font-size: 11px;
padding: 0px;
border: none;
outline: none;
background: #fff;
}
#resourcesearchreset {
position: absolute;
top: 2px;
right: 2px;
text-decoration: none;
}
#resource-details,
#resource-details-owner {
margin: 8px;
}
#resource-details td.title,
#resource-details-owner td.title {
color: #666;
padding-right: 10px;
min-width: 10em;
}
#resource-details-owner thead td {
color: #333;
font-size: 13px;
font-weight: bold;
}
/* fullcalendar style overrides */ /* fullcalendar style overrides */
#calendar .fc-header-right {
padding-right: 200px;
padding-top: 4px;
}
.rcube-fc-content { .rcube-fc-content {
position: absolute !important; position: absolute !important;
top: 37px; top: 38px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -1147,7 +1268,7 @@ div.fc-event-location {
.fc-view-list div.fc-list-header, .fc-view-list div.fc-list-header,
.fc-view-table td.fc-list-header, .fc-view-table td.fc-list-header,
#edit-attendees-table thead td { .edit-attendees-table thead td {
padding: 3px; padding: 3px;
background: #dddddd; background: #dddddd;
background-image: -moz-linear-gradient(center top, #f4f4f4, #d2d2d2); background-image: -moz-linear-gradient(center top, #f4f4f4, #d2d2d2);
@ -1251,6 +1372,7 @@ div.calendar-invitebox .rsvp-status.loading {
div.calendar-invitebox .rsvp-status.declined, div.calendar-invitebox .rsvp-status.declined,
div.calendar-invitebox .rsvp-status.tentative, div.calendar-invitebox .rsvp-status.tentative,
div.calendar-invitebox .rsvp-status.delegated,
div.calendar-invitebox .rsvp-status.accepted { div.calendar-invitebox .rsvp-status.accepted {
padding: 0 0 1px 22px; padding: 0 0 1px 22px;
background: url(images/attendee-status.gif) 2px -20px no-repeat; background: url(images/attendee-status.gif) 2px -20px no-repeat;
@ -1264,6 +1386,10 @@ div.calendar-invitebox .rsvp-status.tentative {
background-position: 2px -60px; background-position: 2px -60px;
} }
div.calendar-invitebox .rsvp-status.delegated {
background-position: 2px -180px;
}
/* iTIP attend reply page */ /* iTIP attend reply page */
.calendaritipattend .centerbox { .calendaritipattend .centerbox {

BIN
plugins/calendar/skins/classic/images/attendee-status.gif
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

43
plugins/calendar/skins/classic/templates/calendar.html
View file

@ -13,6 +13,14 @@
<div id="main"> <div id="main">
<div id="calendarsidebar"> <div id="calendarsidebar">
<div id="calendartoolbar">
<roundcube:button command="addevent" type="link" class="buttonPas addevent" classAct="button addevent" classSel="button addeventSel" title="calendar.new_event" content=" " />
<roundcube:button command="print" type="link" class="buttonPas print" classAct="button print" classSel="button printSel" title="calendar.print" content=" " />
<roundcube:button command="events-import" type="link" class="buttonPas import" classAct="button import" classSel="button importSel" title="calendar.importevents" content=" " />
<roundcube:button command="export" type="link" class="buttonPas export" classAct="button export" classSel="button exportSel" title="calendar.export" content=" " />
<roundcube:container name="toolbar" id="calendartoolbar" />
</div>
<div id="datepicker"></div> <div id="datepicker"></div>
<div id="calendars" style="visibility:hidden"> <div id="calendars" style="visibility:hidden">
<div class="boxtitle"><roundcube:label name="calendar.calendars" /></div> <div class="boxtitle"><roundcube:label name="calendar.calendars" /></div>
@ -96,6 +104,32 @@
<roundcube:include file="/templates/eventedit.html" /> <roundcube:include file="/templates/eventedit.html" />
<div id="eventresourcesdialog" class="uidialog">
<div id="resource-dialog-left">
<div id="resource-selection" class="">
<div id="resourcequicksearch">
<roundcube:object name="plugin.resources_searchform" id="resourcesearchbox" />
<roundcube:button command="reset-resource-search" id="resourcesearchreset" image="/images/icons/reset.gif" title="resetsearch" width="13" height="13" />
</div>
<div class="boxlistcontent">
<roundcube:object name="plugin.resources_list" id="resources-list" class="treelist" />
</div>
</div>
</div>
<div id="resource-dialog-right">
<div id="resource-info">
<h2 class="boxtitle"><roundcube:label name="calendar.resourcedetails" /></h2>
<roundcube:object name="plugin.resource_info" id="resource-details" />
</div>
<div id="resource-availability">
<h2 class="boxtitle"><roundcube:label name="calendar.resourceavailability" /></h2>
<div id="resource-freebusy-calendar"></div>
</div>
</div>
</div>
<div id="eventfreebusy" class="uidialog"> <div id="eventfreebusy" class="uidialog">
<roundcube:object name="plugin.attendees_freebusy_table" id="attendees-freebusy-table" cellspacing="0" cellpadding="0" border="0" /> <roundcube:object name="plugin.attendees_freebusy_table" id="attendees-freebusy-table" cellspacing="0" cellpadding="0" border="0" />
@ -134,6 +168,7 @@
<span class="attendee organizer"><roundcube:label name="calendar.roleorganizer" /></span> <span class="attendee organizer"><roundcube:label name="calendar.roleorganizer" /></span>
<span class="attendee req-participant"><roundcube:label name="calendar.rolerequired" /></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 opt-participant"><roundcube:label name="calendar.roleoptional" /></span>
<span class="attendee non-participant"><roundcube:label name="calendar.rolenonparticipant" /></span>
<span class="attendee chair"><roundcube:label name="calendar.rolechair" /></span> <span class="attendee chair"><roundcube:label name="calendar.rolechair" /></span>
</div> </div>
</div> </div>
@ -159,14 +194,6 @@
</div> </div>
</div> </div>
<div id="calendartoolbar">
<roundcube:button command="addevent" type="link" class="buttonPas addevent" classAct="button addevent" classSel="button addeventSel" title="calendar.new_event" content=" " />
<roundcube:button command="print" type="link" class="buttonPas print" classAct="button print" classSel="button printSel" title="calendar.print" content=" " />
<roundcube:button command="events-import" type="link" class="buttonPas import" classAct="button import" classSel="button importSel" title="calendar.importevents" content=" " />
<roundcube:button command="export" type="link" class="buttonPas export" classAct="button export" classSel="button exportSel" title="calendar.export" content=" " />
<roundcube:container name="toolbar" id="calendartoolbar" />
</div>
<div id="quicksearchbar"> <div id="quicksearchbar">
<roundcube:button name="searchmenulink" id="searchmenulink" image="/images/icons/glass.png" /> <roundcube:button name="searchmenulink" id="searchmenulink" image="/images/icons/glass.png" />
<roundcube:object name="plugin.searchform" id="quicksearchbox" /> <roundcube:object name="plugin.searchform" id="quicksearchbox" />

9
plugins/calendar/skins/classic/templates/eventedit.html
View file

@ -4,6 +4,7 @@
<li><a href="#event-panel-1"><roundcube:label name="calendar.tabsummary" /></a></li> <li><a href="#event-panel-1"><roundcube:label name="calendar.tabsummary" /></a></li>
<li id="edit-tab-recurrence"><a href="#event-panel-recurrence"><roundcube:label name="calendar.tabrecurrence" /></a></li> <li id="edit-tab-recurrence"><a href="#event-panel-recurrence"><roundcube:label name="calendar.tabrecurrence" /></a></li>
<li id="edit-tab-attendees"><a href="#event-panel-attendees"><roundcube:label name="calendar.tabattendees" /></a></li> <li id="edit-tab-attendees"><a href="#event-panel-attendees"><roundcube:label name="calendar.tabattendees" /></a></li>
<li id="edit-tab-resources"><a href="#event-panel-resources"><roundcube:label name="calendar.tabresources" /></a></li>
<li id="edit-tab-attachments"><a href="#event-panel-attachments"><roundcube:label name="calendar.tabattachments" /></a></li> <li id="edit-tab-attachments"><a href="#event-panel-attachments"><roundcube:label name="calendar.tabattachments" /></a></li>
</ul> </ul>
<!-- basic info --> <!-- basic info -->
@ -87,10 +88,16 @@
</div> </div>
<!-- attendees list --> <!-- attendees list -->
<div id="event-panel-attendees"> <div id="event-panel-attendees">
<roundcube:object name="plugin.attendees_list" id="edit-attendees-table" cellspacing="0" cellpadding="0" border="0" /> <roundcube:object name="plugin.attendees_list" id="edit-attendees-table" class="edit-attendees-table" cellspacing="0" cellpadding="0" border="0" />
<roundcube:object name="plugin.attendees_form" id="edit-attendees-form" /> <roundcube:object name="plugin.attendees_form" id="edit-attendees-form" />
<roundcube:include file="/templates/freebusylegend.html" /> <roundcube:include file="/templates/freebusylegend.html" />
</div> </div>
<!-- resources list -->
<div id="event-panel-resources">
<roundcube:object name="plugin.attendees_list" id="edit-resources-table" class="edit-attendees-table" cellspacing="0" cellpadding="0" border="0" coltitle="resource" />
<roundcube:object name="plugin.resources_form" id="edit-resources-form" />
<roundcube:include file="/templates/freebusylegend.html" />
</div>
<!-- attachments list (with upload form) --> <!-- attachments list (with upload form) -->
<div id="event-panel-attachments"> <div id="event-panel-attachments">
<div id="edit-attachments" class="attachments-list"> <div id="edit-attachments" class="attachments-list">