use new dialog
This commit is contained in:
parent
81764c2b94
commit
5053fc5c4c
5 changed files with 94 additions and 60 deletions
|
@ -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,25 +67,31 @@ 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(
|
.append(
|
||||||
Ox.Element()
|
$('<img>')
|
||||||
.addClass('OxText')
|
.attr({src: '/static/png/icon64.png'})
|
||||||
.html(dialogText[action] + '<br/><br/>')
|
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
pandora.$ui.accountForm = pandora.ui.accountForm(action, value)
|
Ox.Element()
|
||||||
|
.css({position: 'absolute', left: '96px', top: '16px', width: '320px'})
|
||||||
|
.append(
|
||||||
|
Ox.Element()
|
||||||
|
.addClass('OxText')
|
||||||
|
.html(dialogText[action] + '<br/><br/>')
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
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() {
|
|
||||||
var that = Ox.Dialog({
|
pandora.ui.accountWelcomeDialog = function() {
|
||||||
buttons: [
|
var that = Ox.Dialog({
|
||||||
[
|
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()
|
||||||
],
|
.append(
|
||||||
content: Ox.Element().html('Welcome, ' + pandora.user.username + '!<br/><br/>Your account has been created.'),
|
$('<img>')
|
||||||
height: 160,
|
.attr({src: '/static/png/icon64.png'})
|
||||||
keys: {enter: 'close', escape: 'close'},
|
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||||
title: 'Welcome to ' + pandora.site.site.name,
|
)
|
||||||
width: 300
|
.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'},
|
||||||
|
title: 'Welcome to ' + pandora.site.site.name,
|
||||||
|
width: 304
|
||||||
});
|
});
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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
BIN
static/png/icon64.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.9 KiB |
Loading…
Reference in a new issue