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

View file

@ -351,6 +351,8 @@ pandora.ui.infoView = function(data) {
$('<div>').css({height: '8px'}).appendTo($text); $('<div>').css({height: '8px'}).appendTo($text);
pandora.createLinks($text);
['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) { ['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) {
$('<div>') $('<div>')
.css({marginBottom: '4px'}) .css({marginBottom: '4px'})
@ -359,47 +361,13 @@ pandora.ui.infoView = function(data) {
.appendTo($statistics); .appendTo($statistics);
}); });
var rightsLevelCSS = getRightsLevelCSS(data.rightsLevel), var $rightsLevel = $('<div>');
$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);
}
$('<div>') $('<div>')
.css({marginBottom: '4px'}) .css({marginBottom: '4px'})
.append(formatKey('Rights Level', true)) .append(formatKey('Rights Level', true))
.append($rightsLevel) .append($rightsLevel)
.appendTo($statistics); .appendTo($statistics);
renderRightsLevel();
if (canEdit) { if (canEdit) {
$icon.bindEvent({ $icon.bindEvent({
@ -431,17 +399,100 @@ pandora.ui.infoView = function(data) {
}).join(', '); }).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) { function getRightsLevelCSS(rightsLevel) {
rightsLevel = pandora.site.rightsLevels[rightsLevel]; rightsLevel = pandora.site.rightsLevels[rightsLevel];
return { return {
background: 'rgb(' + rightsLevel.color.map(function(value) { background: 'rgb(' + rightsLevel.color.map(function(value) {
return value - 128; return pandora.user.ui.theme == 'classic'
? value : value - 128;
}).join(', ') + ')', }).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() { function renderList() {
pandora.api.get({ 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() { function toggleIconSize() {
iconSize = iconSize == 256 ? 512 : 256; iconSize = iconSize == 256 ? 512 : 256;
iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio); 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()); 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'});

View file

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

View file

@ -55,7 +55,15 @@ pandora.ui.preferencesDialog = function() {
pandora.api.editPreferences({email: data.value}); pandora.api.editPreferences({email: data.value});
} }
} }
}) }),
Ox.Input({
disabled: true,
id: 'level',
label: 'Level',
labelWidth: 120,
value: Ox.toTitleCase(pandora.user.level),
width: 320
})
] ]
}) })
.css({position: 'absolute', left: '96px', top: '16px'}) .css({position: 'absolute', left: '96px', top: '16px'})

View file

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