forked from 0x2620/pandora
update help dialog (image elements) and api dialog (widths)
This commit is contained in:
parent
088807202e
commit
cce51fa4db
2 changed files with 31 additions and 17 deletions
|
@ -50,10 +50,10 @@ pandora.ui.apiDialog = function() {
|
||||||
keys: {escape: 'close'},
|
keys: {escape: 'close'},
|
||||||
maximizeButton: true,
|
maximizeButton: true,
|
||||||
minHeight: 256,
|
minHeight: 256,
|
||||||
minWidth: 544 + Ox.UI.SCROLLBAR_SIZE,
|
minWidth: 544 + 2 * Ox.UI.SCROLLBAR_SIZE,
|
||||||
removeOnClose: true,
|
removeOnClose: true,
|
||||||
title: 'API Documentation',
|
title: 'API Documentation',
|
||||||
width: 672 + Ox.UI.SCROLLBAR_SIZE
|
width: 672 + 2 * Ox.UI.SCROLLBAR_SIZE
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
close: function() {
|
close: function() {
|
||||||
|
@ -116,7 +116,7 @@ pandora.ui.apiDialog = function() {
|
||||||
|
|
||||||
$panel = Ox.SplitPanel({
|
$panel = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{element: $list, size: 128},
|
{element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE},
|
||||||
{element: $text}
|
{element: $text}
|
||||||
],
|
],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
|
|
|
@ -21,7 +21,7 @@ pandora.ui.helpDialog = function() {
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
|
|
||||||
$panel, $list, $text,
|
$panel, $list, $text, $image,
|
||||||
|
|
||||||
that = Ox.Dialog({
|
that = Ox.Dialog({
|
||||||
buttons: [
|
buttons: [
|
||||||
|
@ -49,18 +49,16 @@ pandora.ui.helpDialog = function() {
|
||||||
keys: {escape: 'close'},
|
keys: {escape: 'close'},
|
||||||
maximizeButton: true,
|
maximizeButton: true,
|
||||||
minHeight: 256,
|
minHeight: 256,
|
||||||
minWidth: 544 + Ox.UI.SCROLLBAR_SIZE,
|
minWidth: 544 + 2 * Ox.UI.SCROLLBAR_SIZE,
|
||||||
removeOnClose: true,
|
removeOnClose: true,
|
||||||
title: 'Help',
|
title: 'Help',
|
||||||
width: 672 + Ox.UI.SCROLLBAR_SIZE
|
width: 672 + 2 * Ox.UI.SCROLLBAR_SIZE
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
close: function() {
|
close: function() {
|
||||||
pandora.user.ui.page == 'help' && pandora.UI.set({page: '', 'hash.anchor': ''});
|
pandora.user.ui.page == 'help' && pandora.UI.set({page: '', 'hash.anchor': ''});
|
||||||
},
|
},
|
||||||
resize: function() {
|
resize: resize,
|
||||||
$list.size();
|
|
||||||
},
|
|
||||||
'pandora_help': function(data) {
|
'pandora_help': function(data) {
|
||||||
if (pandora.user.ui.page == 'help') {
|
if (pandora.user.ui.page == 'help') {
|
||||||
that.select(data.value == '' ? 'help' : data.value);
|
that.select(data.value == '' ? 'help' : data.value);
|
||||||
|
@ -119,16 +117,15 @@ pandora.ui.helpDialog = function() {
|
||||||
$text = Ox.Element()
|
$text = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
padding: '16px',
|
padding: '16px',
|
||||||
// fontSize: '12px',
|
|
||||||
lineHeight: '16px',
|
lineHeight: '16px',
|
||||||
overflowY: 'auto',
|
overflowY: 'scroll',
|
||||||
MozUserSelect: 'text',
|
MozUserSelect: 'text',
|
||||||
WebkitUserSelect: 'text'
|
WebkitUserSelect: 'text'
|
||||||
});
|
});
|
||||||
|
|
||||||
$panel = Ox.SplitPanel({
|
$panel = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{element: $list, size: 128},
|
{element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE},
|
||||||
{element: $text}
|
{element: $text}
|
||||||
],
|
],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
|
@ -139,13 +136,30 @@ pandora.ui.helpDialog = function() {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function getImageSize() {
|
||||||
|
var width = that.options('width') - 160 - 2 * Ox.UI.SCROLLBAR_SIZE,
|
||||||
|
height = Math.round(width * 5/8);
|
||||||
|
return {width: width, height: height};
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize(data) {
|
||||||
|
$list.size();
|
||||||
|
$image && $image.options(getImageSize());
|
||||||
|
}
|
||||||
|
|
||||||
that.select = function(id) {
|
that.select = function(id) {
|
||||||
|
var img, $img;
|
||||||
$text.html(text[id || 'help']).scrollTop(0);
|
$text.html(text[id || 'help']).scrollTop(0);
|
||||||
$text.find('img')
|
img = $text.find('img');
|
||||||
.css({
|
if (img) {
|
||||||
width: '100%',
|
$img = $(img);
|
||||||
borderRadius: '8px'
|
$img.replaceWith(
|
||||||
});
|
$image = Ox.ImageElement(
|
||||||
|
Ox.extend(getImageSize(), {src: $img.attr('src')})
|
||||||
|
)
|
||||||
|
.css({borderRadius: '8px'})
|
||||||
|
);
|
||||||
|
}
|
||||||
$text.find('td:first-child')
|
$text.find('td:first-child')
|
||||||
.css({
|
.css({
|
||||||
height: '16px',
|
height: '16px',
|
||||||
|
|
Loading…
Reference in a new issue