update index
This commit is contained in:
parent
abfea74565
commit
99dfdfd224
5 changed files with 86 additions and 42 deletions
22
index.css
22
index.css
|
@ -7,7 +7,7 @@ body {
|
|||
z-index: 1001;
|
||||
}
|
||||
|
||||
.OxCode .doclink {
|
||||
.OxSyntaxHighlighter .doclink {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.OxComment .doclink {
|
||||
|
@ -18,6 +18,12 @@ body {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxLabel.label,
|
||||
.OxThemeModern .OxLabel.label {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.loading {
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
@ -31,7 +37,9 @@ body {
|
|||
padding: 32px;
|
||||
margin: 32px auto 32px auto;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
//font-size: 14px;
|
||||
//line-height: 20px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.page code, .page pre {
|
||||
|
@ -63,7 +71,7 @@ body {
|
|||
font-size: 12px;
|
||||
}
|
||||
.readme .text {
|
||||
padding: 8px;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
@ -92,18 +100,16 @@ body {
|
|||
|
||||
body.OxThemeClassic,
|
||||
.OxThemeClassic .screen {
|
||||
background-color: rgb(240, 240, 240);
|
||||
background-color: rgb(224, 224, 224);
|
||||
}
|
||||
body.OxThemeModern,
|
||||
.OxThemeModern .screen {
|
||||
background-color: rgb(16, 16, 16);
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxLabel.label,
|
||||
.OxThemeClassic .page {
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxLabel.label,
|
||||
.OxThemeModern .page {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
@ -118,10 +124,10 @@ body.OxThemeModern,
|
|||
.OxThemeClassic .logo,
|
||||
.OxThemeClassic .page,
|
||||
.OxThemeClassic .readme .OxSyntaxHighlighter {
|
||||
box-shadow: 0 0 1px rgb(0, 0, 0)
|
||||
box-shadow: 0 0 1px rgb(160, 160, 160)
|
||||
}
|
||||
.OxThemeModern .logo,
|
||||
.OxThemeModern .page,
|
||||
.OxThemeModern .readme .OxSyntaxHighlighter {
|
||||
box-shadow: 0 0 1px rgb(255, 255, 255)
|
||||
box-shadow: 0 0 1px rgb(96, 96, 96)
|
||||
}
|
||||
|
|
98
index.js
98
index.js
|
@ -77,19 +77,21 @@ Ox.load(function() {
|
|||
left: center - 128 + 'px',
|
||||
top: middle - 128 + 'px',
|
||||
width: '256px',
|
||||
height: '128px'
|
||||
height: '128px',
|
||||
borderRadius: '32px'
|
||||
} : {
|
||||
top: '8px',
|
||||
left: '8px',
|
||||
top: '6px',
|
||||
left: '6px',
|
||||
width: '48px',
|
||||
height: '24px'
|
||||
height: '24px',
|
||||
borderRadius: '6px'
|
||||
};
|
||||
} else if (element == 'menu') {
|
||||
css = home ? {
|
||||
top: middle + 56 + 'px',
|
||||
left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
|
||||
} : {
|
||||
top: '8px',
|
||||
top: '6px',
|
||||
left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
|
||||
};
|
||||
} else if (element == 'screen') {
|
||||
|
@ -99,8 +101,8 @@ Ox.load(function() {
|
|||
top: middle + 96 + 'px',
|
||||
right: Math.floor(center - app.$ui.switch.width() / 2) + 'px'
|
||||
} : {
|
||||
top: '8px',
|
||||
right: '8px'
|
||||
top: '6px',
|
||||
right: '6px'
|
||||
};
|
||||
} else if (element == 'warning') {
|
||||
css = {
|
||||
|
@ -121,8 +123,8 @@ Ox.load(function() {
|
|||
src = 'source/Ox.UI/themes/' + theme
|
||||
+ '/svg/symbolLoadingAnimated.svg'
|
||||
} else if (element == 'logo') {
|
||||
src = 'source/Ox.UI/themes/' + theme + '/png/logo'
|
||||
+ (home || !app.state.loaded ? 128 : 16) + '.png'
|
||||
src = 'source/Ox.UI/themes/' + theme
|
||||
+ '/png/logo128.png'
|
||||
}
|
||||
return src;
|
||||
},
|
||||
|
@ -240,7 +242,9 @@ Ox.load(function() {
|
|||
patchButtonGroup: function($buttonGroup) {
|
||||
$buttonGroup.find('.OxButton').css({
|
||||
height: '22px',
|
||||
fontSize: '12px'
|
||||
paddingLeft: '8px',
|
||||
paddingRight: '8px',
|
||||
fontSize: '13px'
|
||||
});
|
||||
$buttonGroup.find('.OxButton:first-child').css({
|
||||
//paddingLeft: '9px',
|
||||
|
@ -257,10 +261,10 @@ Ox.load(function() {
|
|||
code: [
|
||||
new RegExp(
|
||||
'<span class="OxIdentifier">Ox</span>'
|
||||
+ '(<span class="OxOperator">\.</span>'
|
||||
+ '(<span class="OxOperator">\\.</span>'
|
||||
+ '<span class="OxIdentifier">UI</span>)?'
|
||||
+ '<span class="OxOperator">\.</span>'
|
||||
+ '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
|
||||
+ '<span class="OxOperator">\\.</span>'
|
||||
+ '<span class="Ox\\w+">([\\$\\w]+)<\\/span>',
|
||||
'g'
|
||||
),
|
||||
function (str) {
|
||||
|
@ -319,8 +323,14 @@ Ox.load(function() {
|
|||
ui: {
|
||||
doc: function() {
|
||||
return Ox.DocPanel({
|
||||
element: app.html.documentation,
|
||||
files: app.data.documentation,
|
||||
element: $('<div>')
|
||||
.addClass('Ox___Serif page')
|
||||
.css({
|
||||
margin: '32px',
|
||||
width: window.innerWidth - 640 + 'px'
|
||||
})
|
||||
.html(app.html.documentation),
|
||||
files: app.data.docItems ? void 0 : app.data.documentation,
|
||||
getModule: function(item) {
|
||||
var file = item.file.replace(/^dev\//, '');
|
||||
return file.split('/')[0];
|
||||
|
@ -329,9 +339,9 @@ Ox.load(function() {
|
|||
var file = item.file.replace(/^dev\//, '');
|
||||
return item.section || file.split('/')[2].split('.')[0];
|
||||
},
|
||||
items: app.data.docItems || void 0,
|
||||
path: 'dev/',
|
||||
replace: [app.re.code],
|
||||
selected: ''
|
||||
replace: [app.re.code]
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
|
@ -339,10 +349,22 @@ Ox.load(function() {
|
|||
'doc' + (data.id ? '/' + data.id : '')
|
||||
)
|
||||
}
|
||||
})
|
||||
.bindEventOnce({
|
||||
load: function(data) {
|
||||
app.data.docItems = data.items;
|
||||
}
|
||||
});
|
||||
},
|
||||
examples: function() {
|
||||
return Ox.ExamplePanel({
|
||||
element: $('<div>')
|
||||
.addClass('Ox___Serif page')
|
||||
.css({
|
||||
margin: '32px',
|
||||
width: window.innerWidth - 640 + 'px'
|
||||
})
|
||||
.html(app.html.examples),
|
||||
examples: app.data.examples,
|
||||
keywords: /\b(Ox\.[\w]+)\b/g,
|
||||
path: 'examples/',
|
||||
|
@ -404,7 +426,7 @@ Ox.load(function() {
|
|||
page: function(page, replace) {
|
||||
var $element = Ox.Container();
|
||||
$('<div>')
|
||||
.addClass('OxSerif page')
|
||||
.addClass('Ox____Serif page')
|
||||
.html(app.html[page].replace(app.re.version[0], app.re.version[1]))
|
||||
.appendTo($element);
|
||||
return $element;
|
||||
|
@ -414,7 +436,7 @@ Ox.load(function() {
|
|||
content: function(id) {
|
||||
return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id);
|
||||
},
|
||||
size: 40,
|
||||
size: 36,
|
||||
tabs: app.data.pages
|
||||
})
|
||||
.bindEvent({
|
||||
|
@ -423,7 +445,7 @@ Ox.load(function() {
|
|||
}
|
||||
}),
|
||||
$buttonGroup = $panel.find('.OxButtonGroup').css({
|
||||
top: '8px'
|
||||
top: '6px'
|
||||
});
|
||||
app.patchButtonGroup($buttonGroup);
|
||||
return $panel;
|
||||
|
@ -471,16 +493,26 @@ Ox.load(function() {
|
|||
$('.readme .item.selected').removeClass('selected');
|
||||
id && $('#readme_' + id).addClass('selected');
|
||||
Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) {
|
||||
$text.html(html);
|
||||
$text.find('.code').each(function() {
|
||||
var $this = $(this);
|
||||
$this.replaceWith(
|
||||
Ox.SyntaxHighlighter({
|
||||
source: $this.text()
|
||||
})
|
||||
.attr({id: $this.attr('id')})
|
||||
);
|
||||
});
|
||||
$text.empty()
|
||||
.append(
|
||||
id ? html
|
||||
: $('<div>')
|
||||
.addClass('Ox___Serif page')
|
||||
.css({
|
||||
margin: '16px',
|
||||
width: window.innerWidth - 640 + 'px'
|
||||
})
|
||||
.html(html)
|
||||
)
|
||||
.find('.code').each(function() {
|
||||
var $this = $(this);
|
||||
$this.replaceWith(
|
||||
Ox.SyntaxHighlighter({
|
||||
source: $this.text()
|
||||
})
|
||||
.attr({id: $this.attr('id')})
|
||||
);
|
||||
});
|
||||
});
|
||||
app.url.set('readme' + (id ? '/' + id : ''));
|
||||
}
|
||||
|
@ -550,10 +582,16 @@ Ox.load(function() {
|
|||
if (current.page != app.history.page) {
|
||||
app.$ui.panel.select(current.page);
|
||||
}
|
||||
if (current.item != app.history.item) {
|
||||
Ox.print('setting selected!')
|
||||
app.$ui[current.page].options({selected: current.item});
|
||||
}
|
||||
/*
|
||||
if (Ox.in(['readme', 'examples', 'doc'], current.page)) {
|
||||
Ox.print('cp',current.page, current.item)
|
||||
app.$ui[current.page].options({selected: current.item});
|
||||
}
|
||||
*/
|
||||
(!current.page || !app.history.page ? app.animate : Ox.void)(function() {
|
||||
//app.url.replace(url);
|
||||
app.history = current;
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
<h1>Documentation</h1>
|
||||
<p>Generated with <a href="#documentation/Ox.doc"><code>Ox.doc</code></a>. Please note that parts of it may still be incomplete, incorrect or in flux.</p>
|
||||
<h1><b>Documentation</b></h1>
|
||||
<p>Generated with <a href="#doc/Ox.doc"><code>Ox.doc</code></a>. Please note that parts of it may still be incomplete, incorrect or in flux.</p>
|
|
@ -1,2 +1,2 @@
|
|||
<h1>Examples</h1>
|
||||
<h1><b>Examples</b></h1>
|
||||
<p>...</p>
|
|
@ -1,2 +1,2 @@
|
|||
<h1>Readme</h1>
|
||||
<h1><b>Readme</b></h1>
|
||||
<p>The missing blog. The missing FAQ. The missing manual.</p>
|
Loading…
Reference in a new issue