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

More work on Larry skin adaptions for calendar

Browse source
This commit is contained in:
Thomas Bruederli 2012-02-08 15:12:11 +01:00
parent b5a44da343
commit 9374ec4e77
6 changed files with 172 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
plugins/calendar/calendar_ui.js
View file

@ -2158,7 +2158,7 @@ function rcube_calendar_ui(settings)
// adjust calendar view size // adjust calendar view size
this.view_resize = function() this.view_resize = function()
{ {
var footer = fc.fullCalendar('getView').name == 'table' ? $('#agendaoptions').height() + 2 : 0; var footer = fc.fullCalendar('getView').name == 'table' ? $('#agendaoptions').outerHeight() : 0;
fc.fullCalendar('option', 'height', $('#calendar').height() - footer); fc.fullCalendar('option', 'height', $('#calendar').height() - footer);
}; };

6
plugins/calendar/skins/default/calendar.css
View file

@ -22,7 +22,7 @@ body.calendarmain {
bottom: 10px; bottom: 10px;
} }
#sidebar { #calendarsidebar {
position: absolute; position: absolute;
top: 37px; top: 37px;
left: 10px; left: 10px;
@ -58,7 +58,7 @@ body.calendarmain {
cursor: pointer; cursor: pointer;
} }
#sidebartoggle { #calendarsidebartoggle {
position: absolute; position: absolute;
left: 244px; left: 244px;
width: 8px; width: 8px;
@ -72,7 +72,7 @@ div.sidebarclosed {
background-position: -8px 48% !important; background-position: -8px 48% !important;
} }
#sidebartoggle:hover { #calendarsidebartoggle:hover {
background-color: #ddd; background-color: #ddd;
} }

4
plugins/calendar/skins/default/print.css
View file

@ -20,6 +20,10 @@ body, td, th, div, p, h3, select, input, textarea {
overflow: visible; overflow: visible;
} }
#calendar .fc-header-right {
padding-right: 0;
}
#printconfig { #printconfig {
position: fixed; position: fixed;
top: 0; top: 0;

18
plugins/calendar/skins/default/templates/calendar.html
View file

