use iconDialog

This commit is contained in:
rolux 2013-03-03 11:04:44 +05:30
parent 112f4f98c8
commit 90a0fc6309
11 changed files with 126 additions and 278 deletions

View file

@ -3,25 +3,25 @@
pandora.ui.annotationDialog = function(layer) { pandora.ui.annotationDialog = function(layer) {
var isEditor = pandora.user.ui.itemView == 'editor', var isEditor = pandora.user.ui.itemView == 'editor',
$dialog = Ox.Dialog({ that = pandora.ui.iconDialog({
buttons: [].concat( buttons: [].concat(
isEditor ? [ isEditor ? [
Ox.Button({title: 'Sign Up...'}).bindEvent({ Ox.Button({title: 'Sign Up...'}).bindEvent({
click: function() { click: function() {
$dialog.close(); that.close();
pandora.$ui.accountDialog = pandora.ui.accountDialog('signup').open(); pandora.$ui.accountDialog = pandora.ui.accountDialog('signup').open();
} }
}), }),
Ox.Button({title: 'Sign In...'}).bindEvent({ Ox.Button({title: 'Sign In...'}).bindEvent({
click: function() { click: function() {
$dialog.close(); that.close();
pandora.$ui.accountDialog = pandora.ui.accountDialog('signin').open(); pandora.$ui.accountDialog = pandora.ui.accountDialog('signin').open();
} }
}) })
] : [ ] : [
Ox.Button({title: 'Switch to Editor'}).bindEvent({ Ox.Button({title: 'Switch to Editor'}).bindEvent({
click: function() { click: function() {
$dialog.close(); that.close();
pandora.UI.set({itemView: 'editor'}); pandora.UI.set({itemView: 'editor'});
} }
}) })
@ -30,32 +30,17 @@ pandora.ui.annotationDialog = function(layer) {
{}, {},
Ox.Button({title: 'Not Now'}).bindEvent({ Ox.Button({title: 'Not Now'}).bindEvent({
click: function() { click: function() {
$dialog.close(); that.close();
} }
}) })
] ]
), ),
content: Ox.Element() text: 'To add or edit ' + layer + ', ' + (
.append( isEditor
$('<img>') ? 'please sign up or sign in.'
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(
'To add or edit ' + layer + ', ' + (
isEditor ? 'please sign up or sign in.'
: 'just switch to the editor.' : 'just switch to the editor.'
)
)
), ),
fixedSize: true,
height: 128,
removeOnClose: true,
width: 304,
title: Ox.toTitleCase(layer) title: Ox.toTitleCase(layer)
}); });
return $dialog; return that;
}; };

View file

@ -105,7 +105,7 @@ pandora.ui.contactForm = function() {
message: data.message, message: data.message,
receipt: $receiptCheckbox.value() receipt: $receiptCheckbox.value()
}, function(result) { }, function(result) {
var $dialog = Ox.Dialog({ var $dialog = pandora.ui.iconDialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'close', id: 'close',
@ -117,22 +117,9 @@ pandora.ui.contactForm = function() {
} }
}) })
], ],
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.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('Thanks for your message!<br/><br/>We will get back to you as soon as possible.')
),
fixedSize: true,
height: 128,
keys: {enter: 'close', escape: 'close'}, keys: {enter: 'close', escape: 'close'},
title: 'Message Sent', text: 'Thanks for your message!<br/><br/>We will get back to you as soon as possible.',
width: 304 title: 'Message Sent'
}) })
.open(); .open();
}); });

View file

@ -3,13 +3,14 @@
'use strict'; 'use strict';
pandora.ui.deleteListDialog = function(list) { pandora.ui.deleteListDialog = function(list) {
var ui = pandora.user.ui, var ui = pandora.user.ui,
folderItems = ui.section == 'items' ? 'Lists' : Ox.toTitleCase(ui.section), folderItems = ui.section == 'items' ? 'Lists' : Ox.toTitleCase(ui.section),
folderItem = folderItems.slice(0, -1); folderItem = folderItems.slice(0, -1),
listData = pandora.getListData(list),
var listData = pandora.getListData(list),
$folderList = pandora.$ui.folderList[listData.folder], $folderList = pandora.$ui.folderList[listData.folder],
that = Ox.Dialog({
that = pandora.ui.iconDialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'keep', id: 'keep',
@ -49,23 +50,11 @@ pandora.ui.deleteListDialog = function(list) {
} }
}) })
], ],
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html('Are you sure you want to delete the ' + folderItem.toLowerCase() + ' "' + listData.name + '"?')
),
height: 128,
keys: {enter: 'delete', escape: 'keep'}, keys: {enter: 'delete', escape: 'keep'},
title: 'Delete List', text: 'Are you sure you want to delete the ' + folderItem.toLowerCase() + ' "' + listData.name + '"?',
width: 304 title: 'Delete ' + folderItem
}); });
return that; return that;
} };

