From 03f4f77ce68a452469838383d7c19bee0707b499 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 6 Apr 2012 14:10:21 +0200 Subject: [PATCH] make SyntaxHighlighter and SourceViewer more useful by allowing replacements; remove index.json and source/Ox/png; plus some other small and/or cosmetic changes --- examples/cities/js/example.js | 5 +- index.css | 89 +++++++++--- index.js | 82 +++++++---- index.json | 145 ------------------- readme/js/readme.js | 1 - source/Ox.UI/css/Ox.UI.css | 39 +++-- source/Ox.UI/js/Code/Ox.ExamplePage.js | 6 +- source/Ox.UI/js/Code/Ox.ExamplePanel.js | 6 +- source/Ox.UI/js/Code/Ox.SourceViewer.js | 29 ++-- source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js | 25 ++++ source/Ox.UI/js/Form/Ox.Label.js | 8 +- source/Ox.UI/themes/classic/css/classic.css | 3 + source/Ox.UI/themes/modern/css/modern.css | 5 +- source/Ox/png/OxJS16.png | Bin 301 -> 0 bytes source/Ox/png/OxJS256.png | Bin 860 -> 0 bytes source/Ox/png/OxJS64.png | Bin 455 -> 0 bytes 16 files changed, 213 insertions(+), 230 deletions(-) delete mode 100644 index.json delete mode 100644 source/Ox/png/OxJS16.png delete mode 100644 source/Ox/png/OxJS256.png delete mode 100644 source/Ox/png/OxJS64.png diff --git a/examples/cities/js/example.js b/examples/cities/js/example.js index 61383eaf..a04c8721 100644 --- a/examples/cities/js/example.js +++ b/examples/cities/js/example.js @@ -153,8 +153,9 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() { */ id: 'id', operator: '+', - title: 'Id', - unique: true + title: 'ID', + unique: true, + width: 80 }, { /* diff --git a/index.css b/index.css index 0f2d7f52..8f65dbda 100644 --- a/index.css +++ b/index.css @@ -19,41 +19,96 @@ div { color: rgb(240, 240, 240); } - -.line { - width: 384px; - font-size: 12px; - font-weight: bold; +.OxThemeClassic .bar { + background-image: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); + background-image: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); + background-image: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); +} +.OxThemeModern .bar { + background-image: -moz-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32)); + background-image: -o-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32)); + background-image: -webkit-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32)); } -.link { - font-size: 12px; +.button { + padding: 0 4px 0 4px; + border-radius: 4px; + margin: 0 3px 0 3px; cursor: pointer; } -.link:hover { +.button.selected { + cursor: default; +} +.button:hover { + box-shadow: 0 0 1px rgb(0, 0, 0); +} +.OxThemeClassic .button:hover { + //background-color: rgba(255, 255, 255, 0.5); + box-shadow: 0 0 1px rgba(0, 0, 0, 1); +} +.OxThemeClassic .button.selected { + background-color: rgb(255, 255, 255); + box-shadow: 0 0 1px rgb(0, 0, 0); +} +.OxThemeModern .button:hover { + //background-color: rgba(0, 0, 0, 0.5); + box-shadow: 0 0 1px rgba(255, 255, 255, 1); +} +.OxThemeModern .button.selected { + background-color: rgb(0, 0, 0); + box-shadow: 0 0 1px rgb(255, 255, 255); +} + +.doclink { text-decoration: underline; } -.link.selected { +.OxComment .doclink { + font-size: 12px; +} + +.line { font-weight: bold; - text-decoration: underline; - cursor: default; } .logo { - width: 256px; - height: 128px; cursor: pointer; } -.sections { +.page { width: 512px; + padding: 32px; + margin: 16px auto 16px auto; + border-width: 1px; + border-style: solid; + border-radius: 8px; + font-size: 14px; + line-height: 20px; } - -.themes { - width: 80px; +.page blockquote { + margin-left: 28px; +} +.page code, .page pre { + font-size: 12px; +} +.page h1 { + font-size: 18px; + line-height: 24px; +} +.page h2 { + font-size: 16px; + line-height: 22px; +} +.OxThemeClassic .page { + border-color: rgb(208, 208, 208); + background: rgb(255, 255, 255); +} +.OxThemeModern .page { + border-color: rgb(48, 48, 48); + background: rgb(255, 255, 255); } .ui { position: absolute; + font-size: 12px; text-align: center; } \ No newline at end of file diff --git a/index.js b/index.js index e91f4743..41e0a432 100644 --- a/index.js +++ b/index.js @@ -59,7 +59,7 @@ Ox.load(function() { opacity: 0 }, line: { - top: app.window.middle + 12 + 'px', + top: app.window.middle + 16 + 'px', left: app.window.center - 192 + 'px', width: '384px', fontSize: '12px', @@ -72,11 +72,11 @@ Ox.load(function() { height: '128px' }, sections: { - top: app.window.middle + 36 + 'px', + top: app.window.middle + 48 + 'px', left: app.window.center - 256 + 'px' }, themes: { - top: app.window.middle + 60 + 'px', + top: app.window.middle + 80 + 'px', right: app.window.center - 40 + 'px' } } @@ -126,7 +126,7 @@ Ox.load(function() { resize: app.fn.resize }); window.oxjs = app; // so that you can play with it in the console - Ox.load({UI: {debug: true, theme: app.user('theme')}}, app.fn.render); + Ox.load({UI: {theme: app.user('theme')}}, app.fn.render); }, render: function() { @@ -146,7 +146,9 @@ Ox.load(function() { }, setSection: function(section) { - app.$ui.panel.replaceElement(1, app.ui[section]()); + app.$ui.panel.replaceElement(1, app.ui[section] + ? app.ui[section]() : app.ui.page(section) + ); }, setTheme: function(theme) { @@ -198,20 +200,23 @@ Ox.load(function() { }, + re: { + + code: new RegExp( + 'Ox' + + '(\.' + + 'UI)?' + + '\.' + + '([\\$\\w]+)<\/span>', + 'g' + ), + + comment: /\b(Ox\.\w+)\b/g + + }, + ui: { - about: function() { - return Ox.Element(); - }, - - contact: function() { - return Ox.Element(); - }, - - development: function() { - return Ox.Element(); - }, - documentation: function() { return Ox.DocPanel({ files: app.data.documentation, @@ -227,17 +232,22 @@ Ox.load(function() { }); }, - download: function() { - return Ox.Element() - .html('bzr branch http://code.0x2620.org/oxjs'); - }, - examples: function() { return Ox.ExamplePanel({ examples: app.data.examples, keywords: /\b(Ox\.[\w]+)\b/g, path: 'examples/', - replace: [[/\b(Ox[\.\w]+)\b/g, '$1']], + replaceCode: [[ + app.re.code, + function (str) { + return '' + str + ''; + } + ]], + replaceComment: [[ + app.re.comment, + '$1' + ]], selected: '' }) .bindEvent({ @@ -272,6 +282,17 @@ Ox.load(function() { }); }, + page: function(page) { + var $element = Ox.Container(); + Ox.get('readme/html/_' + page + '.html', function(html) { + $('
') + .addClass('OxSerif page') + .html(html) + .appendTo($element); + }); + return $element; + }, + panel: function() { return Ox.UI ? Ox.SplitPanel({ @@ -287,7 +308,12 @@ Ox.load(function() { orientation: 'vertical' }) .css({opacity: 0}) - : Ox.$('
') + : Ox.$('
').append( + Ox.$('
').addClass('bar').css({ + width: '100%', + height: '32px' + }) + ); }, readme: function() { @@ -298,11 +324,10 @@ Ox.load(function() { var $element = (Ox.UI ? $ : Ox.$)('
').addClass('ui sections'); [ 'about', 'readme', 'examples', 'documentation', - 'download', 'development', 'contact' + 'downloads', 'development', 'contact' ].forEach(function(section, i) { - i && $element.append(Ox.$('').html(' | ')); Ox.$('') - .addClass('link' + ( + .addClass('button' + ( app.user('section') == section ? ' selected' : '' )) .html(Ox.toTitleCase(section)) @@ -321,9 +346,8 @@ Ox.load(function() { themes: function() { var $element = (Ox.UI ? $ : Ox.$)('
').addClass('ui themes'); ['classic', 'modern'].forEach(function(theme, i) { - i && $element.append(Ox.$('').html(' | ')); Ox.$('') - .addClass('link' + ( + .addClass('button' + ( app.user('theme') == theme ? ' selected' : '' )) .html(theme == 'classic' ? 'Light' : 'Dark') diff --git a/index.json b/index.json deleted file mode 100644 index 9b9ad9f8..00000000 --- a/index.json +++ /dev/null @@ -1,145 +0,0 @@ -{ - "documentation": [ - "Ox/js/Array.js", - "Ox/js/Collection.js", - "Ox/js/Color.js", - "Ox/js/Constants.js", - "Ox/js/Core.js", - "Ox/js/DOM.js", - "Ox/js/Date.js", - "Ox/js/Encoding.js", - "Ox/js/Fallback.js", - "Ox/js/Format.js", - "Ox/js/Function.js", - "Ox/js/Geo.js", - "Ox/js/HTML.js", - "Ox/js/Hash.js", - "Ox/js/JavaScript.js", - "Ox/js/Math.js", - "Ox/js/Object.js", - "Ox/js/RegExp.js", - "Ox/js/Request.js", - "Ox/js/String.js", - "Ox/js/Type.js", - "Ox.Geo/Ox.Geo.js", - "Ox.Image/Ox.Image.js", - "Ox.UI/jquery/jquery.mousewheel.js", - "Ox.UI/js/Bar/Ox.Bar.js", - "Ox.UI/js/Bar/Ox.Progressbar.js", - "Ox.UI/js/Bar/Ox.Resizebar.js", - "Ox.UI/js/Bar/Ox.Tabbar.js", - "Ox.UI/js/Bar/Ox.Toolbar.js", - "Ox.UI/js/Calendar/Ox.Calendar.js", - "Ox.UI/js/Calendar/Ox.CalendarDate.js", - "Ox.UI/js/Calendar/Ox.ListCalendar.js", - "Ox.UI/js/Code/Ox.DocPage.js", - "Ox.UI/js/Code/Ox.DocPanel.js", - "Ox.UI/js/Code/Ox.ExamplePage.js", - "Ox.UI/js/Code/Ox.ExamplePanel.js", - "Ox.UI/js/Code/Ox.SourceViewer.js", - "Ox.UI/js/Code/Ox.SyntaxHighlighter.js", - "Ox.UI/js/Core/Ox.API.js", - "Ox.UI/js/Core/Ox.App.js", - "Ox.UI/js/Core/Ox.Clipboard.js", - "Ox.UI/js/Core/Ox.Container.js", - "Ox.UI/js/Core/Ox.Element.js", - "Ox.UI/js/Core/Ox.Event.js", - "Ox.UI/js/Core/Ox.Focus.js", - "Ox.UI/js/Core/Ox.GarbageCollection.js", - "Ox.UI/js/Core/Ox.History.js", - "Ox.UI/js/Core/Ox.JQueryElement.js", - "Ox.UI/js/Core/Ox.Keyboard.js", - "Ox.UI/js/Core/Ox.LoadingIcon.js", - "Ox.UI/js/Core/Ox.Progressbar.js", - "Ox.UI/js/Core/Ox.Request.js", - "Ox.UI/js/Core/Ox.Theme.js", - "Ox.UI/js/Core/Ox.URL.js", - "Ox.UI/js/Form/Ox.ArrayEditable.js", - "Ox.UI/js/Form/Ox.ArrayInput.js", - "Ox.UI/js/Form/Ox.Button.js", - "Ox.UI/js/Form/Ox.ButtonGroup.js", - "Ox.UI/js/Form/Ox.Checkbox.js", - "Ox.UI/js/Form/Ox.CheckboxGroup.js", - "Ox.UI/js/Form/Ox.ColorInput.js", - "Ox.UI/js/Form/Ox.ColorPicker.js", - "Ox.UI/js/Form/Ox.DateInput.js", - "Ox.UI/js/Form/Ox.DateTimeInput.js", - "Ox.UI/js/Form/Ox.Editable.js", - "Ox.UI/js/Form/Ox.FileButton.js", - "Ox.UI/js/Form/Ox.FileInput.js", - "Ox.UI/js/Form/Ox.Filter.js", - "Ox.UI/js/Form/Ox.Form.js", - "Ox.UI/js/Form/Ox.FormElementGroup.js", - "Ox.UI/js/Form/Ox.FormItem.js", - "Ox.UI/js/Form/Ox.FormPanel.js", - "Ox.UI/js/Form/Ox.Input.js", - "Ox.UI/js/Form/Ox.InputGroup.js", - "Ox.UI/js/Form/Ox.InsertHTMLDialog.js", - "Ox.UI/js/Form/Ox.Label.js", - "Ox.UI/js/Form/Ox.ObjectArrayInput.js", - "Ox.UI/js/Form/Ox.ObjectInput.js", - "Ox.UI/js/Form/Ox.OptionGroup.js", - "Ox.UI/js/Form/Ox.Picker.js", - "Ox.UI/js/Form/Ox.PlaceInput.js", - "Ox.UI/js/Form/Ox.PlacePicker.js", - "Ox.UI/js/Form/Ox.Range.js", - "Ox.UI/js/Form/Ox.Select.js", - "Ox.UI/js/Form/Ox.SelectInput.js", - "Ox.UI/js/Form/Ox.Spreadsheet.js", - "Ox.UI/js/Form/Ox.TimeInput.js", - "Ox.UI/js/List/Ox.Chart.js", - "Ox.UI/js/List/Ox.IconItem.js", - "Ox.UI/js/List/Ox.IconList.js", - "Ox.UI/js/List/Ox.InfoList.js", - "Ox.UI/js/List/Ox.List.js", - "Ox.UI/js/List/Ox.ListItem.js", - "Ox.UI/js/List/Ox.ListPage.js", - "Ox.UI/js/List/Ox.TextList.js", - "Ox.UI/js/List/Ox.TreeList.js", - "Ox.UI/js/Map/Ox.ListMap.js", - "Ox.UI/js/Map/Ox.Map.js", - "Ox.UI/js/Map/Ox.MapImage.js", - "Ox.UI/js/Map/Ox.MapMarker.js", - "Ox.UI/js/Map/Ox.MapMarkerImage.js", - "Ox.UI/js/Map/Ox.MapPlace.js", - "Ox.UI/js/Map/Ox.MapRectangle.js", - "Ox.UI/js/Map/Ox.MapRectangleMarker.js", - "Ox.UI/js/Menu/Ox.MainMenu.js", - "Ox.UI/js/Menu/Ox.Menu.js", - "Ox.UI/js/Menu/Ox.MenuButton.js", - "Ox.UI/js/Menu/Ox.MenuItem.js", - "Ox.UI/js/Panel/Ox.CollapsePanel.js", - "Ox.UI/js/Panel/Ox.Panel.js", - "Ox.UI/js/Panel/Ox.SplitPanel.js", - "Ox.UI/js/Panel/Ox.TabPanel.js", - "Ox.UI/js/Test/Ox.TestElement.js", - "Ox.UI/js/Test/Ox.TestWidget.js", - "Ox.UI/js/Video/Ox.AnnotationFolder.js", - "Ox.UI/js/Video/Ox.AnnotationPanel.js", - "Ox.UI/js/Video/Ox.BlockVideoTimeline.js", - "Ox.UI/js/Video/Ox.LargeVideoTimeline.js", - "Ox.UI/js/Video/Ox.SmallVideoTimeline.js", - "Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js", - "Ox.UI/js/Video/Ox.VideoEditor.js", - "Ox.UI/js/Video/Ox.VideoEditorPlayer.js", - "Ox.UI/js/Video/Ox.VideoElement.js", - "Ox.UI/js/Video/Ox.VideoPanel.js", - "Ox.UI/js/Video/Ox.VideoPlayer.js", - "Ox.UI/js/Video/Ox.VideoPreview.js", - "Ox.UI/js/Video/Ox.VideoTimelinePlayer.js", - "Ox.UI/js/Window/Ox.Dialog.js", - "Ox.UI/js/Window/Ox.Dialog_.js", - "Ox.UI/js/Window/Ox.Layer.js", - "Ox.UI/js/Window/Ox.Tooltip.js", - "Ox.Unicode/Ox.Unicode.js" - ], - "examples": [ - "cities", - "countries", - "list_of_countries" - ], - "readme": [ - "test1", - "test2" - ] -} \ No newline at end of file diff --git a/readme/js/readme.js b/readme/js/readme.js index 8734d861..f1a84c9e 100644 --- a/readme/js/readme.js +++ b/readme/js/readme.js @@ -74,7 +74,6 @@ Ox.load('UI', function() { } function renderList() { - Ox.print('?', items) $ui.list = Ox.TextList({ columns: [ { diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 4cad9c19..4fe1af13 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -24,21 +24,24 @@ body { -o-user-select: none; -webkit-user-select: none; } +code, pre { + font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace; +} div { -moz-user-select: -moz-none; -o-user-select: none; -webkit-user-select: none; } div, input, textarea { - font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial; + font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif; font-size: 11px; } -h1,h2,h3,h4,h5,h6 { +h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 16px; font-weight: normal; } -h2,h3,h4,h5,h6 { +h2, h3, h4, h5, h6 { font-size: 14px; } img { @@ -63,6 +66,17 @@ td { padding: 0; vertical-align: top; } + +.OxSerif { + font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif; +} +.OxSansSerif { + font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif; +} +.OxMonospace { + font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace; +} + .OxSelectable { -moz-user-select: text; -o-user-select: text; @@ -461,9 +475,6 @@ Document -o-user-select: text; -webkit-user-select: text; } -.OxDocument code { - font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console; -} .OxDocument h1 { font-weight: bold; font-size: 16px; @@ -875,8 +886,8 @@ OxLabel white-space: nowrap; } .OxLabel.OxSquare { - padding: 0 2px 0 2px; - border-radius: 0; + padding: 0 3px 0 3px; + border-radius: 4px; } /* @@ -1915,16 +1926,16 @@ SourceViewer padding: 4px 8px 4px 8px; border-right-width: 1px; border-right-style: solid; - font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console; - line-height: 16px; - //white-space: pre; + font-size: 14px; + line-height: 20px; -moz-user-select: text; -webkit-user-select: text; } .OxSourceViewer .OxComment pre { - font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console; + font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console, monospace; + font-size: 11px; line-height: 16px; - margin: 0; + margin: 4px 0 4px 0; } @@ -1937,7 +1948,7 @@ SyntaxHightlighter .OxSyntaxHighlighter > div { display: table-cell; padding: 4px; - font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console; + font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace; line-height: 16px; } .OxSyntaxHighlighter > .OxLineNumbers { diff --git a/source/Ox.UI/js/Code/Ox.ExamplePage.js b/source/Ox.UI/js/Code/Ox.ExamplePage.js index 0e02b358..adac6246 100644 --- a/source/Ox.UI/js/Code/Ox.ExamplePage.js +++ b/source/Ox.UI/js/Code/Ox.ExamplePage.js @@ -7,7 +7,8 @@ Ox.ExamplePage = function(options, self) { .defaults({ html: '', js: '', - replace: [], + replaceCode: [], + replaceComment: [], selected: 'source', title: '' }) @@ -89,7 +90,8 @@ Ox.ExamplePage = function(options, self) { self.$viewer = Ox.SourceViewer({ file: self.options.js, - replace: self.options.replace + replaceCode: self.options.replaceCode, + replaceComment: self.options.replaceComment }) .css({ position: 'absolute', diff --git a/source/Ox.UI/js/Code/Ox.ExamplePanel.js b/source/Ox.UI/js/Code/Ox.ExamplePanel.js index 1f2ee3fb..487ed538 100644 --- a/source/Ox.UI/js/Code/Ox.ExamplePanel.js +++ b/source/Ox.UI/js/Code/Ox.ExamplePanel.js @@ -8,7 +8,8 @@ Ox.ExamplePanel = function(options, self) { examples: [], keywords: null, path: '', - replace: [], + replaceCode: [], + replaceComment: [], size: 256 }) .options(options || {}) @@ -97,7 +98,8 @@ Ox.ExamplePanel = function(options, self) { html: item.html, js: item.js, keywords: item.keywords, - replace: self.options.replace, + replaceCode: self.options.replaceCode, + replaceComment: self.options.replaceComment, title: item.title, width: window.innerWidth - self.options.size }) diff --git a/source/Ox.UI/js/Code/Ox.SourceViewer.js b/source/Ox.UI/js/Code/Ox.SourceViewer.js index f1ca5e0c..d9f0cfbc 100644 --- a/source/Ox.UI/js/Code/Ox.SourceViewer.js +++ b/source/Ox.UI/js/Code/Ox.SourceViewer.js @@ -6,14 +6,15 @@ Ox.SourceViewer = function(options, self) { var that = Ox.Container({}, self) .defaults({ file: '', - replace: [] + replaceCode: [], + replaceComment: [], }) .options(options) .addClass('OxSourceViewer'); - self.replace = Ox.merge( - [[ - // removes indentation inside 
 tags
+    self.options.replaceComment.unshift(
+        // removes indentation inside 
 tags
+        [
             /
([\s\S]+)<\/pre>/g,
             function(pre, text) {
                 var lines = trim(text).split('\n'),
@@ -25,10 +26,8 @@ Ox.SourceViewer = function(options, self) {
                     return line.substr(indent);
                 }).join('\n') + '
';
             }
-        ]],
-        self.options.replace
+        ]
     );
-    Ox.print('RE', self.replace)
 
     self.$table = $('').appendTo(that.$content);
 
@@ -42,28 +41,28 @@ Ox.SourceViewer = function(options, self) {
                 text = /^\/\*/.test(text)
                     ? Ox.sub(text, 2, -2)
                     : Ox.sub(text, 2);
-                self.replace.forEach(function(replace) {
+                self.options.replaceComment.forEach(function(replace) {
                     text = text.replace(replace[0], replace[1]);
                 });
             }
             Ox.last(sections)[type] += text;
         });
         sections.forEach(function(section) {
-            var $section = $(''),
+            var $section = $('')
+                    .appendTo(self.$table),
                 $comment = $('
')
-                    .addClass('OxComment')
-                    .html(trim(section.comment)),
+                    .addClass('OxComment OxSerif')
+                    .html(trim(section.comment))
+                    .appendTo($section),
                 $code = $('')
                     .addClass('OxCode')
                     .append(
                         Ox.SyntaxHighlighter({
+                            replace: self.options.replaceCode,
                             source: trim(section.code)
                         })
                     )
-            $section
-                .append($comment)
-                .append($code)
-                .appendTo(self.$table);
+                    .appendTo($section);
         });
     });
 
diff --git a/source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js b/source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
index 3abb83d9..ceb62ca2 100644
--- a/source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
+++ b/source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
@@ -8,6 +8,9 @@ Ox.SyntaxHighlighter  Syntax Highlighter
     options  Options
         lineLength  If larger than zero, show edge of page
         offset  First line number
+        replace <[[]]|[]> Array of replacements
+            Each array element is an array of two arguments to be passed to the
+            replace function, like [str, str], [regexp, str] or [regexp, fn]
         showLinebreaks  If true, show linebreaks
         showLineNumbers  If true, show line numbers
         showWhitespace  If true, show whitespace
@@ -25,6 +28,7 @@ Ox.SyntaxHighlighter = function(options, self) {
             .defaults({
                 lineLength: 0,
                 offset: 1,
+                replace: [],
                 showLinebreaks: false,
                 showLineNumbers: false,
                 showTabs: false,
@@ -100,6 +104,11 @@ Ox.SyntaxHighlighter = function(options, self) {
                 )
                 .appendTo(that);
         }
+
+        self.options.replace.forEach(function(replace) {
+            source = source.replace(replace[0], replace[1])
+        });
+        
         $source = Ox.Element()
             .addClass('OxSourceCode')
             .html(source)
@@ -125,6 +134,22 @@ Ox.SyntaxHighlighter = function(options, self) {
         }
     }
 
+    setTimeout(function() {
+        $('.foobar > span').css({
+            textDecoration: 'underline'
+        })
+        $('.foobar').css({
+            //background: 'rgb(255, 255, 128)',
+            borderRadius: '2px',
+            cursor: 'pointer'
+        }).bind({
+            click: function() {
+                window.location.hash = 'documentation/' + $(this).attr('title');
+            }
+        })
+        
+    }, 1000)
+
     self.setOption = function(key, value) {
         renderSource();
     };
diff --git a/source/Ox.UI/js/Form/Ox.Label.js b/source/Ox.UI/js/Form/Ox.Label.js
index 16a1b257..8b35313c 100644
--- a/source/Ox.UI/js/Form/Ox.Label.js
+++ b/source/Ox.UI/js/Form/Ox.Label.js
@@ -32,7 +32,7 @@ Ox.Label = function(options, self) {
             )
             .css(Ox.extend(self.options.width == 'auto' ? {} : {
                 width: self.options.width - (
-                    self.options.style == 'rounded' ? 14 : 6
+                    self.options.style == 'rounded' ? 14 : 8
                 ) + 'px'
             }, {
                 textAlign: self.options.textAlign
@@ -43,7 +43,11 @@ Ox.Label = function(options, self) {
 		if (key == 'title') {
 			that.html(value);
 		} else if (key == 'width') {
-		    that.css({width: self.options.width - 14 + 'px'});
+		    that.css({
+		        width: self.options.width - (
+		            self.options.style == 'rounded' ? 14 : 8
+		        ) + 'px'
+		    });
 		}
 	};
 
diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css
index 08bb7c63..16237522 100644
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@@ -314,6 +314,9 @@ Forms
     color: rgb(192, 64, 64);
 }
 
+.OxThemeClassic .OxLabel.OxSquare {
+    background: rgb(240, 240, 240);
+}
 .OxThemeClassic .OxLabel.OxDisabled {
     color: rgb(128, 128, 128);
 }
diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css
index 98c2f1e2..3ab2bef5 100644
--- a/source/Ox.UI/themes/modern/css/modern.css
+++ b/source/Ox.UI/themes/modern/css/modern.css
@@ -256,7 +256,7 @@ Forms
     color: rgb(192, 192, 192);
 }
 
-.OxThemeModern .OxInputLabel {
+.OxThemeModern .OxInput\ {
     color: rgb(192, 192, 192);
 }
 .OxThemeModern .OxButton,
@@ -305,6 +305,9 @@ Forms
     color: rgb(255, 64, 64);
 }
 
+.OxThemeModern .OxLabel.OxSquare {
+    background: rgb(16, 16, 16);
+}
 .OxThemeModern .OxLabel.OxDisabled {
     color: rgb(128, 128, 128);
 }
diff --git a/source/Ox/png/OxJS16.png b/source/Ox/png/OxJS16.png
deleted file mode 100644
index da56604f8c3529408731f8f225b4b40dd93ccbe8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 301
zcmV+|0n+}7P)K5|j-q%7kF#rG+!f)bn4E;ilj8QzB-A(mHk9}I^53NVuF?w~
zn&#Cmpf_Qh0kDq!k^uwXtbq@{W#`KRE-jcJDl@0#Lkgn|00000NkvXXu0mjfBtn2C

diff --git a/source/Ox/png/OxJS256.png b/source/Ox/png/OxJS256.png
deleted file mode 100644
index 2baeefd21433232fa9cf1bd70413a1301ade2974..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 860
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58aSAMWcGE1SOx}WWltB!kcv5P?{3VSn#yqO
zi
z`M;aTrTlg^>;FE#ck_qN(k=IR{M-MFG6wiEga|WSWpOaY!@ND~5c|A8h4XAT%ss2W
zebe9Ozq4=ty!kP?=ljEdzB}fp+5Y>pUj5>~bIX5U{P)7f+Wt?e#O#OX>;FI7`=Lfd
zjbRmMLl)D5Sqv-iF+bKed{nDW`g+%I%m0rrOm6L;yXdEd<(YH)_ulILw!Gcm{rB9f
z-!IzjQNaT=_0>D(JNKjAem_n>zxZ#_
zd&e#EkHgINCw*run_hj<7VTu&!oA0wn{I3&u8-Kn={(+KB{k!*z`!lN~
KelF{r5}E*a#&%}_

diff --git a/source/Ox/png/OxJS64.png b/source/Ox/png/OxJS64.png
deleted file mode 100644
index b8086b7cc890bc9bd20ed9bbcd5a99e7e2adcd7d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 455
zcmV;&0XY7NP)^*lmsV5;d)q+cq-K=@EBNSh6hg#=Jn-}xiyeDEP)D;KdkIP
z+;G_f@>Z$`Xe^`P#AUu{^_btm(2XU&7Sxz~@fEWhoI!p;H4>gcpJ4t|H(*|(S6Ju=
zlkq!X3&>mA9{9}}9pW=y$#Yu486^dC{@4STotU{qVmR`)nT_88TR`5LsR#CakGXx<
zVfOqwBwdC4g1Y=Q&(CtwWBXdX_B}91GQNPBdf+B$G9Og;nVU(M`M7!r`31H4VL3xw
zo8~=Z{0`Ux@|Ly-lKY5x^iSVH(QRMC&oTvjpcToSEnJ(D`+)6%d6Mx3IAt6y0&D&Y
x!Rb!%H!WnFku_%LYpOH#U&!8x=SjvF@B`ynp)tBFEIa@J002ovPDHLkV1m$I&U^p>