From 9374ec4e77dd781910134f173bfcd1c7f4bb7615 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 8 Feb 2012 15:12:11 +0100 Subject: [PATCH] More work on Larry skin adaptions for calendar --- plugins/calendar/calendar_ui.js | 2 +- plugins/calendar/skins/default/calendar.css | 6 +- plugins/calendar/skins/default/print.css | 4 + .../skins/default/templates/calendar.html | 18 +- plugins/calendar/skins/larry/calendar.css | 175 +++++++++++++++--- .../skins/larry/templates/calendar.html | 18 +- 6 files changed, 172 insertions(+), 51 deletions(-) diff --git a/plugins/calendar/calendar_ui.js b/plugins/calendar/calendar_ui.js index 3b0c5c86..a2aac7cf 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 23e27507..21dcb1b9 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 eeb4fadb..3c9bd716 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 e6e12711..a22056dd 100644 --- a/plugins/calendar/skins/default/templates/calendar.html +++ b/plugins/calendar/skins/default/templates/calendar.html @@ -12,7 +12,7 @@
- -
+
@@ -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); }); diff --git a/plugins/calendar/skins/larry/calendar.css b/plugins/calendar/skins/larry/calendar.css index df11467e..b55baa74 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 9fd6116f..c072e352 100644 --- a/plugins/calendar/skins/larry/templates/calendar.html +++ b/plugins/calendar/skins/larry/templates/calendar.html @@ -10,7 +10,7 @@
- -
+
@@ -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); });