[MERGE]clean and refactored tooltip from branch trunk-tipsy-to-boostrap
authorCedric Snauwaert <csn@openerp.com>
Wed, 16 Apr 2014 10:26:59 +0000 (12:26 +0200)
committerCedric Snauwaert <csn@openerp.com>
Wed, 16 Apr 2014 10:26:59 +0000 (12:26 +0200)
bzr revid: csn@openerp.com-20140416102659-vft9tfuqmax0qx3q

1  2 
addons/web/__openerp__.py
addons/web/static/src/css/base.css
addons/web/static/src/css/base.sass
addons/web/static/src/js/chrome.js
addons/web/static/src/js/view_form.js
addons/web/static/src/js/views.js
addons/web/static/src/xml/base.xml
addons/web_kanban/static/src/js/kanban.js
addons/web_kanban_sparkline/static/src/js/kanban_sparkline.js

Simple merge
  .openerp .oe_application .oe_form_sheet .oe_notebook_page {
    padding: 0 16px;
  }
 +.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;
 +}
 +.openerp .oe_form > :not(.oe_form_nosheet) header .oe_button {
 +  margin: 3px 2px 1px;
 +}
 +.openerp .oe_form > :not(.oe_form_nosheet) header .oe_button:first-child {
 +  margin-left: 6px;
 +}
  .openerp .oe_form header {
 -  position: relative;
    border-bottom: 1px solid #cacaca;
    padding-left: 2px;
    background-color: #ededed;
@@@ -3319,23 -3400,191 +3285,69 @@@ body.oe_single_form .oe_single_form_con
      overflow: hidden !important;
    }
  }
 -.nav li > a {
 -  padding: 3px 4px 2px 18px;
 -  color: #4c4c4c;
 -}
 -.nav nav-pills.nav-stacked > li > ul {
 -  padding-left: 16px;
 -}
 -
 -.nav-pills > li.active > a, a.list-group-item.active > a {
 -  background-color: #7c7bad;
 -  color: white;
 -  border-radius: 0;
 -}
 -.nav-pills > li.active a:hover, .nav-pills > li.active a:focus, a.list-group-item.active a:hover, a.list-group-item.active a:focus {
 -  background-color: #7c7bad;
 -}
 -.nav-pills > li.active .badge, a.list-group-item.active .badge {
 -  background-color: white;
 -  color: #7c7bad;
 -  text-shadow: none;
 -}
 -
 -.badge {
 -  font-weight: normal;
 -  font-size: 11px;
 -  background-color: #7c7bad;
 +.ui-icon {
 +  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: 250px;
++  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;
+ }
 -
 -button, body {
 -  line-height: normal;
 -}
 -
 -h1, h2 {
 -  font-weight: bold;
 -}
 -
 -h3 {
 -  font-size: 1.17em;
 -  font-weight: bold;
 -}
 -
 -p {
 -  display: block;
 -  -webkit-margin-before: 1em;
 -  -webkit-margin-after: 1em;
 -  -webkit-margin-start: 0px;
 -  -webkit-margin-end: 0px;
 -}
 -
 -pre {
 -  background-color: white;
 -  border: none;
 -  padding: 10px 0 3px 0;
 -}
 -
 -.jqstooltip {
 -  height: auto !important;
 -  width: auto !important;
 -}
 -
 -h5 {
 -  font-weight: bold;
 -  font-size: smaller;
 -}
 -
 -.oe_form .oe_subtype label, .oe_subtype label {
 -  font-weight: normal;
 -}
 -
 -.oe_msg_subtype_check {
 -  margin: 3px 3px 0 !important;
 -}
 -
 -.oe_view_manager_new .oe_form_nosheet {
 -  margin-top: 8px;
 -}
 -.oe_view_manager_new .oe_form_nosheet .oe_form_label {
 -  font-weight: normal;
 -}
 -
 -.navbar {
 -  min-height: 32px;
 -  margin-bottom: 0px;
 +.modal .modal-header button.close {
    border: none;
 -  z-index: 1;
 -  background-color: #414141;
 -  background-color: #454343;
 -  background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
 -  background-image: -webkit-linear-gradient(top, #646060, #262626);
 -  background-image: -moz-linear-gradient(top, #646060, #262626);
 -  background-image: -ms-linear-gradient(top, #646060, #262626);
 -  background-image: -o-linear-gradient(top, #646060, #262626);
 -  background-image: linear-gradient(to bottom, #646060, #262626);
 -}
 -
 -.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus {
 -  background: rgba(0, 0, 0, 0.3);
 -}
 -.navbar-default .navbar-nav .open > a, .navbar-default .navbar-nav a:hover, .navbar-default .navbar-nav a:focus {
 -  background: rgba(0, 0, 0, 0.3) !important;
 -}
 -.navbar-default .navbar-nav .dropdown > a .caret {
 -  border-top-color: #777777 !important;
 -  border-bottom-color: #777777 !important;
 -}
 -
 -.navbar-nav li a {
 -  padding: 4px 32px 4px 12px;
 -}
 -
 -.dropdown-menu {
 -  font-size: 13px;
 -  padding: 4px 0;
 -  background: #333333 !important;
 -  background: rgba(37, 37, 37, 0.9) !important;
 -  border-color: #999999;
 -  border-color: rgba(0, 0, 0, 0.2);
 -  background-color: #414141;
 -  text-shadow: none;
 -  background-color: #454343;
 -  background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
 -  background-image: -webkit-linear-gradient(top, #646060, #262626);
 -  background-image: -moz-linear-gradient(top, #646060, #262626);
 -  background-image: -ms-linear-gradient(top, #646060, #262626);
 -  background-image: -o-linear-gradient(top, #646060, #262626);
 -  background-image: linear-gradient(to bottom, #646060, #262626);
 -  -moz-border-radius: 3px;
 -  -webkit-border-radius: 3px;
 -  border-radius: 3px;
 +  background: none;
 +  padding: 1px;
 +  height: 18px;
 +  font-size: 20px;
  }
 -.dropdown-menu li a, .dropdown-menu li a:hover, .dropdown-menu li a:focus {
 -  color: #eeeeee;
 +.modal .modal-footer {
 +  text-align: left;
  }
 -
 -.ui-icon {
 -  width: 18px;
 -  height: 18px;
 +.modal .oe_act_window.modal-body{
 +  padding: 0;
  }
 -
  input[type="radio"], input[type="checkbox"] {
    margin-right: 4px;
    margin-left: 4px;
@@@ -1569,9 -1710,14 +1542,9 @@@ $sheet-padding: 16p
                  padding: 0 16px
      // }}}
      // FormView.header {{{
 -    .oe_form header
 -        position: relative
 -        border-bottom: 1px solid #cacaca
 +    .oe_form > :not(.oe_form_nosheet) header
          padding-left: 2px
-         ul
 -        @include vertical-gradient(#fcfcfc, #dedede)
 -        > span
 -            margin-left: 4px
 -        ul
++        ul:not(.oe_tooltip_technical)
              display: inline-block
              float: right
          .oe_button
@@@ -2697,6 -2713,148 +2670,44 @@@ body.oe_single_for
              overflow: hidden !important
  // }}}
  
 -// Customize bootstrap3 for leftbar
 -.nav
 -    li > a
 -        padding: 3px 4px 2px 18px
 -        color: #4c4c4c
 -    nav-pills.nav-stacked > li > ul
 -        padding-left: 16px
 -.nav-pills > li.active,a.list-group-item.active
 -    > a
 -        background-color: #7c7bad
 -        color: white
 -        border-radius: 0
 -    a:hover,a:focus
 -        background-color: #7c7bad
 -    .badge
 -        background-color: white
 -        color: #7c7bad
 -        text-shadow: none
 -.badge
 -    font-weight: normal
 -    font-size: 11px
 -    background-color: #7c7bad
+ // 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: 250px
++        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
 -// End of customize
 -
 -// Customize for global tags
 -button, body
 -    line-height: normal
 -h1,h2
 -    font-weight: bold
 -h3
 -    font-size: 1.17em
 -    font-weight: bold
 -p
 -    display: block
 -    -webkit-margin-before: 1em
 -    -webkit-margin-after: 1em
 -    -webkit-margin-start: 0px
 -    -webkit-margin-end: 0px
 -pre
 -    background-color: #FFFFFF
 -    border: none
 -    padding: 10px 0 3px 0
 -// End of customize
 -
 -// Customize for kanban tooltip
 -.jqstooltip
 -    height: auto !important
 -    width: auto !important
 -// End of kanban tooltip
 -
 -// Customize for chatter
 -h5
 -    font-weight: bold
 -    font-size: smaller
 -.oe_form .oe_subtype label, .oe_subtype label
 -    font-weight: normal
 -.oe_msg_subtype_check
 -    margin: 3px 3px 0 !important
 -// End of customize
 -
 -// Minimized unused white space and label weight for wizard popup
 -.oe_view_manager_new .oe_form_nosheet
 -    margin-top: 8px
 -    .oe_form_label
 -        font-weight: normal
 -// End of customize
 -
 -// navbar hack {{{
 -.navbar
 -    min-height: 32px
 -    margin-bottom: 0px
 -    border: none
 -    z-index: 1
 -    background-color: #414141
 -    @include vertical-gradient(#646060, #262626)
 -.navbar-default
 -    .navbar-nav
 -        li
 -            a:hover,a:focus
 -                background: rgba(0, 0, 0, 0.3)
 -        .open > a,a:hover,a:focus
 -            background: rgba(0, 0, 0, 0.3) !important
 -        .dropdown > a .caret
 -            border-top-color: #777 !important
 -            border-bottom-color: #777 !important
 -.navbar-nav
 -    li
 -        a
 -            padding: 4px 32px 4px 12px
 -.dropdown-menu
 -    font-size: 13px
 -    padding: 4px 0
 -    background: #333333 !important
 -    background: rgba(37, 37, 37, 0.9) !important
 -    border-color: #999999
 -    border-color: rgba(0, 0, 0, 0.2)
 -    background-color: #414141
 -    text-shadow: none
 -    @include vertical-gradient(#646060, #262626)
 -    @include radius(3px)
 -    li
 -        a,a:hover,a:focus
 -            color: #eeeeee
 -// End hack }}}
  
  // Hack for ui icon {{{
  .ui-icon
@@@ -202,17 -232,16 +202,18 @@@ instance.web.Dialog = instance.web.Widg
          });
          if (! this.__tmp_dialog_closing) {
              this.__tmp_dialog_destroying = true;
 -            this.close();
 +            this.close(reason);
              this.__tmp_dialog_destroying = undefined;
          }
 -        if (this.dialog_inited && !this.isDestroyed() && this.$el.is(":data(dialog)")) {
 -            this.$el.dialog('destroy');
 +        if (this.dialog_inited && !this.isDestroyed() && this.$el.is(":data(bs.modal)")) {
 +            //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);
          }
 -        //For Remove tooltip from dialog box when destroy
 -        //Bad fix, bootstrap mouseleave method call very late
 -        //before that this.$el and its contained removed because that tooltip sticks on page.
 -        $($.find('.tooltip.fade.in')).remove();
          this._super();
      }
  });
@@@ -1074,8 -1265,8 +1075,8 @@@ instance.web.Client = instance.web.Widg
      },
      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, container: 'body'}).trigger('mouseenter');
++            $(this).attr('data-toggle', 'tooltip').tooltip({placement: 'bottom', html: true}).trigger('mouseenter');
          });
          this.$el.on('click', '.oe_dropdown_toggle', function(ev) {
              ev.preventDefault();
@@@ -1864,9 -1851,8 +1864,8 @@@ instance.web.form.FormWidget = instance
          widget = widget || this;
          trigger = trigger || this.$el;
          options = _.extend({
-                 delayIn: 500,
-                 delayOut: 0,
-                 fade: true,
 -                delay: { show: 750, hide: 0 },
++                delay: { show: 500, hide: 0 },
+                 trigger: 'hover',
                  title: function() {
                      var template = widget.template + '.tooltip';
                      if (!QWeb.has_template(template)) {
                          widget: widget
                      });
                  },
-                 gravity: $.fn.tipsy.autoBounds(50, 'nw'),
 -                container: 'body',
 -                placement: function(tip, trigger) {  //dynamic set position
 -                    var offset = $(trigger).offset();
 -                    var vert = 0.5 * $(document).outerHeight() - offset.top;
 -                    var vertPlacement = vert > 0 ? 'bottom' : 'top';
 -                    return vertPlacement;
 -                },
++                placement: "auto top",
                  html: true,
--                opacity: 0.85,
-                 trigger: 'hover'
              }, options || {});
-         $(trigger).tipsy(options);
 -        $(trigger).attr('data-toggle', 'tooltip');
+         $(trigger).tooltip(options);
      },
      /**
       * Builds a new context usable for operations related to fields by merging
@@@ -579,9 -583,15 +579,12 @@@ instance.web.ViewManager =  instance.we
      start: function() {
          this._super();
          var self = this;
 -        this.$el.find('.oe_view_manager_switch a').attr('data-toggle', 'tooltip');
          this.$el.find('.oe_view_manager_switch a').click(function() {
              self.switch_mode($(this).data('view-type'));
-         }).tipsy();
 -            $(this).tooltip('destroy');
+         }).tooltip({
 -            container: 'body',
++            placement: 'bottom',
+             html: true,
 -            opacity: 0.85
+         });
          var views_ids = {};
          _.each(this.views_src, function(view) {
              self.views[view.view_type] = $.extend({}, view, {
@@@ -1157,10 -1157,11 +1160,10 @@@ instance.web.Sidebar = instance.web.Wid
          this.$('.oe_form_dropdown_section').each(function() {
              $(this).toggle(!!$(this).find('li').length);
          });
-         self.$("[title]").tipsy({
-             'html': true,
-             'delayIn': 500,
 -        self.$("[title]").attr('data-toggle', 'tooltip');
+         self.$("[title]").tooltip({
 -            'html': true,
 -            'container': 'body',
 -            'delayIn': 500,
++            html: true,
++            placement: 'bottom',
++            delay: { show: 500, hide: 0}
          });
      },
      /**
  </t>
  <t t-name="FormRenderingLabel">
      <label  t-att-for="_for"
--            t-att-title="help"
              t-attf-class="#{classnames} oe_form_label#{help ? '_help' : ''} oe_align_#{align}">
          <t t-esc="string"/>
      </label>
          </li>
          <li t-if="widget.field and widget.field.selection" data-item="selection">
              <span class="oe_tooltip_technical_title">Selection:</span>
--            <ul>
++            <ul class="oe_tooltip_technical">
                  <li t-foreach="widget.field.selection" t-as="option">
                      [<t t-esc="option[0]"/>]
                      <t t-if="option[1]"> - </t>
@@@ -648,7 -648,7 +648,7 @@@ instance.web_kanban.KanbanGroup = insta
          this.$records.data('widget', this);
          this.$has_been_started.resolve();
          var add_btn = this.$el.find('.oe_kanban_add');
-         add_btn.tipsy({delayIn: 500, delayOut: 1000});
 -        add_btn.tooltip({html: true, container: 'body', delayIn: 500, delayOut: 1000});
++        add_btn.tooltip({html: true, delay: { show: 500, hide:1000 }});
          this.$records.find(".oe_kanban_column_cards").click(function (ev) {
              if (ev.target == ev.currentTarget) {
                  if (!self.state.folded) {
              return (new instance.web.Model(field.relation)).query([options.tooltip_on_group_by])
                      .filter([["id", "=", this.value]]).first().then(function(res) {
                  self.tooltip = res[options.tooltip_on_group_by];
-                 self.$(".oe_kanban_group_title_text").attr("title", self.tooltip || self.title || "").tipsy({html: true});
 -                self.$(".oe_kanban_group_title_text").attr("title", self.tooltip || self.title || "").tooltip({html: true, placement: 'bottom', container: 'body'});
++                self.$(".oe_kanban_group_title_text").attr("title", self.tooltip || self.title || "").tooltip({html: true, placement: 'bottom'});
              });
          }
      },
@@@ -925,10 -925,8 +925,7 @@@ instance.web_kanban.KanbanRecord = inst
      bind_events: function() {
          var self = this;
          this.setup_color_picker();
-         this.$el.find('[tooltip]').tipsy({
-             delayIn: 500,
-             delayOut: 0,
-             fade: true,
 -        this.$el.find('[title]').attr('data-toggle', 'tooltip');
 -        this.$el.find('[data-toggle]').tooltip({
++        this.$el.find('[title]').tooltip({
              title: function() {
                  var template = $(this).attr('tooltip');
                  if (!self.view.qweb.has_template(template)) {
                  }
                  return self.view.qweb.render(template, self.qweb_context);
              },
-             gravity: 's',
+             placement: 'bottom',
              html: true,
--            opacity: 0.8,
-             trigger: 'hover'
 -            container: 'body'
          });
  
          // If no draghandle is found, make the whole card as draghandle (provided one can edit)
@@@ -29,7 -28,7 +29,7 @@@ instance.web_kanban.SparklineBarWidget 
                      }
                  }, self.options);
              self.$el.sparkline(value, sparkline_options);
-             self.$el.tipsy({'delayIn': self.options.delayIn || 0, 'html': true, 'title': function(){return title}, 'gravity': 'n'});
 -            self.$el.children().tooltip({'delayIn': self.options.delayIn || 0, 'html': true, 'title': function(){return title}, 'container': 'body', 'placement': 'bottom'});
++            self.$el.children().tooltip({delay: {show: self.options.delayIn || 0, hide: 0}, html: true, title: function(){return title}, placement: 'bottom'});
          }, 0);
      },
  });