use new dialog

This commit is contained in:
rolux 2011-08-17 11:39:55 +00:00
parent 3b00b384f2
commit bd88297eb9
5 changed files with 94 additions and 60 deletions

View file

@ -2,11 +2,10 @@
pandora.ui.accountDialog = function(action) { pandora.ui.accountDialog = function(action) {
var that = Ox.Dialog($.extend({ var that = Ox.Dialog($.extend({
height: 256, fixedSize: true,
height: 192,
id: 'accountDialog', id: 'accountDialog',
minHeight: 256, width: 432
minWidth: 384,
width: 384
}, pandora.ui.accountDialogOptions(action))) }, pandora.ui.accountDialogOptions(action)))
.bindEvent({ .bindEvent({
resize: function(event, data) { resize: function(event, data) {
@ -68,18 +67,23 @@ pandora.ui.accountDialogOptions = function(action, value) {
title: buttonTitle[type] + '...' title: buttonTitle[type] + '...'
}).bindEvent('click', function() { }).bindEvent('click', function() {
//Ox.print('CLICK EVENT', type) //Ox.print('CLICK EVENT', type)
pandora.$ui.accountDialog.options(ui.accountDialogOptions(type)); pandora.$ui.accountDialog.options(pandora.ui.accountDialogOptions(type));
}); });
} }
} }
return { return {
buttons: [ buttons: Ox.merge($.map(buttons[action], function(type) {
$.map(buttons[action], function(type) {
return button(type); return button(type);
}), }), [{}, button('cancel'), button('submit')]),
[button('cancel'), button('submit')]
],
content: Ox.Element() content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon64.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '320px'})
.append( .append(
Ox.Element() Ox.Element()
.addClass('OxText') .addClass('OxText')
@ -87,6 +91,7 @@ pandora.ui.accountDialogOptions = function(action, value) {
) )
.append( .append(
pandora.$ui.accountForm = pandora.ui.accountForm(action, value) pandora.$ui.accountForm = pandora.ui.accountForm(action, value)
)
), ),
keys: { keys: {
enter: 'submit' + Ox.toTitleCase(action), enter: 'submit' + Ox.toTitleCase(action),
@ -179,7 +184,7 @@ pandora.ui.accountForm = function(action, value) {
function item(type, value) { function item(type, value) {
if (type == 'code') { if (type == 'code') {
return Ox.Input({ return Ox.Input({
autovalidate: autovalidateCode, autovalidate: pandora.autovalidateCode,
id: 'code', id: 'code',
label: 'Code', label: 'Code',
labelWidth: 120, labelWidth: 120,
@ -189,17 +194,17 @@ pandora.ui.accountForm = function(action, value) {
valid: !!value.length valid: !!value.length
}); });
}, },
width: 352 width: 320
}); });
} else if (type == 'email') { } else if (type == 'email') {
return Ox.Input({ return Ox.Input({
autovalidate: autovalidateEmail, autovalidate: pandora.autovalidateEmail,
id: 'email', id: 'email',
label: 'E-Mail Address', label: 'E-Mail Address',
labelWidth: 120, labelWidth: 120,
type: 'email', type: 'email',
validate: pandora.validateUser('email'), validate: pandora.validateUser('email'),
width: 352 width: 320
}); });
} else if (type == 'newPassword') { } else if (type == 'newPassword') {
return Ox.Input({ return Ox.Input({
@ -214,7 +219,7 @@ pandora.ui.accountForm = function(action, value) {
valid: value.length > 0 valid: value.length > 0
}); });
}, },
width: 352 width: 320
}); });
} else if (type == 'newUsername') { } else if (type == 'newUsername') {
return Ox.Input({ return Ox.Input({
@ -223,7 +228,7 @@ pandora.ui.accountForm = function(action, value) {
label: 'Username', label: 'Username',
labelWidth: 120, labelWidth: 120,
validate: pandora.validateUser('username'), validate: pandora.validateUser('username'),
width: 352 width: 320
}); });
} else if (type == 'oldUsername') { } else if (type == 'oldUsername') {
return Ox.Input({ return Ox.Input({
@ -232,7 +237,7 @@ pandora.ui.accountForm = function(action, value) {
label: 'Username', label: 'Username',
labelWidth: 120, labelWidth: 120,
value: value, value: value,
width: 352 width: 320
}); });
} else if (type == 'password') { } else if (type == 'password') {
return Ox.Input({ return Ox.Input({
@ -247,7 +252,7 @@ pandora.ui.accountForm = function(action, value) {
valid: value.length > 0 valid: value.length > 0
}); });
}, },
width: 352 width: 320
}); });
} else if (type == 'username') { } else if (type == 'username') {
return Ox.Input({ return Ox.Input({
@ -256,7 +261,7 @@ pandora.ui.accountForm = function(action, value) {
label: 'Username', label: 'Username',
labelWidth: 120, labelWidth: 120,
validate: pandora.validateUser('username', true), validate: pandora.validateUser('username', true),
width: 352 width: 320
}); });
} else if (type == 'usernameOrEmail') { } else if (type == 'usernameOrEmail') {
return Ox.FormElementGroup({ return Ox.FormElementGroup({
@ -269,7 +274,7 @@ pandora.ui.accountForm = function(action, value) {
{id: 'email', title: 'E-Mail Address'}, {id: 'email', title: 'E-Mail Address'},
], ],
overlap: 'right', overlap: 'right',
width: 120 width: 128
}) })
.bindEvent({ .bindEvent({
change: function(event, data) { change: function(event, data) {
@ -285,7 +290,7 @@ pandora.ui.accountForm = function(action, value) {
autovalidate: pandora.autovalidateUsername, autovalidate: pandora.autovalidateUsername,
id: 'usernameOrEmailInput', id: 'usernameOrEmailInput',
validate: pandora.validateUser('username', true), validate: pandora.validateUser('username', true),
width: 232 width: 192
}) })
], ],
separators: [ separators: [
@ -317,39 +322,59 @@ pandora.ui.accountLogoutDialog = function() {
}); });
}) })
], ],
content: Ox.Element().html('Are you sure you want to logout?'), content: Ox.Element()
height: 160, .append(
$('<img>')
.attr({src: '/static/png/icon64.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html('Are you sure you want to logout?')
),
fixedSize: true,
height: 128,
keys: {enter: 'logout', escape: 'cancel'}, keys: {enter: 'logout', escape: 'cancel'},
title: 'Logout', title: 'Logout',
width: 300 width: 304
}); });
return that; return that;
}; };
pandora.ui.accountWelcomeDialog = function() { pandora.ui.accountWelcomeDialog = function() {
var that = Ox.Dialog({ var that = Ox.Dialog({
buttons: [ buttons: [
[
Ox.Button({ Ox.Button({
id: 'preferences', id: 'preferences',
title: 'Preferences...' title: 'Preferences...'
}).bindEvent('click', function() { }).bindEvent('click', function() {
that.close(); that.close();
}) }),
], {},
[
Ox.Button({ Ox.Button({
id: 'close', id: 'close',
title: 'Close' title: 'Close'
}).bindEvent('click', function() { }).bindEvent('click', function() {
that.close(); that.close();
}) })
]
], ],
content: Ox.Element().html('Welcome, ' + pandora.user.username + '!<br/><br/>Your account has been created.'), content: Ox.Element()
height: 160, .append(
$('<img>')
.attr({src: '/static/png/icon64.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html('Welcome, ' + pandora.user.username + '!<br/><br/>Your account has been created.')
),
fixedSize: true,
height: 128,
keys: {enter: 'close', escape: 'close'}, keys: {enter: 'close', escape: 'close'},
title: 'Welcome to ' + pandora.site.site.name, title: 'Welcome to ' + pandora.site.site.name,
width: 300 width: 304
}); });
return that; return that;
}; };

View file

@ -30,7 +30,10 @@ pandora.ui.filterDialog = function() {
} }
}) })
], ],
content: pandora.$ui.filter = new pandora.ui.filter(), content: pandora.$ui.filter = new pandora.ui.filter().css({padding: '16px'}),
maxWidth: 648 + Ox.UI.SCROLLBAR_SIZE,
minHeight: 264,
minWidth: 648 + Ox.UI.SCROLLBAR_SIZE,
height: 264, height: 264,
keys: {enter: 'save', escape: 'cancel'}, keys: {enter: 'save', escape: 'cancel'},
title: 'Advanced Find', title: 'Advanced Find',

