From 0d2f08277913aa0bbf170d11d1ae2ccd088519e7 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 12 Jun 2012 16:41:37 +0200
Subject: [PATCH] update DocPanel and DocPage UI

---
 source/Ox.UI/js/Code/DocPage.js  |  4 +--
 source/Ox.UI/js/Code/DocPanel.js | 55 ++++++++++++++++----------------
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/source/Ox.UI/js/Code/DocPage.js b/source/Ox.UI/js/Code/DocPage.js
index f94a557b..7ce3ebe4 100644
--- a/source/Ox.UI/js/Code/DocPage.js
+++ b/source/Ox.UI/js/Code/DocPage.js
@@ -35,7 +35,6 @@ Ox.DocPage = function(options, self) {
         self.$examplesMenu = Ox.MenuButton({
                 items: self.options.item.examples,
                 title: 'Examples...',
-                width: 128
             })
             .css({float: 'right', margin: '4px 4px 4px 2px'})
             .bindEvent({
@@ -46,8 +45,7 @@ Ox.DocPage = function(options, self) {
             .appendTo(self.$toolbar);
     }
 
-    self.$page = Ox.Container()
-        .addClass('OxDocPage OxDocument');
+    self.$page = Ox.Container().addClass('OxDocPage OxDocument');
 
     that.setElement(
         Ox.SplitPanel({
diff --git a/source/Ox.UI/js/Code/DocPanel.js b/source/Ox.UI/js/Code/DocPanel.js
index efe2b2af..8ecb4434 100644
--- a/source/Ox.UI/js/Code/DocPanel.js
+++ b/source/Ox.UI/js/Code/DocPanel.js
@@ -65,11 +65,12 @@ Ox.DocPanel = function(options, self) {
     self.$testsButton = Ox.Button({title: 'Run Tests'})
         .css({float: 'left', margin: '4px'})
         .bindEvent({click: runTests});
-    self.$testsIcon = Ox.LoadingIcon()
-        .css({float: 'left', margin: '4px'});
+    self.$testsLabel = Ox.Label({title: 'Running Tests...'})
+        .css({float: 'left', margin: '4px'})
+        .hide();
     self.$toolbar = Ox.Bar({size: 24})
         .append(self.$testsButton)
-        .append(self.$testsIcon);
+        .append(self.$testsLabel)
     self.$list = Ox.Element();
     self.$sidebar = Ox.SplitPanel({
         elements: [
@@ -105,6 +106,7 @@ Ox.DocPanel = function(options, self) {
         }), function(docItems) {
             self.options.items = docItems;
             getExamples(function() {
+                self.$sidebar.replaceElement(0, self.$toolbar);
                 renderList();
                 self.options.runTests && runTests();
                 that.triggerEvent('load', {items: docItems});
@@ -112,6 +114,7 @@ Ox.DocPanel = function(options, self) {
         });
     } else {
         getExamples(function() {
+            self.$sidebar.replaceElement(0, self.$toolbar);
             renderList();
             self.options.runTests && runTests();
         });
@@ -259,38 +262,34 @@ Ox.DocPanel = function(options, self) {
                     selectItem(data.ids.length ? data.ids[0] : '')
                 }
             });
-        self.$sidebar
-            .replaceElement(0, self.$toolbar)
-            .replaceElement(1, self.$list);
+        self.$sidebar.replaceElement(1, self.$list);
         selectItem(self.options.selected);
     }
 
     function runTests() {
-        self.$testsButton.options({disabled: true});
-        self.$testsIcon.start();
-        setTimeout(function() {
-            Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() {
-                Ox.test(self.options.items, function(results) {
-                    results.forEach(function(result) {
-                        var item = getItemByName(result.name),
-                            passed = result.passed ? 'passed' : 'failed';
-                        item.tests[Ox.indexOf(item.tests, function(test) {
-                            return test.statement == result.statement;
-                        })] = result;
-                        ['', item.module + '/'].concat(
-                            item.section ? item.module + '/' + item.section + '/' : [],
-                            item.module + '/' + (item.section ? item.section + '/' : '') + item.name
-                        ).forEach(function(key) {
-                            self.results[key] = self.results[key] || {passed: 0, failed: 0};
-                            self.results[key][passed]++;
-                        });
+        self.$testsButton.hide();
+        self.$testsLabel.show();
+        Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() {
+            Ox.test(self.options.items, function(results) {
+                results.forEach(function(result) {
+                    var item = getItemByName(result.name),
+                        passed = result.passed ? 'passed' : 'failed';
+                    item.tests[Ox.indexOf(item.tests, function(test) {
+                        return test.statement == result.statement;
+                    })] = result;
+                    ['', item.module + '/'].concat(
+                        item.section ? item.module + '/' + item.section + '/' : [],
+                        item.module + '/' + (item.section ? item.section + '/' : '') + item.name
+                    ).forEach(function(key) {
+                        self.results[key] = self.results[key] || {passed: 0, failed: 0};
+                        self.results[key][passed]++;
                     });
-                    self.$testsButton.options({disabled: false});
-                    self.$testsIcon.stop();
-                    renderList();
                 });
+                self.$testsLabel.hide();
+                self.$testsButton.show();
+                renderList();
             });
-        }, 1000);
+        });
     }
 
     function selectItem(id) {