show capabilities in info view

This commit is contained in:
rolux 2011-10-24 10:04:41 +00:00
parent aff6d748fb
commit 5676bab56f
5 changed files with 150 additions and 52 deletions

View file

@ -528,11 +528,11 @@
],
"rightsLevel": {"member": 5, "staff": 4, "admin": 3},
"rightsLevels": [
{"name": "Public", "color": [128, 255, 128], "description": "Everyone can play and download."},
{"name": "Relaxed", "color": [192, 255, 128], "description": "Only friends, staff and admins can download."},
{"name": "Regular", "color": [255, 255, 128], "description": "Only friends, staff and admins can play video."},
{"name": "Restricted", "color": [255, 192, 128], "description": "Only friends, staff and admins can play clips."},
{"name": "Private", "color": [255, 128, 128], "description": "Only staff and admins can see."}
{"name": "Public", "color": [128, 255, 128]},
{"name": "Relaxed", "color": [192, 255, 128]},
{"name": "Regular", "color": [255, 255, 128]},
{"name": "Restricted", "color": [255, 192, 128]},
{"name": "Private", "color": [255, 128, 128]}
],
"sendReferrer": false,
"site": {
@ -627,6 +627,7 @@
"username": "",
"volumes": []
},
// fixme: this should include colors
"userLevels": ["guest", "member", "friend", "staff", "admin"],
"video": {
"download": false,

View file

@ -351,6 +351,8 @@ pandora.ui.infoView = function(data) {
$('<div>').css({height: '8px'}).appendTo($text);
pandora.createLinks($text);
['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) {
$('<div>')
.css({marginBottom: '4px'})
@ -359,47 +361,13 @@ pandora.ui.infoView = function(data) {
.appendTo($statistics);
});
var rightsLevelCSS = getRightsLevelCSS(data.rightsLevel),
$rightsLevel, $rightsLevelSelect, $rightsLevelDescription;
if (canEdit) {
$rightsLevel = $('<div>');
$rightsLevelSelect = Ox.Select({
items: pandora.site.rightsLevels.map(function(rightsLevel, i) {
return {id: i, title: rightsLevel.name, checked: i == data.rightsLevel};
}),
width: 128
})
.css(Ox.extend({
marginBottom: '4px'
}, rightsLevelCSS))
.bindEvent({
change: function(event) {
var rightsLevel = event.selected[0].id;
$rightsLevelSelect.css(getRightsLevelCSS(rightsLevel));
$rightsLevelDescription.html(pandora.site.rightsLevels[rightsLevel].description);
pandora.api.edit({id: data.id, rightsLevel: rightsLevel}, function(result) {
// ...
});
}
})
.appendTo($rightsLevel);
$rightsLevelDescription = $('<div>')
.css({})
.html(pandora.site.rightsLevels[data.rightsLevel].description)
.appendTo($rightsLevel)
} else {
$rightsLevel = $('<div>')
.css(Ox.extend({
paddingLeft: '3px',
borderRadius: '4px'
}, rightsLevelCSS))
.html(pandora.site.rightsLevels[data.rightsLevel].name);
}
var $rightsLevel = $('<div>');
$('<div>')
.css({marginBottom: '4px'})
.append(formatKey('Rights Level', true))
.append($rightsLevel)
.appendTo($statistics);
renderRightsLevel();
if (canEdit) {
$icon.bindEvent({
@ -431,17 +399,100 @@ 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 value - 128;
return pandora.user.ui.theme == 'classic'
? value : value - 128;
}).join(', ') + ')',
color: 'rgb(' + rightsLevel.color.join(', ') + ')'
color: pandora.user.ui.theme == 'classic'
? 'rgb(64, 64, 64)' : 'rgb(192, 192, 192)'
};
}
pandora.createLinks($text);
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 renderCapabilities(rightsLevel) {
var capabilities = Ox.merge(
canEdit ? [{name: 'canSeeItem', symbol: 'View'}] : [],
[
{name: 'canPlayClips', symbol: 'PlayInToOut'},
{name: 'canPlayVideo', symbol: 'Play'},
{name: 'canDownloadVideo', symbol: 'Download'}
]
),
userLevels = canEdit ? pandora.site.userLevels : [pandora.user.level];
$capabilities.empty();
userLevels.forEach(function(userLevel) {
var $line = $('<div>')
.css({
height: '16px',
marginBottom: '4px'
})
.appendTo($capabilities);
Ox.Label({
textAlign: 'center',
title: canEdit ? Ox.toTitleCase(userLevel) : pandora.site.rightsLevels[data.rightsLevel].name,
width: canEdit ? 48 : 68
})
.css(Ox.extend(
{
float: 'left',
paddingTop: '2px',
height: '12px',
fontSize: '8px'
},
canEdit ? getUserLevelCSS(userLevel) : getRightsLevelCSS(data.rightsLevel)
))
.appendTo($line);
capabilities.forEach(function(capability) {
var hasCapability = pandora.site.capabilities[capability.name][userLevel] >= rightsLevel;
Ox.Button({
tooltip: (canEdit ? Ox.toTitleCase(userLevel) : 'You') + ' '
+ (hasCapability ? 'can' : 'can\'t') + ' '
+ Ox.map(Ox.toSlashes(capability.name).split('/'), function(word, i) {
return i == 0 ? null : word.toLowerCase();
}).join(' '),
title: capability.symbol,
type: 'image'
})
.css(Ox.extend({
marginLeft: '4px'
}, getCapabilityCSS(hasCapability)))
.appendTo($line);
});
});
}
function renderList() {
pandora.api.get({
@ -545,6 +596,36 @@ pandora.ui.infoView = function(data) {
}
function renderRightsLevel() {
var $capabilites, $rightsLevelSelect,
rightsLevelCSS = getRightsLevelCSS(data.rightsLevel);
$rightsLevel.empty();
if (canEdit) {
$rightsLevelSelect = Ox.Select({
items: pandora.site.rightsLevels.map(function(rightsLevel, i) {
return {id: i, title: rightsLevel.name, checked: i == data.rightsLevel};
}),
width: 128
})
.css(Ox.extend({
marginBottom: '4px'
}, rightsLevelCSS))
.bindEvent({
change: function(event) {
var rightsLevel = event.selected[0].id;
$rightsLevelSelect.css(getRightsLevelCSS(rightsLevel));
renderCapabilities(rightsLevel);
pandora.api.edit({id: data.id, rightsLevel: rightsLevel}, function(result) {
// ...
});
}
})
.appendTo($rightsLevel);
}
$capabilities = $('<div>').appendTo($rightsLevel);
renderCapabilities(data.rightsLevel);
}
function toggleIconSize() {
iconSize = iconSize == 256 ? 512 : 256;
iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio);
@ -592,6 +673,10 @@ 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'});

View file

@ -174,6 +174,9 @@ 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')) {

View file

@ -55,6 +55,14 @@ pandora.ui.preferencesDialog = function() {
pandora.api.editPreferences({email: data.value});
}
}
}),
Ox.Input({
disabled: true,
id: 'level',
label: 'Level',
labelWidth: 120,
value: Ox.toTitleCase(pandora.user.level),
width: 320
})
]
})

View file

@ -3,12 +3,13 @@ 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': [64, 0, 0],
'member': [64, 64, 0],
'friend': [0, 64, 0],
'staff': [0, 64, 64],
'admin': [0, 0, 64]
'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,10 +117,10 @@ pandora.ui.usersDialog = function() {
align: 'center',
format: function(value) {
var dark = 'rgb(' + levelColors[value].map(function(color) {
return color.toString()
return (color - 128).toString();
}).join(', ') + ')',
light = 'rgb(' + levelColors[value].map(function(color) {
return (color + 128).toString()
return color.toString()
}).join(', ') + ')';
return $('<div>')
.css({