extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-26 09:53:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Re-add sidebox 'month' button as go button, styled to look like calendar navigation buttons

Browse Source
This commit is contained in:
Nathan Gray 2016-02-01 20:52:53 +00:00
parent 0c11eaf2f1
commit 98bf388da7
5 changed files with 149 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
calendar/js/app.js
View File

@ -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');

38
calendar/templates/default/app.css
View File

@ -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;
}

1
calendar/templates/default/sidebox.xet
View File

@ -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;"/>
<buttononly id="header_go" label="&#8629;" icon="nope" statustext="Go" class="ui-corner-all" onclick="var change = {date: widget.btn.attr('data-date')}; if(app.calendar.state.view == 'planner') { change.planner_days = 0;change.first=change.date;var d = new Date(change.date);d = new Date(d.getFullYear(),d.getUTCMonth() + 1, 0);change.last=d.toJSON();} else if ( app.calendar.state.view == 'listview') {change.filter='month';} else {change.view = 'month';}app.calendar.update_state(change);" />
<date id="date" class="et2_fullWidth" inline="true" onchange="var view_change = app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view);
var update = {date:widget.getValue()};
if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_change ? view_change - 1 : view_change];} else if (app.calendar.state.view == 'listview') {update.filter = 'after';} else if (app.calendar.state.view =='planner') { update.planner_days = 1; } app.calendar.update_state(update);"/>

54
calendar/templates/pixelegg/app.css
View File

@ -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,

22
calendar/templates/pixelegg/app.less
View File

@ -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,