0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

use themed colored elements

Browse source
This commit is contained in:
rolux 2011-10-26 14:52:23 +00:00
parent cb83a8a478
commit 50ec104d7f
7 changed files with 108 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
pandora/0xdb.jsonc
View file

@ -448,8 +448,11 @@
{ {
"id": "rightslevel", "id": "rightslevel",
"title": "Rights Level", "title": "Rights Level",
"type": "integer", "type": "label",
"columnWidth": 60, "columnWidth": 90,
"format": {"type": "ColorLevel", "args": [
["Public", "Relaxed", "Regular", "Restricted", "Private"]
]},
"sortOperator": "+" "sortOperator": "+"
}, },
{ {
@ -550,6 +553,7 @@
// E-mail address uses by the system (from) // E-mail address uses by the system (from)
"system": "0xdb@0xdb.org" "system": "0xdb@0xdb.org"
}, },
// fixme: there should be no magic applied to this file
"id": "{{settings.SITEID}}", "id": "{{settings.SITEID}}",
"name": "{{settings.SITENAME}}", "name": "{{settings.SITENAME}}",
"url": "{{settings.URL}}" "url": "{{settings.URL}}"

14
static/js/pandora/browser.js
View file

@ -65,11 +65,17 @@ pandora.ui.browser = function() {
if (['title', 'director'].indexOf(sortKey) > -1) { if (['title', 'director'].indexOf(sortKey) > -1) {
info = data['year']; info = data['year'];
} else { } else {
// fixme: this is duplicated many times
format = pandora.getSortKeyData(sortKey).format; format = pandora.getSortKeyData(sortKey).format;
info = format if (format) {
? Ox['format' + Ox.toTitleCase(format.type)] info = (
.apply(this, Ox.merge([data[sortKey]], format.args || [])) /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
: data[sortKey]; )['format' + Ox.toTitleCase(format.type)].apply(
this, Ox.merge([data[sortKey]], format.args || [])
);
} else {
info = data[sortKey];
}
} }
return { return {
height: ratio <= 1 ? size : size / ratio, height: ratio <= 1 ? size : size / ratio,

13
static/js/pandora/clipList.js
View file

@ -28,10 +28,15 @@ pandora.ui.clipList = function(videoRatio) {
+ Ox.formatDuration(data.out); + Ox.formatDuration(data.out);
} else { } else {
format = pandora.getSortKeyData(sortKey).format; format = pandora.getSortKeyData(sortKey).format;
info = format if (format) {
? Ox['format' + Ox.toTitleCase(format.type)] info = (
.apply(this, Ox.merge([data[sortKey]], format.args || [])) /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
: data[sortKey]; )['format' + Ox.toTitleCase(format.type)].apply(
this, Ox.merge([data[sortKey]], format.args || [])
);
} else {
info = data[sortKey];
}
} }
return { return {
height: height, height: height,

122
static/js/pandora/infoView.js
View file

@ -424,7 +424,7 @@ pandora.ui.infoView = function(data) {
$('<div>') $('<div>')
.css({marginBottom: '4px'}) .css({marginBottom: '4px'})
.append(formatKey(key, true)) .append(formatKey(key, true))
.append(Ox.formatColor(data[key] || 0, key == 'volume' ? 'lightness' : key)) .append(Ox.Theme.formatColor(data[key] || 0, key == 'volume' ? 'lightness' : key))
.appendTo($statistics); .appendTo($statistics);
}); });
@ -442,7 +442,6 @@ pandora.ui.infoView = function(data) {
if (canEdit) { if (canEdit) {
Ox.print('DATA', data)
$('<div>') $('<div>')
.css({marginBottom: '4px'}) .css({marginBottom: '4px'})
.append(formatKey('Notes', true)) .append(formatKey('Notes', true))
@ -524,7 +523,7 @@ pandora.ui.infoView = function(data) {
function formatKey(key, isStatistics) { function formatKey(key, isStatistics) {
return isStatistics return isStatistics
? $('<div>').css({marginBottom: '2px', fontWeight: 'bold'}).html(Ox.toTitleCase(key)) ? $('<div>').css({marginBottom: '4px', fontWeight: 'bold'}).html(Ox.toTitleCase(key))
: '<span style="font-weight: bold">' + Ox.toTitleCase(key) + ':</span> '; : '<span style="font-weight: bold">' + Ox.toTitleCase(key) + ':</span> ';
} }
@ -551,47 +550,13 @@ pandora.ui.infoView = function(data) {
}).join(', '); }).join(', ');
} }
function getCapabilityCSS(hasCapability) { function getRightsLevelElement(rightsLevel) {
var colors = [[255, 128, 128], [128, 255, 128]]; return Ox.Theme.formatColorLevel(
return { rightsLevel,
background: 'rgb(' + colors[+hasCapability].map(function(value) { pandora.site.rightsLevels.map(function(rightsLevel) {
return pandora.user.ui.theme == 'classic' return rightsLevel.name;
? value : value - 128; })
}).join(', ') + ')', );
color: pandora.user.ui.theme == 'classic'
? 'rgb(64, 64, 64)' : 'rgb(192, 192, 192)'
};
}
function getRightsLevelCSS(rightsLevel) {
rightsLevel = pandora.site.rightsLevels[rightsLevel];
return {
background: 'rgb(' + rightsLevel.color.map(function(value) {
return pandora.user.ui.theme == 'classic'
? value : value - 128;
}).join(', ') + ')',
color: pandora.user.ui.theme == 'classic'
? 'rgb(64, 64, 64)' : 'rgb(192, 192, 192)'
};
}
function getUserLevelCSS(userLevel) {
// FIXME: colors should be part of config
var colors = {
'guest': [255, 128, 128],
'member': [255, 255, 128],
'friend': [128, 255, 128],
'staff': [128, 255, 255],
'admin': [128, 128, 255]
};
return {
background: 'rgb(' + colors[userLevel].map(function(value) {
return pandora.user.ui.theme == 'classic'
? value : value - 128;
}).join(', ') + ')',
color: pandora.user.ui.theme == 'classic'
? 'rgb(64, 64, 64)' : 'rgb(192, 192, 192)'
}
} }
function parseTitle(title) { function parseTitle(title) {
@ -619,32 +584,38 @@ pandora.ui.infoView = function(data) {
), ),
userLevels = canEdit ? pandora.site.userLevels : [pandora.user.level]; userLevels = canEdit ? pandora.site.userLevels : [pandora.user.level];
$capabilities.empty(); $capabilities.empty();
userLevels.forEach(function(userLevel) { userLevels.forEach(function(userLevel, i) {
var $line = $('<div>') var $element,
$line = $('<div>')
.css({ .css({
height: '16px', height: '16px',
marginBottom: '4px' marginBottom: '4px'
}) })
.appendTo($capabilities); .appendTo($capabilities);
if (canEdit) { if (canEdit) {
$element = Ox.Theme.formatColorLevel(i, userLevels.map(function(userLevel) {
return Ox.toTitleCase(userLevel);
}), [0, 240]);
Ox.Label({ Ox.Label({
textAlign: 'center', textAlign: 'center',
title: Ox.toTitleCase(userLevel), title: Ox.toTitleCase(userLevel),
width: 48 width: 60
}) })
.css(Ox.extend( .addClass('OxColor OxColorGradient')
{ .css({
float: 'left', float: 'left',
paddingTop: '2px',
height: '12px', height: '12px',
fontSize: '8px' paddingTop: '2px',
}, background: $element.css('background'),
getUserLevelCSS(userLevel) fontSize: '8px',
)) color: $element.css('color')
})
.data({OxColor: $element.data('OxColor')})
.appendTo($line); .appendTo($line);
} }
capabilities.forEach(function(capability) { capabilities.forEach(function(capability) {
var hasCapability = pandora.site.capabilities[capability.name][userLevel] >= rightsLevel; var hasCapability = pandora.site.capabilities[capability.name][userLevel] >= rightsLevel,
$element = Ox.Theme.formatColorLevel(hasCapability, ['', '']);
Ox.Button({ Ox.Button({
tooltip: (canEdit ? Ox.toTitleCase(userLevel) : 'You') + ' ' tooltip: (canEdit ? Ox.toTitleCase(userLevel) : 'You') + ' '
+ (hasCapability ? 'can' : 'can\'t') + ' ' + (hasCapability ? 'can' : 'can\'t') + ' '
@ -654,8 +625,13 @@ pandora.ui.infoView = function(data) {
title: capability.symbol, title: capability.symbol,
type: 'image' type: 'image'
}) })
.css(getCapabilityCSS(hasCapability)) .addClass('OxColor OxColorGradient')
.css({
background: $element.css('background'),
color: $element.css('color')
})
.css('margin' + (canEdit ? 'Left' : 'Right'), '4px') .css('margin' + (canEdit ? 'Left' : 'Right'), '4px')
.data({OxColor: $element.data('OxColor')})
.appendTo($line); .appendTo($line);
}); });
if (!canEdit) { if (!canEdit) {
@ -706,7 +682,7 @@ pandora.ui.infoView = function(data) {
max: 1, max: 1,
min: 1, min: 1,
orientation: 'both', orientation: 'both',
selected: selectedImage?[selectedImage['index']]:[], selected: [selectedImage['index']],
size: 128, size: 128,
sort: [{key: 'index', operator: '+'}], sort: [{key: 'index', operator: '+'}],
unique: 'index' unique: 'index'
@ -778,8 +754,9 @@ pandora.ui.infoView = function(data) {
} }
function renderRightsLevel() { function renderRightsLevel() {
var $capabilites, $rightsLevelLabel, $rightsLevelSelect, var $capabilites,
rightsLevelCSS = getRightsLevelCSS(data.rightslevel); $rightsLevelElement = getRightsLevelElement(data.rightslevel),
$rightsLevelSelect;
$rightsLevel.empty(); $rightsLevel.empty();
if (canEdit) { if (canEdit) {
$rightsLevelSelect = Ox.Select({ $rightsLevelSelect = Ox.Select({
@ -788,13 +765,19 @@ pandora.ui.infoView = function(data) {
}), }),
width: 128 width: 128
}) })
.css(Ox.extend({ .addClass('OxColor OxColorGradient')
marginBottom: '4px' .css({
}, rightsLevelCSS)) marginBottom: '4px',
background: $rightsLevelElement.css('background')
})
.data({OxColor: $rightsLevelElement.data('OxColor')})
.bindEvent({ .bindEvent({
change: function(event) { change: function(event) {
var rightsLevel = event.selected[0].id; var rightsLevel = event.selected[0].id;
$rightsLevelSelect.css(getRightsLevelCSS(rightsLevel)); $rightsLevelElement = getRightsLevelElement(rightsLevel);
$rightsLevelSelect
.css({background: $rightsLevelElement.css('background')})
.data({OxColor: $rightsLevelElement.data('OxColor')})
renderCapabilities(rightsLevel); renderCapabilities(rightsLevel);
pandora.api.edit({id: data.id, rightslevel: rightsLevel}, function(result) { pandora.api.edit({id: data.id, rightslevel: rightsLevel}, function(result) {
// ... // ...
@ -803,13 +786,10 @@ pandora.ui.infoView = function(data) {
}) })
.appendTo($rightsLevel); .appendTo($rightsLevel);
} else { } else {
$rightsLevelLabel = Ox.Label({ $rightsLevelElement
title: pandora.site.rightsLevels[data.rightslevel].name, .css({
width: 128
})
.css(Ox.extend({
marginBottom: '4px' marginBottom: '4px'
}, rightsLevelCSS)) })
.appendTo($rightsLevel); .appendTo($rightsLevel);
} }
$capabilities = $('<div>').appendTo($rightsLevel); $capabilities = $('<div>').appendTo($rightsLevel);
@ -863,10 +843,6 @@ pandora.ui.infoView = function(data) {
pandora.user.level == 'admin' && $list.replaceWith($list = renderList()); pandora.user.level == 'admin' && $list.replaceWith($list = renderList());
}; };
that.renderRightsLevel = function() {
renderRightsLevel();
};
that.resize = function() { that.resize = function() {
var height = pandora.$ui.contentPanel.size(1); var height = pandora.$ui.contentPanel.size(1);
$list && $list.css({height: height + 'px'}); $list && $list.css({height: height + 'px'});

28
static/js/pandora/list.js
View file

@ -79,7 +79,7 @@ pandora.ui.list = function() {
return { return {
align: ['string', 'text'].indexOf( align: ['string', 'text'].indexOf(
Ox.isArray(key.type) ? key.type[0]: key.type Ox.isArray(key.type) ? key.type[0]: key.type
) > -1 ? 'left' : 'right', ) > -1 ? 'left' : key.type == 'label' ? 'center' : 'right',
defaultWidth: key.columnWidth, defaultWidth: key.columnWidth,
format: key.format, format: key.format,
id: key.id, id: key.id,
@ -154,10 +154,15 @@ pandora.ui.list = function() {
info = data['year']; info = data['year'];
} else { } else {
format = pandora.getSortKeyData(sortKey).format; format = pandora.getSortKeyData(sortKey).format;
info = format if (format) {
? Ox['format' + Ox.toTitleCase(format.type)] info = (
.apply(this, Ox.merge([data[sortKey]], format.args || [])) /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
: data[sortKey]; )['format' + Ox.toTitleCase(format.type)].apply(
this, Ox.merge([data[sortKey]], format.args || [])
);
} else {
info = data[sortKey];
}
} }
size = size || 128; size = size || 128;
return { return {
@ -202,10 +207,15 @@ pandora.ui.list = function() {
info = data['year']; info = data['year'];
} else { } else {
format = pandora.getSortKeyData(sortKey).format; format = pandora.getSortKeyData(sortKey).format;
info = format if (format) {
? Ox['format' + Ox.toTitleCase(format.type)] info = (
.apply(this, Ox.merge([data[sortKey]], format.args || [])) /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
: data[sortKey]; )['format' + Ox.toTitleCase(format.type)].apply(
this, Ox.merge([data[sortKey]], format.args || [])
);
} else {
info = data[sortKey];
}
} }
return { return {
icon: { icon: {

3
static/js/pandora/menu.js
View file

@ -173,9 +173,6 @@ pandora.ui.mainMenu = function() {
} else if (data.id == 'settheme') { } else if (data.id == 'settheme') {
Ox.Theme(value); Ox.Theme(value);
pandora.UI.set('theme', value); pandora.UI.set('theme', value);
if (ui.item && ui.itemView == 'info') {
pandora.$ui.item.renderRightsLevel();
}
} else if (data.id == 'showsiteposter') { } else if (data.id == 'showsiteposter') {
pandora.UI.set('showSitePoster', data.checked) pandora.UI.set('showSitePoster', data.checked)
} else if (Ox.startsWith(data.id, 'sortgroup')) { } else if (Ox.startsWith(data.id, 'sortgroup')) {

31
static/js/pandora/usersDialog.js
View file

@ -3,14 +3,6 @@ pandora.ui.usersDialog = function() {
var height = Math.round((window.innerHeight - 48) * 0.9), var height = Math.round((window.innerHeight - 48) * 0.9),
width = Math.round(window.innerWidth * 0.9), width = Math.round(window.innerWidth * 0.9),
// FIXME: colors should be part of config
levelColors = {
'guest': [255, 128, 128],
'member': [255, 255, 128],
'friend': [128, 255, 128],
'staff': [128, 255, 255],
'admin': [128, 128, 255]
},
numberOfUsers = 0, numberOfUsers = 0,
userLevels = ['member', 'friend', 'staff', 'admin'], userLevels = ['member', 'friend', 'staff', 'admin'],
@ -116,25 +108,18 @@ pandora.ui.usersDialog = function() {
{ {
align: 'center', align: 'center',
format: function(value) { format: function(value) {
var dark = 'rgb(' + levelColors[value].map(function(color) { return Ox.Theme.formatColorLevel(
return (color - 128).toString(); pandora.site.userLevels.indexOf(value),
}).join(', ') + ')', pandora.site.userLevels.map(function(userLevel) {
light = 'rgb(' + levelColors[value].map(function(color) { return Ox.toTitleCase(userLevel);
return color.toString() }),
}).join(', ') + ')'; [0, 240]
return $('<div>') );
.css({
borderRadius: '4px',
padding: '0 3px 1px 3px',
background: pandora.user.ui.theme == 'classic' ? light : dark,
textAlign: 'center',
color: pandora.user.ui.theme == 'classic' ? dark : light
})
.html(Ox.toTitleCase(value))
}, },
id: 'level', id: 'level',
operator: '-', operator: '-',
title: 'Level', title: 'Level',
type: 'label',
visible: true, visible: true,
width: 60 width: 60
}, },