Skip to content
Browse files

play with tooltip growing css

don't forget to reenqble keyframe with a more
recent less compiler
  • Loading branch information...
1 parent edf5112 commit 688b00147d2db419d5c281454fc5e12d320b1368 Matthias Bussonnier committed with Mar 9, 2012
View
28 IPython/frontend/html/notebook/static/css/tooltip.css
@@ -27,14 +27,6 @@
opacity: 0;
}
}
-@keyframes fadeOut {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
@-moz-keyframes fadeIn {
from {
opacity: 0;
@@ -51,37 +43,26 @@
opacity: 1;
}
}
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
.tooltip a {
float: right;
}
/*properties of tooltip after "expand"*/
.bigtooltip {
- height: 30%;
+ overflow: auto;
+ height: 200px;
}
/*properties of tooltip before "expand"*/
.smalltooltip {
text-overflow: ellipsis;
overflow: hidden;
- height: 20px;
+ height: 80px;
}
.tooltipbuttons {
position: absolute;
+ padding-right: 15px;
top: 0px;
right: 0px;
}
-.tooltiptext {
- height: 200px;
- overflow: auto;
- padding-right: -10px;
-}
.tooltip {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
@@ -123,7 +104,6 @@
padding-left: 7px;
font-family: monospace;
min-height: 50px;
- max-height: 70%;
position: absolute;
}
.pretooltiparrow {
View
23 IPython/frontend/html/notebook/static/js/tooltip.js
@@ -34,28 +34,29 @@ var IPython = (function (IPython) {
// build the buttons menu on the upper right
// expand the tooltip to see more
- var expandspan=$('<span/>').text('Expand')
- .addClass('ui-icon')
- .addClass('ui-icon-plus');
var expandlink=$('<a/>').attr('href',"#")
.addClass("ui-corner-all") //rounded corner
.attr('role',"button")
.attr('id','expanbutton')
- .append(expandspan)
.click(function(){
text.removeClass('smalltooltip');
text.addClass('bigtooltip');
$('#expanbutton').remove();
//setTimeout(function(){that.code_mirror.focus();}, 50);
- });
+ })
+ .append(
+ $('<span/>').text('Expand')
+ .addClass('ui-icon')
+ .addClass('ui-icon-plus')
+ );
// open in pager
- var morelink=$('<a/>').attr('href',"#");
- morelink.attr('role',"button");
- morelink.addClass('ui-button');
- var morespan=$('<span/>').text('Open in Pager');
- morespan.addClass('ui-icon');
- morespan.addClass('ui-icon-arrowstop-l-n');
+ var morelink=$('<a/>').attr('href',"#")
+ .attr('role',"button")
+ .addClass('ui-button');
+ var morespan=$('<span/>').text('Open in Pager')
+ .addClass('ui-icon')
+ .addClass('ui-icon-arrowstop-l-n');
morelink.append(morespan);
morelink.click(function(){
var msg_id = IPython.notebook.kernel.execute(name+"?");
View
26 IPython/frontend/html/notebook/static/less/tooltip.less
@@ -35,10 +35,10 @@
to {opacity:0;}
}
-@keyframes fadeOut {
- from {opacity:1;}
- to {opacity:0;}
-}
+//@keyframes fadeOut {
+// from {opacity:1;}
+// to {opacity:0;}
+//}
@-moz-keyframes fadeIn {
from {opacity:0;}
@@ -50,10 +50,10 @@
to {opacity:1;}
}
-@keyframes fadeIn {
- from {opacity:0;}
- to {opacity:1;}
-}
+//@keyframes fadeIn {
+// from {opacity:0;}
+// to {opacity:1;}
+//}
.linearGradient(@stop1:0, @color1:#ccc, @stop2:33%, @color2:#ddd, @stop3:66%, @color3:#ccc, @stop4:100%, @color4:#ddd){
background-color:@color4;
@@ -80,26 +80,25 @@
/*properties of tooltip after "expand"*/
.bigtooltip {
- height:30%;
+ overflow: auto;
+ height: 200px;
}
/*properties of tooltip before "expand"*/
.smalltooltip{
text-overflow: ellipsis;
overflow: hidden;
- height:20px;
+ height:80px;
}
.tooltipbuttons
{
position: absolute;
+ padding-right : 15px;
top : 0px;
right:0px;
}
.tooltiptext
{
- height: 200px;
- overflow : auto;
- padding-right: -10px;
}
.tooltip {
@@ -136,7 +135,6 @@
padding-left:7px;
font-family: monospace;
min-height:50px;
- max-height : 70%;
position: absolute;
}

0 comments on commit 688b001

Please sign in to comment.
Something went wrong with that request. Please try again.