New UI

valueof · Jul 19, 2011 · 1543413 · 1543413
1 parent eb1815c
commit 1543413
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 14 deletions.
diff --git a/hiro.css b/hiro.css
@@ -1,17 +1,16 @@
 body {
-  background-color: #eee;
+  background-color: #fff;
   font-family: Verdana, Arial, Serif;
   margin: 0;
   padding: 0;
-  text-align: center;
   font-size: 10pt;
 }
 
 a:hover {
   color: #900020;
 }
 
-h1 {
+/* h1 {
   margin: 50px auto;
   margin-bottom: 10px;
   padding: 0 0 5px 7px;
@@ -23,19 +22,113 @@ h1 {
   color: #ccc;
   text-transform: uppercase;
   text-shadow: #fff 0px 1px 0px;
-}
+} */
 
-h1 span {
+/* h1 span {
   text-shadow: none;
   color: #eee;
+}*/
+
+div#groups {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-right: solid 1px #C8C9CF;
+  width: 200px;
+  margin: 0;
+  text-align: right;
+  background-color: #ECEEF4;
+}
+
+div#groups h1 {
+  margin: 20px;
+  font-weight: normal;
+  font-size: 200%;
+  padding: 0;
+  font-family: Helvetica, Verdana, Arial, Serif;
+  color: #53637D;
+}
+
+div#groups ul {
+  margin: 25px 20px 20px 20px;
+  list-style-type: none;
+}
+
+div#groups ul li {
+  margin: 10px 0;
+}
+
+div#groups ul li button {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: 110%;
+  color: #426DC9;
+  cursor: pointer;
+}
+
+div#suites {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 200px;
+  right: 200px;
+  overflow: auto;
+  box-shadow: 0px 0px 10px #888;
+}
+
+div#suites h1 {
+  margin: 20px;
+  font-weight: normal;
+  font-size: 200%;
+  padding: 0 0 5px 0;
+  font-family: Helvetica, Verdana, Arial, Serif;
+  color: #53637D;
+  border-bottom: solid 1px #eee;
+}
+
+div#log {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 200px;
+  border-left: solid 1px #C8C9CF;
+  background-color: #ECEEF4;
+  overflow: auto;
+}
+
+div#log h1 {
+  margin: 20px;
+  font-weight: normal;
+  font-size: 200%;
+  padding: 0 0 5px 0;
+  font-family: Helvetica, Verdana, Arial, Serif;
+  color: #53637D;
 }
 
 div#footer {
-  margin: 50px 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 200px;
+  height: 50px;
+  border-right: solid 1px #C8C9CF;
+  margin: 0;
+  text-align: right;
+}
+
+div#footer p {
+  margin: 20px;
+  padding: 0;
   font-size: 90%;
-  font-weight: normal;
+  color: #999;
-  color: #ccc;
+}
-  text-shadow: #fff 0px 1px 0px;
+
+div#footer a {
+  color: #999;
 }
 
 div#web {

diff --git a/hiro.js b/hiro.js
@@ -31,6 +31,7 @@ var hiro = (function (window, undefined) {
   var clearTimeout = window.clearTimeout;
   var TIMEOUT      = 15000; // Default timeout for test cases and suites
   var suites       = {};
+  var groups       = {};
   var events       = {
     'hiro.onStart':     [], // no arguments
     'hiro.onComplete':  [], // (success, report)
@@ -439,6 +440,14 @@ var hiro = (function (window, undefined) {
       TIMEOUT = timeout;
     },
 
+    getGroups: function () {
+      var names = [];
+      each(groups, function (_, name) {
+        names.push(name);
+      });
+      return names;
+    },
+
     autorun: function () {
       var query = window.location.search.slice(1).split('.');
       var suite = query.length ? query[0] : undefined;
@@ -448,7 +457,17 @@ var hiro = (function (window, undefined) {
     },
 
     module: function (name, methods) {
-      suites[name] = new Suite(name, methods);
+      var suite = new Suite(name, methods);
+
+      if (methods.groups && methods.groups.length) {
+        each(methods.groups, function (group) {
+          if (!groups[group] || !groups[group].length)
+            groups[group] = [];
+          groups[group].push(suite);
+        });
+      }
+
+      suites[name] = suite;
     },
 
     bind: function (name, handler) {

diff --git a/test.html b/test.html
@@ -11,14 +11,22 @@
     <script src="web.js"></script>
   </head>
 
-  <body onload="hiro.autorun();">
+  <body onload="web.init();">
-    <h1>Hiro <span>Protagonist</span></h1>
+    <div id="groups">
+      <h1>Groups</h1>
+      <ul></ul>
+    </div>
+
+    <div id="log">
+      <h1>Log</h1>
+    </div>
 
-    <div id="web">
+    <div id="suites">
+      <h1>Suites</h1>
     </div>
 
     <div id="footer">
-      (music, movies, microcode)
+      <p><a href="http://hirojs.com/">Hiro</a> | <a href="#">Authors</a> | <a href="#">Design</a></p>
     </div>
 
     <textarea class="fixture" data-name="hirojs">

diff --git a/test.js b/test.js
@@ -2,6 +2,8 @@
 /*global hiro:false */
 
 hiro.module('GenericTests', {
+  groups: [ 'Tests' ],
+
   setUp: function () {
     this.loadFixture('hirojs');
   },

diff --git a/web.js b/web.js
@@ -24,6 +24,8 @@
 /*jshint undef:true, browser:true, strict:true, maxlen:80 */
 /*global hiro:false, ender:false */
 
+var web;
+
 (function (window, undefined) {
   "use strict";
 
@@ -130,4 +132,25 @@
 
     context = '#hiro_suite_' + test.suite.name;
   });
+
+  web = {
+    init: function () {
+      var list   = ender('div#groups > ul');
+      var groups = hiro.getGroups();
+
+      function button(title) {
+        var li = ender(document.createElement('li'));
+        var bt = ender(document.createElement('button'));
+
+        bt.html(title).appendTo(li);
+        li.appendTo(list);
+      }
+
+      for (var i = 0, group; group = groups[i]; i++) {
+        button(group);
+      }
+
+      button("All Suites");
+    }
+  };
 }(window));