Commit 5f60c338 authored by Katie Frey's avatar Katie Frey

styling on history side bard, can now open/close it too

parent 05b1be1a
......@@ -29,27 +29,45 @@ html {
}
#arrowd {
#closeleft {
z-index: 11;
width: auto;
top: 250px;
top: 240px;
position: absolute;
right: 0px;
overflow-y: none;
cursor: pointer;
}
#rightmenu {
#openleft {
z-index: 11;
width: auto;
top: 250px;
top: 240px;
position: absolute;
left: 0px;
overflow-y: none;
cursor: pointer;
}
#closeright {
z-index: 11;
width: auto;
top: 50px;
position: absolute;
left: 0px;
overflow-y: none;
display: none;
cursor: pointer;
}
#openright {
z-index: 11;
width: auto;
top: 55px;
position: absolute;
right: 0px;
overflow-y: none;
cursor: pointer;
}
#secondleft {
z-index: 10;
......@@ -76,7 +94,7 @@ html {
overflow-y: hidden;
}
#hidebutton, #arrowd, #treeoptions, #feedback, #history {
#hidebutton, #openleft, #treeoptions, #feedback, #history, #closeleft, #closeright, #openright {
display: none;
}
......@@ -106,6 +124,10 @@ html {
font-size: 0.875em;
}
#undohistory li:last-child, #redohistory li:last-child {
font-weight: bold;
}
#feedback, #menu {
border-radius: 25px;
background-color: rgba(255,255,255, 0.7);
......
......@@ -14,6 +14,8 @@ treeJSON = d3.json(j, function(error, treeData) {
redo_list = [];
var changenum = 1;
$("#history").hide()
//if i'm sending an actual json string instead of a file....
if(typeof treeData == 'undefined') {
......@@ -303,7 +305,19 @@ treeJSON = d3.json(j, function(error, treeData) {
//setupbackbutton(oldparent,newparents,draggingNode);
add_to_history("undo",oldparent,newparents,draggingNode);
if($('#openright').is(':visible')){
//nothing
} else {
$("#history").show();
$("#closeright").show();
}
$("#undosection").show();
clear_history("redo");
redo_list = [];
$("#redosection").hide();
endDrag();
} else {
endDrag();
......@@ -762,9 +776,9 @@ treeJSON = d3.json(j, function(error, treeData) {
redo_list.push(change);
}
var desc = changenum+": "+newchild["name"]+" moved from "+oldparent["name"]+" to "+newparents[0]["name"]+"</br>";
var desc = '"'+newchild['name']+'" <i>moved from</i> "'+oldparent['name']+'" <i>to</i> "'+newparents[0]['name']+'"';
var historyitem = $("<span></span>")
var historyitem = $("<li></li>")
.attr("id",historytype+"num"+changenum)
.html(desc);
......@@ -805,9 +819,16 @@ treeJSON = d3.json(j, function(error, treeData) {
$("#undonum"+changenum).remove();
add_to_history("redo", oldparent, newparents, newchild);
$("#redosection").show();
update(oldparent);
endDrag();
console.log(undo_list.length);
if (undo_list.length == 0){
$("#undosection").hide();
}
}
catch(err) {
console.log(err);
......@@ -842,9 +863,15 @@ treeJSON = d3.json(j, function(error, treeData) {
$("#redonum"+changenum).remove();
add_to_history("undo", oldparent, newparents, newchild);
$("#undosection").show();
update(oldparent);
endDrag();
console.log(redo_list.length);
if (redo_list.length == 0){
$("#redosection").hide();
}
}
catch(err) {
console.log(err);
......
......@@ -38,22 +38,35 @@
}
}
$("#arrowd").on("click",function(){
$("#closeleft").on("click",function(){
$("#leftside").toggle();
$("#rightmenu").toggle();
$("#openleft").toggle();
$("#feedback").hide();
$("#showbutton").show();
$("#hidebutton").hide();
$("#title").show();
});
$("#rightmenu").on("click",function(){
$("#openleft").on("click",function(){
$("#leftside").toggle();
$("#rightmenu").toggle();
$("#openleft").toggle();
$("#title").hide();
});
$("#closeright").on("click",function(){
$("#history").toggle();
$("#openright").toggle();
});
$("#openright").on("click",function(){
$("#history").toggle();
$("#openright").toggle();
});
$("#savebutton").on("click", function(){
try {
......@@ -193,8 +206,7 @@
renderTree(newData);
//$("#feedback").hide();
$("#treeoptions").show();
$("#arrowd").show();
$("#history").show();
$("#closeleft").show();
});
......
......@@ -34,7 +34,7 @@
<div class="container-fluid">
<div id="rightmenu"><img width="25px" src="{{ url_for('static', filename='img/right.png') }}"/></div>
<div id="openleft"><img width="25px" src="{{ url_for('static', filename='img/right.png') }}"/></div>
<div id="title">
{% if logo == ""%}
......@@ -92,7 +92,7 @@
</div>
<div id=arrowd><img width="25px" src="{{ url_for('static', filename='img/left.png') }}"/></div>
<div id=closeleft><img width="25px" src="{{ url_for('static', filename='img/left.png') }}"/></div>
</div>
......@@ -140,17 +140,23 @@
</div>
<div id="main">
<div id="history">
<strong>History of Changes</strong>
<br>
UNDO
<div id=closeright><img width="25px" src="{{ url_for('static', filename='img/right.png') }}"/></div>
<h5>History of Changes</h5>
<br/>
<div id="undohistory"></div>
<div id="undosection"><strong>Undo</strong>
<ul id="undohistory"></ul>
</div>
<hr/>
REDO
<br/>
<div id="redohistory"></div>
<div id="redosection"><strong>Redo</strong>
<ul id="redohistory"></ul>
</div>
</div>
<div id="openright"><img width="25px" alt="Open History" src="{{ url_for('static', filename='img/left.png') }}"/></div>
<div id="tree-container">
......
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