This commit is contained in:
Azlen Elza 2013-07-09 17:16:17 -07:00
Родитель f4a5b75028 95b2835623
Коммит ca78c5213e
22 изменённых файлов: 300 добавлений и 164 удалений

Просмотреть файл

@ -2,19 +2,19 @@
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: url('font/opensans-italic-webfont.woff') format('woff')
src: url('font/OpenSans-LightItalic.ttf') format('truetype')
}
@font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: 700;
src: url('font/opensans-bold-webfont.woff') format('woff')
src: url('font/OpenSans-Regular.ttf') format('truetype')
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('font/opensans-regular-webfont.woff') format('woff')
src: url('font/OpenSans-Light.ttf') format('truetype')
}

Просмотреть файл

@ -72,8 +72,12 @@ function elem(name, attributes, children){
window.addEventListener('load', function(evt){
addon.emit("privateWindowCheck");
// Wire up events
document.querySelector('.btn_group.visualization').click();
document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').click();
// document.querySelector('.btn_group.visualization').click();
// document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').click();
// document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected").click();
document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected", true);
document.querySelector('.btn_group.visualization [data-selected]').classList.remove("collapsed");
switchVisualization(localStorage.visualization.toLowerCase() || 'graph');
if ( localStorage.userHasOptedIntoSharing && localStorage.userHasOptedIntoSharing === 'true' ){
startUploadTimer();
}
@ -181,7 +185,7 @@ function startSharing(){
function stopSharing(){
if (confirm('You are about to stop sharing data with the Mozilla Collusion server.\n\n' +
'By clicking Okay you will no longer be uploading data.')){
uploadButton.innerHTML = '<i class="icon-arrow-up"></i>Share Data';
uploadButton.innerHTML = '<img src="image/collusion_icon_share.png" /></i>Share Data';
localStorage.userHasOptedIntoSharing = false;
if (uploadTimer){
clearTimeout(uploadTimer);

Двоичные данные
data/font/OpenSans-Light.ttf Executable file

Двоичный файл не отображается.

Двоичные данные
data/font/OpenSans-LightItalic.ttf Executable file

Двоичный файл не отображается.

Двоичные данные
data/font/OpenSans-Regular.ttf Executable file

Двоичный файл не отображается.

Двоичные данные
data/font/opensans-bold-webfont.woff

Двоичный файл не отображается.

Двоичные данные
data/font/opensans-bolditalic-webfont.woff

Двоичный файл не отображается.

Двоичные данные
data/font/opensans-italic-webfont.woff

Двоичный файл не отображается.

Двоичные данные
data/font/opensans-regular-webfont.woff

Двоичный файл не отображается.

Двоичные данные
data/image/collusion_icon_about.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 488 B

Двоичные данные
data/image/collusion_icon_clock.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 957 B

Двоичные данные
data/image/collusion_icon_facebook.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 370 B

Двоичные данные
data/image/collusion_icon_graph.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 872 B

Двоичные данные
data/image/collusion_icon_help.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 703 B

Двоичные данные
data/image/collusion_icon_list.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 642 B

Двоичные данные
data/image/collusion_icon_reset.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 734 B

Двоичные данные
data/image/collusion_icon_save.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 817 B

Двоичные данные
data/image/collusion_icon_settings.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 970 B

Двоичные данные
data/image/collusion_icon_share.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 807 B

Просмотреть файл

@ -10,43 +10,79 @@
<body>
<div class="main">
<aside class="controls">
<div class='collusion-title'>
<h1>Collusion</h1>
<header>
<div class="collusion-icon">
</div>
<div class="btn_group filter" style="margin-bottom: 10px">
<div data-view class="dropdown_button">
<a class="invi_focus" href="#"></a>
<a class="selected_time"><i class="icon-time"></i>Today</a>
<div class="downarrow"><i class="icon-sort-down"></i></div>
</div>
<div data-list class="dropdown_options collapsed">
<a data-selected data-value="Today">Today</a>
<a data-value="BBB">BBB</a>
<a data-value="CCC">CCC</a>
<a data-value="DDD">DDD</a>
</div>
</div>
<span>Current View:</span>
<img class="logo" src="image/collusion_wordmark_temp.png" />
</header>
<div class="btn_group visualization">
<div data-view class="dropdown_button">
<a class="invi_focus" href="#"></a>
<a class="selected_visualization">Graph</a>
<div class="downarrow"><i class="icon-sort-down"></i></div>
<span>VISUALIZATION</span>
<div class="arrow">
<i class="icon-sort-down"></i><i class="icon-sort-up hidden"></i>
</div>
<div data-list class="dropdown_options collapsed">
<a data-selected data-value="Graph">Graph</a>
<a data-value="Clock">Clock</a>
<a data-value="List">List</a>
</div>
<div data-list class="dropdown_options">
<a class="collapsed" data-value="Graph">
<img src="image/collusion_icon_graph.png" />graph
</a>
<a class="collapsed" data-value="Clock">
<img src="image/collusion_icon_clock.png" />clock
</a>
<a class="collapsed" data-value="List">
<img src="image/collusion_icon_list.png" />list
</a>
</div>
</div>
<div class="btn_group session">
<div data-view class="dropdown_button">
<span>SESSION</span>
<div class="arrow">
<i class="icon-sort-down"></i><i class="icon-sort-up hidden"></i>
</div>
</div>
<div data-list class="dropdown_options">
<a data-selected data-value="recent">recent site</a>
<a class="collapsed" data-value="last10sites">last 10 sites</a>
<a class="collapsed" data-value="daily">daily</a>
<a class="collapsed" data-value="weekly">weekly</a>
</div>
</div>
<div class="btn">
<a class="upload">
<img src="image/collusion_icon_share.png" />share
</a>
</div>
<div class="btn">
<a class="download">
<img src="image/collusion_icon_save.png" />download
</a>
</div>
<div class="btn">
<a class="reset-data">
<img src="image/collusion_icon_reset.png" />reset
</a>
</div>
<ul class="controls_options">
<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><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>
<div class="square-button-controls">
<div class="square-button">
<a class="help-mode"><img src="image/collusion_icon_help.png" /></a>
<div class="button-label">HELP</div>
</div>
<div class="square-button">
<a class="settings"><img src="image/collusion_icon_settings.png" /></a>
<div class="button-label">SETTINGS</div>
</div>
<div class="square-button">
<a class="about"><img src="image/collusion_icon_about.png" /></a>
<div class="button-label">ABOUT</div>
</div>
</div>
<div class="collusion-url">
www.mozilla.org/collusion
</div>
</aside>
<div class="content-flex">
@ -2713,12 +2749,12 @@
<div class="stage-footer">
<h3>SITE PREFERENCES</h3>
<div class="stage-footer-btns">
<button class="block-pref btn">Block Site</button>
<button class="hide-pref btn">Hide Site</button>
<button class="watch-pref btn">Watch Site</button>
<button class="no-pref btn">Remove</button>
<div class="block-pref btn"><a>Block Site</a></div>
<div class="hide-pref btn"><a>Hide Site</a></div>
<div class="watch-pref btn"><a>Watch Site</a></div>
<div class="no-pref btn"><a>Remove</a></div>
<div class="btn-spacer"></div>
<button class="toggle-hidden btn orange">Hide Hidden</button>
<div class="toggle-hidden btn orange"><a>Hide Hidden</a></div>
</div>
</div>
</div><!-- .stage-stack -->

Просмотреть файл

@ -10,11 +10,17 @@
sidebar "link" buttons: #939393
*/
/* New colour scheme:
sidebar, info panel
background:#404850
*/
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: #2E2B2B;
background-color: #000;
color: #EAEAEA;
overflow: hidden;
}
@ -34,56 +40,69 @@ h3 {
.main{
position: relative;
height: calc(100%);
}
.collusion-title{
height:65px;
margin-bottom:15px;
}
.collusion-title h1{
font-size: 25px;
vertical-align: center;
line-height: 50px;
height: 100%;
}
.controls{
width: 200px;
padding: 15px 30px;
width: 170px;
padding: 15px 15px;
float: left;
border-top: 1px solid #555555;
border-right: 1px solid #555555;
z-index: 5;
height: 100%;
font-size: 12px;
font-weight: bold;
overflow-x: hidden;
overflow-y: auto;
background: #404850;
}
.controls i:not(.icon-sort-down){
margin-right: 5px;
font-size: 14px;
vertical-align: middle;
}
.btn_group > *{
background: #363636;
}
.btn_group{
.controls .btn{
width:100%;
position: relative;
cursor: pointer;
font-size: 12px;
}
.controls header{
height: 35px;
margin-bottom: 20px;
}
.collusion-icon{
border:1px solid #5ABED2;
width: 35px;
height: 35px;
border-radius: 5px;
float: left;
}
.logo{
float: left;
width: 85px;
margin-left: 10px;
}
.hidden{
display: none;
}
/* Button Styling =============== */
.btn a:hover,
.square-button a:hover{
background: #475B61;
}
.btn_group,
.btn{
margin-bottom: 15px;
background: #25292D;
font-size: 7pt;
letter-spacing: 1px;
border-radius: 5px;
}
.btn_group .dropdown_button{
height: 32px;
line-height: 30px;
border: 1px solid #555555;
border-radius: 2px;
border-radius: 5px 0 0 0;
padding-left: 10px;
}
@ -92,41 +111,70 @@ h3 {
color: #EAEAEA;
}
.btn_group .downarrow{
.btn_group .arrow{
float: right;
border-left: 1px solid #555555;
padding: 0 10px;
background: #12181B;
border-radius: 0 5px 0 0;
cursor: pointer;
}
.collapsed {
display: none;
}
.invi_focus:focus{
outline: none;
.btn a,
.square-button a{
border-radius: 5px;
cursor: pointer;
}
.controls .btn_group .dropdown_options{
line-height: 28px;
position: absolute;
width: 100%;
z-index: 100;
}
.controls .btn_group div.dropdown_options a{
.btn_group div.dropdown_options a,
.btn a{
margin: 0;
display: block;
padding-left: 10px;
border-color: #555555;
border-width: 0 1px 1px 1px;
border-style: solid;
background: #303539;
line-height: 28px;
}
.btn.orange a{
background: rgb(250, 105, 0);
}
.btn.orange a:hover{
background: rgb(200, 75, 0);
}
.controls .btn_group div.dropdown_options a[data-selected]{
.btn_group .dropdown_options.expanded a:hover{
cursor: pointer;
background: #475B61;
}
.btn_group .dropdown_options a[data-selected]{
border-radius: 0 0 5px 5px;
background: #5F6771;
}
.btn_group .dropdown_options.expanded a{
border-radius: 0;
}
.btn_group .dropdown_options.expanded a:last-child{
border-radius: 0 0 5px 5px;
}
.btn_group .dropdown_options a.collapsed{
display: none;
}
.btn_group img,
.btn img{
width: 15px;
height: 15px;
margin-right: 15px;
position: relative;
top: 3px;
}
.controls ul{
list-style-type: none;
}
@ -143,15 +191,62 @@ h3 {
cursor: pointer;
}
.controls a:hover{
color: white;
.controls .square-button-controls{
position: fixed;
bottom: 30px;
margin-bottom: 20px;
}
.controls .collusion-url{
position: fixed;
bottom: 0;
margin-bottom: 10px;
}
.square-button{
float: left;
cursor: pointer;
text-align: center;
}
.square-button:not(:last-child){
margin-right: 20px;
}
.square-button a{
display: block;
background: #25292D;
width: 18px;
height: 18px;
padding: 5px;
margin: 0 auto;
}
.square-button.active{
background: #5F6771;
}
.square-button img{
position: relative;
top: 2px;
width: 15px;
height: 15px;
}
.square-button .button-label{
font-size: 7pt;
color: #fff;
margin-top: 5px;
text-align: center;
}
#content{
flex:1;
position: relative;
z-index: 0;
border-top: 1px solid #555555;
height: 100%;
}
#content span,
@ -163,7 +258,7 @@ h3 {
display:flex;
flex-direction:column;
height:100%;
width:calc(100% - 200px);
width:calc(100% - 170px);
}
.stats-bar{
@ -180,6 +275,7 @@ h3 {
transition: width 0.5s ease;
overflow-x: hidden;
overflow-y: auto;
background: #404850;
}
.map-section{
@ -234,7 +330,6 @@ h3 {
.showinfo .info{
width: 300px;
border-left: 1px solid #555555;
}
.info .blue-text {
@ -340,10 +435,12 @@ h3 {
justify-content:space-between;
align-items:flex-start;
}
.stage-footer-btns button{
flex:none;
.stage-footer-btns .btn{
margin-right:20px;
}
.stage-footer-btns .btn a{
padding-right:10px;
}
.btn-spacer{
flex:1;
}
@ -680,19 +777,4 @@ line{
clear: both;
}
.btn{
padding:5px 20px;
background-color:#404040;
border-radius: 2px;
border:none;
cursor:pointer;
color: rgb(234, 234, 234)
}
.btn.orange{background-color:#AD5E33}
.btn:hover{
background-color:#505050;
}
.btn.orange:hover{background-color:#9C4D22}/*DO THIS NEXT*?

Просмотреть файл

@ -5,31 +5,45 @@ function toArray(nl){
}
/* DOMContentLoaded event listener */
window.addEventListener("DOMContentLoaded", function(){
/**************************************************
* Buttons
*/
function dropdownGroup(btnGroup, callback){
var view = btnGroup.querySelector("[data-view]");
var list = btnGroup.querySelector("[data-list]");
callback = callback || function(){};
btnGroup.addEventListener("click", function(e){
var selected = btnGroup.querySelector("[data-selected]");
var btnSelectCallback = function(e,btnGroup,callback){
var targetValue = e.target.getAttribute("data-value");
var activeDropdown = document.querySelector(".active_dropdown");
// opens up the current selected dropdown list
btnGroup.querySelector(".dropdown_options").classList.toggle("collapsed");
btnGroup.classList.toggle("active_dropdown");
// when user selects an option from the dropdown list
if ( targetValue ){
view.querySelector("a:not(.invi_focus)").innerHTML = e.target.innerHTML;
selected.removeAttribute("data-selected");
e.target.setAttribute("data-selected", true);
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
btnGroup.querySelector(".dropdown_options").classList.remove("expanded");
btnGroup.querySelector(".arrow").querySelector(".icon-sort-down").classList.remove("hidden");
btnGroup.querySelector(".arrow").querySelector(".icon-sort-up").classList.add("hidden");
toArray(otherOptions).forEach(function(option){
option.classList.add("collapsed");
});
callback(targetValue);
}
function dropdownGroup(btnGroup, callback){
callback = callback || function(){};
var arrow = btnGroup.querySelector(".arrow");
arrow.addEventListener("click", function(event){
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
var allOptions = btnGroup.querySelectorAll(".dropdown_options a");
arrow.querySelector(".icon-sort-down").classList.toggle("hidden");
arrow.querySelector(".icon-sort-up").classList.toggle("hidden");
btnGroup.querySelector(".dropdown_options").classList.toggle("expanded");
toArray(otherOptions).forEach(function(option){
option.classList.toggle("collapsed");
});
toArray(allOptions).forEach(function(option){
option.addEventListener("click", function(e){
btnGroup.querySelector("[data-selected]").removeAttribute("data-selected");
e.target.setAttribute("data-selected", true);
btnSelectCallback(e,btnGroup,function(selectedValue){
callback(selectedValue);
});
});
});
}, false);
}
@ -67,8 +81,6 @@ window.addEventListener("DOMContentLoaded", function(){
}, true);
});
document.querySelector(".download").addEventListener('click', function(evt) {
console.log('received export data');
var file = new Blob([exportFormat(allConnections)], {type: 'application/json'});
@ -105,7 +117,7 @@ document.querySelector('.reset-data').addEventListener('click', function(){
var uploadButton = document.querySelector('.upload');
if (localStorage.userHasOptedIntoSharing && localStorage.userHasOptedIntoSharing === 'true'){
uploadButton.innerHTML = 'Stop Sharing';
uploadButton.innerHTML = '<img src="image/collusion_icon_share.png" /> Stop Sharing';
}
uploadButton.addEventListener('click', function(){
@ -357,9 +369,10 @@ document.querySelector(".world-map").addEventListener("mouseleave",function(even
/* Help Mode ========================= */
document.querySelector(".help-mode").checked = false;
document.querySelector(".help-mode").addEventListener("click", function(){
if( this.checked ){
var theButton = document.querySelector(".help-mode").parentElement;
theButton.classList.toggle("active");
if( theButton.className.contains("active") ){
triggerHelp(document.querySelector("body"), "toggleOnHelp", currentVisualization.name);
}else{
triggerHelp(document.querySelector("body"), "toggleOffHelp", currentVisualization.name);
@ -381,6 +394,7 @@ document.querySelector(".settings").addEventListener("click", function(event){
if ( infoBarVisible ){
document.querySelector("#content").classList.remove("showinfo");
}
document.querySelector(".settings").parentElement.classList.toggle("active");
document.querySelector(".settings-page").classList.toggle("hide");
});