From 5676bab56f23436dda1a3b73fa7ac8c67516b8e5 Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 24 Oct 2011 10:04:41 +0000 Subject: [PATCH] show capabilities in info view --- pandora/0xdb.jsonc | 11 +- static/js/pandora/infoView.js | 163 +++++++++++++++++++------ static/js/pandora/menu.js | 3 + static/js/pandora/preferencesDialog.js | 10 +- static/js/pandora/usersDialog.js | 15 +-- 5 files changed, 150 insertions(+), 52 deletions(-) diff --git a/pandora/0xdb.jsonc b/pandora/0xdb.jsonc index 20f5107d..4f709fe5 100644 --- a/pandora/0xdb.jsonc +++ b/pandora/0xdb.jsonc @@ -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, diff --git a/static/js/pandora/infoView.js b/static/js/pandora/infoView.js index 699b6b09..9c492ee1 100644 --- a/static/js/pandora/infoView.js +++ b/static/js/pandora/infoView.js @@ -351,6 +351,8 @@ pandora.ui.infoView = function(data) { $('
').css({height: '8px'}).appendTo($text); + pandora.createLinks($text); + ['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) { $('
') .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 = $('
'); - $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 = $('
') - .css({}) - .html(pandora.site.rightsLevels[data.rightsLevel].description) - .appendTo($rightsLevel) - } else { - $rightsLevel = $('
') - .css(Ox.extend({ - paddingLeft: '3px', - borderRadius: '4px' - }, rightsLevelCSS)) - .html(pandora.site.rightsLevels[data.rightsLevel].name); - } + var $rightsLevel = $('
'); $('
') .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 = $('
') + .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 = $('
').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'}); diff --git a/static/js/pandora/menu.js b/static/js/pandora/menu.js index 3aba4591..216aeb61 100644 --- a/static/js/pandora/menu.js +++ b/static/js/pandora/menu.js @@ -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')) { diff --git a/static/js/pandora/preferencesDialog.js b/static/js/pandora/preferencesDialog.js index 23dfcffb..e8a6217d 100644 --- a/static/js/pandora/preferencesDialog.js +++ b/static/js/pandora/preferencesDialog.js @@ -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'}) diff --git a/static/js/pandora/usersDialog.js b/static/js/pandora/usersDialog.js index fcd56b11..ee8957c9 100644 --- a/static/js/pandora/usersDialog.js +++ b/static/js/pandora/usersDialog.js @@ -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 $('
') .css({