View file

@ -1,92 +0,0 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.errorDialog = function(data) {
var that, error;
//dont open dialog on unload or if antoher error is open
//fixme: error dialog should updated instead
if ($('.OxErrorDialog').length || pandora.isUnloading) {
return;
}
if (data.status.code == 401 || data.status.code == 403) {
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
that.close();
}
})
],
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '256px'})
.html('Sorry, you have made an unauthorized request.')
),
fixedSize: true,
height: 192,
keys: {enter: 'close', escape: 'close'},
removeOnClose: true,
title: Ox.toTitleCase(data.status.text),
width: 368
})
.addClass('OxErrorDialog')
.open();
} else {
// 0 (timeout) or 500 (error)
var error = data.status.code == 0 ? 'timeout' : 'error';
// on window unload, pending request will time out, so
// in order to keep the dialog from appearing, delay it
setTimeout(function() {
if ($('.OxErrorDialog').length == 0 && !pandora.isUnloading) {
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
that.close();
}
})
],
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '256px'})
.html(
'Sorry, a server ' + error
+ ' occured while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.'
)
),
fixedSize: true,
height: 192,
keys: {enter: 'close', escape: 'close'},
removeOnClose: true,
title: 'Server ' + Ox.toTitleCase(error),
width: 368
})
.addClass('OxErrorDialog')
.open();
}
}, 250);
}
};

View file

@ -0,0 +1,65 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.errorDialog = function(data) {
var that, error;
//dont open dialog on unload or if antoher error is open
//fixme: error dialog should updated instead
if ($('.OxErrorDialog').length || pandora.isUnloading) {
return;
}
if (data.status.code == 401 || data.status.code == 403) {
that = pandora.ui.iconDialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
that.close();
}
})
],
keys: {enter: 'close', escape: 'close'},
text: 'Sorry, you have made an unauthorized request.',
title: Ox.toTitleCase(data.status.text)
})
.addClass('OxErrorDialog')
.open();
} else {
// 0 (timeout) or 500 (error)
error = data.status.code == 0 ? 'timeout' : 'error';
// on window unload, pending request will time out, so
// in order to keep the dialog from appearing, delay it
setTimeout(function() {
if ($('.OxErrorDialog').length == 0 && !pandora.isUnloading) {
that = pandora.ui.iconDialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
that.close();
}
})
],
keys: {enter: 'close', escape: 'close'},
text: 'Sorry, a server ' + error
+ ' occured while handling your request.'
+ ' To help us find out what went wrong,'
+ ' you may want to report this error to an administrator.'
+ ' Otherwise, please try again later.',
title: 'Server ' + Ox.toTitleCase(error)
})
.addClass('OxErrorDialog')
.open();
}
}, 250);
}
};

View file

@ -312,7 +312,7 @@ pandora.ui.folders = function() {
type: 'image' type: 'image'
}).bindEvent({ }).bindEvent({
click: function() { click: function() {
var $dialog = Ox.Dialog({ var $dialog = pandora.ui.iconDialog({
buttons: title != 'Featured Lists' ? [ buttons: title != 'Featured Lists' ? [
Ox.Button({title: 'Sign Up...'}).bindEvent({ Ox.Button({title: 'Sign Up...'}).bindEvent({
click: function() { click: function() {
@ -339,21 +339,7 @@ pandora.ui.folders = function() {
} }
}) })
], ],
content: Ox.Element() text: text,
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(text)
),
fixedSize: true,
height: 128,
removeOnClose: true,
width: 304,
title: title title: title
}).open(); }).open();
} }

View file

@ -8,11 +8,12 @@ pandora.ui.iconDialog = function(options) {
keys: null, keys: null,
text: '', text: '',
title: '', title: '',
width: 368, width: 304,
}, options), }, options),
that = Ox.Dialog({ that = Ox.Dialog({
buttons: options.buttons, buttons: options.buttons,
closeButton: options.closeButton,
content: Ox.Element() content: Ox.Element()
.append( .append(
$('<img>') $('<img>')

View file

@ -2,7 +2,7 @@
pandora.ui.makeListPrivateDialog = function(name, subscribers, callback) { pandora.ui.makeListPrivateDialog = function(name, subscribers, callback) {
var that = Ox.Dialog({ var that = pandora.ui.iconDialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'keep', id: 'keep',
@ -23,27 +23,13 @@ pandora.ui.makeListPrivateDialog = function(name, subscribers, callback) {
} }
}) })
], ],
content: Ox.Element() keys: {enter: 'make', escape: 'keep'},
.append( text: 'Are you sure you want to make the list "'
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(
'Are you sure you want to make the list "'
+ name + '" private and lose its ' + name + '" private and lose its '
+ (subscribers == 1 ? 'subscriber' : subscribers + ' subscribers') + (subscribers == 1 ? 'subscriber' : subscribers + ' subscribers')
+ '?' + '?',
) title: 'Make List Private'
), });
height: 128,
keys: {enter: 'make', escape: 'keep'},
title: 'Make List Private',
width: 304
})
return that; return that;

View file

@ -41,7 +41,7 @@ pandora.ui.metadataDialog = function(data) {
data.imdbId && getMetadata(); data.imdbId && getMetadata();
function idDialog() { function idDialog() {
return Ox.Dialog({ return pandora.ui.iconDialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'close', id: 'close',
@ -64,27 +64,11 @@ pandora.ui.metadataDialog = function(data) {
} }
}) })
], ],
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(
'To update the metadata for this '
+ pandora.site.itemName.singular.toLowerCase()
+ ', please enter its IMDb ID.'
)
),
fixedSize: true,
height: 128,
keyboard: {enter: 'update', escape: 'close'}, keyboard: {enter: 'update', escape: 'close'},
removeOnClose: true, text: 'To update the metadata for this '
title: 'Update Metadata', + pandora.site.itemName.singular.toLowerCase()
width: 304 + ', please enter its IMDb ID.',
title: 'Update Metadata'
}); });
} }
@ -138,7 +122,7 @@ pandora.ui.metadataDialog = function(data) {
} }
function confirmDialog() { function confirmDialog() {
return Ox.Dialog({ return pandora.ui.iconDialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'cancel', id: 'cancel',
@ -160,17 +144,9 @@ pandora.ui.metadataDialog = function(data) {
} }
}) })
], ],
content: Ox.Element() height: 192,
.append( keyboard: {enter: 'update', escape: 'cancel'},
$('<img>') text: 'Are you sure you want to update the value'
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(
'Are you sure you want to update the value'
+ (updateKeys.length == 1 ? '' : 's') + (updateKeys.length == 1 ? '' : 's')
+ ' for ' + updateKeys.map(function(key, index) { + ' for ' + updateKeys.map(function(key, index) {
return ( return (
@ -178,15 +154,8 @@ pandora.ui.metadataDialog = function(data) {
: index < updateKeys.length - 1 ? ', ' : index < updateKeys.length - 1 ? ', '
: ' and ' : ' and '
) + getTitle(key) ) + getTitle(key)
}).join('') + '?' }).join('') + '?',
) title: 'Update Metadata'
),
fixedSize: true,
height: 128,
keyboard: {enter: 'update', escape: 'cancel'},
removeOnClose: true,
title: 'Update Metadata',
width: 304
}); });
} }

View file

@ -3,11 +3,11 @@
pandora.ui.resetUIDialog = function(data) { pandora.ui.resetUIDialog = function(data) {
var that = Ox.Dialog({ var that = pandora.ui.iconDialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'cancel', id: 'cancel',
title: 'Cancel' title: 'Don\'t Reset'
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -26,21 +26,9 @@ pandora.ui.resetUIDialog = function(data) {
} }
}) })
], ],
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html('Are you sure you want to reset all UI settings?')
),
height: 128,
keys: {enter: 'reset', escape: 'cancel'}, keys: {enter: 'reset', escape: 'cancel'},
title: 'Reset UI Settings', text: 'Are you sure you want to reset all UI settings?',
width: 304 title: 'Reset UI Settings'
}); });
return that; return that;

View file

@ -866,13 +866,7 @@ pandora.ui.usersDialog = function() {
message: getFormItemById('message').value(), message: getFormItemById('message').value(),
receipt: getFormItemById('receipt').value() receipt: getFormItemById('receipt').value()
}, function(result) { }, function(result) {
var title = result.status.code == 200 var $dialog = pandora.ui.iconDialog({
? 'Message Sent'
: 'Application Error',
message = result.status.code == 200
? 'Your message has been sent.'
: 'Your message could not be sent. Please try again.',
$dialog = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
id: 'close', id: 'close',
@ -884,23 +878,13 @@ pandora.ui.usersDialog = function() {
} }
}) })
], ],
// FIXME: we need a template for this type of dialog
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(message)
),
height: 128,
keys: {enter: 'close', escape: 'close'}, keys: {enter: 'close', escape: 'close'},
removeOnClose: true, text: result.status.code == 200
title: title, ? 'Your message has been sent.'
width: 304 : 'Your message could not be sent. Please try again.',
title: result.status.code == 200
? 'Message Sent'
: 'Application Error'
}).open(); }).open();
$sendButton.options({title: 'Send', disabled: false}); $sendButton.options({title: 'Send', disabled: false});
}); });