use themed colored elements
This commit is contained in:
parent
cb83a8a478
commit
50ec104d7f
7 changed files with 108 additions and 125 deletions
|
@ -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}}"
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
.css({
|
$line = $('<div>')
|
||||||
height: '16px',
|
.css({
|
||||||
marginBottom: '4px'
|
height: '16px',
|
||||||
})
|
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',
|
paddingTop: '2px',
|
||||||
fontSize: '8px'
|
background: $element.css('background'),
|
||||||
},
|
fontSize: '8px',
|
||||||
getUserLevelCSS(userLevel)
|
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'});
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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')) {
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue