Better tooltips for home link portlets

This commit is contained in:
Nathan Gray 2015-03-04 23:13:36 +00:00
parent a957ac9ea2
commit b8f7113de2
6 changed files with 65 additions and 16 deletions

View File

@ -3,23 +3,21 @@
<!-- $Id$ -->
<overlay>
<template id="addressbook.home.link" template="" lang="" group="0" version="1.9.001">
<grid>
<hbox height="100px">
<image src="image" class="photo"/>
<vbox>
<description id="n_fn" class="addressbook_sidebox_name"/>
<description id="org_name" class="addressbook_sidebox_org"/>
<description id="org_unit"/>
<description id="adr_one_locality"/>
</vbox>
</hbox>
<grid class="tooltip">
<columns>
<column width="70"/>
<column/>
</columns>
<rows>
<row span="all">
<hbox height="100px">
<image src="image" class="photo"/>
<vbox>
<description id="n_fn" class="addressbook_sidebox_name"/>
<description id="org_name" class="addressbook_sidebox_org"/>
<description id="org_unit"/>
<description id="adr_one_locality"/>
</vbox>
</hbox>
</row>
<row>
<description span="2" value="Phone numbers" class="addressbook_sidebox_header"/>
</row>

View File

@ -132,6 +132,14 @@ class home_link_portlet extends home_portlet
{
$content += $record->get_record_array();
}
// Use calendar hover for calendar
if($this->context['entry']['app'] == 'calendar')
{
$cal_ui = new calendar_uiviews();
$ug = $cal_ui->eventWidget($record->get_record_array(), $this->context['width'] * 50,'',0,true);
$content['tooltip'] = htmlspecialchars_decode($ug['tooltip']);
$etemplate->setElementAttribute('tooltip','class', 'tooltip calendar_uitooltip');
}
if($content['image'] == false)
{
$content['image'] = $record->get_icon();

View File

@ -782,6 +782,46 @@ app.classes.home.home_portlet = Class.extend({
});
app.classes.home.home_link_portlet = app.classes.home.home_portlet.extend({
init: function(portlet) {
// call parent
this._super.apply(this, arguments);
// Check for tooltip
if(this.portlet)
{
var content = $j('.tooltip',this.portlet.content);
if(content.length && content.children().length)
{
//Check if the tooltip is already initialized
this.portlet.content.tooltip({
items: this.portlet.content,
content: content.html(),
tooltipClass: 'portlet_' + this.portlet.id,
show: {effect: 'slideDown', delay:500},
hide: {effect: 'slideUp', delay: 500},
position: {my: "left top", at:"left bottom", collision: "flipfit"},
open: jQuery.proxy(function(event, ui) {
// Calendar specific formatting
if(ui.tooltip.has('.calendar_calEventTooltip').length)
{
ui.tooltip.removeClass("ui-tooltip");
ui.tooltip.addClass("calendar_uitooltip");
}
},this),
close: function(event,ui) {
ui.tooltip.hover(
function() {
$j(this).stop(true).fadeTo(100,1);
},
function() {
$j(this).slideUp("400",function() {$j(this).remove();});
}
);
}
});
}
}
},
observer: function(_msg, _app, _id, _type)
{
if(this.portlet)

View File

@ -100,11 +100,7 @@ div.calendar_favorite_portlet.et2_portlet.ui-widget-content > div:last-of-type {
z-index: 90;
}
.et2_portlet.home_link_portlet:hover > div:last-of-type {
bottom: inherit;
top: 1px;
height: auto;
z-index: 10;
border-bottom: inherit;
}
/* Favorite / nextmatch

View File

@ -5,5 +5,11 @@
<template id="home.link" template="" lang="" group="0" version="1.9.001">
<image id="image" src="image"/>
<link id="entry"/>
<!--
It's the tooltip class that does it, id might cause problems so
best to remove it if you're customizing. The actual widget used is
not important.
-->
<html class="tooltip" id="tooltip" disabled="true"/>
</template>
</overlay>

View File

@ -15,3 +15,4 @@
@import (reference) "../default/app.css";