From 98bf388da797c168672210b3f68e36ee6bfa5671 Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Mon, 1 Feb 2016 20:52:53 +0000 Subject: [PATCH] Re-add sidebox 'month' button as go button, styled to look like calendar navigation buttons --- calendar/js/app.js | 59 +++++++++++++++++++++----- calendar/templates/default/app.css | 38 +++++++++++++++-- calendar/templates/default/sidebox.xet | 1 + calendar/templates/pixelegg/app.css | 54 ++++++++++++++++++++--- calendar/templates/pixelegg/app.less | 22 +++++++--- 5 files changed, 149 insertions(+), 25 deletions(-) diff --git a/calendar/js/app.js b/calendar/js/app.js index c1470f72ff..62706fa94d 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -3107,6 +3107,21 @@ app.classes.calendar = AppJS.extend( { var datepicker = date_widget.input_date.datepicker("option", { showButtonPanel: false, + onChangeMonthYear: function(year, month, inst) + { + // Update month button label + var go_button = date_widget.getRoot().getWidgetById('header_go'); + if(go_button) + { + var temp_date = new Date(year, month-1, 1,0,0,0); + //temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset()); + go_button.set_statustext(egw.lang(date('F',temp_date))); + + // Store current _displayed_ date in date button for clicking + temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset()); + go_button.btn.attr('data-date', temp_date.toJSON()); + } + }, // Mark holidays beforeShowDay: function (date) { @@ -3175,27 +3190,49 @@ app.classes.calendar = AppJS.extend( app.calendar.update_state({date: date}); } }); - + + + // Set today button + var today = $j('#calendar-sidebox_header_today'); + + // Set go button + var go_button = date_widget.getRoot().getWidgetById('header_go'); + if(go_button && go_button.btn) + { + go_button = go_button.btn; + var temp_date = new Date(date_widget.get_value()); + temp_date.setUTCDate(1); + temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset()); + + // Store current _displayed_ date in date button for clicking + temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset()); + go_button.attr('data-date', temp_date.toJSON()); + } + // Dynamic resize of sidebox calendar to fill sidebox var preferred_width = $j('#calendar-sidebox_date .ui-datepicker-inline').outerWidth(); var font_ratio = 12 / parseFloat($j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size')); - $j(window).on('resize.calendar'+date.dom_id, function() { + $j(window).on('resize.calendar'+date_widget.dom_id, function() { var percent = 1+(($j(date_widget.getDOMNode()).width() - preferred_width) / preferred_width); percent *= font_ratio; - $j('#calendar-sidebox_date .ui-datepicker-inline,#calendar-sidebox_header_today') + $j('#calendar-sidebox_date .ui-datepicker-inline') .css('font-size',(percent*100)+'%'); // Position today var buttons = $j('#calendar-sidebox_date .ui-datepicker-header a'); - var total = 0; - buttons.each(function() { - total += $j(this).position().left; - }); - // Why doesn't this work properly? - var today = $j('#calendar-sidebox_header_today'); if(today.length) { - today.position({my: 'center left', at: 'center right',of: buttons}); - today.css('left',(total/buttons.length)); + // Why doesn't this work properly? + go_button.position({my: 'center left', at: 'center right',of: buttons[0]}); + + go_button.css('left', buttons.first().position().left + buttons.first().width()); + + var max_width = buttons.last().position().left - (go_button.position().left + go_button.width()); + today.css({ + 'left': go_button.position().left + go_button.outerWidth(), + 'top': go_button.css('top'), + 'max-width': max_width, + 'right': buttons.last().outerWidth(true) + }); } }).trigger('resize'); diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index d56ec68a90..f4d6298ea8 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -41,20 +41,52 @@ } #calendar-sidebox_header_today { position: absolute; - width: 2.4em; height: 1.8em; z-index: 1; - text-indent: 3em; + text-indent: 125%; overflow: hidden; + text-overflow: ellipsis; border: none; - background-size: contain; + right: 2em; + margin: 1px; + margin-top: -5px; + + background-position: center center; + background-size: contain; background-color: transparent; background-image: url(images/today.png); background-repeat: no-repeat; } +#calendar-sidebox_header_go { + position: absolute; + width: 13px; + height: 13px; + top: 0.5em; + right: 4.7em; + z-index: 1; + overflow: hidden; + margin: 0px; + font-size: 10px; + line-height: 50%; + text-indent: -1px; + color: white; + background-color: #d8e7f3; + border:none; + border-radius: 100%; +} +#calendar-sidebox_header_go:hover { + background-color: #0c5da5; +} + +#calendar-sidebox_date .ui-datepicker-prev { + right: 5em; +} #calendar-sidebox_weekend { /* Special css styling goes here */ } +#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title { + max-width: 10em; +} #calendar-sidebox_date td.ui-datepicker-week-col { cursor: pointer; } diff --git a/calendar/templates/default/sidebox.xet b/calendar/templates/default/sidebox.xet index aa7dbf5f56..417836ccfe 100644 --- a/calendar/templates/default/sidebox.xet +++ b/calendar/templates/default/sidebox.xet @@ -21,6 +21,7 @@ var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDa var change = {date: today.toJSON()}; if(app.calendar.state.view == 'planner') { change.planner_days = Math.ceil((new Date(app.calendar.state.last) - new Date(app.calendar.state.first)) / (24*3600000));} app.calendar.update_state(change);return false;"/> + diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 4d4c1b3eb4..09e8183c03 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -11,7 +11,7 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 54875 2016-01-28 21:35:22Z nathangray $ */ +/* $Id: app.css 54876 2016-01-28 22:08:15Z nathangray $ */ /*Media print classes*/ @media print { .th td, @@ -54,20 +54,50 @@ } #calendar-sidebox_header_today { position: absolute; - width: 2.4em; height: 1.8em; z-index: 1; - text-indent: 3em; + text-indent: 125%; overflow: hidden; + text-overflow: ellipsis; border: none; + right: 2em; + margin: 1px; + margin-top: -5px; + background-position: center center; background-size: contain; background-color: transparent; background-image: url(images/today.png); background-repeat: no-repeat; } +#calendar-sidebox_header_go { + position: absolute; + width: 13px; + height: 13px; + top: 0.5em; + right: 4.7em; + z-index: 1; + overflow: hidden; + margin: 0px; + font-size: 10px; + line-height: 50%; + text-indent: -1px; + color: white; + background-color: #d8e7f3; + border: none; + border-radius: 100%; +} +#calendar-sidebox_header_go:hover { + background-color: #0c5da5; +} +#calendar-sidebox_date .ui-datepicker-prev { + right: 5em; +} #calendar-sidebox_weekend { /* Special css styling goes here */ } +#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title { + max-width: 10em; +} #calendar-sidebox_date td.ui-datepicker-week-col { cursor: pointer; } @@ -2477,7 +2507,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { } /* Sidebox calendar */ #calendar-sidebox_date .ui-widget-header { - background: transparent; + background-color: transparent; } #calendar-sidebox_date .ui-widget-content, #calendar-sidebox_date .ui-state-default, @@ -2489,13 +2519,25 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-sidebox_date .ui-datepicker td { padding: 0px; } +#calendar-sidebox_date .ui-datepicker-header .ui-state-hover { + background-color: transparent; + border: none; + top: 2px; + box-shadow: none; +} #calendar-sidebox_date .ui-datepicker-today { background-color: #ffc200; } -#calendar-sidebox_date .ui-widget-content .ui-state-hover { +#calendar-sidebox_date .ui-datepicker-calendar .ui-state-hover { background-color: rgba(103, 159, 210, 0.2); } -#calendar-sidebox_header_today { +#calendar-sidebox_date .ui-datepicker-header .ui-datepicker-next.ui-state-hover { + right: 2px; +} +#calendar-sidebox_date .ui-datepicker-year { + padding-right: 15px !important; +} +#calendar-sidebox_date #calendar-sidebox_header_today { background-image: url(images/today.png); } #calendar_cat_id, diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 713914876f..f29b8505b3 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -1341,7 +1341,7 @@ div#calendar-container { #calendar-sidebox_date { .ui-widget-header { - background: transparent; + background-color: transparent; } .ui-widget-content, .ui-state-default, #calendar-sidebox_date .ui-state-hover { border: none; @@ -1351,15 +1351,27 @@ div#calendar-container { .ui-datepicker td { padding: 0px } + .ui-datepicker-header .ui-state-hover { + background-color: transparent; + border: none; + top: 2px; + box-shadow: none; + } .ui-datepicker-today { background-color: @egw_color_1; } - .ui-widget-content .ui-state-hover { + .ui-datepicker-calendar .ui-state-hover { background-color: @color_hover_row; } -} -#calendar-sidebox_header_today { - background-image: url(images/today.png); + .ui-datepicker-header .ui-datepicker-next.ui-state-hover { + right: 2px; + } + .ui-datepicker-year { + padding-right: 15px !important; + } + #calendar-sidebox_header_today { + background-image: url(images/today.png); + } } // Select Fields in Sidemenu #calendar_cat_id,