mozilla
/
lightbeam
зеркало из https://github.com/mozilla/lightbeam.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

[Issue #167] UI added

This commit is contained in:
Mavis Ou 2013-04-12 15:45:02 -07:00
Родитель 07b580c256
Коммит d4a300bd76
6 изменённых файлов: 195 добавлений и 5 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
data/collusion.js
Просмотреть файл

@ -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');
}

99
data/index.html
Просмотреть файл

@ -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,7 +2718,102 @@
<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>

2
data/infobar.js
Просмотреть файл

@ -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);

1
data/list.js
Просмотреть файл

@ -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");
}

64
data/style.css
Просмотреть файл

@ -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
Просмотреть файл

@ -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);