diff --git a/static/js/pandora/ui/menu.js b/static/js/pandora/ui/menu.js index 8feffea43..f14f7791a 100644 --- a/static/js/pandora/ui/menu.js +++ b/static/js/pandora/ui/menu.js @@ -181,6 +181,47 @@ pandora.ui.mainMenu = function() { }, click: function(event, data) { if (data.id == 'about') { + var tabs = [ + {id: 'about', title: 'About', selected: true}, + {id: 'news', title: 'News'}, + {id: 'tour', title: 'Take a Tour'}, + {id: 'faq', title: 'Frequently Asked Questions'}, + {id: 'tos', title: 'Terms of Service'}, + {id: 'contact', title: 'Contact'}, + {id: 'software', title: 'Software'} + ]; + var $tabPanel = Ox.TabPanel({ + content: function(id) { + return Ox.SplitPanel({ + elements: [ + { + element: Ox.Element() + .css({padding: '16px'}) + .append( + $('') + .attr({src: '/static/png/logo256.png'}) + .css({width: '128px'}) + ), + size: 144 + }, + { + element: Ox.Element() + .css({padding: '16px', overflowY: 'auto'}) + .html(Ox.repeat(Ox.getObjectById(tabs, id).title + ' ', 200)) + } + ], + orientation: 'horizontal' + }); + }, + tabs: tabs + }) + .bindEvent({ + change: function(data) { + $dialog.options({ + title: Ox.getObjectById(tabs, data.selected).title + }); + } + }); var $dialog = Ox.Dialog({ buttons: [ Ox.Button({ @@ -192,8 +233,14 @@ pandora.ui.mainMenu = function() { } }) ], - id: 'about', - title: 'About' + //closeButton: true, + content: $tabPanel, + height: Math.round((window.innerHeight - 24) * 0.75), + //maximizeButton: true, + minHeight: 256, + minWidth: 640, + title: 'About', + width: Math.round(window.innerWidth * 0.75), }).open(); } else if (data.id == 'home') { var $screen = $('