diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css index 3cdb71858..495f32a97 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.css +++ b/IPython/frontend/html/notebook/static/css/notebook.css @@ -280,89 +280,6 @@ option.introspection { background-color: #EBF4EB; } -@-moz-keyframes fadeIn { - from {opacity:0;} - to {opacity:1;} -} - -@-webkit-keyframes fadeIn { - from {opacity:0;} - to {opacity:1;} -} - -@keyframes fadeIn { - from {opacity:0;} - to {opacity:1;} -} - -/*"close" "expand" and "Open in pager button" of -/* the tooltip*/ -.tooltip a { - float:right; -} - -/*properties of tooltip after "expand"*/ -.bigtooltip { - height:30%; -} - -/*properties of tooltip before "expand"*/ -.smalltooltip{ - text-overflow: ellipsis; - overflow: hidden; - height:20px; -} -.tooltip div -{ - height: 200px; - overflow : auto; -} -.tooltip { - /*transition when "expand"ing tooltip */ - overflow : hidden; - font-size: 14px; - -webkit-transition-property: height; - -webkit-transition-duration: 1s; - -moz-transition-property: height; - -moz-transition-duration: 1s; - transition-property: height; - transition-duration: 1s; - max-width:700px; - border-radius: 0px 10px 10px 10px; - box-shadow: 3px 3px 5px #999; - /*fade-in animation when inserted*/ - -webkit-animation: fadeIn 200ms; - -moz-animation: fadeIn 200ms; - animation: fadeIn 200ms; - vertical-align: middle; - - background-image: linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); - background-image: -o-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); - background-image: -ms-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); - background-image: -moz-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); - background-image: -webkit-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); - - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.13, rgb(215,215,215)), - color-stop(0.39, rgb(210,210,210)), - color-stop(0.56, rgb(227,227,227)), - color-stop(0.91, rgb(247,247,247)) - ); - - color: #000; - border-color: #BBB; - outline: none; - padding: 3px; - margin: 0px; - padding-left:7px; - font-family: monospace; - min-height:50px; - max-height : 70%; -} - /*fixed part of the completion*/ .completions p b { font-weight:bold; diff --git a/IPython/frontend/html/notebook/static/css/tooltip.css b/IPython/frontend/html/notebook/static/css/tooltip.css new file mode 100644 index 000000000..c65622266 --- /dev/null +++ b/IPython/frontend/html/notebook/static/css/tooltip.css @@ -0,0 +1,158 @@ +/** + * Primary styles + * + * Author: IPython Development Team + */ +/** + * WARNING IF YOU ARE EDITTING THIS FILE, + * if this is a .css file, It has a lot of chance of beeing generated from the + * ../css/[samename].less file, it might not stay a less file forever, + * but as until now it is convenient to developp using less + * + * it it's a less file, don't forget to recompile it + */ +@-moz-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@-moz-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.tooltip a { + float: right; +} +/*properties of tooltip after "expand"*/ +.bigtooltip { + height: 30%; +} +/*properties of tooltip before "expand"*/ +.smalltooltip { + text-overflow: ellipsis; + overflow: hidden; + height: 20px; +} +.tooltipbuttons { + position: absolute; + 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; + -ms-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + /*transition when "expand"ing tooltip */ + + -webkit-transition-property: height; + -webkit-transition-duration: 1s; + -moz-transition-property: height; + -moz-transition-duration: 1s; + transition-property: height; + transition-duration: 1s; + max-width: 700px; + border-radius: 10px 10px 10px 10px; + box-shadow: 3px 3px 5px #999; + /*fade-in animation when inserted*/ + + -webkit-animation: fadeOut 200ms; + -moz-animation: fadeOut 200ms; + animation: fadeOut 200ms; + -webkit-animation: fadeIn 200ms; + -moz-animation: fadeIn 200ms; + animation: fadeIn 200ms; + vertical-align: middle; + background-color: #f7f7f7; + background-image: -webkit-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(13%, #d7d7d7), color-stop(39%, #d2d2d2), color-stop(56%, #e3e3e3), color-stop(91%, #f7f7f7)); + background-image: -moz-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%); + background-image: -ms-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%); + background-image: -o-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%); + background-image: linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%); + overflow: visible; + color: #000000; + border-color: #bbbbbb; + outline: none; + padding: 3px; + margin: 0px; + padding-left: 7px; + font-family: monospace; + min-height: 50px; + max-height: 70%; + position: absolute; +} +.pretooltiparrow { + left: 0px; + margin-left: -25px; + top: -16px; + width: 70px; + height: 16px; + overflow: hidden; + position: absolute; +} +.pretooltiparrow:before { + background-color: #f7f7f7; + border: thin silver solid ; + z-index: 10; + content: ""; + position: absolute; + left: 40px; + top: 10px; + width: 25px; + height: 25px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); +} +.tooltip.hide { + -webkit-animation: fadeOut 200ms; + -moz-animation: fadeOut 200ms; + animation: fadeOut 200ms; + opacity: 0; +} diff --git a/IPython/frontend/html/notebook/static/js/tooltip.js b/IPython/frontend/html/notebook/static/js/tooltip.js index c800c77bb..e0af85e30 100644 --- a/IPython/frontend/html/notebook/static/js/tooltip.js +++ b/IPython/frontend/html/notebook/static/js/tooltip.js @@ -9,13 +9,19 @@ // Tooltip //============================================================================ +// Todo : +// use codemirror highlight example to +// highlight the introspection request and introspect on mouse hove ... var IPython = (function (IPython) { var utils = IPython.utils; var Tooltip = function (notebook) { this.tooltip = $('#tooltip'); + this.buttons = $('
') + .addClass('tooltipbuttons'); this.text = $('
') + .addClass('tooltiptext') .addClass('smalltooltip'); this.tooltip.css('left',50+'px'); this.tooltip.css('top',50+'px'); @@ -64,15 +70,18 @@ var IPython = (function (IPython) { closespan.addClass('ui-icon-close'); closelink.append(closespan); closelink.click(function(){ - that.remove_and_cancel_tooltip(); - setTimeout(function(){that.code_mirror.focus();}, 50); + tooltip.addClass('hide'); }); //construct the tooltip - tooltip.append(closelink); - tooltip.append(expandlink); - tooltip.append(morelink); - - tooltip.append(this.text); + this.buttons.append(closelink); + this.buttons.append(expandlink); + this.buttons.append(morelink); + + arrow = $('
').addClass('pretooltiparrow'); + this.tooltip.append(arrow); + this.tooltip.append(this.buttons); + this.tooltip.append(this.buttons); + this.tooltip.append(this.text); }; @@ -94,9 +103,10 @@ var IPython = (function (IPython) { } Tooltip.prototype.show = function(reply,pos) { - this.tooltip.css('left',pos.x+'px'); - this.tooltip.css('top',pos.yBot+'px'); - this.tooltip.removeClass('hidden'); + this.tooltip.css('left',pos.x-30+'px'); + this.tooltip.css('top',(pos.yBot+10)+'px'); + this.tooltip.removeClass('hidden') + this.tooltip.removeClass('hide'); // build docstring defstring = reply.call_def; diff --git a/IPython/frontend/html/notebook/static/less/tooltip.less b/IPython/frontend/html/notebook/static/less/tooltip.less new file mode 100644 index 000000000..bd5dde19b --- /dev/null +++ b/IPython/frontend/html/notebook/static/less/tooltip.less @@ -0,0 +1,179 @@ +/** + * Primary styles + * + * Author: IPython Development Team + */ + +/** + * WARNING IF YOU ARE EDITTING THIS FILE, + * if this is a .css file, It has a lot of chance of beeing generated from the + * ../css/[samename].less file, it might not stay a less file forever, + * but as until now it is convenient to developp using less + * + * it it's a less file, don't forget to recompile it + */ + +// ** +// * Less mixins +// **/ + +// Four color of the background +@c1 : rgb(215,215,215); +@c2 : rgb(210,210,210); +@c3 : rgb(227,227,227); +@c4 : rgb(247,247,247); +@bordercolor : #BBB; +@textColor : #000; + +@-moz-keyframes fadeOut { + from {opacity:1;} + to {opacity:0;} +} + +@-webkit-keyframes fadeOut { + from {opacity:1;} + to {opacity:0;} +} + +@keyframes fadeOut { + from {opacity:1;} + to {opacity:0;} +} + +@-moz-keyframes fadeIn { + from {opacity:0;} + to {opacity:1;} +} + +@-webkit-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; + background-image: -webkit-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(@stop1, @color1), + color-stop(@stop2, @color2), + color-stop(@stop3, @color3), + color-stop(@stop4, @color4) + ); + background-image:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); + background-image:-ms-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); + background-image:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); + background-image:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); + +} + +.tooltip a { + float:right; +} + +/*properties of tooltip after "expand"*/ +.bigtooltip { + height:30%; +} + +/*properties of tooltip before "expand"*/ +.smalltooltip{ + text-overflow: ellipsis; + overflow: hidden; + height:20px; +} +.tooltipbuttons +{ + position: absolute; + 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; + -ms-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + /*transition when "expand"ing tooltip */ + -webkit-transition-property: height; + -webkit-transition-duration: 1s; + -moz-transition-property: height; + -moz-transition-duration: 1s; + transition-property: height; + transition-duration: 1s; + max-width:700px; + border-radius: 10px 10px 10px 10px; + box-shadow: 3px 3px 5px #999; + /*fade-in animation when inserted*/ + -webkit-animation: fadeOut 200ms; + -moz-animation: fadeOut 200ms; + animation: fadeOut 200ms; + -webkit-animation: fadeIn 200ms; + -moz-animation: fadeIn 200ms; + animation: fadeIn 200ms; + vertical-align: middle; + + .linearGradient(13%,@c1, 39%, @c2 , 56%,@c3, 91% , @c4) ; + overflow : visible; + color: @textColor; + border-color: @bordercolor; + outline: none; + padding: 3px; + margin: 0px; + padding-left:7px; + font-family: monospace; + min-height:50px; + max-height : 70%; + position: absolute; +} + + +.pretooltiparrow { + left: 0px; + margin-left: -25px; + top: -16px; + width: 70px; + height: 16px; + overflow: hidden; + position: absolute; + +} +.pretooltiparrow:before { + background-color : @c4; + border : thin silver solid ; + z-index:10; + content: ""; + position: absolute; + left: 40px; + top: 10px; + width: 25px; + height: 25px; + @theta : 45deg; + -webkit-transform: rotate(@theta); + -moz-transform: rotate(@theta); + -ms-transform: rotate(@theta); + -o-transform: rotate(@theta); + +} + +.tooltip.hide +{ + -webkit-animation: fadeOut 200ms; + -moz-animation: fadeOut 200ms; + animation: fadeOut 200ms; + opacity : 0; + +} diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html index 98b821b8a..dcef1d267 100644 --- a/IPython/frontend/html/notebook/templates/notebook.html +++ b/IPython/frontend/html/notebook/templates/notebook.html @@ -16,6 +16,7 @@ window.mathjax_url = "{{mathjax_url}}"; + {% end %}