0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

improve namesDialog and titlesDialog

Browse source
This commit is contained in:
rolux 2011-10-11 16:01:33 +00:00
parent d13f2f094c
commit 30651bac46
4 changed files with 88 additions and 257 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/js/pandora/ui/menu.js
View file

@ -150,11 +150,11 @@ pandora.ui.mainMenu = function() {
{ id: 'places', title: 'Manage Places...', disabled: isGuest }, { id: 'places', title: 'Manage Places...', disabled: isGuest },
{ id: 'events', title: 'Manage Events...', disabled: isGuest }, { id: 'events', title: 'Manage Events...', disabled: isGuest },
{}, {},
{ id: 'users', title: 'Manage Users...', disabled: !isAdmin }, { id: 'users', title: 'Manage Users...', disabled: !isAdmin }/*,
{ id: 'lists', title: 'Manage Lists...', disabled: !isAdmin }, { id: 'lists', title: 'Manage Lists...', disabled: !isAdmin },
{}, {},
{ id: 'news', title: 'Manage News...', disabled: !isAdmin }, { id: 'news', title: 'Manage News...', disabled: !isAdmin },
{ id: 'tour', title: 'Manage Tour...', disabled: !isAdmin } { id: 'tour', title: 'Manage Tour...', disabled: !isAdmin }*/
] }, ] },
{ id: 'helpMenu', title: 'Help', items: [ { id: 'helpMenu', title: 'Help', items: [
{ id: 'help', title: pandora.site.site.name + ' Help', keyboard: 'shift ?' } { id: 'help', title: pandora.site.site.name + ' Help', keyboard: 'shift ?' }

129
static/js/pandora/ui/namesDialog.js
View file

@ -2,7 +2,7 @@
pandora.ui.namesDialog = function() { pandora.ui.namesDialog = 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 = 576 + Ox.UI.SCROLLBAR_SIZE,
numberOfNames = 0, numberOfNames = 0,
$status = Ox.Label({ $status = Ox.Label({
@ -57,6 +57,7 @@ pandora.ui.namesDialog = function() {
title: 'ID', title: 'ID',
unique: true, unique: true,
visible: false, visible: false,
width: 0
}, },
{ {
id: 'name', id: 'name',
@ -64,33 +65,32 @@ pandora.ui.namesDialog = function() {
removable: false, removable: false,
title: 'Name', title: 'Name',
visible: true, visible: true,
width: 250 width: 256
}, },
{ {
id: 'nameSort', editable: true,
id: 'sortname',
operator: '+', operator: '+',
title: 'Sort Name', title: 'Sort Name',
tooltip: 'Edit Sort Name',
visible: true, visible: true,
width: 250 width: 256
}, },
{ {
id: 'numberofnames', id: 'numberofnames',
align: 'right', align: 'right',
operator: '-', operator: '-',
title: 'Number of Names', title: 'Names',
visible: true, visible: true,
width: 60 width: 64
}, },
], ],
columnsRemovable: true, columnsRemovable: true,
columnsVisible: true, columnsVisible: true,
items: pandora.api.findNames, items: pandora.api.findNames,
keys: [],
max: 1, max: 1,
scrollbarVisible: true, scrollbarVisible: true,
sort: [ sort: [{key: 'sortname', operator: '+'}]
{key: 'name', operator: '+'}
]
}) })
.bindEvent({ .bindEvent({
init: function(data) { init: function(data) {
@ -100,30 +100,14 @@ pandora.ui.namesDialog = function() {
+ ' name' + (numberOfNames == 1 ? '' : 's') + ' name' + (numberOfNames == 1 ? '' : 's')
}); });
}, },
select: function(data) { submit: function(data) {
var values; pandora.api.editName({
$name.empty(); id: data.id,
if (data.ids.length) { sortname: data.sortname
values = $list.value(data.ids[0]); });
$nameLabel.options({
title: values.name + ' <' + values.nameSort + '>'
});
$name.append(renderNameForm(values))
} else {
$nameLabel.options({title: 'No name selected'});
}
} }
}), }),
$nameLabel = Ox.Label({
textAlign: 'center',
title: 'No name selected',
width: 248
})
.css({margin: '4px'}),
$name = Ox.Element({}),
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
@ -139,41 +123,18 @@ pandora.ui.namesDialog = function() {
content: Ox.SplitPanel({ content: Ox.SplitPanel({
elements: [ elements: [
{ {
element: Ox.SplitPanel({ element: Ox.Bar({size: 24})
elements: [ .append($status)
{ .append(
element: Ox.Bar({size: 24}) $findElement
.append($status) ),
.append( size: 24
$findElement
),
size: 24
},
{
element: $list
}
],
orientation: 'vertical'
})
}, },
{ {
element: Ox.SplitPanel({ element: $list
elements: [
{
element: Ox.Bar({size: 24})
.append($nameLabel),
size: 24
},
{
element: $name
}
],
orientation: 'vertical'
}),
size: 256
} }
], ],
orientation: 'horizontal' orientation: 'vertical'
}), }),
height: height, height: height,
maximizeButton: true, maximizeButton: true,
@ -184,50 +145,6 @@ pandora.ui.namesDialog = function() {
width: width width: width
}); });
function renderNameForm(nameData) {
var $checkbox;
return Ox.Form({
items: [
Ox.Input({
id: 'name',
label: 'Name',
labelWidth: 80,
value: nameData.name,
width: 240
})
.bindEvent({
submit: function(data) {
}
}),
Ox.Input({
id: 'nameSort',
label: 'Sort Name',
labelWidth: 80,
value: nameData.nameSort,
width: 240
})
.bindEvent({
submit: function(data) {
}
}),
],
width: 240
})
.css({margin: '8px'})
.bindEvent({
change: function(event) {
var data = {id: nameData.id}, key, value;
data[event.id] = event.data.value;
$list.value(nameData.id, event.id, data[event.id]);
pandora.api.editName(data, function(result) {
Ox.Request.clearCache('findNames');
});
}
});
}
function updateList(key, value) { function updateList(key, value) {
var query = { var query = {
conditions: [{key: 'name', value: value, operator: '='}], conditions: [{key: 'name', value: value, operator: '='}],

122
static/js/pandora/ui/titlesDialog.js
View file

@ -2,7 +2,7 @@
pandora.ui.titlesDialog = function() { pandora.ui.titlesDialog = 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 = 512 + Ox.UI.SCROLLBAR_SIZE,
numberOfTitles = 0, numberOfTitles = 0,
$status = Ox.Label({ $status = Ox.Label({
@ -64,14 +64,15 @@ pandora.ui.titlesDialog = function() {
removable: false, removable: false,
title: 'Title', title: 'Title',
visible: true, visible: true,
width: 250 width: 256
}, },
{ {
id: 'titleSort', editable: true,
id: 'sorttitle',
operator: '+', operator: '+',
title: 'Sort Title', title: 'Sort Title',
visible: true, visible: true,
width: 250 width: 256
}, },
], ],
columnsRemovable: true, columnsRemovable: true,
@ -80,9 +81,7 @@ pandora.ui.titlesDialog = function() {
keys: [], keys: [],
max: 1, max: 1,
scrollbarVisible: true, scrollbarVisible: true,
sort: [ sort: [{key: 'sorttitle', operator: '+'}]
{key: 'title', operator: '+'}
]
}) })
.bindEvent({ .bindEvent({
init: function(data) { init: function(data) {
@ -92,30 +91,14 @@ pandora.ui.titlesDialog = function() {
+ ' title' + (numberOfTitles == 1 ? '' : 's') + ' title' + (numberOfTitles == 1 ? '' : 's')
}); });
}, },
select: function(data) { submit: function(data) {
var values; pandora.api.editTitle({
$title.empty(); id: data.id,
if (data.ids.length) { sortname: data.sortname
values = $list.value(data.ids[0]); });
$titleLabel.options({
title: values.title + ' <' + values.titleSort + '>'
});
$title.append(renderTitleForm(values))
} else {
$titleLabel.options({title: 'No title selected'});
}
} }
}), }),
$titleLabel = Ox.Label({
textAlign: 'center',
title: 'No title selected',
width: 248
})
.css({margin: '4px'}),
$title = Ox.Element({}),
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
@ -131,41 +114,18 @@ pandora.ui.titlesDialog = function() {
content: Ox.SplitPanel({ content: Ox.SplitPanel({
elements: [ elements: [
{ {
element: Ox.SplitPanel({ element: Ox.Bar({size: 24})
elements: [ .append($status)
{ .append(
element: Ox.Bar({size: 24}) $findElement
.append($status) ),
.append( size: 24
$findElement
),
size: 24
},
{
element: $list
}
],
orientation: 'vertical'
})
}, },
{ {
element: Ox.SplitPanel({ element: $list
elements: [
{
element: Ox.Bar({size: 24})
.append($titleLabel),
size: 24
},
{
element: $title
}
],
orientation: 'vertical'
}),
size: 256
} }
], ],
orientation: 'horizontal' orientation: 'vertical'
}), }),
height: height, height: height,
maximizeButton: true, maximizeButton: true,
@ -176,50 +136,6 @@ pandora.ui.titlesDialog = function() {
width: width width: width
}); });
function renderTitleForm(titleData) {
var $checkbox;
return Ox.Form({
items: [
Ox.Input({
id: 'title',
label: 'Title',
labelWidth: 80,
value: titleData.title,
width: 240
})
.bindEvent({
submit: function(data) {
}
}),
Ox.Input({
id: 'titleSort',
label: 'Sort Title',
labelWidth: 80,
value: titleData.titleSort,
width: 240
})
.bindEvent({
submit: function(data) {
}
}),
],
width: 240
})
.css({margin: '8px'})
.bindEvent({
change: function(event) {
var data = {id: titleData.id}, key, value;
data[event.id] = event.data.value;
$list.value(titleData.id, event.id, data[event.id]);
pandora.api.editTitle(data, function(result) {
Ox.Request.clearCache('findTitles');
});
}
});
}
function updateList(key, value) { function updateList(key, value) {
var query = { var query = {
conditions: [{key: 'title', value: value, operator: '='}], conditions: [{key: 'title', value: value, operator: '='}],

90
static/js/pandora/ui/usersDialog.js
View file

@ -18,44 +18,6 @@ pandora.ui.usersDialog = function() {
}) })
.css({float: 'left', margin: '4px'}), .css({float: 'left', margin: '4px'}),
$exportButton = Ox.Button({
title: 'Export E-Mail Addresses'
})
.css({margin: '4px 4px 4px 0'})
.bindEvent({
click: function() {
pandora.api.findUsers({
query: {conditions: [], operator: '&'},
keys: ['email', 'username'],
range: [0, numberOfUsers],
sort: [{key: 'username', operator: '+'}]
}, function(result) {
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: Ox.Element()
.addClass('OxSelectable')
.css({margin: '16px'})
.html(
result.data.items.map(function(item) {
return item.username + ' <' + item.email + '>'
}).join(', ')
),
title: 'E-Mail Addresses'
})
.open()
})
}
}),
$findSelect = Ox.Select({ $findSelect = Ox.Select({
items: [ items: [
{id: 'all', title: 'Find: All', checked: true}, {id: 'all', title: 'Find: All', checked: true},
@ -297,13 +259,50 @@ pandora.ui.usersDialog = function() {
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'done', title: 'Export E-Mail Addresses'
title: 'Done' })
}).bindEvent({ .css({margin: '4px 4px 4px 0'})
click: function() { .bindEvent({
that.close(); click: function() {
} pandora.api.findUsers({
}) query: {conditions: [], operator: '&'},
keys: ['email', 'username'],
range: [0, numberOfUsers],
sort: [{key: 'username', operator: '+'}]
}, function(result) {
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: Ox.Element()
.addClass('OxSelectable')
.css({margin: '16px'})
.html(
result.data.items.map(function(item) {
return item.username + ' <' + item.email + '>'
}).join(', ')
),
title: 'E-Mail Addresses'
})
.open()
})
}
}),
Ox.Button({
id: 'done',
title: 'Done'
}).bindEvent({
click: function() {
that.close();
}
})
], ],
closeButton: true, closeButton: true,
content: Ox.SplitPanel({ content: Ox.SplitPanel({
@ -314,7 +313,6 @@ pandora.ui.usersDialog = function() {
{ {
element: Ox.Bar({size: 24}) element: Ox.Bar({size: 24})
.append($status) .append($status)
.append($exportButton)
.append( .append(
$findElement $findElement
), ),