diff --git a/addons/web/__openerp__.py b/addons/web/__openerp__.py index 3767072ff9d..dfa90eb7c3f 100644 --- a/addons/web/__openerp__.py +++ b/addons/web/__openerp__.py @@ -29,7 +29,7 @@ "static/lib/jquery.ui.notify/js/jquery.notify.js", "static/lib/jquery.deferred-queue/jquery.deferred-queue.js", "static/lib/jquery.scrollTo/jquery.scrollTo-min.js", - "static/lib/jquery.tipTip/jquery.tipTip.js", + "static/lib/jquery.tipsy/jquery.tipsy.js", "static/lib/json/json2.js", "static/lib/qweb/qweb2.js", "static/lib/underscore/underscore.js", @@ -57,7 +57,7 @@ "static/lib/jquery.superfish/css/superfish.css", "static/lib/jquery.ui/css/smoothness/jquery-ui-1.8.9.custom.css", "static/lib/jquery.ui.notify/css/ui.notify.css", - "static/lib/jquery.tipTip/tipTip.css", + "static/lib/jquery.tipsy/tipsy.css", "static/src/css/base.css", "static/src/css/data_export.css", "static/src/css/data_import.css", diff --git a/addons/web/static/lib/jquery.tipTip/jquery.tipTip.js b/addons/web/static/lib/jquery.tipTip/jquery.tipTip.js deleted file mode 100644 index ff8cc1b0ba6..00000000000 --- a/addons/web/static/lib/jquery.tipTip/jquery.tipTip.js +++ /dev/null @@ -1,325 +0,0 @@ -/* -* TipTip -* Copyright 2010 Drew Wilson -* www.drewwilson.com -* code.drewwilson.com/entry/tiptip-jquery-plugin -* -* Version 1.3 - Updated: Mar. 23, 2010 -* -* This Plug-In will create a custom tooltip to replace the default -* browser tooltip. It is extremely lightweight and very smart in -* that it detects the edges of the browser window and will make sure -* the tooltip stays within the current window size. As a result the -* tooltip will adjust itself to be displayed above, below, to the left -* or to the right depending on what is necessary to stay within the -* browser window. It is completely customizable as well via CSS. -* -* This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses: -* http://www.opensource.org/licenses/mit-license.php -* http://www.gnu.org/licenses/gpl.html -*/ - -(function ($) { - $.fn.tipTip = function (options) { - - var defaults = { - activation: 'hover', // How to show (and hide) the tooltip. Can be: hover, focus, click and manual. - keepAlive: false, // When true the tooltip won't disapper when the mouse moves away from the element. Instead it will be hidden when it leaves the tooltip. - maxWidth: '200px', // The max-width to set on the tooltip. You may also use the option cssClass to set this. - edgeOffset: 0, // The offset between the tooltip arrow edge and the element that has the tooltip. - defaultPosition: 'bottom', // The position of the tooltip. Can be: top, right, bottom and left. - delay: 400, // The delay in msec to show a tooltip. - fadeIn: 200, // The length in msec of the fade in. - fadeOut: 200, // The length in msec of the fade out. - attribute: 'title', // The attribute to fetch the tooltip text if the option content is false. - content: false, // HTML or String or Function (that returns HTML or String) to fill TipTIp with - enter: function () { }, // Callback function before a tooltip is shown. - afterEnter: function () { }, // Callback function after a tooltip is shown. - exit: function () { }, // Callback function before a tooltip is hidden. - afterExit: function () { }, // Callback function after a tooltip is hidden. - cssClass: '', // CSS class that will be applied on the tooltip before showing only for this instance of tooltip. - detectTextDir: true // When false auto-detection for right-to-left text will be disable (When true affects a bit the performance). - }; - - // Setup tip tip elements and render them to the DOM - if ($('#tiptip_holder').length <= 0) { - var tiptip_inner_arrow = $('
', { id: 'tiptip_arrow_inner' }), - tiptip_arrow = $('
', { id: 'tiptip_arrow' }).append(tiptip_inner_arrow), - tiptip_content = $('
', { id: 'tiptip_content' }), - tiptip_holder = $('
', { id: 'tiptip_holder' }).append(tiptip_arrow).append(tiptip_content); - $('body').append(tiptip_holder); - } else { - var tiptip_holder = $('#tiptip_holder'), - tiptip_content = $('#tiptip_content'), - tiptip_arrow = $('#tiptip_arrow'); - } - - return this.each(function () { - var org_elem = $(this), - data = org_elem.data('tipTip'), - opts = data && data.options || $.extend({}, defaults, options), - callback_data = { - holder: tiptip_holder, - content: tiptip_content, - arrow: tiptip_arrow, - options: opts - }; - - if (data) { - switch (options) { - case 'show': - activate(); - break; - case 'hide': - deactivate(); - break; - case 'destroy': - org_elem.unbind('.tipTip').removeData('tipTip'); - break; - case 'position': - position_tiptip(); - } - } else { - var timeout = false; - - org_elem.data('tipTip', { options: opts }); - - if (opts.activation == 'hover') { - org_elem.bind('mouseenter.tipTip', function () { - activate(); - }).bind('mouseleave.tipTip', function () { - if (!opts.keepAlive) { - deactivate(); - } else { - tiptip_holder.one('mouseleave.tipTip', function () { - deactivate(); - }); - } - }); - } else if (opts.activation == 'focus') { - org_elem.bind('focus.tipTip', function () { - activate(); - }).bind('blur.tipTip', function () { - deactivate(); - }); - } else if (opts.activation == 'click') { - org_elem.bind('click.tipTip', function (e) { - e.preventDefault(); - activate(); - return false; - }).bind('mouseleave.tipTip', function () { - if (!opts.keepAlive) { - deactivate(); - } else { - tiptip_holder.one('mouseleave.tipTip', function () { - deactivate(); - }); - } - }); - } else if (opts.activation == 'manual') { - // Nothing to register actually. We decide when to show or hide. - } - } - - function activate() { - if (opts.enter.call(org_elem, callback_data) === false) { - return; - } - - // Get the text and append it in the tiptip_content. - var org_title; - if (opts.content) { - org_title = $.isFunction(opts.content) ? opts.content.call(org_elem, callback_data) : opts.content; - } else { - org_title = opts.content = org_elem.attr(opts.attribute); - org_elem.removeAttr(opts.attribute); //remove original Attribute - } - if (!org_title) { - return; // don't show tip when no content. - } - - tiptip_content.html(org_title); - tiptip_holder.hide().removeAttr('class').css({ 'max-width': opts.maxWidth }); - if (opts.cssClass) { - tiptip_holder.addClass(opts.cssClass); - } - - // Calculate the position of the tooltip. - position_tiptip(); - - // Show the tooltip. - if (timeout) { - clearTimeout(timeout); - } - - timeout = setTimeout(function () { - tiptip_holder.stop(true, true).fadeIn(opts.fadeIn); - }, opts.delay); - - $(window).bind('resize.tipTip scroll.tipTip', position_tiptip); - - // Ensure clicking on anything makes tipTip deactivate - $(document).unbind("click.tipTip dblclick.tipTip").bind("click.tiptip dblclick.tiptip", deactivate); - - - org_elem.addClass('tiptip_visible'); // Add marker class to easily find the target element with visible tooltip. It will be remove later on deactivate(). - - opts.afterEnter.call(org_elem, callback_data); - } - - function deactivate() { - if (opts.exit.call(org_elem, callback_data) === false) { - return; - } - - if (timeout) { - clearTimeout(timeout); - } - - tiptip_holder.fadeOut(opts.fadeOut); - - $(window).unbind('resize.tipTip scroll.tipTip'); - $(document).unbind("click.tipTip").unbind("dblclick.tipTip"); - - org_elem.removeClass('tiptip_visible'); - - opts.afterExit.call(org_elem, callback_data); - } - - function position_tiptip() { - var org_offset = org_elem.offset(), - org_top = org_offset.top, - org_left = org_offset.left, - org_width = org_elem.outerWidth(), - org_height = org_elem.outerHeight(), - tip_top, - tip_left, - tip_width = tiptip_holder.outerWidth(), - tip_height = tiptip_holder.outerHeight(), - tip_class, - tip_classes = { top: 'tip_top', bottom: 'tip_bottom', left: 'tip_left', right: 'tip_right' }, - arrow_top, - arrow_left, - arrow_width = 12, // tiptip_arrow.outerHeight() and tiptip_arrow.outerWidth() don't work because they need the element to be visible. - arrow_height = 12, - win = $(window), - win_top = win.scrollTop(), - win_left = win.scrollLeft(), - win_width = win.width(), - win_height = win.height(), - is_rtl = opts.detectTextDir && isRtlText(tiptip_content.text()); - - function moveTop() { - tip_class = tip_classes.top; - tip_top = org_top - tip_height - opts.edgeOffset - (arrow_height / 2); - tip_left = org_left + ((org_width - tip_width) / 2); - } - - function moveBottom() { - tip_class = tip_classes.bottom; - tip_top = org_top + org_height + opts.edgeOffset + (arrow_height / 2); - tip_left = org_left + ((org_width - tip_width) / 2); - } - - function moveLeft() { - tip_class = tip_classes.left; - tip_top = org_top + ((org_height - tip_height) / 2); - tip_left = org_left - tip_width - opts.edgeOffset - (arrow_width / 2); - } - - function moveRight() { - tip_class = tip_classes.right; - tip_top = org_top + ((org_height - tip_height) / 2); - tip_left = org_left + org_width + opts.edgeOffset + (arrow_width / 2); - } - - // Calculate the position of the tooltip. - if (opts.defaultPosition == 'bottom') { - moveBottom(); - } else if (opts.defaultPosition == 'top') { - moveTop(); - } else if (opts.defaultPosition == 'left' && !is_rtl) { - moveLeft(); - } else if (opts.defaultPosition == 'left' && is_rtl) { - moveRight(); - } else if (opts.defaultPosition == 'right' && !is_rtl) { - moveRight(); - } else if (opts.defaultPosition == 'right' && is_rtl) { - moveLeft(); - } else { - moveBottom(); - } - - // Flip the tooltip if off the window's viewport. (left <-> right and top <-> bottom). - if (tip_class == tip_classes.left && !is_rtl && tip_left < win_left) { - moveRight(); - } else if (tip_class == tip_classes.left && is_rtl && tip_left - tip_width < win_left) { - moveRight(); - } else if (tip_class == tip_classes.right && !is_rtl && tip_left > win_left + win_width) { - moveLeft(); - } else if (tip_class == tip_classes.right && is_rtl && tip_left + tip_width > win_left + win_width) { - moveLeft(); - } else if (tip_class == tip_classes.top && tip_top < win_top) { - moveBottom(); - } else if (tip_class == tip_classes.bottom && tip_top > win_top + win_height) { - moveTop(); - } - - // Fix the vertical position if the tooltip is off the top or bottom sides of the window's viewport. - if (tip_class == tip_classes.left || tip_class == tip_classes.right) { // If positioned left or right check if the tooltip is off the top or bottom window's viewport. - if (tip_top + tip_height > win_height + win_top) { // If the bottom edge of the tooltip is off the bottom side of the window's viewport. - tip_top = org_top + org_height > win_height + win_top ? org_top + org_height - tip_height : win_height + win_top - tip_height; // Make 'bottom edge of the tooltip' == 'bottom side of the window's viewport'. - } else if (tip_top < win_top) { // If the top edge of the tooltip if off the top side of the window's viewport. - tip_top = org_top < win_top ? org_top : win_top; // Make 'top edge of the tooltip' == 'top side of the window's viewport'. - } - } - - // Fix the horizontal position if the tooltip is off the right or left sides of the window's viewport. - if (tip_class == tip_classes.top || tip_class == tip_classes.bottom) { - if (tip_left + tip_width > win_width + win_left) { // If the right edge of the tooltip is off the right side of the window's viewport. - tip_left = org_left + org_width > win_width + win_left ? org_left + org_width - tip_width : win_width + win_left - tip_width; // Make 'right edge of the tooltip' == 'right side of the window's viewport'. - } else if (tip_left < win_left) { // If the left edge of the tooltip if off the left side of the window's viewport. - tip_left = org_left < win_left ? org_left : win_left; // Make 'left edge of the tooltip' == 'left side of the window's viewport'. - } - } - - // Apply the new position. - tiptip_holder - .css({ left: Math.round(tip_left), top: Math.round(tip_top) }) - .removeClass(tip_classes.top) - .removeClass(tip_classes.bottom) - .removeClass(tip_classes.left) - .removeClass(tip_classes.right) - .addClass(tip_class); - - // Position the arrow - if (tip_class == tip_classes.top) { - arrow_top = tip_height; // Position the arrow vertically on the top of the tooltip. - arrow_left = org_left - tip_left + ((org_width - arrow_width) / 2); // Center the arrow horizontally on the center of the target element. - } else if (tip_class == tip_classes.bottom) { - arrow_top = -arrow_height; // Position the arrow vertically on the bottom of the tooltip. - arrow_left = org_left - tip_left + ((org_width - arrow_width) / 2); // Center the arrow horizontally on the center of the target element. - } else if (tip_class == tip_classes.left) { - arrow_top = org_top - tip_top + ((org_height - arrow_height) / 2); // Center the arrow vertically on the center of the target element. - arrow_left = tip_width; // Position the arrow vertically on the left of the tooltip. - } else if (tip_class == tip_classes.right) { - arrow_top = org_top - tip_top + ((org_height - arrow_height) / 2); // Center the arrow vertically on the center of the target element. - arrow_left = -arrow_width; // Position the arrow vertically on the right of the tooltip. - } - - tiptip_arrow - .css({ left: Math.round(arrow_left), top: Math.round(arrow_top) }); - } - }); - } - - var ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF', - rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC', - rtlDirCheckRe = new RegExp('^[^' + ltrChars + ']*[' + rtlChars + ']'); - - function isRtlText(text) { - return rtlDirCheckRe.test(text); - }; - -})(jQuery); - diff --git a/addons/web/static/lib/jquery.tipTip/tipTip.css b/addons/web/static/lib/jquery.tipTip/tipTip.css deleted file mode 100644 index dc41b650615..00000000000 --- a/addons/web/static/lib/jquery.tipTip/tipTip.css +++ /dev/null @@ -1,134 +0,0 @@ -/* TipTip CSS - Version 1.2 */ - -#tiptip_holder { - display: none; - position: absolute; - top: 0; - left: 0; - z-index: 99999; -} - -#tiptip_holder.tip_top { - padding-bottom: 5px; -} - -#tiptip_holder.tip_bottom { - padding-bottom: 5px; -} - -#tiptip_holder.tip_right { - padding-right: 5px; -} - -#tiptip_holder.tip_left { - padding-left: 5px; -} - -#tiptip_content { - font-size: 11px; - color: #fff; - text-shadow: 0 0 2px #000; - padding: 4px 8px; - border: 1px solid rgba(255,255,255,0.25); - background-color: rgb(25,25,25); - background-color: rgba(25,25,25,0.92); - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); - border-radius: 3px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - box-shadow: 0 0 3px #555; - -webkit-box-shadow: 0 0 3px #555; - -moz-box-shadow: 0 0 3px #555; -} - -#tiptip_arrow, #tiptip_arrow_inner { - position: absolute; - border-color: transparent; - border-style: solid; - border-width: 6px; - height: 0; - width: 0; -} - -#tiptip_holder.tip_top #tiptip_arrow { - border-top-color: #fff; - border-top-color: rgba(255,255,255,0.35); -} - -#tiptip_holder.tip_bottom #tiptip_arrow { - border-bottom-color: #fff; - border-bottom-color: rgba(255,255,255,0.35); -} - -#tiptip_holder.tip_right #tiptip_arrow { - border-right-color: #fff; - border-right-color: rgba(255,255,255,0.35); -} - -#tiptip_holder.tip_left #tiptip_arrow { - border-left-color: #fff; - border-left-color: rgba(255,255,255,0.35); -} - -#tiptip_holder.tip_top #tiptip_arrow_inner { - margin-top: -7px; - margin-left: -6px; - border-top-color: rgb(25,25,25); - border-top-color: rgba(25,25,25,0.92); -} - -#tiptip_holder.tip_bottom #tiptip_arrow_inner { - margin-top: -5px; - margin-left: -6px; - border-bottom-color: rgb(25,25,25); - border-bottom-color: rgba(25,25,25,0.92); -} - -#tiptip_holder.tip_right #tiptip_arrow_inner { - margin-top: -6px; - margin-left: -5px; - border-right-color: rgb(25,25,25); - border-right-color: rgba(25,25,25,0.92); -} - -#tiptip_holder.tip_left #tiptip_arrow_inner { - margin-top: -6px; - margin-left: -7px; - border-left-color: rgb(25,25,25); - border-left-color: rgba(25,25,25,0.92); -} - -/* Webkit Hacks */ -@media screen and (-webkit-min-device-pixel-ratio:0) { - #tiptip_content { - padding: 4px 8px 5px 8px; - background-color: rgba(45,45,45,0.88); - } - #tiptip_holder.tip_bottom #tiptip_arrow_inner { - border-bottom-color: rgba(45,45,45,0.88); - } - #tiptip_holder.tip_top #tiptip_arrow_inner { - border-top-color: rgba(20,20,20,0.92); - } -} - -/* Alternative theme for TipTip */ -#tiptip_holder.alt.tip_top #tiptip_arrow_inner { - border-top-color: #444444; -} - -#tiptip_holder.alt.tip_bottom #tiptip_arrow_inner { - border-bottom-color: #444444; -} - -#tiptip_holder.alt.tip_right #tiptip_arrow_inner { - border-right-color: #444444; -} - -#tiptip_holder.alt.tip_left #tiptip_arrow_inner { - border-left-color: #444444; -} - -#tiptip_holder.alt #tiptip_content { - background-color: #444444; border: 1px solid White; border-radius: 3px; box-shadow: 0 0 3px #555555; color: #FFFFFF; font-size: 11px; padding: 4px 8px; text-shadow: 0 0 1px Black; -} \ No newline at end of file diff --git a/addons/web/static/lib/jquery.tipsy/jquery.tipsy.js b/addons/web/static/lib/jquery.tipsy/jquery.tipsy.js new file mode 100644 index 00000000000..9567ed3bacc --- /dev/null +++ b/addons/web/static/lib/jquery.tipsy/jquery.tipsy.js @@ -0,0 +1,241 @@ +// tipsy, facebook style tooltips for jquery +// version 1.0.0a +// (c) 2008-2010 jason frame [jason@onehackoranother.com] +// released under the MIT license + +(function($) { + + function maybeCall(thing, ctx) { + return (typeof thing == 'function') ? (thing.call(ctx)) : thing; + }; + + function Tipsy(element, options) { + this.$element = $(element); + this.options = options; + this.enabled = true; + this.fixTitle(); + }; + + Tipsy.prototype = { + show: function() { + var title = this.getTitle(); + if (title && this.enabled) { + var $tip = this.tip(); + + $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title); + $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity + $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body); + + var pos = $.extend({}, this.$element.offset(), { + width: this.$element[0].offsetWidth, + height: this.$element[0].offsetHeight + }); + + var actualWidth = $tip[0].offsetWidth, + actualHeight = $tip[0].offsetHeight, + gravity = maybeCall(this.options.gravity, this.$element[0]); + + var tp; + switch (gravity.charAt(0)) { + case 'n': + tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; + break; + case 's': + tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; + break; + case 'e': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}; + break; + case 'w': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}; + break; + } + + if (gravity.length == 2) { + if (gravity.charAt(1) == 'w') { + tp.left = pos.left + pos.width / 2 - 15; + } else { + tp.left = pos.left + pos.width / 2 - actualWidth + 15; + } + } + + $tip.css(tp).addClass('tipsy-' + gravity); + $tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0); + if (this.options.className) { + $tip.addClass(maybeCall(this.options.className, this.$element[0])); + } + + if (this.options.fade) { + $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity}); + } else { + $tip.css({visibility: 'visible', opacity: this.options.opacity}); + } + } + }, + + hide: function() { + if (this.options.fade) { + this.tip().stop().fadeOut(function() { $(this).remove(); }); + } else { + this.tip().remove(); + } + }, + + fixTitle: function() { + var $e = this.$element; + if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') { + $e.attr('original-title', $e.attr('title') || '').removeAttr('title'); + } + }, + + getTitle: function() { + var title, $e = this.$element, o = this.options; + this.fixTitle(); + var title, o = this.options; + if (typeof o.title == 'string') { + title = $e.attr(o.title == 'title' ? 'original-title' : o.title); + } else if (typeof o.title == 'function') { + title = o.title.call($e[0]); + } + title = ('' + title).replace(/(^\s*|\s*$)/, ""); + return title || o.fallback; + }, + + tip: function() { + if (!this.$tip) { + this.$tip = $('
').html('
'); + } + return this.$tip; + }, + + validate: function() { + if (!this.$element[0].parentNode) { + this.hide(); + this.$element = null; + this.options = null; + } + }, + + enable: function() { this.enabled = true; }, + disable: function() { this.enabled = false; }, + toggleEnabled: function() { this.enabled = !this.enabled; } + }; + + $.fn.tipsy = function(options) { + + if (options === true) { + return this.data('tipsy'); + } else if (typeof options == 'string') { + var tipsy = this.data('tipsy'); + if (tipsy) tipsy[options](); + return this; + } + + options = $.extend({}, $.fn.tipsy.defaults, options); + + function get(ele) { + var tipsy = $.data(ele, 'tipsy'); + if (!tipsy) { + tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options)); + $.data(ele, 'tipsy', tipsy); + } + return tipsy; + } + + function enter() { + var tipsy = get(this); + tipsy.hoverState = 'in'; + if (options.delayIn == 0) { + tipsy.show(); + } else { + tipsy.fixTitle(); + setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn); + } + }; + + function leave() { + var tipsy = get(this); + tipsy.hoverState = 'out'; + if (options.delayOut == 0) { + tipsy.hide(); + } else { + setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut); + } + }; + + if (!options.live) this.each(function() { get(this); }); + + if (options.trigger != 'manual') { + var binder = options.live ? 'live' : 'bind', + eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus', + eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'; + this[binder](eventIn, enter)[binder](eventOut, leave); + } + + return this; + + }; + + $.fn.tipsy.defaults = { + className: null, + delayIn: 0, + delayOut: 0, + fade: false, + fallback: '', + gravity: 'n', + html: false, + live: false, + offset: 0, + opacity: 0.8, + title: 'title', + trigger: 'hover' + }; + + // Overwrite this method to provide options on a per-element basis. + // For example, you could store the gravity in a 'tipsy-gravity' attribute: + // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); + // (remember - do not modify 'options' in place!) + $.fn.tipsy.elementOptions = function(ele, options) { + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; + }; + + $.fn.tipsy.autoNS = function() { + return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; + }; + + $.fn.tipsy.autoWE = function() { + return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w'; + }; + + /** + * yields a closure of the supplied parameters, producing a function that takes + * no arguments and is suitable for use as an autogravity function like so: + * + * @param margin (int) - distance from the viewable region edge that an + * element should be before setting its tooltip's gravity to be away + * from that edge. + * @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer + * if there are no viewable region edges effecting the tooltip's + * gravity. It will try to vary from this minimally, for example, + * if 'sw' is preferred and an element is near the right viewable + * region edge, but not the top edge, it will set the gravity for + * that element's tooltip to be 'se', preserving the southern + * component. + */ + $.fn.tipsy.autoBounds = function(margin, prefer) { + return function() { + var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)}, + boundTop = $(document).scrollTop() + margin, + boundLeft = $(document).scrollLeft() + margin, + $this = $(this); + + if ($this.offset().top < boundTop) dir.ns = 'n'; + if ($this.offset().left < boundLeft) dir.ew = 'w'; + if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e'; + if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's'; + + return dir.ns + (dir.ew ? dir.ew : ''); + } + }; + +})(jQuery); diff --git a/addons/web/static/lib/jquery.tipsy/tipsy.css b/addons/web/static/lib/jquery.tipsy/tipsy.css new file mode 100644 index 00000000000..1e32ff3083b --- /dev/null +++ b/addons/web/static/lib/jquery.tipsy/tipsy.css @@ -0,0 +1,25 @@ +.tipsy { font-size: 90%; position: absolute; padding: 5px; z-index: 100000; } + .tipsy-inner { background-color: #000; color: #FFF; max-width: 500px; padding: 5px 8px 4px 8px; } + + /* Rounded corners */ + .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } + + /* Uncomment for shadow */ + .tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; } + + .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; } + + /* Rules to colour arrows */ + .tipsy-arrow-n { border-bottom-color: #000; } + .tipsy-arrow-s { border-top-color: #000; } + .tipsy-arrow-e { border-left-color: #000; } + .tipsy-arrow-w { border-right-color: #000; } + + .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } + .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} + .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} + .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } + .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } + .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } + .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } + .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js index 9bec955c3d9..6ceb91973a6 100644 --- a/addons/web/static/src/js/view_form.js +++ b/addons/web/static/src/js/view_form.js @@ -798,17 +798,13 @@ openerp.web.form.Widget = openerp.web.OldWidget.extend(/** @lends openerp.web.fo return QWeb.render(template, { "widget": this }); }, do_attach_tooltip: function(widget, trigger, options) { - if ($.browser.mozilla) { - // Unknown bug in old version of firefox : - // input type=text onchange event not fired when tootip is shown - return; - } widget = widget || this; trigger = trigger || this.$element; options = _.extend({ - delay: 1000, - maxWidth: '500px', - content: function() { + delayIn: 500, + delayOut: 0, + fade: true, + title: function() { var template = widget.template + '.tooltip'; if (!QWeb.has_template(template)) { template = 'WidgetLabel.tooltip'; @@ -816,10 +812,13 @@ openerp.web.form.Widget = openerp.web.OldWidget.extend(/** @lends openerp.web.fo return QWeb.render(template, { debug: openerp.connection.debug, widget: widget - }); - } + })}, + gravity: $.fn.tipsy.autoNS, + html: true, + opacity: 0.85, + trigger: 'hover' }, options || {}); - trigger.tipTip(options); + trigger.tipsy(options); }, _build_view_fields_values: function(blacklist) { var a_dataset = this.view.dataset; @@ -998,7 +997,7 @@ openerp.web.form.WidgetNotebook = openerp.web.form.Widget.extend({ this.view.on_button_new.add_first(this.do_select_first_visible_tab); if (openerp.connection.debug) { this.do_attach_tooltip(this, this.$element.find('ul:first'), { - defaultPosition: 'top' + gravity: 's' }); } }, @@ -1218,9 +1217,7 @@ openerp.web.form.Field = openerp.web.form.Widget.extend(/** @lends openerp.web.f this.$element.find('.oe_field_translate').click(this.on_translate); } if (this.nolabel && openerp.connection.debug) { - this.do_attach_tooltip(this, this.$element, { - defaultPosition: 'top' - }); + this.do_attach_tooltip(this, this.$element); } }, set_value: function(value) { diff --git a/addons/web_kanban/static/src/js/kanban.js b/addons/web_kanban/static/src/js/kanban.js index 5afb04c00f8..7155a1e0cb9 100644 --- a/addons/web_kanban/static/src/js/kanban.js +++ b/addons/web_kanban/static/src/js/kanban.js @@ -414,16 +414,21 @@ openerp.web_kanban.KanbanRecord = openerp.web.OldWidget.extend({ self.state.folded = !self.state.folded; }); - this.$element.find('[tooltip]').tipTip({ - maxWidth: 500, - defaultPosition: 'top', - content: function() { + this.$element.find('[tooltip]').tipsy({ + delayIn: 500, + delayOut: 0, + fade: true, + title: function() { var template = $(this).attr('tooltip'); if (!self.view.qweb.has_template(template)) { return false; } return self.view.qweb.render(template, self.qweb_context); - } + }, + gravity: 's', + html: true, + opacity: 0.8, + trigger: 'hover' }); this.$element.find('.oe_kanban_action').click(function() {