in symbol example, add theme switch
This commit is contained in:
parent
8a0cc3ee2b
commit
e1bab25ab7
2 changed files with 35 additions and 5 deletions
|
@ -1,3 +1,7 @@
|
|||
#switch {
|
||||
float: right;
|
||||
margin: 4px;
|
||||
}
|
||||
.OxButtonGroup {
|
||||
margin: 4px;
|
||||
}
|
||||
|
@ -8,6 +12,11 @@
|
|||
float: left;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
border: 1px solid rgb(208, 208, 208);
|
||||
margin: 8px;
|
||||
}
|
||||
.OxThemeClassic .symbol {
|
||||
border: 1px solid rgb(208, 208, 208);
|
||||
}
|
||||
.OxThemeModern .symbol {
|
||||
border: 1px solid rgb(48, 48, 48);
|
||||
}
|
|
@ -2,9 +2,9 @@
|
|||
...
|
||||
*/
|
||||
|
||||
Ox.load('UI', function() {
|
||||
'use strict';
|
||||
|
||||
Ox.$body.css({margin: '8px', overflowY: 'scroll'});
|
||||
Ox.load('UI', function() {
|
||||
|
||||
var groups = [
|
||||
['add', 'remove', 'close', 'center', 'bracket'],
|
||||
|
@ -36,8 +36,20 @@ Ox.load('UI', function() {
|
|||
['icon', 'clock', 'user']
|
||||
],
|
||||
symbols = Ox.flatten(groups),
|
||||
$buttons = $('<div>').addClass('buttons').appendTo(Ox.$body);
|
||||
$symbols = $('<div>').addClass('symbols').appendTo(Ox.$body);
|
||||
$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),
|
||||
$main = Ox.Container(),
|
||||
$buttons = $('<div>').addClass('buttons').appendTo($main),
|
||||
$symbols = $('<div>').addClass('symbols').appendTo($main);
|
||||
|
||||
groups.forEach(function(symbols) {
|
||||
Ox.ButtonGroup({
|
||||
|
@ -66,4 +78,13 @@ Ox.load('UI', function() {
|
|||
.appendTo($symbols);
|
||||
});
|
||||
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $menu, size: 24},
|
||||
{element: $main}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.appendTo(Ox.$body);
|
||||
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue