Skip to content

gargantext
gargantext
Commit 986567aa authored by Romain Loth's avatar Romain Loth
Browse files
Options

[FEAT] graphExplorer sidebar hide/show button and actions

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