From 50ec104d7f30fd85805fee1a848b4b6c3ee6b799 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 26 Oct 2011 14:52:23 +0000 Subject: [PATCH] use themed colored elements --- pandora/0xdb.jsonc | 8 +- static/js/pandora/browser.js | 14 +++- static/js/pandora/clipList.js | 13 ++- static/js/pandora/infoView.js | 136 +++++++++++++------------------ static/js/pandora/list.js | 28 +++++-- static/js/pandora/menu.js | 3 - static/js/pandora/usersDialog.js | 31 ++----- 7 files changed, 108 insertions(+), 125 deletions(-) diff --git a/pandora/0xdb.jsonc b/pandora/0xdb.jsonc index b8def0f45..49d528907 100644 --- a/pandora/0xdb.jsonc +++ b/pandora/0xdb.jsonc @@ -448,8 +448,11 @@ { "id": "rightslevel", "title": "Rights Level", - "type": "integer", - "columnWidth": 60, + "type": "label", + "columnWidth": 90, + "format": {"type": "ColorLevel", "args": [ + ["Public", "Relaxed", "Regular", "Restricted", "Private"] + ]}, "sortOperator": "+" }, { @@ -550,6 +553,7 @@ // E-mail address uses by the system (from) "system": "0xdb@0xdb.org" }, + // fixme: there should be no magic applied to this file "id": "{{settings.SITEID}}", "name": "{{settings.SITENAME}}", "url": "{{settings.URL}}" diff --git a/static/js/pandora/browser.js b/static/js/pandora/browser.js index a8ffda8cc..d4110d6f6 100644 --- a/static/js/pandora/browser.js +++ b/static/js/pandora/browser.js @@ -65,11 +65,17 @@ pandora.ui.browser = function() { if (['title', 'director'].indexOf(sortKey) > -1) { info = data['year']; } else { + // fixme: this is duplicated many times format = pandora.getSortKeyData(sortKey).format; - info = format - ? Ox['format' + Ox.toTitleCase(format.type)] - .apply(this, Ox.merge([data[sortKey]], format.args || [])) - : data[sortKey]; + if (format) { + info = ( + /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox + )['format' + Ox.toTitleCase(format.type)].apply( + this, Ox.merge([data[sortKey]], format.args || []) + ); + } else { + info = data[sortKey]; + } } return { height: ratio <= 1 ? size : size / ratio, diff --git a/static/js/pandora/clipList.js b/static/js/pandora/clipList.js index 5a703be4b..49b8970df 100644 --- a/static/js/pandora/clipList.js +++ b/static/js/pandora/clipList.js @@ -28,10 +28,15 @@ pandora.ui.clipList = function(videoRatio) { + Ox.formatDuration(data.out); } else { format = pandora.getSortKeyData(sortKey).format; - info = format - ? Ox['format' + Ox.toTitleCase(format.type)] - .apply(this, Ox.merge([data[sortKey]], format.args || [])) - : data[sortKey]; + if (format) { + info = ( + /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox + )['format' + Ox.toTitleCase(format.type)].apply( + this, Ox.merge([data[sortKey]], format.args || []) + ); + } else { + info = data[sortKey]; + } } return { height: height, diff --git a/static/js/pandora/infoView.js b/static/js/pandora/infoView.js index 6dec470d8..257d0def2 100644 --- a/static/js/pandora/infoView.js +++ b/static/js/pandora/infoView.js @@ -424,7 +424,7 @@ pandora.ui.infoView = function(data) { $('
') .css({marginBottom: '4px'}) .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); }); @@ -442,7 +442,6 @@ pandora.ui.infoView = function(data) { if (canEdit) { - Ox.print('DATA', data) $('
') .css({marginBottom: '4px'}) .append(formatKey('Notes', true)) @@ -524,7 +523,7 @@ pandora.ui.infoView = function(data) { function formatKey(key, isStatistics) { return isStatistics - ? $('
').css({marginBottom: '2px', fontWeight: 'bold'}).html(Ox.toTitleCase(key)) + ? $('
').css({marginBottom: '4px', fontWeight: 'bold'}).html(Ox.toTitleCase(key)) : '' + Ox.toTitleCase(key) + ': '; } @@ -551,47 +550,13 @@ 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 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 getRightsLevelElement(rightsLevel) { + return Ox.Theme.formatColorLevel( + rightsLevel, + pandora.site.rightsLevels.map(function(rightsLevel) { + return rightsLevel.name; + }) + ); } function parseTitle(title) { @@ -619,32 +584,38 @@ pandora.ui.infoView = function(data) { ), userLevels = canEdit ? pandora.site.userLevels : [pandora.user.level]; $capabilities.empty(); - userLevels.forEach(function(userLevel) { - var $line = $('
') - .css({ - height: '16px', - marginBottom: '4px' - }) - .appendTo($capabilities); + userLevels.forEach(function(userLevel, i) { + var $element, + $line = $('
') + .css({ + height: '16px', + marginBottom: '4px' + }) + .appendTo($capabilities); if (canEdit) { + $element = Ox.Theme.formatColorLevel(i, userLevels.map(function(userLevel) { + return Ox.toTitleCase(userLevel); + }), [0, 240]); Ox.Label({ textAlign: 'center', title: Ox.toTitleCase(userLevel), - width: 48 + width: 60 }) - .css(Ox.extend( - { - float: 'left', - paddingTop: '2px', - height: '12px', - fontSize: '8px' - }, - getUserLevelCSS(userLevel) - )) + .addClass('OxColor OxColorGradient') + .css({ + float: 'left', + height: '12px', + paddingTop: '2px', + background: $element.css('background'), + fontSize: '8px', + color: $element.css('color') + }) + .data({OxColor: $element.data('OxColor')}) .appendTo($line); } 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({ tooltip: (canEdit ? Ox.toTitleCase(userLevel) : 'You') + ' ' + (hasCapability ? 'can' : 'can\'t') + ' ' @@ -654,8 +625,13 @@ pandora.ui.infoView = function(data) { title: capability.symbol, type: 'image' }) - .css(getCapabilityCSS(hasCapability)) + .addClass('OxColor OxColorGradient') + .css({ + background: $element.css('background'), + color: $element.css('color') + }) .css('margin' + (canEdit ? 'Left' : 'Right'), '4px') + .data({OxColor: $element.data('OxColor')}) .appendTo($line); }); if (!canEdit) { @@ -706,7 +682,7 @@ pandora.ui.infoView = function(data) { max: 1, min: 1, orientation: 'both', - selected: selectedImage?[selectedImage['index']]:[], + selected: [selectedImage['index']], size: 128, sort: [{key: 'index', operator: '+'}], unique: 'index' @@ -778,8 +754,9 @@ pandora.ui.infoView = function(data) { } function renderRightsLevel() { - var $capabilites, $rightsLevelLabel, $rightsLevelSelect, - rightsLevelCSS = getRightsLevelCSS(data.rightslevel); + var $capabilites, + $rightsLevelElement = getRightsLevelElement(data.rightslevel), + $rightsLevelSelect; $rightsLevel.empty(); if (canEdit) { $rightsLevelSelect = Ox.Select({ @@ -788,13 +765,19 @@ pandora.ui.infoView = function(data) { }), width: 128 }) - .css(Ox.extend({ - marginBottom: '4px' - }, rightsLevelCSS)) + .addClass('OxColor OxColorGradient') + .css({ + marginBottom: '4px', + background: $rightsLevelElement.css('background') + }) + .data({OxColor: $rightsLevelElement.data('OxColor')}) .bindEvent({ change: function(event) { 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); pandora.api.edit({id: data.id, rightslevel: rightsLevel}, function(result) { // ... @@ -803,13 +786,10 @@ pandora.ui.infoView = function(data) { }) .appendTo($rightsLevel); } else { - $rightsLevelLabel = Ox.Label({ - title: pandora.site.rightsLevels[data.rightslevel].name, - width: 128 - }) - .css(Ox.extend({ + $rightsLevelElement + .css({ marginBottom: '4px' - }, rightsLevelCSS)) + }) .appendTo($rightsLevel); } $capabilities = $('
').appendTo($rightsLevel); @@ -863,10 +843,6 @@ 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/list.js b/static/js/pandora/list.js index df25b94ee..865689ebd 100644 --- a/static/js/pandora/list.js +++ b/static/js/pandora/list.js @@ -79,7 +79,7 @@ pandora.ui.list = function() { return { align: ['string', 'text'].indexOf( Ox.isArray(key.type) ? key.type[0]: key.type - ) > -1 ? 'left' : 'right', + ) > -1 ? 'left' : key.type == 'label' ? 'center' : 'right', defaultWidth: key.columnWidth, format: key.format, id: key.id, @@ -154,10 +154,15 @@ pandora.ui.list = function() { info = data['year']; } else { format = pandora.getSortKeyData(sortKey).format; - info = format - ? Ox['format' + Ox.toTitleCase(format.type)] - .apply(this, Ox.merge([data[sortKey]], format.args || [])) - : data[sortKey]; + if (format) { + info = ( + /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox + )['format' + Ox.toTitleCase(format.type)].apply( + this, Ox.merge([data[sortKey]], format.args || []) + ); + } else { + info = data[sortKey]; + } } size = size || 128; return { @@ -202,10 +207,15 @@ pandora.ui.list = function() { info = data['year']; } else { format = pandora.getSortKeyData(sortKey).format; - info = format - ? Ox['format' + Ox.toTitleCase(format.type)] - .apply(this, Ox.merge([data[sortKey]], format.args || [])) - : data[sortKey]; + if (format) { + info = ( + /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox + )['format' + Ox.toTitleCase(format.type)].apply( + this, Ox.merge([data[sortKey]], format.args || []) + ); + } else { + info = data[sortKey]; + } } return { icon: { diff --git a/static/js/pandora/menu.js b/static/js/pandora/menu.js index dd253d80a..9306a0c2d 100644 --- a/static/js/pandora/menu.js +++ b/static/js/pandora/menu.js @@ -173,9 +173,6 @@ 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/usersDialog.js b/static/js/pandora/usersDialog.js index ee8957c9a..40d53ffe1 100644 --- a/static/js/pandora/usersDialog.js +++ b/static/js/pandora/usersDialog.js @@ -3,14 +3,6 @@ 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': [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,25 +108,18 @@ pandora.ui.usersDialog = function() { { align: 'center', format: function(value) { - var dark = 'rgb(' + levelColors[value].map(function(color) { - return (color - 128).toString(); - }).join(', ') + ')', - light = 'rgb(' + levelColors[value].map(function(color) { - return color.toString() - }).join(', ') + ')'; - return $('
') - .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)) + return Ox.Theme.formatColorLevel( + pandora.site.userLevels.indexOf(value), + pandora.site.userLevels.map(function(userLevel) { + return Ox.toTitleCase(userLevel); + }), + [0, 240] + ); }, id: 'level', operator: '-', title: 'Level', + type: 'label', visible: true, width: 60 },