diff --git a/addons/web/__openerp__.py b/addons/web/__openerp__.py index 2855441bf6b..5941a6aa5b0 100644 --- a/addons/web/__openerp__.py +++ b/addons/web/__openerp__.py @@ -35,7 +35,6 @@ This module provides the core of the OpenERP Web Client. "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.tipsy/jquery.tipsy.js", "static/lib/jquery.textext/jquery.textext.js", "static/lib/jquery.timeago/jquery.timeago.js", "static/lib/bootstrap/js/bootstrap.js", @@ -66,7 +65,6 @@ This module provides the core of the OpenERP Web Client. "static/lib/jquery.ui.bootstrap/css/custom-theme/jquery-ui-1.9.0.custom.css", "static/lib/jquery.ui.timepicker/css/jquery-ui-timepicker-addon.css", "static/lib/jquery.ui.notify/css/ui.notify.css", - "static/lib/jquery.tipsy/tipsy.css", "static/lib/jquery.textext/jquery.textext.css", "static/lib/fontawesome/css/font-awesome.css", "static/lib/bootstrap/css/bootstrap.css", diff --git a/addons/web/static/lib/jquery.tipsy/jquery.tipsy.js b/addons/web/static/lib/jquery.tipsy/jquery.tipsy.js deleted file mode 100644 index e978042f21b..00000000000 --- a/addons/web/static/lib/jquery.tipsy/jquery.tipsy.js +++ /dev/null @@ -1,250 +0,0 @@ -// 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() { - $.fn.tipsy.clear(); - if (!this.$element.parent().length) { - return; - } - 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.openerpClass('oe_tooltip'); - $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.clear = function() { - $('div.tipsy').stop().remove(); - } - - $.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 deleted file mode 100644 index 59d0fb97b9e..00000000000 --- a/addons/web/static/lib/jquery.tipsy/tipsy.css +++ /dev/null @@ -1,25 +0,0 @@ -.tipsy { font-size: 90%; position: absolute; padding: 5px; z-index: 100000; overflow: hidden;} - .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/css/base.css b/addons/web/static/src/css/base.css index ace5ef2dbf6..990d0fdfdb2 100644 --- a/addons/web/static/src/css/base.css +++ b/addons/web/static/src/css/base.css @@ -496,40 +496,6 @@ font-style: italic; text-decoration: none; } -.openerp.oe_tooltip { - font-size: 12px; -} -.openerp.oe_tooltip .oe_tooltip_string { - color: #ffdd55; - font-weight: bold; - font-size: 13px; -} -.openerp.oe_tooltip .oe_tooltip_help { - white-space: pre-wrap; -} -.openerp.oe_tooltip .oe_tooltip_technical { - padding: 0 0 4px 0; - margin: 5px 0 0 15px; -} -.openerp.oe_tooltip .oe_tooltip_technical li { - list-style: circle; -} -.openerp.oe_tooltip .oe_tooltip_technical_title { - font-weight: bold; -} -.openerp.oe_tooltip .oe_tooltip_close { - margin: -5px 0 0 2px; - cursor: default; - float: right; - color: white; -} -.openerp.oe_tooltip .oe_tooltip_close:hover { - color: #999999; - cursor: pointer; -} -.openerp.oe_tooltip .oe_tooltip_message { - max-width: 310px; -} .openerp .oe_notebook { margin: 8px 0; padding: 0 16px; @@ -1916,7 +1882,7 @@ .openerp .oe_form > :not(.oe_form_nosheet) header { padding-left: 2px; } -.openerp .oe_form > :not(.oe_form_nosheet) header ul { +.openerp .oe_form > :not(.oe_form_nosheet) header ul:not(.oe_tooltip_technical) { display: inline-block; float: right; } @@ -3323,6 +3289,52 @@ body.oe_single_form .oe_single_form_container { width: 18px; height: 18px; } + +.tooltip { + padding: 0; + margin: 0; + font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; + color: #4c4c4c; + font-size: 12px; + background: white; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); + background-color: transparent; +} +.tooltip .tooltip-inner { + text-align: left !important; + max-width: 350px; +} +.tooltip .tooltip-inner .oe_tooltip_string { + color: #ffdd55; + font-weight: bold; + font-size: 13px; +} +.tooltip .tooltip-inner .oe_tooltip_help { + white-space: pre-wrap; +} +.tooltip .tooltip-inner .oe_tooltip_technical { + padding: 0 0 4px 0; + margin: 5px 0 0 15px; +} +.tooltip .tooltip-inner .oe_tooltip_technical li { + list-style: circle; +} +.tooltip .tooltip-inner .oe_tooltip_technical_title { + font-weight: bold; +} +.tooltip .tooltip-inner .oe_tooltip_close { + margin: -5px 0 0 2px; + cursor: default; + float: right; + color: white; +} +.tooltip .tooltip-inner .oe_tooltip_close:hover { + color: #999999; + cursor: pointer; +} +.tooltip .tooltip-inner .oe_tooltip_message { + max-width: 310px; +} .modal .modal-header button.close { border: none; background: none; diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass index c148d95d7b1..47a4a3984cc 100644 --- a/addons/web/static/src/css/base.sass +++ b/addons/web/static/src/css/base.sass @@ -466,33 +466,6 @@ $sheet-padding: 16px text-decoration: none margin-bottom: 1px // }}} - // Tooltips {{{ - &.oe_tooltip - font-size: 12px - .oe_tooltip_string - color: #FD5 - font-weight: bold - font-size: 13px - .oe_tooltip_help - white-space: pre-wrap - .oe_tooltip_technical - padding: 0 0 4px 0 - margin: 5px 0 0 15px - li - list-style: circle - .oe_tooltip_technical_title - font-weight: bold - .oe_tooltip_close - margin: -5px 0 0 2px - cursor: default - float: right - color: white - &:hover - color: #999 - cursor: pointer - .oe_tooltip_message - max-width: 310px - // }}} // Notebook {{{ .oe_notebook margin: 8px 0 @@ -1571,7 +1544,7 @@ $sheet-padding: 16px // FormView.header {{{ .oe_form > :not(.oe_form_nosheet) header padding-left: 2px - ul + ul:not(.oe_tooltip_technical) display: inline-block float: right .oe_button @@ -2697,6 +2670,44 @@ body.oe_single_form overflow: hidden !important // }}} +// End of customize + +// Customize bootstrap3 for tooltip +.tooltip + padding: 0 + margin: 0 + font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif + color: #4c4c4c + font-size: 12px + background: white + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) + background-color: transparent + .tooltip-inner + text-align: left !important + max-width: 350px + .oe_tooltip_string + color: #FD5 + font-weight: bold + font-size: 13px + .oe_tooltip_help + white-space: pre-wrap + .oe_tooltip_technical + padding: 0 0 4px 0 + margin: 5px 0 0 15px + li + list-style: circle + .oe_tooltip_technical_title + font-weight: bold + .oe_tooltip_close + margin: -5px 0 0 2px + cursor: default + float: right + color: white + &:hover + color: #999 + cursor: pointer + .oe_tooltip_message + max-width: 310px // Hack for ui icon {{{ .ui-icon diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js index b3fbb35134b..52d789a34f0 100644 --- a/addons/web/static/src/js/chrome.js +++ b/addons/web/static/src/js/chrome.js @@ -209,8 +209,9 @@ instance.web.Dialog = instance.web.Widget.extend({ //we need this to put the instruction to remove modal from DOM at the end //of the queue, otherwise it might already have been removed before the modal-backdrop //is removed when pressing escape key + var $parent = this.$el.parents('.modal'); setTimeout(function () { - self.$el.parents('.modal').remove(); + $parent.remove(); },0); } this._super(); @@ -1074,8 +1075,8 @@ instance.web.Client = instance.web.Widget.extend({ }, bind_events: function() { var self = this; - this.$el.on('mouseenter', '.oe_systray > div:not([data-tipsy=true])', function() { - $(this).attr('data-tipsy', 'true').tipsy().trigger('mouseenter'); + this.$el.on('mouseenter', '.oe_systray > div:not([data-toggle=tooltip])', function() { + $(this).attr('data-toggle', 'tooltip').tooltip({placement: 'bottom', html: true}).trigger('mouseenter'); }); this.$el.on('click', '.oe_dropdown_toggle', function(ev) { ev.preventDefault(); @@ -1099,7 +1100,7 @@ instance.web.Client = instance.web.Widget.extend({ }, 0); }); instance.web.bus.on('click', this, function(ev) { - $.fn.tipsy.clear(); + $.fn.tooltip('destroy'); if (!$(ev.target).is('input[type=file]')) { self.$el.find('.oe_dropdown_menu.oe_opened, .oe_dropdown_toggle.oe_opened').removeClass('oe_opened'); } diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js index 83745133a3b..25d83105642 100644 --- a/addons/web/static/src/js/view_form.js +++ b/addons/web/static/src/js/view_form.js @@ -1832,7 +1832,7 @@ instance.web.form.FormWidget = instance.web.Widget.extend(instance.web.form.Invi this.$el.addClass(this.node.attrs["class"] || ""); }, destroy: function() { - $.fn.tipsy.clear(); + $.fn.tooltip('destroy'); this._super.apply(this, arguments); }, /** @@ -1864,9 +1864,8 @@ instance.web.form.FormWidget = instance.web.Widget.extend(instance.web.form.Invi widget = widget || this; trigger = trigger || this.$el; options = _.extend({ - delayIn: 500, - delayOut: 0, - fade: true, + delay: { show: 500, hide: 0 }, + trigger: 'hover', title: function() { var template = widget.template + '.tooltip'; if (!QWeb.has_template(template)) { @@ -1877,12 +1876,10 @@ instance.web.form.FormWidget = instance.web.Widget.extend(instance.web.form.Invi widget: widget }); }, - gravity: $.fn.tipsy.autoBounds(50, 'nw'), + placement: "auto top", html: true, - opacity: 0.85, - trigger: 'hover' }, options || {}); - $(trigger).tipsy(options); + $(trigger).tooltip(options); }, /** * Builds a new context usable for operations related to fields by merging diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js index dc9f706d40e..7c98e324917 100644 --- a/addons/web/static/src/js/views.js +++ b/addons/web/static/src/js/views.js @@ -581,7 +581,10 @@ instance.web.ViewManager = instance.web.Widget.extend({ var self = this; this.$el.find('.oe_view_manager_switch a').click(function() { self.switch_mode($(this).data('view-type')); - }).tipsy(); + }).tooltip({ + placement: 'bottom', + html: true, + }); var views_ids = {}; _.each(this.views_src, function(view) { self.views[view.view_type] = $.extend({}, view, { @@ -1157,10 +1160,10 @@ instance.web.Sidebar = instance.web.Widget.extend({ this.$('.oe_form_dropdown_section').each(function() { $(this).toggle(!!$(this).find('li').length); }); - - self.$("[title]").tipsy({ - 'html': true, - 'delayIn': 500, + self.$("[title]").tooltip({ + html: true, + placement: 'bottom', + delay: { show: 500, hide: 0} }); }, /** diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index b03fc8fc168..c2453a5c582 100644 --- a/addons/web/static/src/xml/base.xml +++ b/addons/web/static/src/xml/base.xml @@ -932,7 +932,6 @@ @@ -994,7 +993,7 @@
  • Selection: -