show capabilities in info view
This commit is contained in:
rolux
parent
aff6d748fb
commit
5676bab56f
5 changed files with 150 additions and 52 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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'});
|
||||
|
|
|
|||
|
|
@ -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')) {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,15 @@ 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
|
||||
})
|
||||
]
|
||||
})
|
||||
.css({position: 'absolute', left: '96px', top: '16px'})
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in a new issue