@ -12,7 +12,7 @@
<roundcube:include file="/includes/header.html" /> <roundcube:include file="/includes/header.html" />
<div id="main"> <div id="main">
<div id="sidebar"> <div id="calendarsidebar">
<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>
@ -25,7 +25,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="sidebartoggle"></div> <div id="calendarsidebartoggle"></div>
<div id="calendar"> <div id="calendar">
<roundcube:object name="plugin.angenda_options" class="boxfooter" id="agendaoptions" /> <roundcube:object name="plugin.angenda_options" class="boxfooter" id="agendaoptions" />
</div> </div>
@ -175,24 +175,24 @@ rcmail_ui.popups.calendaroptions = { id:'calendaroptionsmenu', above:1, obj:$('#
$(document).ready(function(e){ $(document).ready(function(e){
// initialize sidebar toggle // initialize sidebar toggle
$('#sidebartoggle').click(function() { $('#calendarsidebartoggle').click(function() {
var width = $(this).data('sidebarwidth'); var width = $(this).data('sidebarwidth');
var offset = $(this).data('offset'); var offset = $(this).data('offset');
var $sidebar = $('#sidebar'), time = 250; var $sidebar = $('#calendarsidebar'), time = 250;
if ($sidebar.is(':visible')) { if ($sidebar.is(':visible')) {
$sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#sidebar').hide(); }); $sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#calendarsidebar').hide(); });
$(this).animate({ left:'8px'}, time, function(){ $('#sidebartoggle').addClass('sidebarclosed') }); $(this).animate({ left:'8px'}, time, function(){ $('#calendarsidebartoggle').addClass('sidebarclosed') });
$('#calendar').animate({ left:'20px'}, time, function(){ $(this).fullCalendar('render'); }); $('#calendar').animate({ left:'20px'}, time, function(){ $(this).fullCalendar('render'); });
} }
else { else {
$sidebar.show().animate({ left:'10px' }, time); $sidebar.show().animate({ left:'10px' }, time);
$(this).animate({ left:offset+'px'}, time, function(){ $('#sidebartoggle').removeClass('sidebarclosed'); }); $(this).animate({ left:offset+'px'}, time, function(){ $('#calendarsidebartoggle').removeClass('sidebarclosed'); });
$('#calendar').animate({ left:(width+16)+'px'}, time, function(){ $(this).fullCalendar('render'); }); $('#calendar').animate({ left:(width+16)+'px'}, time, function(){ $(this).fullCalendar('render'); });
} }
}) })
.data('offset', $('#sidebartoggle').position().left) .data('offset', $('#calendarsidebartoggle').position().left)
.data('sidebarwidth', $('#sidebar').width() + $('#sidebar').position().left); .data('sidebarwidth', $('#calendarsidebar').width() + $('#calendarsidebar').position().left);
}); });
</script> </script>

175
plugins/calendar/skins/larry/calendar.css
View file

@ -20,7 +20,7 @@ body.calendarmain #mainscreen {
left: 0; left: 0;
} }
#sidebar { #calendarsidebar {
position: absolute; position: absolute;
top: 0; top: 0;
left: 10px; left: 10px;
@ -31,6 +31,7 @@ body.calendarmain #mainscreen {
#datepicker { #datepicker {
margin-top: 12px; margin-top: 12px;
width: 100%; width: 100%;
min-height: 190px;
} }
#datepicker .ui-datepicker { #datepicker .ui-datepicker {
@ -84,7 +85,7 @@ body.calendarmain #mainscreen {
top: 4px; top: 4px;
} }
#sidebartoggle { #calendarsidebartoggle {
position: absolute; position: absolute;
left: 254px; left: 254px;
width: 8px; width: 8px;
@ -98,7 +99,7 @@ div.sidebarclosed {
background-position: -8px 48% !important; background-position: -8px 48% !important;
} }
#sidebartoggle:hover { #calendarsidebartoggle:hover {
background-color: #ddd; background-color: #ddd;
} }
@ -111,6 +112,11 @@ div.sidebarclosed {
padding-bottom: 28px; padding-bottom: 28px;
} }
.calendarmain #message.statusbar {
border: 1px solid #c3c3c3;
border-bottom-color: #ababab;
}
#print { #print {
width: 680px; width: 680px;
} }
@ -923,19 +929,20 @@ span.spacer {
#agendaoptions { #agendaoptions {
position: absolute; position: absolute;
top: 37; bottom: 28px;
left: 0; left: 0;
right: 0; right: 0;
height: auto; height: auto;
z-index: 200; z-index: 200;
border: 1px solid #ccc; background: #d6eaf3;
padding: 2px 5px 1px; border: 1px solid #c3c3c3;
font-size: 90%; border-top-color: #ddd;
padding: 4px 5px;
} }
#agendaoptions label { #agendaoptions label {
color: #444; color: #69939e;
text-shadow: 1px 1px #eee; text-shadow: 1px 1px #f2f2f2;
padding-right: 0.5em; padding-right: 0.5em;
} }
@ -974,15 +981,97 @@ span.spacer {
.fc-content { .fc-content {
position: absolute !important; position: absolute !important;
top: 37px; top: 38px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 28px; bottom: 28px;
background: #fff; background: #fff;
} }
#fish-eye-view .fc-content {
top: 2px;
bottom: 2px;
}
.calendarmain .fc-button,
.calendarmain .fc-button.fc-state-hover,
.calendarmain .fc-button.fc-state-down {
border: 0;
background: none;
}
.calendarmain .fc-state-default .fc-button-inner,
.calendarmain .fc-state-hover .fc-button-inner {
margin: 0 0 0 0;
color: #555;
text-shadow: 0px 1px 1px #fff;
border: 1px solid #a2a2a2;
background: #f7f7f7;
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6));
background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
-o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
-webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
-moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
text-decoration: none;
}
.calendarmain .fc-state-disabled .fc-button-inner {
color: #bbb;
}
.calendarmain .fc-header .fc-button {
margin-left: -1px;
margin-right: 0;
}
.calendarmain .fc-state-down .fc-button-inner {
margin: 0;
border: 1px solid #a2a2a2;
background: #e6e6e6;
background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9));
background: -o-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
background: linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
}
.calendarmain .fc-state-active .fc-button-inner {
color: #333;
background: #bababa;
background: -moz-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#d8d8d8));
background: -o-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: -ms-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: linear-gradient(top, #bababa 0%, #d8d8d8 100%);
}
.calendarmain .fc-corner-left .fc-button-inner,
.calendarmain .fc-corner-left .fc-button-content {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.calendarmain .fc-corner-right .fc-button-inner,
.calendarmain .fc-corner-right .fc-button-content {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.calendarmain .fc-state-default .fc-button-effect {
display: none;
}
.calendarmain .fc-button-content {
height: 2.2em;
line-height: 2.2em;
}
#calendar .fc-header-right { #calendar .fc-header-right {
padding-right: 280px; padding-right: 250px;
} }
.fc-event { .fc-event {
@ -1069,33 +1158,61 @@ div.fc-event-location {
.fc-list-section .fc-event { .fc-list-section .fc-event {
cursor: pointer; cursor: pointer;
} }
/*
.fc-view-list div.fc-list-header, /*.calendarmain .fc-view-list div.fc-list-header,*/
.fc-view-table td.fc-list-header, .calendarmain .fc-view-table td.fc-list-header,
#edit-attendees-table thead td { #edit-attendees-table thead td {
padding: 3px; color: #69939e;
background: #dddddd; font-size: 11px;
background-image: -moz-linear-gradient(center top, #f4f4f4, #d2d2d2);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f4f4f4), color-stop(1.00, #d2d2d2));
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#f4f4f4, endColorstr=#d2d2d2, GradientType=0);
font-weight: bold; font-weight: bold;
color: #333; background: #d6eaf3;
} background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
*/ background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(8%,#d6eaf3), color-stop(100%,#d6eaf3));
.fc-view-list .fc-event-skin .fc-event-content { background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
background: #F6F6F6; background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
padding: 2px; background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
border: 0;
padding: 7px;
} }
.fc-view-list .fc-event-skin .fc-event-title, .calendarmain .fc-view-table tr.fc-event td {
.fc-view-list .fc-event-skin .fc-event-location { border-color: #ddd;
color: #333; padding: 4px 7px;
} }
.fc-view-table col.fc-event-location { .calendarmain .fc-view-table col.fc-event-location {
width: 20%; width: 20%;
} }
.calendarmain .fc-view-table tr.fc-event td.fc-event-handle {
padding: 5px 10px 2px 7px;
width: 12px;
}
.calendarmain .fc-view-table .fc-event-handle .fc-event-skin {
margin: 0;
padding: 0;
display: inline-block;
width: 10px;
height: 10px;
font-size: 6px;
border-radius: 8px;
}
.calendarmain .fc-view-table .fc-event-handle .fc-event-inner {
display: inline-block;
width: 10px;
height: 10px;
padding: 0;
font-size: 10px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
}
.fc-listappend { .fc-listappend {
text-align: center; text-align: center;
margin: 1em 0; margin: 1em 0;

18
plugins/calendar/skins/larry/templates/calendar.html
View file

@ -10,7 +10,7 @@
<roundcube:include file="/includes/header.html" /> <roundcube:include file="/includes/header.html" />
<div id="mainscreen"> <div id="mainscreen">
<div id="sidebar"> <div id="calendarsidebar">
<div id="quicksearchbar"> <div id="quicksearchbar">
<roundcube:object name="plugin.searchform" id="quicksearchbox" /> <roundcube:object name="plugin.searchform" id="quicksearchbox" />
<a id="searchmenulink" class="iconbutton searchoptions" > </a> <a id="searchmenulink" class="iconbutton searchoptions" > </a>
@ -29,7 +29,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="sidebartoggle"></div> <div id="calendarsidebartoggle"></div>
<div id="calendartoolbar" class="toolbar"> <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="addevent" type="link" class="button addevent disabled" classAct="button addevent" classSel="button addevent pressed" label="calendar.new_event" title="calendar.new_event" />
@ -176,24 +176,24 @@ $(document).ready(function(e){
UI.init(); UI.init();
// initialize sidebar toggle // initialize sidebar toggle
$('#sidebartoggle').click(function() { $('#calendarsidebartoggle').click(function() {
var width = $(this).data('sidebarwidth'); var width = $(this).data('sidebarwidth');
var offset = $(this).data('offset'); var offset = $(this).data('offset');
var $sidebar = $('#sidebar'), time = 250; var $sidebar = $('#calendarsidebar'), time = 250;
if ($sidebar.is(':visible')) { if ($sidebar.is(':visible')) {
$sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#sidebar').hide(); }); $sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#calendarsidebar').hide(); });
$(this).animate({ left:'8px'}, time, function(){ $('#sidebartoggle').addClass('sidebarclosed') }); $(this).animate({ left:'8px'}, time, function(){ $('#calendarsidebartoggle').addClass('sidebarclosed') });
$('#calendar').animate({ left:'20px'}, time, function(){ $(this).fullCalendar('render'); }); $('#calendar').animate({ left:'20px'}, time, function(){ $(this).fullCalendar('render'); });
} }
else { else {
$sidebar.show().animate({ left:'10px' }, time); $sidebar.show().animate({ left:'10px' }, time);
$(this).animate({ left:offset+'px'}, time, function(){ $('#sidebartoggle').removeClass('sidebarclosed'); }); $(this).animate({ left:offset+'px'}, time, function(){ $('#calendarsidebartoggle').removeClass('sidebarclosed'); });
$('#calendar').animate({ left:(width+16)+'px'}, time, function(){ $(this).fullCalendar('render'); }); $('#calendar').animate({ left:(width+16)+'px'}, time, function(){ $(this).fullCalendar('render'); });
} }
}) })
.data('offset', $('#sidebartoggle').position().left) .data('offset', $('#calendarsidebartoggle').position().left)
.data('sidebarwidth', $('#sidebar').width() + $('#sidebar').position().left); .data('sidebarwidth', $('#calendarsidebar').width() + $('#calendarsidebar').position().left);
}); });
</script> </script>