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",
"title": "Rights Level",
"type": "integer",
"columnWidth": 60,
"type": "label",
"columnWidth": 90,
"format": {"type": "ColorLevel", "args": [
["Public", "Relaxed", "Regular", "Restricted", "Private"]
]},
"sortOperator": "+"
},
{
@ -550,6 +553,7 @@
// E-mail address uses by the system (from)
"system": "0xdb@0xdb.org"
},
// fixme: there should be no magic applied to this file
"id": "{{settings.SITEID}}",
"name": "{{settings.SITENAME}}",
"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) {
info = data['year'];
} else {
// fixme: this is duplicated many times
format = pandora.getSortKeyData(sortKey).format;
info = format
? Ox['format' + Ox.toTitleCase(format.type)]
.apply(this, Ox.merge([data[sortKey]], format.args || []))
: data[sortKey];
if (format) {
info = (
/^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
)['format' + Ox.toTitleCase(format.type)].apply(
this, Ox.merge([data[sortKey]], format.args || [])
);
} else {
info = data[sortKey];
}
}
return {
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);
} else {
format = pandora.getSortKeyData(sortKey).format;
info = format
? Ox['format' + Ox.toTitleCase(format.type)]
.apply(this, Ox.merge([data[sortKey]], format.args || []))
: data[sortKey];
if (format) {
info = (
/^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
)['format' + Ox.toTitleCase(format.type)].apply(
this, Ox.merge([data[sortKey]], format.args || [])
);
} else {
info = data[sortKey];
}
}
return {
height: height,

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

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

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

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

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

@ -173,9 +173,6 @@ pandora.ui.mainMenu = function() {
} else if (data.id == 'settheme') {
Ox.Theme(value);
pandora.UI.set('theme', value);
if (ui.item && ui.itemView == 'info') {
pandora.$ui.item.renderRightsLevel();
}
} else if (data.id == 'showsiteposter') {
pandora.UI.set('showSitePoster', data.checked)
} 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),
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,
userLevels = ['member', 'friend', 'staff', 'admin'],
@ -116,25 +108,18 @@ pandora.ui.usersDialog = function() {
{
align: 'center',
format: function(value) {
var dark = 'rgb(' + levelColors[value].map(function(color) {
return (color - 128).toString();
}).join(', ') + ')',
light = 'rgb(' + levelColors[value].map(function(color) {
return color.toString()
}).join(', ') + ')';
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))
return Ox.Theme.formatColorLevel(
pandora.site.userLevels.indexOf(value),
pandora.site.userLevels.map(function(userLevel) {
return Ox.toTitleCase(userLevel);
}),
[0, 240]
);
},
id: 'level',
operator: '-',
title: 'Level',
type: 'label',
visible: true,
width: 60
},