Commit 1186fd0cebd4db017bbc6bc531b5b5f83a62710f

Annotations popup is sleek does not have overlay
  • Diff rendering mode:
  • inline
  • side by side

static/text-annotation.css

14 width: 700px;14 width: 700px;
15 box-shadow: 3px 3px 3px #468847;15 box-shadow: 3px 3px 3px #468847;
16}16}
17#list-anno {
18 width: 500px;
19 margin: -250px 0 0 28%;
20}

static/text-annotation.js

42 function(data) {42 function(data) {
43 //console.log(data);43 //console.log(data);
44 $('#list-anno .modal-body').html(data);44 $('#list-anno .modal-body').html(data);
45 $('#list-anno').modal();
45 $('#list-anno').modal({
46 backdrop: false,
47 });
46 });48 });
47 };49 };
4850
……
77 '<div id="list-anno" class="modal hide fade" role="dialog" aria-labelledby="list-anno-label" aria-hidden="true">'+77 '<div id="list-anno" class="modal hide fade" role="dialog" aria-labelledby="list-anno-label" aria-hidden="true">'+
78 ' <div class="modal-header">'+78 ' <div class="modal-header">'+
79 ' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'+79 ' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'+
80 ' <button type="button" class="pull-right" onclick="shiftModal();" style="margin-right:10px;">&hArr;</button>'+
80 ' <h3>Annotations</h3>'+81 ' <h3>Annotations</h3>'+
81 ' </div>'+82 ' </div>'+
82 ' <div class="modal-body">'+83 ' <div class="modal-body">'+
……
87 ' </div>'+87 ' </div>'+
88 '</div>';88 '</div>';
89 };89 };
90 window.shiftModal = function() {
91 var margin_left = $('#list-anno').css('marginLeft');
92 var margin = Number(margin_left.split('px')[0]);
93 console.log(margin);
94 if(margin < 100) {
95 $('#list-anno').css('marginLeft', '28%');
96 }
97 else {
98 $('#list-anno').css('marginLeft', '-28%');
99 }
100 };
90101
91 var modal_template = function() {102 var modal_template = function() {
92 return '<div id="annotation-tree" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div id="myModalLabel"> <h3>Annotation attributes</h3> <small>Select attributes for annotation</small> </div> </div> <div class="modal-body"> <div id="stats"> <div id="node-info"></div> <div id="selected-nodes"></div> </div> <div id="infovis"></div> <div id="status"></div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary" onclick="closeAnnotationTree();">Save changes</button> </div> </div>';103 return '<div id="annotation-tree" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div id="myModalLabel"> <h3>Annotation attributes</h3> <small>Select attributes for annotation</small> </div> </div> <div class="modal-body"> <div id="stats"> <div id="node-info"></div> <div id="selected-nodes"></div> </div> <div id="infovis"></div> <div id="status"></div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary" onclick="closeAnnotationTree();">Save changes</button> </div> </div>';
……
127 event.stopPropagation();127 event.stopPropagation();
128 event.preventDefault();128 event.preventDefault();
129 var elem = event.target;129 var elem = event.target;
130 elem.removeEventListener('click', onClick);
130 elem.style.border = 'none';131 elem.style.border = 'none';
131 elem.style.boxShadow = '';132 elem.style.boxShadow = '';
132 //console.log('clicked', elem);133 //console.log('clicked', elem);

templates/blank.html

1{% for obj in content %}1{% for obj in content %}
2<div class="well">2<div class="well">
3{% for key in content[obj].keys() %}3{% for key in content[obj].keys() %}
4<p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
4 <p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
5{% endfor %}5{% endfor %}
6</div>6</div>
7{% endfor %}7{% endfor %}