diff --git a/examples/cities/index.html b/examples/cities/index.html index e3988d3d..b8a979e7 100644 --- a/examples/cities/index.html +++ b/examples/cities/index.html @@ -3,10 +3,11 @@ Cities - + + diff --git a/examples/flight_paths/index.html b/examples/flight_paths/index.html index 6ce04245..dcc01ed6 100644 --- a/examples/flight_paths/index.html +++ b/examples/flight_paths/index.html @@ -3,10 +3,11 @@ Flight Paths - + + diff --git a/examples/json_to_list/index.html b/examples/json_to_list/index.html index 5534aa98..930628fd 100644 --- a/examples/json_to_list/index.html +++ b/examples/json_to_list/index.html @@ -3,10 +3,11 @@ JSON to List - + + diff --git a/examples/lenna/index.html b/examples/lenna/index.html index 29a74191..7532f5fc 100644 --- a/examples/lenna/index.html +++ b/examples/lenna/index.html @@ -3,10 +3,11 @@ Lenna - + + diff --git a/examples/manhattan_grid/index.html b/examples/manhattan_grid/index.html index c0dcd82e..8cfb0e7f 100644 --- a/examples/manhattan_grid/index.html +++ b/examples/manhattan_grid/index.html @@ -3,10 +3,11 @@ Manhattan Grid Coordinate System - + + diff --git a/examples/mouse_events/index.html b/examples/mouse_events/index.html index 93189a45..63e432a4 100644 --- a/examples/mouse_events/index.html +++ b/examples/mouse_events/index.html @@ -3,10 +3,11 @@ Mouse Events - + + diff --git a/examples/progress/css/example.css b/examples/progress/css/example.css index ce679eeb..d31f8c56 100644 --- a/examples/progress/css/example.css +++ b/examples/progress/css/example.css @@ -6,11 +6,6 @@ position: absolute; left: 224px; } -#switch { - position: absolute; - left: 16px; - top: 144px; -} #label0, #progress0 { top: 16px; diff --git a/examples/progress/index.html b/examples/progress/index.html index dba8cc45..aded68db 100644 --- a/examples/progress/index.html +++ b/examples/progress/index.html @@ -3,10 +3,11 @@ Progress - + + diff --git a/examples/progress/js/example.js b/examples/progress/js/example.js index 2765aad7..e0c7a414 100644 --- a/examples/progress/js/example.js +++ b/examples/progress/js/example.js @@ -117,17 +117,6 @@ Ox.load('UI', function() { .appendTo($status), $remaining = Ox.$('
') .appendTo($status), - $button = Ox.Button({ - title: 'Switch Theme', - width: labelWidth - }) - .attr({id: 'switch'}) - .bindEvent({ - click: function() { - Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic'); - } - }) - .appendTo(Ox.$body); cancelled = false, paused = false, progress = 0, diff --git a/examples/steganography/index.html b/examples/steganography/index.html index 5315f7ba..74bb543e 100644 --- a/examples/steganography/index.html +++ b/examples/steganography/index.html @@ -3,10 +3,11 @@ Steganograpy - + + diff --git a/examples/symbols/css/example.css b/examples/symbols/css/example.css index 4b2b3004..7f14262b 100644 --- a/examples/symbols/css/example.css +++ b/examples/symbols/css/example.css @@ -1,12 +1,5 @@ -#switch { - float: right; - margin: 4px; -} .OxButtonGroup { - margin: 4px; -} -.buttons { - height: 64px; + margin: 4px 3px 2px 3px; } .symbol { float: left; diff --git a/examples/symbols/index.html b/examples/symbols/index.html index f266bf7e..6b3c86ad 100644 --- a/examples/symbols/index.html +++ b/examples/symbols/index.html @@ -3,10 +3,11 @@ Symbols - + + diff --git a/examples/symbols/js/example.js b/examples/symbols/js/example.js index 7073969a..c491565c 100644 --- a/examples/symbols/js/example.js +++ b/examples/symbols/js/example.js @@ -37,19 +37,9 @@ Ox.load('UI', function() { ['icon', 'clock', 'switch', 'user'] ], symbols = Ox.flatten(groups), - $menu = Ox.Bar({size: 24}), - $switch = Ox.Button({ - title: 'Switch Theme' - }) - .attr({id: 'switch'}) - .bind({ - click: function() { - Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic'); - } - }) - .appendTo($menu), + $menu = Ox.Bar({size: 48}), $main = Ox.Container(), - $buttons = $('
').addClass('buttons').appendTo($main), + $buttons = $('
').addClass('buttons').appendTo($menu), $symbols = $('
').addClass('symbols').appendTo($main); groups.forEach(function(symbols) { @@ -81,11 +71,11 @@ Ox.load('UI', function() { Ox.SplitPanel({ elements: [ - {element: $menu, size: 24}, + {element: $menu, size: 48}, {element: $main} ], orientation: 'vertical' }) .appendTo(Ox.$body); - + }); diff --git a/source/Ox.UI/js/Code/Ox.ExamplePage.js b/source/Ox.UI/js/Code/Ox.ExamplePage.js index 244def6b..28b41491 100644 --- a/source/Ox.UI/js/Code/Ox.ExamplePage.js +++ b/source/Ox.UI/js/Code/Ox.ExamplePage.js @@ -26,7 +26,7 @@ Ox.ExamplePage = function(options, self) { self.$openButton = Ox.Button({ disabled: self.options.selected == 'source', title: 'open', - tooltip: 'Open in new tab', + tooltip: 'Open in New Tab', type: 'image' }) .css({float: 'right', margin: '4px 4px 4px 2px'}) @@ -51,6 +51,25 @@ Ox.ExamplePage = function(options, self) { }) .appendTo(self.$toolbar); + self.$switchButton = Ox.Button({ + disabled: self.options.selected == 'source', + title: 'switch', + tooltip: 'Switch Theme', + type: 'image' + }) + .css({float: 'right', margin: '4px 2px 4px 2px'}) + .bindEvent({ + click: function() { + self.$frame[0].contentWindow.postMessage( + 'Ox && Ox.Theme && Ox.Theme(' + + 'Ox.Theme() == "classic" ? "modern" : "classic"' + + ')', + '*' + ); + } + }) + .appendTo(self.$toolbar); + self.$tabs = Ox.ButtonGroup({ buttons: [ { @@ -70,9 +89,11 @@ Ox.ExamplePage = function(options, self) { .css({float: 'right', margin: '4px 2px 4px 2px'}) .bindEvent({ change: function(data) { + var disabled = data.value == 'source'; self.options.selected = data.value; - self.$reloadButton.options({disabled: data.value == 'source'}); - self.$openButton.options({disabled: data.value == 'source'}); + self.hasUI && self.$switchButton.options({disabled: disabled}); + self.$reloadButton.options({disabled: disabled}); + self.$openButton.options({disabled: disabled}); self.$content.animate({ marginLeft: data.value == 'source' ? 0 : -self.options.width + 'px' @@ -146,6 +167,11 @@ Ox.ExamplePage = function(options, self) { }) ); + Ox.get(self.options.js, function(js) { + self.hasUI = /Ox\.load\(.+UI.+,/.test(js); + !self.hasUI && self.$switchButton.options({disabled: true}); + }); + Ox.$window.bind({ resize: function() { setSize();