зеркало из https://github.com/mozilla/lightbeam.git
[Issue #167] UI added
This commit is contained in:
Родитель
07b580c256
Коммит
d4a300bd76
|
@ -18,7 +18,10 @@ function switchVisualization(name){
|
|||
currentVisualization.emit('remove');
|
||||
}
|
||||
currentVisualization = visualizations[name];
|
||||
// toggle off info panel, settings page, help bubbles
|
||||
document.querySelector("#content").classList.remove("showinfo");
|
||||
document.querySelector(".settings-page").classList.add("hide");
|
||||
clearAllBubbles();
|
||||
|
||||
addon.emit('uiready');
|
||||
}
|
||||
|
|
|
@ -48,10 +48,10 @@
|
|||
<a class="zoom-out"><i class="icon-minus-sign"></i></a>
|
||||
<a class="move-down"><i class="icon-circle-arrow-down"></i></a>
|
||||
</li>
|
||||
<li class="settings"><a><i class="icon-cog"></i>Settings</a></li>
|
||||
<li class="upload"><a><i class="icon-arrow-up"></i>Share Data</a></li>
|
||||
<li class="download"><a><i class="icon-arrow-down"></i>Download data</a></li>
|
||||
<li class="reset-data"><a>Reset data</a></li>
|
||||
<li class="reset-data"><a><i class="icon-refresh"></i>Reset data</a></li>
|
||||
<li class="settings"><a>Toggle Settings</a></li>
|
||||
<li class="show-info-button"><a>Toggle Info Panel</a></li>
|
||||
<li><input type="checkbox" class="help-mode" /> Help Mode </li>
|
||||
</ul>
|
||||
|
@ -2718,8 +2718,103 @@
|
|||
<defs>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="settings-page hide">
|
||||
<div class="page-header">Settings</div>
|
||||
<header class="hidden-sites">Hidden Sites</header>
|
||||
<section>
|
||||
<div class="num-sites">2 sites in total</div>
|
||||
<ul>
|
||||
<li><div>
|
||||
<div><i class="icon-caret-right"></i></div>
|
||||
<div class="hide"><i class="icon-caret-down"></i></div>
|
||||
<div class="item">
|
||||
<div class="site-url">aaaaa.example.com</div>
|
||||
<div class="settings-option hide">
|
||||
<input type="checkbox" name="">hide</input>
|
||||
<input type="checkbox" name="">block</input>
|
||||
<input type="checkbox" name="">whitelist</input>
|
||||
</div>
|
||||
</div>
|
||||
</div></li>
|
||||
<li><div>
|
||||
<div><i class="icon-caret-right"></i></div>
|
||||
<div class="hide"><i class="icon-caret-down"></i></div>
|
||||
<div class="site-url">bbbbb.example.com</div>
|
||||
<div class="settings-option hide">
|
||||
<input type="checkbox" name="">hide</input>
|
||||
<input type="checkbox" name="">block</input>
|
||||
<input type="checkbox" name="">whitelist</input>
|
||||
</div>
|
||||
</div></li>
|
||||
</ul>
|
||||
</section>
|
||||
<header class="blocked-sites">Blocked Sites</header>
|
||||
<section>
|
||||
<div class="num-sites">3 sites in total</div>
|
||||
<ul>
|
||||
<li><div>
|
||||
<div><i class="icon-caret-right"></i></div>
|
||||
<div class="hide"><i class="icon-caret-down"></i></div>
|
||||
<div class="site-url">ccccc.example.com</div>
|
||||
<div class="settings-option hide">
|
||||
<input type="checkbox" name="">hide</input>
|
||||
<input type="checkbox" name="">block</input>
|
||||
<input type="checkbox" name="">whitelist</input>
|
||||
</div>
|
||||
</div></li>
|
||||
<li><div>
|
||||
<div><i class="icon-caret-right"></i></div>
|
||||
<div class="hide"><i class="icon-caret-down"></i></div>
|
||||
<div class="site-url">ddddd.example.com</div>
|
||||
<div class="settings-option hide">
|
||||
<input type="checkbox" name="">hide</input>
|
||||
<input type="checkbox" name="">block</input>
|
||||
<input type="checkbox" name="">whitelist</input>
|
||||
</div>
|
||||
</div></li>
|
||||
<li><div>
|
||||
<div><i class="icon-caret-right"></i></div>
|
||||
<div class="hide"><i class="icon-caret-down"></i></div>
|
||||
<div class="site-url">eeeee.example.com</div>
|
||||
<div class="settings-option hide">
|
||||
<input type="checkbox" name="">hide</input>
|
||||
<input type="checkbox" name="">block</input>
|
||||
<input type="checkbox" name="">whitelist</input>
|
||||
</div>
|
||||
</div></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<header class="whitelist">Whitelist Sites</header>
|
||||
<section>
|
||||
<div class="num-sites">2 sites in total</div>
|
||||
<ul>
|
||||
<li><div>
|
||||
<div><i class="icon-caret-right"></i></div>
|
||||
<div class="hide"><i class="icon-caret-down"></i></div>
|
||||
<div class="site-url">abcde.example.com</div>
|
||||
<div class="settings-option hide">
|
||||
<input type="checkbox" name="">hide</input>
|
||||
<input type="checkbox" name="">block</input>
|
||||
<input type="checkbox" name="">whitelist</input>
|
||||
</div>
|
||||
</div></li>
|
||||
<li><div>
|
||||
<div><i class="icon-caret-right"></i></div>
|
||||
<div class="hide"><i class="icon-caret-down"></i></div>
|
||||
<div class="site-url">omgomg.example.com</div>
|
||||
<div class="settings-option hide">
|
||||
<input type="checkbox" name="">hide</input>
|
||||
<input type="checkbox" name="">block</input>
|
||||
<input type="checkbox" name="">whitelist</input>
|
||||
</div>
|
||||
</div></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="tooltip"></div>
|
||||
<div id="help"><svg class="helpcanvas" width="100%" height="100%"></svg></div>
|
||||
|
|
|
@ -13,7 +13,7 @@ document.querySelector('#content').addEventListener('click', function(event){
|
|||
// console.log('svg node: %o, name: %s, data node: %s', node, node.getAttribute('data-name'), aggregate.nodeForKey(node.getAttribute('data-name')));
|
||||
updateInfo(node.getAttribute('data-name'));
|
||||
}else{
|
||||
console.log('does not match .node: %o', event.target);
|
||||
//console.log('does not match .node: %o', event.target);
|
||||
}
|
||||
},false);
|
||||
|
||||
|
|
|
@ -187,6 +187,7 @@ function createCell(data){
|
|||
function resetCanvas(){
|
||||
document.querySelector(".stage").classList.remove("list");
|
||||
document.querySelector(".stage").removeChild( document.querySelector(".stage .list-breadcrumb") );
|
||||
document.querySelector(".stage").removeChild( document.querySelector(".stage .list-header") );
|
||||
document.querySelector(".stage").removeChild( document.querySelector(".stage .list-table") );
|
||||
vizcanvas.classList.remove("hide");
|
||||
}
|
||||
|
|
|
@ -138,8 +138,9 @@ h3 {
|
|||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.controls .controls_options a{
|
||||
.controls ul.controls_options li{
|
||||
color: #939393;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controls a:hover{
|
||||
|
@ -275,7 +276,8 @@ h3 {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.connections-list ul li:hover{
|
||||
.connections-list ul li:hover,
|
||||
.settings-page ul li:hover{
|
||||
color: #2E2B2B;
|
||||
background-color: #EBE9E9;
|
||||
}
|
||||
|
@ -524,3 +526,61 @@ line{
|
|||
.help-bubble-pointer{
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Settings Page */
|
||||
|
||||
.settings-page{
|
||||
width: 100%;
|
||||
padding: 30px 10px 0 50px;
|
||||
color: #939393;
|
||||
}
|
||||
|
||||
.page-header{
|
||||
font-size: 22px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.settings-page header{
|
||||
color: #fff;
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.settings-page section{
|
||||
font-size: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.settings-page .num-sites{
|
||||
color: #5A50F0;
|
||||
}
|
||||
|
||||
.settings-page ul{
|
||||
width: 400px;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.settings-page ul li{
|
||||
padding: 1px 0;
|
||||
clear: both;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.settings-page i{
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.settings-page .site-url{
|
||||
float: left;
|
||||
}
|
||||
.settings-page .settings-option{
|
||||
font-size: 12px;
|
||||
padding-left: 15px;
|
||||
clear: both;
|
||||
}
|
31
data/ui.js
31
data/ui.js
|
@ -238,6 +238,7 @@ document.querySelector('.map-control .zoom-out').addEventListener('click', funct
|
|||
return false;
|
||||
});
|
||||
|
||||
|
||||
/* Help Mode ========================= */
|
||||
document.querySelector(".help-mode").checked = false;
|
||||
document.querySelector(".help-mode").addEventListener("click", function(){
|
||||
|
@ -247,3 +248,33 @@ document.querySelector(".help-mode").addEventListener("click", function(){
|
|||
triggerHelp(document.querySelector("body"), "toggleOffHelp", currentVisualization.name);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Settings Page ========================= */
|
||||
document.querySelector(".settings").addEventListener("click", function(event){
|
||||
if ( currentVisualization.name == "clock" || currentVisualization.name == "graph" ){
|
||||
document.querySelector(".vizcanvas").classList.toggle("hide");
|
||||
}else{
|
||||
document.querySelector(".list-breadcrumb").classList.toggle("hide");
|
||||
document.querySelector(".list-header").classList.toggle("hide");
|
||||
document.querySelector(".list-table").classList.toggle("hide");
|
||||
|
||||
}
|
||||
var infoBarVisible = document.querySelector("#content").classList.contains("showinfo");
|
||||
if ( infoBarVisible ){
|
||||
document.querySelector("#content").classList.remove("showinfo");
|
||||
}
|
||||
document.querySelector(".settings-page").classList.toggle("hide");
|
||||
});
|
||||
|
||||
document.querySelector(".settings-page").addEventListener("click", function(event){
|
||||
if (event.target.mozMatchesSelector(".settings-page ul li, .settings-page ul li *")){
|
||||
var site = event.target;
|
||||
while(site.mozMatchesSelector(".settings-page ul li *")){
|
||||
site = site.parentElement;
|
||||
}
|
||||
site.querySelector(".settings-option").classList.toggle("hide");
|
||||
site.querySelector(".icon-caret-right").parentElement.classList.toggle("hide");
|
||||
site.querySelector(".icon-caret-down").parentElement.classList.toggle("hide");
|
||||
}
|
||||
},false);
|
||||
|
|
Загрузка…
Ссылка в новой задаче