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

Limit all day section to 3 lines with ellipsis, show all on hover.

Browse Source
This commit is contained in:
Nathan Gray 2016-02-04 22:35:34 +00:00
parent c4f125a772
commit 4b30283558
4 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
calendar/js/et2_widget_daycol.js
View File

@ -532,6 +532,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
this.header.children('.hiddenEventBefore').remove();
this.div.children('.hiddenEventAfter').remove();
this.event_wrapper.css('overflow','visible');
this.all_day.removeClass('overflown');
$j('.calendar_calEventBody', this.div).css('padding-top','');
var timegrid = this._parent;
@ -567,6 +569,11 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
return;
}
}
// Check all day overflow
this.all_day.toggleClass('overflown',
this.all_day[0].scrollHeight - this.all_day.height() > 5
);
// Check each event
this.iterateOver(function(event) {
// Skip whole day events and events missing value
@ -576,7 +583,6 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
{
return;
}
// Reset
event.title.css({'top':'','background-color':''});
event.body.css('padding-top','');

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

@ -402,8 +402,30 @@ Hide subsequent headers in week view with non-consolidated owners
flex-direction: row;
align-items:flex-start;
width: 100%;
}
/* Set max height of all day section */
max-height: 4.2em;
overflow: hidden;
}
/* If more all day events than shown, show ellipsis & show all on hover */
.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:hover {
max-height: none;
overflow: visible;
position: absolute;
background-color: #f0f0f0;
z-index: 50;
padding-bottom: 2ex;
}
.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:not(:hover)::after {
content: "\02026";
line-height: 0.5em;
height: 1em;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
}
.calendar_calDayColAllDay > .calendar_calEventBodySmall {
white-space: nowrap;
}

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

@ -11,7 +11,7 @@
* @package calendar
* @version $Id$
*/
/* $Id: app.css 54911 2016-02-03 16:52:28Z nathangray $ */
/* $Id: app.css 54926 2016-02-04 21:05:31Z nathangray $ */
/*Media print classes*/
@media print {
.th td,
@ -412,6 +412,28 @@ Hide subsequent headers in week view with non-consolidated owners
flex-direction: row;
align-items: flex-start;
width: 100%;
/* Set max height of all day section */
max-height: 4.2em;
overflow: hidden;
}
/* If more all day events than shown, show ellipsis & show all on hover */
.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:hover {
max-height: none;
overflow: visible;
position: absolute;
background-color: #f0f0f0;
z-index: 50;
padding-bottom: 2ex;
}
.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:not(:hover)::after {
content: "\02026";
line-height: 0.5em;
height: 1em;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
}
.calendar_calDayColAllDay > .calendar_calEventBodySmall {
white-space: nowrap;
@ -1888,7 +1910,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* timeGridWidget, contains timeRow's and dayCol's
*/
.calendar_calTimeGrid {
background-color: #f0f0f0;
/* set via inline style on runtime:
* height:
*/
@ -1973,6 +1994,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
}
/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
*/
.calendar_calGridHeader {
background-color: #f0f0f0;
}
/* contains one event: header-row & -body
*/
.calendar_calEvent {
@ -2049,15 +2073,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
.calendar_calEventHeaderSmall .calendar_calEventIcons img {
height: 13px;
}
.calendar_calTimeGridList .calendar_calEventBody {
background: #f0f0f0 !important;
}
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before {
background: #f0f0f0;
}
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover {
background: #f0f0f0;
}
/* table of the dayView containing 2 cols: 1) day-view, 2) todos
*/
.calendar_calDayView {

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

@ -796,7 +796,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* timeGridWidget, contains timeRow's and dayCol's
*/
.calendar_calTimeGrid{
.background_color_10_gray;
/* set via inline style on runtime:
* height:
*/
@ -898,6 +897,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
*/
.calendar_calGridHeader{
.background_color_10_gray;
}
/* contains one event: header-row & -body
@ -983,13 +983,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
.calendar_calTimeGridList .calendar_calEventBody {
background: #f0f0f0 !important;
}
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before {
background : #f0f0f0;
}
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover {
background: #f0f0f0;
}
/* table of the dayView containing 2 cols: 1) day-view, 2) todos