summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas Bruederli <bruederli@kolabsys.com>2012-02-08 14:12:11 (GMT)
committerThomas Bruederli <bruederli@kolabsys.com>2012-02-08 14:12:11 (GMT)
commit9374ec4e77dd781910134f173bfcd1c7f4bb7615 (patch)
treecb71e1d66b1c7727adcbef40704b0c602277a9fe
parentb5a44da343057cdf461c69c35e53d095af54d15c (diff)
downloadroundcubemail-plugins-kolab-9374ec4e77dd781910134f173bfcd1c7f4bb7615.tar.gz
More work on Larry skin adaptions for calendar
-rw-r--r--plugins/calendar/calendar_ui.js2
-rw-r--r--plugins/calendar/skins/default/calendar.css6
-rw-r--r--plugins/calendar/skins/default/print.css4
-rw-r--r--plugins/calendar/skins/default/templates/calendar.html18
-rw-r--r--plugins/calendar/skins/larry/calendar.css175
-rw-r--r--plugins/calendar/skins/larry/templates/calendar.html18
6 files changed, 172 insertions, 51 deletions
diff --git a/plugins/calendar/calendar_ui.js b/plugins/calendar/calendar_ui.js
index 3b0c5c8..a2aac7c 100644
--- a/plugins/calendar/calendar_ui.js
+++ b/plugins/calendar/calendar_ui.js
@@ -2158,7 +2158,7 @@ function rcube_calendar_ui(settings)
// adjust calendar view size
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);
};
diff --git a/plugins/calendar/skins/default/calendar.css b/plugins/calendar/skins/default/calendar.css
index 23e2750..21dcb1b 100644
--- a/plugins/calendar/skins/default/calendar.css
+++ b/plugins/calendar/skins/default/calendar.css
@@ -22,7 +22,7 @@ body.calendarmain {
bottom: 10px;
}
-#sidebar {
+#calendarsidebar {
position: absolute;
top: 37px;
left: 10px;
@@ -58,7 +58,7 @@ body.calendarmain {
cursor: pointer;
}
-#sidebartoggle {
+#calendarsidebartoggle {
position: absolute;
left: 244px;
width: 8px;
@@ -72,7 +72,7 @@ div.sidebarclosed {
background-position: -8px 48% !important;
}
-#sidebartoggle:hover {
+#calendarsidebartoggle:hover {
background-color: #ddd;
}
diff --git a/plugins/calendar/skins/default/print.css b/plugins/calendar/skins/default/print.css
index eeb4fad..3c9bd71 100644
--- a/plugins/calendar/skins/default/print.css
+++ b/plugins/calendar/skins/default/print.css
@@ -20,6 +20,10 @@ body, td, th, div, p, h3, select, input, textarea {
overflow: visible;
}
+#calendar .fc-header-right {
+ padding-right: 0;
+}
+
#printconfig {
position: fixed;
top: 0;
diff --git a/plugins/calendar/skins/default/templates/calendar.html b/plugins/calendar/skins/default/templates/calendar.html
index e6e1271..a22056d 100644
--- a/plugins/calendar/skins/default/templates/calendar.html
+++ b/plugins/calendar/skins/default/templates/calendar.html
@@ -12,7 +12,7 @@
<roundcube:include file="/includes/header.html" />
<div id="main">
- <div id="sidebar">
+ <div id="calendarsidebar">
<div id="datepicker"></div>
<div id="calendars" style="visibility:hidden">
<div class="boxtitle"><roundcube:label name="calendar.calendars" /></div>
@@ -25,7 +25,7 @@
</div>
</div>
</div>
- <div id="sidebartoggle"></div>
+ <div id="calendarsidebartoggle"></div>
<div id="calendar">
<roundcube:object name="plugin.angenda_options" class="boxfooter" id="agendaoptions" />
</div>
@@ -175,24 +175,24 @@ rcmail_ui.popups.calendaroptions = { id:'calendaroptionsmenu', above:1, obj:$('#
$(document).ready(function(e){
// initialize sidebar toggle
- $('#sidebartoggle').click(function() {
+ $('#calendarsidebartoggle').click(function() {
var width = $(this).data('sidebarwidth');
var offset = $(this).data('offset');
- var $sidebar = $('#sidebar'), time = 250;
+ var $sidebar = $('#calendarsidebar'), 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') });
+ $sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#calendarsidebar').hide(); });
+ $(this).animate({ left:'8px'}, time, function(){ $('#calendarsidebartoggle').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'); });
+ $(this).animate({ left:offset+'px'}, time, function(){ $('#calendarsidebartoggle').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);
+ .data('offset', $('#calendarsidebartoggle').position().left)
+ .data('sidebarwidth', $('#calendarsidebar').width() + $('#calendarsidebar').position().left);
});
</script>
diff --git a/plugins/calendar/skins/larry/calendar.css b/plugins/calendar/skins/larry/calendar.css
index df11467..b55baa7 100644
--- a/plugins/calendar/skins/larry/calendar.css
+++ b/plugins/calendar/skins/larry/calendar.css
@@ -20,7 +20,7 @@ body.calendarmain #mainscreen {
left: 0;
}
-#sidebar {
+#calendarsidebar {
position: absolute;
top: 0;
left: 10px;
@@ -31,6 +31,7 @@ body.calendarmain #mainscreen {
#datepicker {
margin-top: 12px;
width: 100%;
+ min-height: 190px;
}
#datepicker .ui-datepicker {
@@ -84,7 +85,7 @@ body.calendarmain #mainscreen {
top: 4px;
}
-#sidebartoggle {
+#calendarsidebartoggle {
position: absolute;
left: 254px;
width: 8px;
@@ -98,7 +99,7 @@ div.sidebarclosed {
background-position: -8px 48% !important;
}
-#sidebartoggle:hover {
+#calendarsidebartoggle:hover {
background-color: #ddd;
}
@@ -111,6 +112,11 @@ div.sidebarclosed {
padding-bottom: 28px;
}
+.calendarmain #message.statusbar {
+ border: 1px solid #c3c3c3;
+ border-bottom-color: #ababab;
+}
+
#print {
width: 680px;
}
@@ -923,19 +929,20 @@ span.spacer {
#agendaoptions {
position: absolute;
- top: 37;
+ bottom: 28px;
left: 0;
right: 0;
height: auto;
z-index: 200;
- border: 1px solid #ccc;
- padding: 2px 5px 1px;
- font-size: 90%;
+ background: #d6eaf3;
+ border: 1px solid #c3c3c3;
+ border-top-color: #ddd;
+ padding: 4px 5px;
}
#agendaoptions label {
- color: #444;
- text-shadow: 1px 1px #eee;
+ color: #69939e;
+ text-shadow: 1px 1px #f2f2f2;
padding-right: 0.5em;
}
@@ -974,15 +981,97 @@ span.spacer {
.fc-content {
position: absolute !important;
- top: 37px;
+ top: 38px;
left: 0;
right: 0;
bottom: 28px;
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 {
- padding-right: 280px;
+ padding-right: 250px;
}
.fc-event {
@@ -1069,33 +1158,61 @@ div.fc-event-location {
.fc-list-section .fc-event {
cursor: pointer;
}
-/*
-.fc-view-list div.fc-list-header,
-.fc-view-table td.fc-list-header,
+
+/*.calendarmain .fc-view-list div.fc-list-header,*/
+.calendarmain .fc-view-table td.fc-list-header,
#edit-attendees-table thead td {
- padding: 3px;
- background: #dddddd;
- 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);
+ color: #69939e;
+ font-size: 11px;
font-weight: bold;
- color: #333;
-}
-*/
-.fc-view-list .fc-event-skin .fc-event-content {
- background: #F6F6F6;
- padding: 2px;
+ 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));
+ background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+ background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
+ background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+ border: 0;
+ padding: 7px;
}
-.fc-view-list .fc-event-skin .fc-event-title,
-.fc-view-list .fc-event-skin .fc-event-location {
- color: #333;
+.calendarmain .fc-view-table tr.fc-event td {
+ border-color: #ddd;
+ padding: 4px 7px;
}
-.fc-view-table col.fc-event-location {
+.calendarmain .fc-view-table col.fc-event-location {
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 {
text-align: center;
margin: 1em 0;
diff --git a/plugins/calendar/skins/larry/templates/calendar.html b/plugins/calendar/skins/larry/templates/calendar.html
index 9fd6116..c072e35 100644
--- a/plugins/calendar/skins/larry/templates/calendar.html
+++ b/plugins/calendar/skins/larry/templates/calendar.html
@@ -10,7 +10,7 @@
<roundcube:include file="/includes/header.html" />
<div id="mainscreen">
- <div id="sidebar">
+ <div id="calendarsidebar">
<div id="quicksearchbar">
<roundcube:object name="plugin.searchform" id="quicksearchbox" />
<a id="searchmenulink" class="iconbutton searchoptions" > </a>
@@ -29,7 +29,7 @@
</div>
</div>
</div>
- <div id="sidebartoggle"></div>
+ <div id="calendarsidebartoggle"></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" />
@@ -176,24 +176,24 @@ $(document).ready(function(e){
UI.init();
// initialize sidebar toggle
- $('#sidebartoggle').click(function() {
+ $('#calendarsidebartoggle').click(function() {
var width = $(this).data('sidebarwidth');
var offset = $(this).data('offset');
- var $sidebar = $('#sidebar'), time = 250;
+ var $sidebar = $('#calendarsidebar'), 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') });
+ $sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#calendarsidebar').hide(); });
+ $(this).animate({ left:'8px'}, time, function(){ $('#calendarsidebartoggle').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'); });
+ $(this).animate({ left:offset+'px'}, time, function(){ $('#calendarsidebartoggle').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);
+ .data('offset', $('#calendarsidebartoggle').position().left)
+ .data('sidebarwidth', $('#calendarsidebar').width() + $('#calendarsidebar').position().left);
});
</script>