improving info view

This commit is contained in:
rlx 2011-08-06 01:04:09 +00:00
parent 5fc4030c27
commit 132cf2fb63
3 changed files with 120 additions and 79 deletions

View file

@ -501,6 +501,7 @@
"groups": ["director", "country", "year", "language", "genre"], "groups": ["director", "country", "year", "language", "genre"],
"groupsQuery": {"conditions": [], "operator": "|"}, "groupsQuery": {"conditions": [], "operator": "|"},
"groupsSize": 176, "groupsSize": 176,
"icons": "posters",
"item": "", "item": "",
"itemView": "timeline", "itemView": "timeline",
"list": "", "list": "",

View file

@ -92,24 +92,40 @@ pandora.ui.infoView = function(data) {
MozUserSelect: 'text', MozUserSelect: 'text',
WebkitUserSelect: 'text' WebkitUserSelect: 'text'
}) })
.html(formatValue(data[key], key == 'director' ? 'director' : null)) .html(
key == 'title'
? data.title + (
data.original_title
? ' <span style="color: rgb(128, 128, 128)">(' + data.original_title + ')</span>'
: ''
)
: formatValue(data.director, 'name')
)
.appendTo($text); .appendTo($text);
}); });
var $div = $('<div>')
.css({ if (data.country || data.year || data.language || data.runtime || pandora.user.level == 'admin') {
marginTop: '4px', var $div = $('<div>')
textAlign: 'justify' .css({
}) marginTop: '4px',
.appendTo($text); textAlign: 'justify'
['country', 'year', 'language', 'runtime'].forEach(function(key) { })
data[key] && $('<span>') .appendTo($text);
.html( var html = [];
formatKey(key) ['country', 'year', 'language', 'runtime'].forEach(function(key) {
+ (key == 'runtime' ? Math.round(data[key] / 60) + ' min' : formatValue(data[key], key == 'runtime' ? null : key)) if (data[key] || (['country', 'year'].indexOf(key) > -1 && pandora.user.level == 'admin')) {
+ '&nbsp; ' var value = data[key] || '<span style="color: rgb(128, 128, 128)">unknown</span>';
) html.push(
.appendTo($div); formatKey(key)
}); + (key == 'runtime'
? Math.round(value / 60) + ' min'
: formatValue(value, key == 'runtime' ? null : key))
);
}
});
$div.html(html.join('; '));
}
// fixme: should be camelCase! // fixme: should be camelCase!
data.alternative_titles && $('<div>') data.alternative_titles && $('<div>')
.css({ .css({
@ -128,42 +144,62 @@ pandora.ui.infoView = function(data) {
}).join(', ') }).join(', ')
) )
.appendTo($text); .appendTo($text);
$div = $('<div>')
if (data.writer || data.producer || data.cinematographer || data.editor) {
$div = $('<div>')
.css({
marginTop: '4px',
textAlign: 'justify',
MozUserSelect: 'text',
WebkitUserSelect: 'text'
})
.appendTo($text);
html = [];
['writer', 'producer', 'cinematographer', 'editor'].forEach(function(key) {
data[key] && html.push(
formatKey(key) + formatValue(data[key], 'name')
);
});
$div.html(html.join('; '));
}
data.cast && $('<div>')
.css({ .css({
marginTop: '4px', marginTop: '4px',
textAlign: 'justify', textAlign: 'justify',
MozUserSelect: 'text', MozUserSelect: 'text',
WebkitUserSelect: 'text' WebkitUserSelect: 'text'
}) })
.html(
formatKey('cast') + data.cast.map(function(value) {
value.character = value.character.replace('(uncredited)', '').trim();
return formatValue(value.actor, 'name') + (
value.character
? ' <span style="color: rgb(128, 128, 128)">(' + formatValue(value.character) + ')</span>'
: ''
);
}).join(', ')
)
.appendTo($text); .appendTo($text);
['writer', 'producer', 'cinematographer', 'editor'].forEach(function(key) { if (data.genre || data.keyword) {
data[key] && $('<span>') $div = $('<div>')
.html(
formatKey(key) + formatValue(data[key], 'name') + '&nbsp; '
)
.appendTo($div);
});
['cast', 'genre', 'keyword'].forEach(function(key) {
data[key] && $('<div>')
.css({ .css({
marginTop: '4px', marginTop: '4px',
textAlign: 'justify' textAlign: 'justify',
MozUserSelect: 'text',
WebkitUserSelect: 'text'
}) })
.html(
formatKey(key == 'keyword' ? 'keywords' : key)
+ (key == 'cast' ? data[key].map(function(value) {
value.character = value.character.replace('(uncredited)', '').trim();
return formatValue(value.actor, 'name') + (
value.character
? ' <span style="color: rgb(128, 128, 128)">(' + formatValue(value.character, 'name') + ')</span>'
: ''
);
}).join(', ') : formatValue(data[key], key == 'cast' ? 'name' : key))
)
.appendTo($text); .appendTo($text);
}); html = [];
['genre', 'keyword'].forEach(function(key) {
data[key] && html.push(
formatKey(key == 'keyword' ? 'keywords' : key)
+ formatValue(data[key], key)
);
});
$div.html(html.join('; '));
}
data.summary && $('<div>') data.summary && $('<div>')
.css({ .css({
@ -185,22 +221,16 @@ pandora.ui.infoView = function(data) {
.append( .append(
$('<div>') $('<div>')
.css({ .css({
//display: 'inline',
display: 'table-cell', display: 'table-cell',
//float: 'left',
width: '12px', width: '12px',
marginTop: '4px', paddingTop: '4px'
paddingBottom: '4px'
}) })
.html('<span style="font-weight: bold">&bull;</span>') .html('<span style="font-weight: bold">&bull;</span>')
) )
.append( .append(
$('<div>') $('<div>')
.css({ .css({
//clear: 'both',
display: 'table-cell', display: 'table-cell',
//float: 'left',
//width: '100px',
paddingTop: '4px', paddingTop: '4px',
textAlign: 'justify', textAlign: 'justify',
MozUserSelect: 'text', MozUserSelect: 'text',
@ -247,13 +277,13 @@ pandora.ui.infoView = function(data) {
WebkitUserSelect: 'text' WebkitUserSelect: 'text'
}) })
.appendTo($text); .appendTo($text);
html = [];
['budget', 'gross', 'profit'].forEach(function(key) { ['budget', 'gross', 'profit'].forEach(function(key) {
data[key] && $('<span>') data[key] && html.push(
.html( formatKey(key) + Ox.formatCurrency(data[key], '$')
formatKey(key) + data[key] + '&nbsp; ' );
)
.appendTo($div);
}); });
$div.html(html.join('; '));
} }
if (data.rating || data.votes) { if (data.rating || data.votes) {
@ -265,13 +295,13 @@ pandora.ui.infoView = function(data) {
WebkitUserSelect: 'text' WebkitUserSelect: 'text'
}) })
.appendTo($text); .appendTo($text);
html = [];
['rating', 'votes'].forEach(function(key) { ['rating', 'votes'].forEach(function(key) {
data[key] && $('<span>') data[key] && html.push(
.html( formatKey(key) + Ox.formatNumber(data[key])
formatKey(key) + Ox.formatNumber(data[key]) + '&nbsp; ' );
)
.appendTo($div);
}); });
$div.html(html.join('; '));
} }
if (data.connections) { if (data.connections) {
@ -283,28 +313,38 @@ pandora.ui.infoView = function(data) {
WebkitUserSelect: 'text' WebkitUserSelect: 'text'
}) })
.appendTo($text); .appendTo($text);
Ox.forEach(data.connections, function(movies, key) { html = [];
$('<span>') [
.html( 'Edited from', 'Edited into',
formatKey(key) + formatValue(movies) + '&nbsp; ' 'Features', 'Featured in',
) 'Follows', 'Followed by',
.appendTo($div); 'References', 'Referenced in',
'Remake of', 'Remade as',
'Spin off from', 'Spin off',
'Spoofs', 'Spoofed in'
].forEach(function(key) {
data.connections[key] && html.push(
formatKey(key) + formatValue(data.connections[key])
);
}); });
$div.html(html.join('; '));
} }
data.reviews && $('<div>') ['reviews', 'links'].forEach(function(key) {
.css({ data[key] && $('<div>')
marginTop: '4px', .css({
textAlign: 'justify', marginTop: '4px',
MozUserSelect: 'text', textAlign: 'justify',
WebkitUserSelect: 'text' MozUserSelect: 'text',
}) WebkitUserSelect: 'text'
.html( })
formatKey('reviews') + data.reviews.map(function(review) { .html(
return '<a href="' + review.url + '">' + review.source + '</a>' formatKey(key) + data[key].map(function(value) {
}).join(', ') return '<a href="' + value.url + '">' + value.source + '</a>'
) }).join(', ')
.appendTo($text); )
.appendTo($text);
});
$('<div>').css({height: '8px'}).appendTo($text); $('<div>').css({height: '8px'}).appendTo($text);

View file

@ -252,7 +252,7 @@ pandora.ui.item = function() {
var stats = Ox.Container(); var stats = Ox.Container();
Ox.TreeList({ Ox.TreeList({
data: result.data, data: result.data,
width: 256 width: pandora.$ui.mainPanel.size(1) - Ox.UI.SCROLLBAR_SIZE
}).appendTo(stats); }).appendTo(stats);
pandora.$ui.contentPanel.replaceElement(1, stats); pandora.$ui.contentPanel.replaceElement(1, stats);