From 35f08f39b5b062e5f9f1c9f977eea3a0acf09be6 Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Wed, 28 Oct 2015 15:55:10 +0000 Subject: [PATCH] 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 --- calendar/js/app.js | 8 +++-- calendar/js/et2_widget_daycol.js | 12 ++++--- calendar/js/et2_widget_timegrid.js | 30 +++++++--------- calendar/templates/default/app.css | 51 +++++++++++++++------------- calendar/templates/pixelegg/app.css | 9 ----- calendar/templates/pixelegg/app.less | 7 ---- 6 files changed, 55 insertions(+), 62 deletions(-) diff --git a/calendar/js/app.js b/calendar/js/app.js index 1ba19b16b6..6373db12c0 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -641,7 +641,8 @@ app.classes.calendar = AppJS.extend( return false; } - ) + ); + jQuery(framework.applications.calendar.tab.contentDiv).swipe('destroy') .swipe({ //Generic swipe handler for all directions 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) return false; }, - allowPageScroll: jQuery.fn.swipe.pageScroll.VERTICAL + allowPageScroll: jQuery.fn.swipe.pageScroll.VERTICAL, + threshold: 100, + fallbackToMouseEvents: false, + triggerOnTouchEnd: false }); // Page up & page down diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index 5ea8c8b5a4..4680c93cea 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -72,6 +72,9 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea .css('left', this.options.left); this.title = $j(document.createElement('div')) .appendTo(this.header); + this.all_day = $j(document.createElement('div')) + .addClass("calendar_calDayColAllDay") + .appendTo(this.header); this.setDOMNode(this.div[0]); @@ -320,7 +323,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea if(this.div) { this.div.css('left',left); - this.header.css('left',left); + // Headers are positioned relative + //this.header.css('left',left); } },this),1); @@ -330,8 +334,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea window.setTimeout(jQuery.proxy(function() { if(this.div) { - this.div.width(this.options.width); - this.header.width(this.options.width); + this.div.outerWidth(this.options.width); + this.header.outerWidth(this.options.width); } },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) { columns[c][i].div - .appendTo(this.header); + .appendTo(this.all_day); continue; } else diff --git a/calendar/js/et2_widget_timegrid.js b/calendar/js/et2_widget_timegrid.js index 1135855acf..7e9eb69c5d 100644 --- a/calendar/js/et2_widget_timegrid.js +++ b/calendar/js/et2_widget_timegrid.js @@ -501,25 +501,24 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz var wd_end = 60*this.options.day_end; var granularity = this.options.granularity; var totalDisplayMinutes = wd_end - wd_start; - var rowsToDisplay = (totalDisplayMinutes/granularity) + (60 / granularity); + var rowsToDisplay = (totalDisplayMinutes + 60)/granularity; // Percent var rowHeight = (100/rowsToDisplay).toFixed(1); - // Pixels - add 1 for room for header - this.rowHeight = this.div.height() / (rowsToDisplay + 1); - + // Pixels + this.rowHeight = this.div.height() / rowsToDisplay; +debugger; this.gridHeader .empty() - .css('height', this.rowHeight+'px') .attr('data-date', this.options.start_date) .attr('data-owner', this.options.owner) - .append(this.options.label) + .append(this._labelContainer) .append(this.owner.getDOMNode()) .append(this.dayHeader) .appendTo(this.div); + var header_height = this.gridHeader.height(); this.scrolling - .css('top', this.rowHeight+'px') - .css('height', (this.options.height - this.rowHeight)+'px') + .css('height', (this.options.height - header_height)+'px') .appendTo(this.div) .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); } - - var day_width = (100/this.day_list.length).toFixed(2); + var day_width = ( this.days.width()/this.day_list.length); // Create any needed widgets - otherwise, we'll just recycle // 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',{ owner: this.options.owner, - width: (before ? 0 : day_width) + "%" + width: (before ? 0 : day_width) + "px" },this); if(this.isInTree()) { @@ -638,12 +636,12 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz day = this.day_widgets[i]; // 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_owner(this.options.owner); 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 @@ -1142,10 +1140,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz set_label: function(label) { this.options.label = label; - this.gridHeader.contents().filter(function() { - return (this.nodeType == 3); - }).remove(); - this.gridHeader.append(label); + this._labelContainer.html(label); + this.gridHeader.prepend(this._labelContainer); // 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 diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 13ed91b208..03c41739d9 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -137,7 +137,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget position: relative; top: 0px; left: 0px; - border:1px solid silver; -webkit-touch-callout: none; -webkit-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 { - position: absolute; + position: relative; bottom: 0px; width: 100%; overflow-y: auto; 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 */ @@ -230,36 +222,45 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /* header for the dayCol */ .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%; - white-space: nowrap; - border-bottom: 1px solid silver; - border-right: 1px solid silver; - height: 16px; line-height: 16px; } .calendar_calDayColHeader { + display: inline-block; + position: relative; vertical-align: top; - height: 100%; + border-right: 1px solid silver; + height: initial; + min-height: 4em; /* Nice transition when changing days in a week */ transition: width 1s ease-in-out; z-index:30; + white-space: initial; } .calendar_calDayColHeader > div[data-date] { height: 16px; + text-align: center; + border-bottom: 1px solid silver; +} +.calendar_calDayColAllDay { + display: flex; + flex-wrap: wrap; + width: 100%; + height: 100% } .calendar_calGridHeader > div { - position: absolute; - left: 45px; - right: 15px; + position: relative; + height: 100%; + margin-left: 43px; width: initial; white-space: nowrap; } +.calendar_calGridHeader > label { + float: left; +} +.calendar_TimeGridNoLabel > .calendar_calGridHeader > ul { + display: none; +} .calendar_calDayColHeader img { vertical-align: middle; } @@ -312,6 +313,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget text-align: left; padding-left: 3px; z-index: 29; + border-bottom: 1px solid silver; } #calendar-view_view tbody.ui-sortable { cursor: default; @@ -412,6 +414,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calDayColHeader .calendar_calEvent { position: static; display: inline-block; + white-space: nowrap; + /* This determines how many per line */ + flex: 1 1 6ex; } .calendar_calEventTooltip{ border-radius: 6px; diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index e2ec9b5d8b..ee3b13b206 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -690,7 +690,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /* timeGridWidget, contains timeRow's and dayCol's */ .calendar_calTimeGrid { - border: 1px solid silver; background-color: #f0f0f0; /* set via inline style on runtime: * height: @@ -716,19 +715,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget } /* header for the dayCol */ -.calendar_calDayColHeader, -.calendar_calGridHeader { - border-bottom: 1px solid silver; - border-right: 1px solid silver; -} .calendar_calDayColHeader a img, .calendar_calGridHeader a img { position: relative; top: 0px; } -.calendar_calGridHeader { - border: none; -} /*header for the weekCol*/ .calendar_calWeekNavHeader, .calendar_calMonthNavHeader { diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 92f11210ca..af82847121 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -802,7 +802,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /* timeGridWidget, contains timeRow's and dayCol's */ .calendar_calTimeGrid{ - border:1px solid silver; .background_color_10_gray; /* set via inline style on runtime: * height: @@ -832,9 +831,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /* header for the dayCol */ .calendar_calDayColHeader,.calendar_calGridHeader{ - border-bottom: 1px solid silver; - border-right: 1px solid silver; - a { img { 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*/ .calendar_calWeekNavHeader,.calendar_calMonthNavHeader{