Skip to content

gargantext
gargantext
Commit 47e66a79 authored by Romain Loth's avatar Romain Loth
Browse files
Options

[FEAT] graphExplorer sidebar hide/show button and actions

parent 8d009ae8
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 53 deletions
static/lib/graphExplorer/libs/css2/custom.css
View file @ 47e66a79
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
.loader{ .loader{
text-align:center; text-align:center;
transform: translate(0, 50%) !important; transform: translate(0, 50%) !important;
-ms-transform: translate(0, 50%) !important; /*IE 9*/ -ms-transform: translate(0, 50%) !important; /*IE 9*/
-webkit-transform: translate(0, 50%) !important; /*Safari and Chrome */ -webkit-transform: translate(0, 50%) !important; /*Safari and Chrome */
} }
.navbar { .navbar {
margin-bottom:1px; margin-bottom:1px;
} }
...@@ -30,10 +30,10 @@ ...@@ -30,10 +30,10 @@
#defaultop li.basicitem{ #defaultop li.basicitem{
/*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;*/ /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;*/
padding-left: .4em; padding-left: .2em;
padding-right: .4em; padding-right: .2em;
padding-bottom: 0; padding-bottom: 0;
font-size: 90% ; font-size: 75% ;
} }
#defaultop > div { #defaultop > div {
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
/*searchnav should get same padding as our .navbar-nav > li > a or bootstrap's*/ /*searchnav should get same padding as our .navbar-nav > li > a or bootstrap's*/
#defaultop div#searchnav { #defaultop div#searchnav {
padding-top: 13px; padding-top: 13px;
padding-bottom: 9px; padding-bottom: 9px;
} }
...@@ -174,10 +174,10 @@ ...@@ -174,10 +174,10 @@
/*.selection-item{ /*.selection-item{
display:inline-block; display:inline-block;
border:solid 1px; border:solid 1px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-khtml-border-radius: 6px;'+ -khtml-border-radius: 6px;'+
border-color:#BDBDBD; border-color:#BDBDBD;
padding:0px 2px 0px 2px; padding:0px 2px 0px 2px;
margin:1px 0px 1px 0px; margin:1px 0px 1px 0px;
cursor: pointer; cursor: pointer;
...@@ -204,8 +204,8 @@ ...@@ -204,8 +204,8 @@
display:inline-block; display:inline-block;
border:solid 1px; border:solid 1px;
/*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */ /*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */
border-radius: 6px; border-radius: 6px;
border-color:#BDBDBD; border-color:#BDBDBD;
padding:0px 2px 0px 2px; padding:0px 2px 0px 2px;
margin:1px 0px 1px 0px; margin:1px 0px 1px 0px;
cursor: pointer; cursor: pointer;
...@@ -251,7 +251,7 @@ ...@@ -251,7 +251,7 @@
} }
.gradient { .gradient {
background-color: #f0f0f8; background-color: #f0f0f8;
background-image: -webkit-radial-gradient(#ffffff, #d8d8e0); background-image: -moz-radial-gradient(#ffffff, #d8d8e0); background-image: -webkit-radial-gradient(#ffffff, #d8d8e0); background-image: -moz-radial-gradient(#ffffff, #d8d8e0);
/*background-color: #434343;*/ /*background-color: #434343;*/
/*background-image: linear-gradient(#434343, #282828);*/ /*background-image: linear-gradient(#434343, #282828);*/
...@@ -338,7 +338,11 @@ ...@@ -338,7 +338,11 @@
} }
#aUnfold { #aUnfold {
display: block; width: 12px; height: 12px; background-image: url("../img2/fleches-horiz.png"); margin: 0 auto; display: block;
width: 12px;
height: 12px;
background-image: url("../img2/fleches-horiz.png");
/*margin: 0 auto;*/
} }
/* /*
#saveAs { #saveAs {
...@@ -390,7 +394,7 @@ ...@@ -390,7 +394,7 @@
} }
#tips ul{ #tips ul{
/*list-style:none;*/ /*list-style:none;*/
padding-left:10%; padding-left:10%;
} }
......
static/lib/graphExplorer/tinawebJS/Tinaweb.js
View file @ 47e66a79
...@@ -24,17 +24,25 @@ ...@@ -24,17 +24,25 @@
// on window resize // on window resize
// @param canvasdiv: id of the div (without '#') // @param canvasdiv: id of the div (without '#')
function sigmaLimits( canvasdiv ) { function sigmaLimits( canvasdiv, SidecolumnIsInvisible ) {
console.log('FUN t.TinawebJS:sigmaLimits') ; console.log('FUN t.TinawebJS:sigmaLimits (div=' + canvasdiv + ')') ;
var canvas = document.getElementById(canvasdiv) ; var canvas = document.getElementById(canvasdiv) ;
var sidecolumn = document.getElementById('sidecolumn') ; var sidecolumn = document.getElementById('sidecolumn') ;
var ancho_total = window.innerWidth - sidecolumn.offsetWidth ;
var alto_total = window.innerHeight - sidecolumn.offsetTop ; var alto_total = window.innerHeight - sidecolumn.offsetTop ;
var ancho_total = -1
if (SidecolumnIsInvisible) {
ancho_total = window.innerWidth
}
else {
// normal case
ancho_total = window.innerWidth - sidecolumn.offsetWidth ;
}
// setting new size // setting new size
canvas.style.width = ancho_total - 5 ; canvas.style.width = ancho_total - 5 ;
canvas.style.height = alto_total - 5 ; canvas.style.height = alto_total - 5 ;
// fyi result // fyi result
var pw=canvas.offsetWidth; var pw=canvas.offsetWidth;
var ph=canvas.offsetHeight; var ph=canvas.offsetHeight;
...@@ -549,29 +557,40 @@ TinaWebJS = function ( sigmacanvas ) { ...@@ -549,29 +557,40 @@ TinaWebJS = function ( sigmacanvas ) {
// === un/hide leftpanel === // // === un/hide leftpanel === //
$("#aUnfold").click(function(e) { $("#aUnfold").click(function(e) {
// TODO unify with/without jquery
//SHOW sidecolumn //SHOW sidecolumn
sidebar = $("#sidecolumn"); sidebar = $("#sidecolumn");
fullwidth=$('#fixedtop').width(); fullwidth=window.innerWidth
e.preventDefault(); e.preventDefault();
// $("#wrapper").toggleClass("active"); // $("#wrapper").toggleClass("active");
if(parseFloat(sidebar.css("right"))<0){ if(parseFloat(sidebar.css("right"))<0){
sidebar.show()
$("#aUnfold").attr("class","rightarrow"); $("#aUnfold").attr("class","rightarrow");
// apply width from settings on sidecolumn
document.getElementById('sidecolumn').style.width = sidecolumnSize ;
sidebar.animate({ sidebar.animate({
"right" : sidebar.width()+"px" "right" : "0px"
}, { duration: 400, queue: false });
$("#ctlzoom").animate({
"right": (sidebar.width()+10)+"px"
}, { duration: 400, queue: false }); }, { duration: 400, queue: false });
// $('#sigma-example').width(fullwidth-sidebar.width()); // $('#sigma-example').width(fullwidth-sidebar.width());
$('#sigma-example').animate({ // $('#sigma-example').animate({
"width": fullwidth-sidebar.width()+"px" // "width": fullwidth-sidecolumnSize+"px"
}, { duration: 400, queue: false }); // }, { duration: 400, queue: false });
setTimeout(function() { setTimeout(function() {
// reposition the button inside the column
var btn = document.getElementById('unfold')
btn.style.position = 'initial' ;
btn.style.top = undefined ;
btn.style.right = 0 ;
$('#unfold').insertBefore('#tips');
sigmaLimits( "sigma-example")
partialGraph.resize(); partialGraph.resize();
partialGraph.refresh(); partialGraph.refresh();
}, 400); }, 400);
console.log('ok')
} }
else { else {
//HIDE sidecolumn //HIDE sidecolumn
...@@ -580,18 +599,32 @@ TinaWebJS = function ( sigmacanvas ) { ...@@ -580,18 +599,32 @@ TinaWebJS = function ( sigmacanvas ) {
"right" : "-" + sidebar.width() + "px" "right" : "-" + sidebar.width() + "px"
}, { duration: 400, queue: false }); }, { duration: 400, queue: false });
$("#ctlzoom").animate({ // $('#sigma-example').width(fullwidth);
"right": "0px" // $('#sigma-example').animate({
}, { duration: 400, queue: false }); // "width": fullwidth+"px"
// },{ duration: 400, queue: false });
// $('#sigma-example').width(fullwidth);
$('#sigma-example').animate({
"width": fullwidth+"px"
},{ duration: 400, queue: false });
setTimeout(function() { setTimeout(function() {
partialGraph.resize(); // position #aUnfold out of sidecolumn so it remains visible
partialGraph.refresh(); // var graph = document.getElementById("sigma-example")
var gtop = document.getElementById("sidecolumn").offsetTop + 10
$('#unfold').insertAfter('#sigma-example');
var btn = document.getElementById('unfold') ;
btn.style.position = 'fixed' ;
btn.style.right = '20px' ;
btn.style.top = gtop ;
console.log('ok')
// partialGraph.resize();
sigmaLimits( "sigma-example", true)
partialGraph.resize();
partialGraph.refresh();
sidebar.hide()
}, 400); }, 400);
} }
}); });
......
templates/graphExplorer/explorer.html
View file @ 47e66a79
...@@ -32,12 +32,12 @@ ...@@ -32,12 +32,12 @@
#category0 ul li { margin: 0 12px 12px 0; } #category0 ul li { margin: 0 12px 12px 0; }
#category1 ul li { margin: 0 12px 12px 0; } #category1 ul li { margin: 0 12px 12px 0; }
/* will be adjusted later to match rendered height of dafixedtop from menu template */ /* will be adjusted later to match rendered height of dafixedtop from menu template */
#topspace { #topspace {
height: 90px; height: 90px;
} }
</style> </style>
<!-- <!--
<link rel="stylesheet" href="{% static "lib/graphExplorer/libs/bootswatch/css/bootswatch.css" %}"> <link rel="stylesheet" href="{% static "lib/graphExplorer/libs/bootswatch/css/bootswatch.css" %}">
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
Selector size<br> Selector size<br>
<div id="unranged-value" class="settingslider"></div> <div id="unranged-value" class="settingslider"></div>
</a></li> </a></li>
<li class='basicitem'><a> <li class='basicitem'><a>
Colors<br> Colors<br>
...@@ -133,20 +133,20 @@ ...@@ -133,20 +133,20 @@
<div class="col-sm-11 col-md-10 col-lg-10" > <div class="col-sm-11 col-md-10 col-lg-10" >
<div id="search_input_group" class="input-group input-group-sm"> <div id="search_input_group" class="input-group input-group-sm">
<span class="input-group-btn"> <span class="input-group-btn">
<button id="searchbutton" <button id="searchbutton"
title="Search the topic in the map" title="Search the topic in the map"
class="btn btn-info" class="btn btn-info"
type="button"> type="button">
<span class="glyphicon glyphicon-search"> <span class="glyphicon glyphicon-search">
</span> </span>
</button> </button>
</span> </span>
<!-- ########## THE SEARCH BAR ########## --> <!-- ########## THE SEARCH BAR ########## -->
<input id="searchinput" <input id="searchinput"
type="text" type="text"
class="form-control" class="form-control"
placeholder="Search" /> placeholder="Search" />
<!-- #################################### --> <!-- #################################### -->
</div> </div>
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
<div class="col-sm-1 col-md-2 col-lg-2"> <div class="col-sm-1 col-md-2 col-lg-2">
<input id="checkboxdiv" onclick="alertCheckBox(this);" <input id="checkboxdiv" onclick="alertCheckBox(this);"
title="Add next search results to current selection" title="Add next search results to current selection"
class="btn btn-info" class="btn btn-info"
type="checkbox"></input> type="checkbox"></input>
<p style="font-size:75%; line-height:90%">Add</p> <p style="font-size:75%; line-height:90%">Add</p>
</div> </div>
...@@ -208,11 +208,7 @@ ...@@ -208,11 +208,7 @@
<!-- <div class="content-header"> <!-- <div class="content-header">
<button id="menu-toggle">X</button> <button id="menu-toggle">X</button>
</div> --> </div> -->
<li>
<div id="unfold">
<a href="#" id="aUnfold" class="rightarrow"></a>
</div>
</li>
<!-- <!--
<li> <li>
<a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();"> <a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();">
...@@ -221,7 +217,6 @@ ...@@ -221,7 +217,6 @@
</li> </li>
--> -->
<li> <li>
<a href="#" id="snapicon" onclick="saveGraphIMG();" > <a href="#" id="snapicon" onclick="saveGraphIMG();" >
<img title="Take a photo!" width="34px" src="{% static "img/camera.png" %}" ></img> <img title="Take a photo!" width="34px" src="{% static "img/camera.png" %}" ></img>
...@@ -259,6 +254,10 @@ ...@@ -259,6 +254,10 @@
<!-- Sidebar --> <!-- Sidebar -->
<div id="sidecolumn"> <div id="sidecolumn">
<div id="unfold">
<!-- button to be replaced by handle when sidecolumn is hidden -->
<a href="#" id="aUnfold" class="rightarrow"></a>
</div>
<div id="tips"></div> <div id="tips"></div>
<div id="names"></div> <div id="names"></div>
<div id="ngrams_actions"></div> <div id="ngrams_actions"></div>
...@@ -482,8 +481,8 @@ ...@@ -482,8 +481,8 @@
// set exact height of topspace // set exact height of topspace
var dafixedtopHeight = $('#dafixedtop').height() ; var dafixedtopHeight = $('#dafixedtop').height() ;
$('#topspace').height(dafixedtopHeight) ; $('#topspace').height(dafixedtopHeight) ;
function newPopup(url) { function newPopup(url) {
popupWindow = window.open( popupWindow = window.open(
url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no') url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no')
......
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