Calendar display issues

- Give owner name / calendar label its own space to avoid colliding with first day header
- Full day non-blocking now have their own dedicated space
This commit is contained in:
Nathan Gray 2015-10-28 15:55:10 +00:00
parent dd4df93780
commit 35f08f39b5
6 changed files with 55 additions and 62 deletions

View File

@ -641,7 +641,8 @@ app.classes.calendar = AppJS.extend(
return false; return false;
} }
) );
jQuery(framework.applications.calendar.tab.contentDiv).swipe('destroy')
.swipe({ .swipe({
//Generic swipe handler for all directions //Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount) { swipe:function(event, direction, distance, duration, fingerCount) {
@ -667,7 +668,10 @@ app.classes.calendar = AppJS.extend(
scroll_animate.call($j(event.target).closest('.calendar_calTimeGrid, .calendar_plannerWidget')[0], direction, delta) scroll_animate.call($j(event.target).closest('.calendar_calTimeGrid, .calendar_plannerWidget')[0], direction, delta)
return false; return false;
}, },
allowPageScroll: jQuery.fn.swipe.pageScroll.VERTICAL allowPageScroll: jQuery.fn.swipe.pageScroll.VERTICAL,
threshold: 100,
fallbackToMouseEvents: false,
triggerOnTouchEnd: false
}); });
// Page up & page down // Page up & page down

View File

@ -72,6 +72,9 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
.css('left', this.options.left); .css('left', this.options.left);
this.title = $j(document.createElement('div')) this.title = $j(document.createElement('div'))
.appendTo(this.header); .appendTo(this.header);
this.all_day = $j(document.createElement('div'))
.addClass("calendar_calDayColAllDay")
.appendTo(this.header);
this.setDOMNode(this.div[0]); this.setDOMNode(this.div[0]);
@ -320,7 +323,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
if(this.div) if(this.div)
{ {
this.div.css('left',left); this.div.css('left',left);
this.header.css('left',left); // Headers are positioned relative
//this.header.css('left',left);
} }
},this),1); },this),1);
@ -330,8 +334,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
window.setTimeout(jQuery.proxy(function() { window.setTimeout(jQuery.proxy(function() {
if(this.div) if(this.div)
{ {
this.div.width(this.options.width); this.div.outerWidth(this.options.width);
this.header.width(this.options.width); this.header.outerWidth(this.options.width);
} }
},this),1); },this),1);
}, },
@ -557,7 +561,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
if(columns[c][i].options.value.whole_day_on_top) if(columns[c][i].options.value.whole_day_on_top)
{ {
columns[c][i].div columns[c][i].div
.appendTo(this.header); .appendTo(this.all_day);
continue; continue;
} }
else else

View File

@ -501,25 +501,24 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
var wd_end = 60*this.options.day_end; var wd_end = 60*this.options.day_end;
var granularity = this.options.granularity; var granularity = this.options.granularity;
var totalDisplayMinutes = wd_end - wd_start; var totalDisplayMinutes = wd_end - wd_start;
var rowsToDisplay = (totalDisplayMinutes/granularity) + (60 / granularity); var rowsToDisplay = (totalDisplayMinutes + 60)/granularity;
// Percent // Percent
var rowHeight = (100/rowsToDisplay).toFixed(1); var rowHeight = (100/rowsToDisplay).toFixed(1);
// Pixels - add 1 for room for header // Pixels
this.rowHeight = this.div.height() / (rowsToDisplay + 1); this.rowHeight = this.div.height() / rowsToDisplay;
debugger;
this.gridHeader this.gridHeader
.empty() .empty()
.css('height', this.rowHeight+'px')
.attr('data-date', this.options.start_date) .attr('data-date', this.options.start_date)
.attr('data-owner', this.options.owner) .attr('data-owner', this.options.owner)
.append(this.options.label) .append(this._labelContainer)
.append(this.owner.getDOMNode()) .append(this.owner.getDOMNode())
.append(this.dayHeader) .append(this.dayHeader)
.appendTo(this.div); .appendTo(this.div);
var header_height = this.gridHeader.height();
this.scrolling this.scrolling
.css('top', this.rowHeight+'px') .css('height', (this.options.height - header_height)+'px')
.css('height', (this.options.height - this.rowHeight)+'px')
.appendTo(this.div) .appendTo(this.div)
.empty(); .empty();
@ -577,8 +576,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
{ {
this.day_list = this._calculate_day_list(this.options.start_date, this.options.end_date, this.options.show_weekend); this.day_list = this._calculate_day_list(this.options.start_date, this.options.end_date, this.options.show_weekend);
} }
var day_width = ( this.days.width()/this.day_list.length);
var day_width = (100/this.day_list.length).toFixed(2);
// Create any needed widgets - otherwise, we'll just recycle // Create any needed widgets - otherwise, we'll just recycle
// Add any needed day widgets (now showing more days) // Add any needed day widgets (now showing more days)
@ -591,7 +589,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
var day = et2_createWidget('calendar-daycol',{ var day = et2_createWidget('calendar-daycol',{
owner: this.options.owner, owner: this.options.owner,
width: (before ? 0 : day_width) + "%" width: (before ? 0 : day_width) + "px"
},this); },this);
if(this.isInTree()) if(this.isInTree())
{ {
@ -638,12 +636,12 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
day = this.day_widgets[i]; day = this.day_widgets[i];
// Position // Position
day.set_left((day_width * i) + '%'); day.set_left((day_width * i) + 'px');
day.set_date(this.day_list[i], this.value[this.day_list[i]] || false); day.set_date(this.day_list[i], this.value[this.day_list[i]] || false);
day.set_owner(this.options.owner); day.set_owner(this.options.owner);
day.set_id(this.day_list[i]); day.set_id(this.day_list[i]);
day.set_width(day_width + '%'); day.set_width(day_width + 'px');
} }
// Don't hold on to value any longer, use the data cache for best info // Don't hold on to value any longer, use the data cache for best info
@ -1142,10 +1140,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
set_label: function(label) set_label: function(label)
{ {
this.options.label = label; this.options.label = label;
this.gridHeader.contents().filter(function() { this._labelContainer.html(label);
return (this.nodeType == 3); this.gridHeader.prepend(this._labelContainer);
}).remove();
this.gridHeader.append(label);
// If it's a short label (eg week number), don't give it an extra line // If it's a short label (eg week number), don't give it an extra line
// but is empty, but give extra space for a single owner name // but is empty, but give extra space for a single owner name

View File

@ -137,7 +137,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
position: relative; position: relative;
top: 0px; top: 0px;
left: 0px; left: 0px;
border:1px solid silver;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -151,19 +150,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
} }
.calendar_calTimeGrid .calendar_calTimeGridScroll { .calendar_calTimeGrid .calendar_calTimeGridScroll {
position: absolute; position: relative;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calDayCols {
top: 0em;
}
.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calGridHeader {
top: 0em;
}
/* single row in the time-line you dont need to set a bgcolor, but you can /* single row in the time-line you dont need to set a bgcolor, but you can
*/ */
@ -230,36 +222,45 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* header for the dayCol /* header for the dayCol
*/ */
.calendar_calDayColHeader,.calendar_calGridHeader,.calendar_calGridHeader > div { .calendar_calDayColHeader,.calendar_calGridHeader,.calendar_calGridHeader > div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
right: 0px; /* does not work in IE, but looks better in other browsers then width:100% */
text-align: center;
font-size: 100%; font-size: 100%;
white-space: nowrap;
border-bottom: 1px solid silver;
border-right: 1px solid silver;
height: 16px;
line-height: 16px; line-height: 16px;
} }
.calendar_calDayColHeader { .calendar_calDayColHeader {
display: inline-block;
position: relative;
vertical-align: top; vertical-align: top;
height: 100%; border-right: 1px solid silver;
height: initial;
min-height: 4em;
/* Nice transition when changing days in a week */ /* Nice transition when changing days in a week */
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
z-index:30; z-index:30;
white-space: initial;
} }
.calendar_calDayColHeader > div[data-date] { .calendar_calDayColHeader > div[data-date] {
height: 16px; height: 16px;
text-align: center;
border-bottom: 1px solid silver;
}
.calendar_calDayColAllDay {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%
} }
.calendar_calGridHeader > div { .calendar_calGridHeader > div {
position: absolute; position: relative;
left: 45px; height: 100%;
right: 15px; margin-left: 43px;
width: initial; width: initial;
white-space: nowrap; white-space: nowrap;
} }
.calendar_calGridHeader > label {
float: left;
}
.calendar_TimeGridNoLabel > .calendar_calGridHeader > ul {
display: none;
}
.calendar_calDayColHeader img { .calendar_calDayColHeader img {
vertical-align: middle; vertical-align: middle;
} }
@ -312,6 +313,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
text-align: left; text-align: left;
padding-left: 3px; padding-left: 3px;
z-index: 29; z-index: 29;
border-bottom: 1px solid silver;
} }
#calendar-view_view tbody.ui-sortable { #calendar-view_view tbody.ui-sortable {
cursor: default; cursor: default;
@ -412,6 +414,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
.calendar_calDayColHeader .calendar_calEvent { .calendar_calDayColHeader .calendar_calEvent {
position: static; position: static;
display: inline-block; display: inline-block;
white-space: nowrap;
/* This determines how many per line */
flex: 1 1 6ex;
} }
.calendar_calEventTooltip{ .calendar_calEventTooltip{
border-radius: 6px; border-radius: 6px;

View File

@ -690,7 +690,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* timeGridWidget, contains timeRow's and dayCol's /* timeGridWidget, contains timeRow's and dayCol's
*/ */
.calendar_calTimeGrid { .calendar_calTimeGrid {
border: 1px solid silver;
background-color: #f0f0f0; background-color: #f0f0f0;
/* set via inline style on runtime: /* set via inline style on runtime:
* height: * height:
@ -716,19 +715,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
} }
/* header for the dayCol /* header for the dayCol
*/ */
.calendar_calDayColHeader,
.calendar_calGridHeader {
border-bottom: 1px solid silver;
border-right: 1px solid silver;
}
.calendar_calDayColHeader a img, .calendar_calDayColHeader a img,
.calendar_calGridHeader a img { .calendar_calGridHeader a img {
position: relative; position: relative;
top: 0px; top: 0px;
} }
.calendar_calGridHeader {
border: none;
}
/*header for the weekCol*/ /*header for the weekCol*/
.calendar_calWeekNavHeader, .calendar_calWeekNavHeader,
.calendar_calMonthNavHeader { .calendar_calMonthNavHeader {

View File

@ -802,7 +802,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* timeGridWidget, contains timeRow's and dayCol's /* timeGridWidget, contains timeRow's and dayCol's
*/ */
.calendar_calTimeGrid{ .calendar_calTimeGrid{
border:1px solid silver;
.background_color_10_gray; .background_color_10_gray;
/* set via inline style on runtime: /* set via inline style on runtime:
* height: * height:
@ -832,9 +831,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* header for the dayCol /* header for the dayCol
*/ */
.calendar_calDayColHeader,.calendar_calGridHeader{ .calendar_calDayColHeader,.calendar_calGridHeader{
border-bottom: 1px solid silver;
border-right: 1px solid silver;
a { a {
img { img {
position: relative; position: relative;
@ -844,9 +840,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
} }
.calendar_calGridHeader{ border: none; }
/*header for the weekCol*/ /*header for the weekCol*/
.calendar_calWeekNavHeader,.calendar_calMonthNavHeader{ .calendar_calWeekNavHeader,.calendar_calMonthNavHeader{