extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 23:00:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Calendar display issues

Browse Source 
- Keep planner header if you have to scroll down
- Show full hour at the end of the day, not just first division
This commit is contained in:
Nathan Gray 2015-10-27 19:08:33 +00:00
parent 5143a0a7b9
commit 05b2bdc920
5 changed files with 19 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
calendar/js/et2_widget_planner.js
View File

@ -679,12 +679,17 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
grouper.group.call(this, labels, events, this.value[i]);
}
// Set height for rows
this.rows.height(this.div.parent().height() - this.headers.outerHeight());
// Draw the rows
for(var key in labels)
{
grouper.draw_row.call(this,labels[key].id, labels[key].label, events[key] || []);
}
// Adjust header if there's a scrollbar
this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px')
this.value = [];
},
@ -1417,8 +1422,8 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
value.push(egw.dataGetUIDdata('calendar::'+c.data[j]).data);
}
}
last_data = c.data;
}
last_data = c.data;
}
else
{

8
calendar/js/et2_widget_timegrid.js
View File

@ -496,16 +496,16 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
*/
_drawTimes: function() {
$j('.calendar_calTimeRow',this.div).remove();
var wd_start = 60*this.options.day_start;
var wd_end = 60*this.options.day_end;
var granularity = this.options.granularity;
var totalDisplayMinutes = wd_end - wd_start;
var rowsToDisplay = (totalDisplayMinutes/granularity);
var rowsToDisplay = (totalDisplayMinutes/granularity) + (60 / granularity);
// Percent
var rowHeight = (100/rowsToDisplay).toFixed(1);
// Pixels
this.rowHeight = this.div.height() / rowsToDisplay;
// Pixels - add 1 for room for header
this.rowHeight = this.div.height() / (rowsToDisplay + 1);
this.gridHeader
.empty()

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

@ -540,20 +540,16 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
border: 1px solid gray;
padding-right: 3px;
}
.calendar_plannerWidget:nth-child(odd) {
background-color: #ffffff;
.calendar_plannerWidget > div:not(.calendar_plannerHeader) {
overflow-y: auto;
overflow-x: hidden;
}
.calendar_plannerWidget:nth-child(even) {
background-color: #f2f2f2;
}
/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows
*/
.calendar_plannerHeader {
position: relative;
top: 0px;
left: 0px;
width: 100%;
background-color: #e0e0e0;
}
@ -566,6 +562,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
width: 100%;
min-height: 20px;
}
.calendar_plannerRowWidget:nth-child(odd) {
background-color: #ffffff;
}
.calendar_plannerRowWidget:nth-child(even) {
background-color: #f2f2f2;
}
/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
*/

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

@ -1006,18 +1006,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/******************************************************
* CSS settings for the planner views (calendar_plannerWidget) *
******************************************************/
.row_on {
background-color: #ffffff;
}
.row_off {
background-color: #f2f2f2;
}
/* calendar_plannerWidget represents the whole planner, consiting of the calendar_plannerHeader and multiple plannerRowWidgets
*/
.calendar_plannerWidget {
position: relative;
top: 0px;
left: 0px;
width: 99.5%;
border: 1px solid gray;
padding-right: 3px;
@ -1025,30 +1016,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
.calendar_plannerWidget img {
height: 16px;
}
/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows
*/
.calendar_plannerHeader {
position: relative;
top: 0px;
left: 0px;
width: 100%;
}
/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
*/
.calendar_plannerRowWidget {
position: relative;
top: 0px;
left: 0px;
width: 100%;
}
/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
*/
.calendar_plannerScale,
.calendar_plannerScaleDay {
position: relative;
top: 0px;
left: 0%;
width: 100%;
height: 20px;
line-height: 20px;
}
@ -1061,8 +1032,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
.calendar_plannerWeekScale,
.calendar_plannerHourScale,
.calendar_plannerDayOfMonthScale {
position: absolute;
top: 0px;
/* left+width: is set by the code on runtime */
text-align: center;
height: 100%;
@ -1098,9 +1067,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
*/
.calendar_plannerRowHeader,
.calendar_plannerHeaderTitle {
position: absolute;
top: 0px;
left: 0%;
width: auto;
/* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */
height: 100%;
@ -1111,8 +1077,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
*/
.calendar_eventRows,
.calendar_plannerHeaderRows {
position: relative;
top: 0px;
left: 15%;
/* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */
width: 85%;
@ -1121,39 +1085,18 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
* Filler for month with less then 31 days in yearly planner
*/
.calendar_eventRowsFiller {
position: absolute;
top: 0px;
height: 93%;
background-color: white;
border: 1px dashed gray;
border-right: none;
}
/**
* Weekend or other special days in yearly planner
*/
.calendar_eventRowsMarkedDay {
position: absolute;
top: 0px;
height: 100%;
z-index: 10;
}
/* calendar_eventRowWidget contains non-overlapping events
*/
.calendar_eventRowWidget {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
border: 1px solid white;
}
.calendar_plannerEvent,
.calendar_plannerEventPrivate {
position: absolute;
top: 0px;
height: 100%;
overflow: hidden;
z-index: 20;
border: 1px solid black;
min-width: 5px;
/* set via inline style on runtime:

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

@ -1082,15 +1082,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
* CSS settings for the planner views (calendar_plannerWidget) *
******************************************************/
.row_on { background-color: @color_even;}
.row_off { background-color: @color_odd;}
/* calendar_plannerWidget represents the whole planner, consiting of the calendar_plannerHeader and multiple plannerRowWidgets
*/
.calendar_plannerWidget {
position: relative;
top: 0px;
left: 0px;
width: 99.5%;
border: 1px solid gray;
padding-right: 3px;
@ -1098,31 +1092,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
img{.dimension_height_s;}
}
/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows
*/
.calendar_plannerHeader {
position: relative;
top: 0px;
left: 0px;
width: 100%;
}
/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
*/
.calendar_plannerRowWidget {
position: relative;
top: 0px;
left: 0px;
width: 100%;
}
/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
*/
.calendar_plannerScale,.calendar_plannerScaleDay {
position: relative;
top: 0px;
left: 0%;
width: 100%;
height: 20px;
line-height: 20px;
}
@ -1131,8 +1104,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
line-height: 14px;
}
.calendar_plannerDayScale,.calendar_plannerMonthScale,.calendar_plannerWeekScale,.calendar_plannerHourScale,.calendar_plannerDayOfMonthScale {
position: absolute;
top: 0px;
/* left+width: is set by the code on runtime */
text-align: center;
height: 100%;
@ -1163,9 +1134,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget
*/
.calendar_plannerRowHeader, .calendar_plannerHeaderTitle {
position: absolute;
top: 0px;
left: 0%;
width: auto; /* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */
height: 100%;
line-height: 20px;
@ -1175,8 +1143,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* calendar_eventRows contain multiple eventRowWidgets
*/
.calendar_eventRows, .calendar_plannerHeaderRows {
position: relative;
top: 0px;
left: 15%; /* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */
width: 85%;
}
@ -1185,41 +1151,20 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
* Filler for month with less then 31 days in yearly planner
*/
.calendar_eventRowsFiller {
position: absolute;
top: 0px;
height: 93%;
background-color: white;
border: 1px dashed gray;
border-right: none;
}
/**
* Weekend or other special days in yearly planner
*/
.calendar_eventRowsMarkedDay {
position: absolute;
top: 0px;
height: 100%;
z-index: 10;
}
/* calendar_eventRowWidget contains non-overlapping events
*/
.calendar_eventRowWidget {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
border: 1px solid white;
}
.calendar_plannerEvent,.calendar_plannerEventPrivate{
position: absolute;
top: 0px;
height: 100%;
overflow: hidden;
z-index: 20;
border: 1px solid black;
min-width: 5px;
/* set via inline style on runtime: