add placeholders for empty folders, fixes #250

This commit is contained in:
rolux 2014-02-03 08:58:23 +00:00
parent 3c1d3bbcb2
commit f8890ed015
6 changed files with 61 additions and 17 deletions

View file

@ -1,17 +1,30 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.folderBrowser = function(id, section) {
var that = Ox.SplitPanel({
var that = Ox.Element();
pandora.$ui.folderList[id] = pandora.ui.folderBrowserList(id, section)
.bindEvent({
init: function(data) {
if (data.items) {
that.setElement(
Ox.SplitPanel({
elements: [
{
element: pandora.ui.folderBrowserBar(id, section),
size: 24
},
{
element: pandora.$ui.folderList[id] = pandora.ui.folderBrowserList(id, section)
element: pandora.$ui.folderList[id]
}
],
orientation: 'vertical'
})
);
} else {
// if there are no items, then the placeholder is already there
pandora.$ui.folderPlaceholder[id].updateText('public');
}
}
});
return that;
};

View file

@ -191,11 +191,12 @@ pandora.ui.folderBrowserList = function(id, section) {
init: function(data) {
pandora.site.sectionFolders[section][i].items = data.items;
pandora.$ui.folder[i].$content.css({
height: 40 + data.items * 16 + 'px'
height: (data.items ? 40 + data.items * 16 : 16) + 'px'
});
pandora.$ui.folderList[id].css({
height: 16 + data.items * 16 + 'px'
});
pandora.$ui.folderPlaceholder[id][data.items ? 'hide' : 'show']();
pandora.resizeFolders();
},
paste: function(data) {

View file

@ -8,6 +8,7 @@ pandora.ui.folderList = function(id, section) {
folderItems = section == 'items' ? 'Lists' : Ox.toTitleCase(section),
folderItem = folderItems.slice(0, -1),
canEditFeatured = pandora.site.capabilities['canEditFeatured' + folderItems][pandora.user.level],
$placeholder,
that;
var columns, items;
if (id != 'volumes') {
@ -267,8 +268,11 @@ pandora.ui.folderList = function(id, section) {
max: 1,
min: 0,
pageLength: 1000,
// won't work, getListData looks up data in $folderList
//selected: pandora.getListData().folder == id ? [ui._list] : [],
// works when switching back from browser, but won't work on load, since
// getListData relies on $folderList, so selectList is called in init handler
selected: pandora.getListData().folder == id
? [ui[ui.section == 'items' ? '_list' : ui.section.slice(0, -1)]]
: [],
sort: [{key: 'position', operator: '+'}],
sortable: id != 'featured' || canEditFeatured,
unique: id != 'volumes' ? 'id' : 'name'
@ -377,11 +381,12 @@ pandora.ui.folderList = function(id, section) {
if (pandora.site.sectionFolders[section][i]) {
pandora.site.sectionFolders[section][i].items = data.items;
pandora.$ui.folder[i].$content.css({
height: data.items * 16 + 'px'
height: (data.items || 1) * 16 + 'px'
});
pandora.$ui.folderList[id].css({
height: data.items * 16 + 'px'
});
})[data.items ? 'show' : 'hide']();
pandora.$ui.folderPlaceholder[id].updateText(id)[data.items ? 'hide' : 'show']();
}
pandora.resizeFolders();
},

View file

@ -0,0 +1,21 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.folderPlaceholder = function(id, section) {
var that = Ox.Element()
.addClass('OxLight')
.css({
height: '14px',
padding: '1px 4px',
});
that.updateText = function(string) {
return that.html(
Ox._(
string != 'volumes'
? 'No ' + string + ' ' + (section == 'items' ? 'lists' : section)
: 'No local volumes'
)
);
};
return that.updateText(id);
};

View file

@ -17,6 +17,7 @@ pandora.ui.folders = function(section) {
pandora.$ui.folder = [];
pandora.$ui.folderBrowser = {};
pandora.$ui.folderList = {};
pandora.$ui.folderPlaceholder = {};
pandora.$ui.findListElement = {};
pandora.$ui.findListSelect = {};
pandora.$ui.findListInput = {};
@ -338,6 +339,9 @@ pandora.ui.folders = function(section) {
}
})
.appendTo(pandora.$ui.folder[i].$content);
pandora.$ui.folderPlaceholder[folder.id] = pandora.ui.folderPlaceholder(folder.id, section)
.hide()
.appendTo(pandora.$ui.folder[i].$content);
});
function infoButton(title, text) {
return Ox.Button({

View file

@ -991,7 +991,7 @@ pandora.getFoldersHeight = function(section) {
var height = 0;
pandora.site.sectionFolders[section].forEach(function(folder, i) {
height += 16 + pandora.user.ui.showFolder[section][folder.id] * (
!!folder.showBrowser * 40 + folder.items * 16
!!(folder.showBrowser && folder.items) * 40 + (folder.items || 1) * 16
);
});
return height;