Commit e4b6a65d authored by dcoudrin's avatar dcoudrin
Browse files

removing biocham_gui (now a branch)

parent f934db1f
@import 'commandsmenu.css';
@import 'tabs.css';
@import 'outputarea.css';
@import 'widgets.css';
div#gui_panel {
margin: 3px;
padding: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
}
div#gui {
overflow: hidden;
font-size: 14px;
line-height: 20px;
overflow-y: hidden;
overflow-x: auto;
width: 100%;
padding-top: 20px;
padding-left: 20px;
margin: 0px;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 100%;
}
.graph-menu {
list-style: none;
float: left;
width: 500px;
height: 500px;
border-radius: 2px;
background-color: #FFF;
}
.mcd-menu {
float: left;
list-style: none;
padding: 0;
margin: 0;
background: #FFF;
/*height: 100px;*/
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
/* == */
width: 250px;
/* == */
}
.reactions-menu {
height: 500px;
width: 700px;
float: left;
}
.plot-menu {
height: 500px;
width: 700px;
float: left;
}
.plot-menu div {
visibility: visible !important;
margin: 5px;
padding: 5px;
height: 60%;
width: 40%;
}
.plot-menu div:hover {
height: 65%;
width: 45%;
}
.reactions-menu img {
visibility: visible;
margin: 5px;
padding: 5px;
height: 60%;
width: 40%;
}
.reactions-menu img:hover {
height: 65%;
width: 45%;
}
.mcd-menu li {
position: relative;
/*float:left;*/
}
.mcd-menu li a {
display: inline-block;
text-decoration: none;
padding: 12px 20px;
color: #777;
/*text-align: center;
border-right: 1px solid #E7E7E7;*/
/* == */
text-align: left;
height: 36px;
position: relative;
border-bottom: 1px solid #EEE;
/* == */
}
.mcd-menu li a i {
/*display: block;
font-size: 30px;
margin-bottom: 10px;*/
/* == */
float: left;
font-size: 20px;
margin: 0 10px 0 0;
/* == */
}
/* == */
.mcd-menu li a p {
float: left;
margin: 0 ;
}
/* == */
.mcd-menu li a strong {
display: inline-block;
text-transform: uppercase;
}
.mcd-menu li a i, .mcd-menu li a strong {
position: relative;
}
.mcd-menu li:hover > a i {
opacity: 1;
}
.mcd-menu li:hover a strong {
opacity: 1;
}
.mcd-menu li:hover a small {
opacity: 1;
}
.mcd-menu li:hover > a {
color: #e67e22;
}
.mcd-menu li ul,
.mcd-menu li ul li ul {
list-style: none;
position: absolute;
height: auto;
min-width: 200px;
padding: 0;
margin: 0;
background: #FFF;
/*border-top: 4px solid #e67e22;*/
opacity: 0;
visibility: hidden;
transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-webkit-transition: all 300ms linear;
/*top: 130px;*/
z-index: 1000;
/* == */
left:280px;
top: 0px;
border-left: 4px solid #e67e22;
/* == */
}
.mcd-menu li ul:before {
content: "";
position: absolute;
/*top: -8px;
left: 23%;
border-bottom: 5px solid #e67e22;
border-left: 5px solid transparent;
border-right: 5px solid transparent;*/
/* == */
top: 25px;
left: -9px;
border-right: 5px solid #e67e22;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
/* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
/*top: 100px;*/
/* == */
left:250px;
/* == */
}
/*.mcd-menu li ul li {
float: none;
}*/
.mcd-menu li ul li a {
padding: 0;
text-align: left;
border: 0;
border-bottom: 1px solid #EEE;
/* == */
height: auto;
/* == */
}
.mcd-menu li ul li a i {
font-size: 16px;
display: inline-block;
margin: 0 0 0 0;
}
.mcd-menu li ul li ul {
left: 230px;
top: 0;
border: 0;
border-left: 4px solid #e67e22;
}
.mcd-menu li ul li ul:before {
content: "";
position: absolute;
top: 15px;
/*left: -14px;*/
/* == */
left: 0;
/* == */
border-right: 5px solid #e67e22;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
top: 0px;
left: 200px;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.mcd-menu {
margin-left:10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.mcd-menu {
width: 200px;
}
.mcd-menu li a {
height:30px;
}
.mcd-menu li a i {
font-size: 22px;
}
.mcd-menu li a strong {
font-size: 12px;
}
.mcd-menu li a small {
font-size: 10px;
}
.mcd-menu li a.search input {
width: 120px;
font-size: 12px;
}
.mcd-menu li a.search buton{
padding: 8px 10px 9px 10px;
}
.mcd-menu li > ul {
min-width:180px;
}
.mcd-menu li:hover > ul {
min-width:180px;
left:200px;
}
.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
min-width:150px;
}
.mcd-menu li ul li:hover > ul {
left:180px;
min-width:150px;
}
.mcd-menu li ul li ul li:hover > ul {
left:150px;
min-width:150px;
}
.mcd-menu li ul a {
font-size:12px;
}
.mcd-menu li ul a i {
font-size:14px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.mcd-menu {
width: 50px;
}
.mcd-menu li a {
position: relative;
padding: 12px 16px;
height:20px;
}
.mcd-menu li a small {
display: none;
}
.mcd-menu li a strong {
display: none;
}
.mcd-menu li a:hover strong,.mcd-menu li a.active strong {
display:block;
font-size:10px;
padding:3px 0;
position:absolute;
bottom:0px;
left:0;
background:#e67e22;
color:#FFF;
min-width:100%;
text-transform:lowercase;
font-weight:normal;
text-align:center;
}
.mcd-menu li .search {
display: none;
}
.mcd-menu li > ul {
min-width:180px;
left:70px;
}
.mcd-menu li:hover > ul {
min-width:180px;
left:50px;
}
.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
min-width:150px;
}
.mcd-menu li ul li:hover > ul {
left:180px;
min-width:150px;
}
.mcd-menu li ul li ul li > ul {
left:35px;
top: 45px;
border:0;
border-top:4px solid #e67e22;
}
.mcd-menu li ul li ul li > ul:before {
left:30px;
top: -9px;
border:0;
border-bottom:5px solid #e67e22;
border-left:5px solid transparent;
border-right:5px solid transparent;
}
.mcd-menu li ul li ul li:hover > ul {
left:30px;
min-width:150px;
top: 35px;
}
.mcd-menu li ul a {
font-size:12px;
}
.mcd-menu li ul a i {
font-size:14px;
}
}
@media only screen and (max-width: 479px) {
.mcd-menu {
width: 50px;
}
.mcd-menu li a {
position: relative;
padding: 12px 16px;
height:20px;
}
.mcd-menu li a small {
display: none;
}
.mcd-menu li a strong {
display: none;
}
.mcd-menu li a:hover strong,.mcd-menu li a.active strong {
display:block;
font-size:10px;
padding:3px 0;
position:absolute;
bottom:0px;
left:0;
background:#e67e22;
color:#FFF;
min-width:100%;
text-transform:lowercase;
font-weight:normal;
text-align:center;
}
.mcd-menu li .search {
display: none;
}
.mcd-menu li > ul {
min-width:180px;
left:70px;
}
.mcd-menu li:hover > ul {
min-width:180px;
left:50px;
}
.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
min-width:150px;
}
.mcd-menu li ul li:hover > ul {
left:180px;
min-width:150px;
}
.mcd-menu li ul li ul li > ul {
left:35px;
top: 45px;
border:0;
border-top:4px solid #e67e22;
}
.mcd-menu li ul li ul li > ul:before {
left:30px;
top: -9px;
border:0;
border-bottom:5px solid #e67e22;
border-left:5px solid transparent;
border-right:5px solid transparent;
}
.mcd-menu li ul li ul li:hover > ul {
left:30px;
min-width:150px;
top: 35px;
}
.mcd-menu li ul a {
font-size:12px;
}
.mcd-menu li ul a i {
font-size:14px;
}
}
define([
'base/js/namespace',
'jquery',
'kernelspecs/biocham/cmd_tree'
],function (Jupyter, $, Commands) {
"use strict";
function build_menu_element(menu_item, strong) {
var element = $('<li/>');
var name;
if (strong) {
name = $('<strong/>')
.html(menu_item.name);
}
else {
name = menu_item.name;
}
var a = $('<a/>')
.attr('href', '#')
.html(name)
.appendTo(element);
return element;
}
function build_menu(menu, div, top) {
for (var i=0; i<menu.length; i++) {
var element = build_menu_element(menu[i], top);
if (menu[i].hasOwnProperty('sub_menu')) {
var outside = false;
var inner = $('<ul>').appendTo(element);
build_menu(menu[i].sub_menu, inner, outside);
}
element.appendTo(div);
}
return div;
}
function add_menu(menu) {
var gui_panel = $('<div/>')
.attr('id', 'gui_panel')
.hide();
var gui = $('<div/>')
.attr('id', 'gui');
gui.appendTo(gui_panel);
menu
.addClass('mcd-menu')
.appendTo(gui);
gui_panel.appendTo($('#ipython-main-app'));
}
function reactions () {
var img = $('img').map(function() {
if (this.src.includes('image/png;base64')) {
return this.src;
}
}).get();
var reactions = $('<div/>').addClass('reactions-menu');
for (var i=0; i<img.length; i++) {
var srcimg = $('<img/>').attr('src', img[i]);
reactions.append(srcimg);
}
reactions.appendTo($('#gui'));
}
function show_gui () {
$('#notebook_panel').css('position', 'absolute').css('left', -9999).css('overflow', 'hidden');
// dirty way to create the menu for now, should be tied to notebook loaded event
$('#gui_panel').show();
}
function show_notebook () {
$('#gui_panel').hide();
$('#notebook_panel').css('position', '').css('left', '').css('overflow', '');
}
function load_ipython_extension () {
$('<link/>', {
rel: 'stylesheet',
type:'text/css',
href: require.toUrl('nbextensions/biocham_gui/gui.css')
}).appendTo('head');
Jupyter.notebook.config.loaded.then(function () {
var menu = $('<div/>');
add_menu(build_menu(Commands.tree, menu, true));
reactions();
Jupyter.toolbar.add_buttons_group([
{
'label' : 'GUI',
'icon' : 'fa-flask',
'callback': show_gui,
},
{
'label' : 'Notebook',
'icon' : 'fa-book',
'callback': show_notebook,
}
], 'biocham');
});
console.log('Loading GUI');
}
return {
load_ipython_extension: load_ipython_extension
};
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment