0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

make SyntaxHighlighter and SourceViewer more useful by allowing replacements; remove index.json and source/Ox/png; plus some other small and/or cosmetic changes

Browse source
This commit is contained in:
rolux 2012-04-06 14:10:21 +02:00
parent 24eb4bdc64
commit 03f4f77ce6
16 changed files with 213 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
examples/cities/js/example.js
View file

@ -153,8 +153,9 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
*/
id: 'id',
operator: '+',
title: 'Id',
unique: true
title: 'ID',
unique: true,
width: 80
},
{
/*

89
index.css
View file

@ -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;
}

82
index.js
View file

@ -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(
'<span class="OxIdentifier">Ox</span>'
+ '(<span class="OxOperator">\.</span>'
+ '<span class="OxIdentifier">UI</span>)?'
+ '<span class="OxOperator">\.</span>'
+ '<span class="OxIdentifier">([\\$\\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('<code>bzr branch http://code.0x2620.org/oxjs</code>');
},
examples: function() {
return Ox.ExamplePanel({
examples: app.data.examples,
keywords: /\b(Ox\.[\w]+)\b/g,
path: 'examples/',
replace: [[/\b(Ox[\.\w]+)\b/g, '<b>$1</b>']],
replaceCode: [[
app.re.code,
function (str) {
return '<a href="#doc/' + Ox.stripTags(str)
+ '" class="doclink">' + str + '</a>';
}
]],
replaceComment: [[
app.re.comment,
'<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
]],
selected: ''
})
.bindEvent({
@ -272,6 +282,17 @@ Ox.load(function() {
});
},
page: function(page) {
var $element = Ox.Container();
Ox.get('readme/html/_' + page + '.html', function(html) {
$('<div>')
.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.$('<div>')
: Ox.$('<div>').append(
Ox.$('<div>').addClass('bar').css({
width: '100%',
height: '32px'
})
);
},
readme: function() {
@ -298,11 +324,10 @@ Ox.load(function() {
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections');
[
'about', 'readme', 'examples', 'documentation',
'download', 'development', 'contact'
'downloads', 'development', 'contact'
].forEach(function(section, i) {
i && $element.append(Ox.$('<span>').html(' | '));
Ox.$('<span>')
.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.$)('<div>').addClass('ui themes');
['classic', 'modern'].forEach(function(theme, i) {
i && $element.append(Ox.$('<span>').html(' | '));
Ox.$('<span>')
.addClass('link' + (
.addClass('button' + (
app.user('theme') == theme ? ' selected' : ''
))
.html(theme == 'classic' ? 'Light' : 'Dark')

145
index.json
View file

@ -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"
]
}

1
readme/js/readme.js
View file

@ -74,7 +74,6 @@ Ox.load('UI', function() {
}
function renderList() {
Ox.print('?', items)
$ui.list = Ox.TextList({
columns: [
{

39
source/Ox.UI/css/Ox.UI.css
View file

@ -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 {

6
source/Ox.UI/js/Code/Ox.ExamplePage.js
View file

@ -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',

6
source/Ox.UI/js/Code/Ox.ExamplePanel.js
View file

@ -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
})

27
source/Ox.UI/js/Code/Ox.SourceViewer.js
View file

@ -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(
[[
self.options.replaceComment.unshift(
// removes indentation inside <pre> tags
[
/<pre>([\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') + '</pre>';
}
]],
self.options.replace
]
);
Ox.print('RE', self.replace)
self.$table = $('<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 = $('<tr>'),
var $section = $('<tr>')
.appendTo(self.$table),
$comment = $('<td>')
.addClass('OxComment')
.html(trim(section.comment)),
.addClass('OxComment OxSerif')
.html(trim(section.comment))
.appendTo($section),
$code = $('<td>')
.addClass('OxCode')
.append(
Ox.SyntaxHighlighter({
replace: self.options.replaceCode,
source: trim(section.code)
})
)
$section
.append($comment)
.append($code)
.appendTo(self.$table);
.appendTo($section);
});
});

25
source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
View file

@ -8,6 +8,9 @@ Ox.SyntaxHighlighter <function> Syntax Highlighter
options <o> Options
lineLength <n|0> If larger than zero, show edge of page
offset <n|1> 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 <b|false> If true, show linebreaks
showLineNumbers <b|false> If true, show line numbers
showWhitespace <b|false> 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();
};

8
source/Ox.UI/js/Form/Ox.Label.js
View file

@ -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'
});
}
};

3
source/Ox.UI/themes/classic/css/classic.css
View file

@ -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);
}

5
source/Ox.UI/themes/modern/css/modern.css
View file

@ -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);
}

BIN
source/Ox/png/OxJS16.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 301 B

BIN
source/Ox/png/OxJS256.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 860 B

BIN
source/Ox/png/OxJS64.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 455 B