mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-06 11:35:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

play with tooltip growing css

Browse Source 
don't forget to reenqble keyframe with a more
recent less compiler
This commit is contained in:
Matthias Bussonnier 2012-03-09 21:52:41 +01:00 committed by Brian Granger
parent 775c9e9317
commit a84a7f03b0
3 changed files with 28 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
IPython/frontend/html/notebook/static/css/tooltip.css
View File

@ -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 {

23
IPython/frontend/html/notebook/static/js/tooltip.js
View File

@ -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+"?");

26
IPython/frontend/html/notebook/static/less/tooltip.less
View File

@ -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;
}