Author: sevein
Date: Thu Jun 28 15:42:27 2012
New Revision: 11826
Log:
Show popover when the title is too long
Modified:
trunk/css/graphic.css
trunk/js/treeView.js
Modified: trunk/css/graphic.css
==============================================================================
--- trunk/css/graphic.css Thu Jun 28 15:41:23 2012 (r11825)
+++ trunk/css/graphic.css Thu Jun 28 15:42:27 2012 (r11826)
@@ -277,7 +277,8 @@
position: relative;
}
-#treeview .ancestor
+#treeview .ancestor,
+#treeview .top-level
{
background-color: #eee;
}
@@ -355,7 +356,7 @@
#treeview .ui-sortable-helper
{
background-color: White;
- background-color: rgba(255, 255, 255, 0.9);
+ background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #ccc;
}
@@ -375,3 +376,115 @@
position: absolute;
left: 0px;
}
+
+/*********************************************************
+ POPOVER
+**********************************************************/
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1010;
+ display: none;
+ padding: 5px;
+}
+
+.popover.top {
+ margin-top: -5px;
+}
+
+.popover.right {
+ margin-left: 5px;
+}
+
+.popover.bottom {
+ margin-top: 5px;
+}
+
+.popover.left {
+ margin-left: -5px;
+}
+
+.popover.top .arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-top: 5px solid #000000;
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+}
+
+.popover.right .arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -5px;
+ border-top: 5px solid transparent;
+ border-right: 5px solid #000000;
+ border-bottom: 5px solid transparent;
+}
+
+.popover.bottom .arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid #000000;
+ border-left: 5px solid transparent;
+}
+
+.popover.left .arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -5px;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 5px solid #000000;
+}
+
+.popover .arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.popover-inner {
+ width: 280px;
+ padding: 3px;
+ overflow: hidden;
+ background: #000000;
+ background: rgba(0, 0, 0, 0.8);
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+}
+
+.popover-title {
+ padding: 9px 15px;
+ line-height: 1;
+ background-color: #f5f5f5;
+ border-bottom: 1px solid #eee;
+ -webkit-border-radius: 3px 3px 0 0;
+ -moz-border-radius: 3px 3px 0 0;
+ border-radius: 3px 3px 0 0;
+}
+
+.popover-content {
+ padding: 14px;
+ background-color: #ffffff;
+ -webkit-border-radius: 0 0 3px 3px;
+ -moz-border-radius: 0 0 3px 3px;
+ border-radius: 0 0 3px 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+}
+
+.popover-content p,
+.popover-content ul,
+.popover-content ol {
+ margin-bottom: 0;
+}
Modified: trunk/js/treeView.js
==============================================================================
--- trunk/js/treeView.js Thu Jun 28 15:41:23 2012 (r11825)
+++ trunk/js/treeView.js Thu Jun 28 15:42:27 2012 (r11826)
@@ -149,6 +149,9 @@
.children('.loading').remove().end()
.children('i').css('visibility', 'visible');
}
+
+ // Remove popups
+ $('.popover').remove();
}
return this;
@@ -171,6 +174,7 @@
stop: $.proxy(this.drop, this),
axis: 'y'
});
+
this.$element.disableSelection();
},
@@ -188,16 +192,35 @@
mouseenter: function (e)
{
- // var $li = 'LI' === e.target.tagName ? $(e.target) :
$(e.target).closest('li');
+ var $li = 'LI' === e.target.tagName ? $(e.target) :
$(e.target).closest('li');
+ var anchor = $li.find('a');
+
+ // Do nothing if anchor is not collapsed
+ if (anchor.width() <= this.$element.width())
+ {
+ return this;
+ }
+
+ // If data['content'] does not exist...
+ if (typeof $li.data('content') === 'undefined')
+ {
+ $li.data('content', anchor.attr('title'));
+
+ anchor.removeAttr('title');
+ }
+
+ $li.popover('show');
return this;
},
mouseleave: function (e)
{
- // var $li = 'LI' === e.target.tagName ? $(e.target) :
$(e.target).closest('li');
+ var $li = 'LI' === e.target.tagName ? $(e.target) :
$(e.target).closest('li');
+
+ // $li.popover('hide');
- return this;
+ return this;
},
mousedownup: function (e)
@@ -211,6 +234,9 @@
drag: function (e, ui)
{
this._position = ui.item.prev().index();
+
+ // Remove popups
+ $('.popover').remove();
},
drop: function (e, ui)
--
You received this message because you are subscribed to the Google Groups
"Qubit Toolkit Commits" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/qubit-commits?hl=en.
