Author: nathangray
New Revision: 54904
URL: http://svn.stylite.de/viewvc/egroupware?rev=54904&view=rev
Log:
Multi-line ellipsis on event bodies that are longer than their space can show
Modified:
trunk/calendar/js/et2_widget_daycol.js
trunk/calendar/js/et2_widget_event.js
trunk/calendar/templates/default/app.css
trunk/calendar/templates/pixelegg/app.css
— trunk/calendar/js/et2_widget_daycol.js (original)
+++ trunk/calendar/js/et2_widget_daycol.js Tue Feb 2 22:12:44 2016
@@ -76,6 +76,7 @@
.addClass(“calendar_calDayColAllDay”)
.appendTo(this.header);
this.event_wrapper = $j(document.createElement(‘div’))
— trunk/calendar/js/et2_widget_event.js (original)
+++ trunk/calendar/js/et2_widget_event.js Tue Feb 2 22:12:44 2016
@@ -343,8 +343,12 @@
this.body
.html('<span class="calendar_calEventTitle">'+title+'</span>')
-
.append('<span class="calendar_calTimespan">'+start_time + '</span>');
-
if(this.options.value.description.trim())
-
{
-
this.body
-
.append('<p>'+this.options.value.description+'</p>');
-
}
}
},
@@ -358,19 +362,34 @@
* > 4 - Show description as well, truncated to fit
*/
_small_size: function() {
-
// Pre-calculation reset
this.div.removeClass('calendar_calEventSmall');
-
this.body.css('height', 'auto');
-
if(this.options.value.whole_day_on_top) return;
-
var line_height = parseFloat(this.div.css('line-height'));
-
var visible_lines = Math.floor(this.div.innerHeight() / line_height);
if(!this.title.height())
{
// Handle sizing while hidden, such as when calendar is not the active tab
visible_lines = Math.floor(egw.getHiddenDimensions(this.div).h / egw.getHiddenDimensions(this.title).h);
}
-
visible_lines = Math.max(1,visible_lines);
this.div.toggleClass('calendar_calEventSmall',visible_lines < 4);
this.div
-
.attr('data-visible_lines', visible_lines);
-
-
-
if(this.body.height() > this.div.height() - this.title.height() && visible_lines >= 4)
-
{
-
this.body.css('height', Math.floor((visible_lines-1)*line_height - this.title.height()) + 'px');
-
}
-
else
-
{
-
this.body.css('height', '');
-
}
},
/**
— trunk/calendar/templates/default/app.css (original)
+++ trunk/calendar/templates/default/app.css Tue Feb 2 22:12:44 2016
@@ -556,6 +556,20 @@
cursor: pointer;
}
+/** Multi-line ellipsis */
+.calendar_calEvent .calendar_calEventBody {
- overflow: hidden;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) *:not(.calendar_calDayColAllDay) > .calendar_calEvent::after {
- width: 100%;
- background-color: rgba(255,255,255,0.9);
- height: 0.9em;
- content: “\02026”;
- left: 0px;
- float: right;
- padding-bottom: 5em;
- text-indent: 5px;
+}
/**
- User has not accepted the invitation
*/
@@ -725,7 +739,7 @@
}
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
.calendar_calEventSmall .calendar_calEventBody {
/* Events as displayed in a list, not sized by time */
@@ -745,7 +759,7 @@
.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
border: none;
}
-.calendar_calTimeGridList .calendar_calDayCol > div:first-child
+.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper
{
position: absolute;
top: 0px;
— trunk/calendar/templates/pixelegg/app.css (original)
+++ trunk/calendar/templates/pixelegg/app.css Tue Feb 2 22:12:44 2016
@@ -11,7 +11,7 @@
-
@package calendar
-
@version $Id$
/
-/ $Id: app.css 54876 2016-01-28 22:08:15Z nathangray $ /
+/ $Id: app.css 54896 2016-02-02 09:19:31Z ralfbecker $ /
/Media print classes/
@media print {
.th td,
@@ -559,6 +559,20 @@
.calendar_calEvent:hover {
cursor: pointer;
}
+/* Multi-line ellipsis */
+.calendar_calEvent .calendar_calEventBody {
- overflow: hidden;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) *:not(.calendar_calDayColAllDay) > .calendar_calEvent::after {
- width: 100%;
- background-color: rgba(255, 255, 255, 0.9);
- height: 0.9em;
- content: “\02026”;
- left: 0px;
- float: right;
- padding-bottom: 5em;
- text-indent: 5px;
+}
/**
- User has not accepted the invitation
*/
@@ -713,7 +727,7 @@
display: inline;
}
.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall .calendar_calEventBody {
- padding-top: 4em;
}
/* Events as displayed in a list, not sized by time */
.calendar_calTimeGridList .calendar_calTimeGridScroll {
@@ -732,7 +746,7 @@
.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
border: none;
}
-.calendar_calTimeGridList .calendar_calDayCol > div:first-child {
+.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper {
position: absolute;
top: 0px;
bottom: 3em;
Site24x7 APM Insight: Get Deep Visibility into Application Performance
APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month
Monitor end-to-end web transactions and take corrective actions now
Troubleshoot faster and improve end-user experience. Signup Now!
http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140
eGroupWare-cvs mailing list
eGroupWare-cvs@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-cvs
