update DocPanel and DocPage UI

This commit is contained in:
rolux 2012-06-12 16:41:37 +02:00
parent d89a8e1087
commit 0d2f082779
2 changed files with 28 additions and 31 deletions

View file

@ -35,7 +35,6 @@ Ox.DocPage = function(options, self) {
self.$examplesMenu = Ox.MenuButton({ self.$examplesMenu = Ox.MenuButton({
items: self.options.item.examples, items: self.options.item.examples,
title: 'Examples...', title: 'Examples...',
width: 128
}) })
.css({float: 'right', margin: '4px 4px 4px 2px'}) .css({float: 'right', margin: '4px 4px 4px 2px'})
.bindEvent({ .bindEvent({
@ -46,8 +45,7 @@ Ox.DocPage = function(options, self) {
.appendTo(self.$toolbar); .appendTo(self.$toolbar);
} }
self.$page = Ox.Container() self.$page = Ox.Container().addClass('OxDocPage OxDocument');
.addClass('OxDocPage OxDocument');
that.setElement( that.setElement(
Ox.SplitPanel({ Ox.SplitPanel({

View file

@ -65,11 +65,12 @@ Ox.DocPanel = function(options, self) {
self.$testsButton = Ox.Button({title: 'Run Tests'}) self.$testsButton = Ox.Button({title: 'Run Tests'})
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.bindEvent({click: runTests}); .bindEvent({click: runTests});
self.$testsIcon = Ox.LoadingIcon() self.$testsLabel = Ox.Label({title: 'Running Tests...'})
.css({float: 'left', margin: '4px'}); .css({float: 'left', margin: '4px'})
.hide();
self.$toolbar = Ox.Bar({size: 24}) self.$toolbar = Ox.Bar({size: 24})
.append(self.$testsButton) .append(self.$testsButton)
.append(self.$testsIcon); .append(self.$testsLabel)
self.$list = Ox.Element(); self.$list = Ox.Element();
self.$sidebar = Ox.SplitPanel({ self.$sidebar = Ox.SplitPanel({
elements: [ elements: [
@ -105,6 +106,7 @@ Ox.DocPanel = function(options, self) {
}), function(docItems) { }), function(docItems) {
self.options.items = docItems; self.options.items = docItems;
getExamples(function() { getExamples(function() {
self.$sidebar.replaceElement(0, self.$toolbar);
renderList(); renderList();
self.options.runTests && runTests(); self.options.runTests && runTests();
that.triggerEvent('load', {items: docItems}); that.triggerEvent('load', {items: docItems});
@ -112,6 +114,7 @@ Ox.DocPanel = function(options, self) {
}); });
} else { } else {
getExamples(function() { getExamples(function() {
self.$sidebar.replaceElement(0, self.$toolbar);
renderList(); renderList();
self.options.runTests && runTests(); self.options.runTests && runTests();
}); });
@ -259,16 +262,13 @@ Ox.DocPanel = function(options, self) {
selectItem(data.ids.length ? data.ids[0] : '') selectItem(data.ids.length ? data.ids[0] : '')
} }
}); });
self.$sidebar self.$sidebar.replaceElement(1, self.$list);
.replaceElement(0, self.$toolbar)
.replaceElement(1, self.$list);
selectItem(self.options.selected); selectItem(self.options.selected);
} }
function runTests() { function runTests() {
self.$testsButton.options({disabled: true}); self.$testsButton.hide();
self.$testsIcon.start(); self.$testsLabel.show();
setTimeout(function() {
Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() { Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() {
Ox.test(self.options.items, function(results) { Ox.test(self.options.items, function(results) {
results.forEach(function(result) { results.forEach(function(result) {
@ -285,12 +285,11 @@ Ox.DocPanel = function(options, self) {
self.results[key][passed]++; self.results[key][passed]++;
}); });
}); });
self.$testsButton.options({disabled: false}); self.$testsLabel.hide();
self.$testsIcon.stop(); self.$testsButton.show();
renderList(); renderList();
}); });
}); });
}, 1000);
} }
function selectItem(id) { function selectItem(id) {