placeholder contact form

pandora/user/views.py

@@ -536,6 +536,7 @@ def contact(request):
     '''
         param data {
             'email': string,
+            'subject': string,
             'message': string
         }
 

static/js/pandora/ui/contactForm.js

@@ -0,0 +1,57 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+pandora.ui.contactForm = function() {
+    var that = Ox.Element(),
+        $form = Ox.Form({
+            items: [
+                Ox.Input({
+                        id: 'email',
+                        label: 'E-Mail',
+                        labelWidth: 60,
+                        value: pandora.user.preferences.email,
+                        width: 240
+                }),
+                Ox.Input({
+                        id: 'subject',
+                        label: 'Subject',
+                        labelWidth: 60,
+                        value: '',
+                        width: 240
+                }),
+                Ox.Input({
+                    height: 120,
+                    id: 'message',
+                    placeholder: 'Message',
+                    type: 'textarea',
+                    value: '',
+                    width: 240
+                })
+                .css({height: '240px'})
+            ],
+            submit: function(data, callback) {
+                pandora.api.contact({
+                    email: data.email,
+                    subject: data.subject,
+                    message: data.message
+                }, function(result) {
+                    callback && callback(result);
+                });
+            },
+            width: 240
+        })
+        .css({margin: '8px'})
+        .bindEvent({
+            change: function(event) {
+            }
+        })
+        .appendTo(that);
+
+    Ox.Button({
+        title: 'Send'
+    })
+    .bindEvent({
+        click: function() {
+            $form.submit();
+        }
+    }).appendTo(that);
+    return that;
+};

static/js/pandora/ui/siteDialog.js

@@ -1,3 +1,4 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
 pandora.ui.siteDialog = function(section) {
 
     var tabs = [
@@ -13,9 +14,13 @@ pandora.ui.siteDialog = function(section) {
     var $tabPanel = Ox.TabPanel({
             content: function(id) {
                 var content = Ox.Element().css({padding: '16px', overflowY: 'auto'});
-                pandora.api.getPage({name:id}, function(result) {
+                if (id == 'contact') {
-                    content.html(result.data.body);
+                    content.append(pandora.ui.contactForm());
-                });
+                } else {
+                    pandora.api.getPage({name:id}, function(result) {
+                        content.html(result.data.body);
+                    });
+                }
                 return Ox.SplitPanel({
                     elements: [
                         {

static/json/pandora.json

@@ -11,6 +11,7 @@
   "js/pandora/ui/browser.js", 
   "js/pandora/ui/clipList.js", 
   "js/pandora/ui/contentPanel.js", 
+  "js/pandora/ui/contactForm.js", 
   "js/pandora/ui/deleteListDialog.js", 
   "js/pandora/ui/editor.js",
   "js/pandora/ui/eventsDialog.js",