View file

@ -688,14 +688,16 @@ pandora.ui.mainMenu = function() {
}) })
], ],
content: Ox.Element() content: Ox.Element()
.css({padding: '16px'})
.html([ .html([
'Query: ' + JSON.stringify(pandora.Query.toObject()), 'Query: ' + JSON.stringify(pandora.Query.toObject()),
'findQuery: ' + JSON.stringify(pandora.user.ui.findQuery), 'findQuery: ' + JSON.stringify(pandora.user.ui.findQuery),
'listQuery: ' + JSON.stringify(pandora.user.ui.listQuery) 'listQuery: ' + JSON.stringify(pandora.user.ui.listQuery)
].join('<br/><br/>')), ].join('<br/><br/>')),
height: 200, height: 192,
keys: {enter: 'close', escape: 'close'}, keys: {enter: 'close', escape: 'close'},
width: 400 title: 'Query',
width: 384
}).open(); }).open();
} else if (data.id == 'resetui') { } else if (data.id == 'resetui') {
pandora.api.resetUI({}, function() { pandora.api.resetUI({}, function() {

View file

@ -1,6 +1,6 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.placesDialog = function() { pandora.ui.placesDialog = function() {
var height = Math.round(window.innerHeight * 0.9), var height = Math.round((window.innerHeight - 48) * 0.9),
width = Math.round(window.innerWidth * 0.9), width = Math.round(window.innerWidth * 0.9),
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [
@ -13,6 +13,7 @@ pandora.ui.placesDialog = function() {
} }
}) })
], ],
closeButton: true,
content: pandora.$ui.placesElement = Ox.ListMap({ content: pandora.$ui.placesElement = Ox.ListMap({
height: height - 48, height: height - 48,
places: function(data, callback) { places: function(data, callback) {
@ -43,6 +44,9 @@ pandora.ui.placesDialog = function() {
width: width width: width
}), }),
height: height, height: height,
maximizeButton: true,
minHeight: 256,
minWidth: 512,
//keys: {enter: 'done', escape: 'done'}, //keys: {enter: 'done', escape: 'done'},
padding: 0, padding: 0,
title: 'Manage Places', title: 'Manage Places',

BIN
static/png/icon64.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB