[Issue #167] UI added

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

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>

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

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

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;
+}

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