add icon to application error dialog

source/Ox.UI/css/Ox.UI.css

@@ -240,8 +240,8 @@ Dialog
 }
 
 .OxDialog > .OxTitlebar > .OxTitle {
-    margin-top: 3px;
-    font-size: 13px;
+    margin-top: 4px;
+    font-size: 11px;
     font-weight: bold;
     text-overflow: ellipsis;
     overflow: hidden;

source/Ox.UI/js/Core/Ox.Request.js

@@ -152,8 +152,8 @@ Ox.Request = function(options) {
                                 })
                             ],
                             content: $iframe,
-                            width: 800,
-                            height: 400
+                            width: 768,
+                            height: 384
                         })
                         .open(),
                     iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
@@ -214,10 +214,20 @@ Ox.Request = function(options) {
                                         }
                                     })
                             ],
-                            content: 'Sorry, we have encountered an application error 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.',
+                            content: Ox.Element()
+                                .append(
+                                    $('<img>')
+                                        .attr({src: Ox.UI.PATH + 'png/icon128.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, we have encountered an application error 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.')
+                                ),
+                            height: 192,
                             keys: {enter: 'close', escape: 'close'},
-                            width: 400,
-                            height: 200
+                            width: 368
                         })
                         .open();
                         // fixme: change this to Send / Don't Send

source/Ox.UI/js/List/Ox.List.js

@@ -992,7 +992,7 @@ Ox.List = function(options, self) {
             if (self.options.centered) {
                 that.animate({
                     scrollLeft: (self.listMargin / 2 + (pos + 0.5) * itemWidth - that.width() / 2) + 'px'
-                }, 0);
+                }, 250);
             } else {
                 positions[0] = pos * itemWidth + self.listMargin / 2;
                 positions[1] = positions[0] + itemWidth + self.itemMargin / 2;

source/Ox.UI/js/Window/Ox.Dialog.js

@@ -31,6 +31,7 @@ Ox.Dialog = function(options, self) {
                 fixedRatio: false,
                 focus: true,
                 height: 200,
+                keys: {},
                 maxHeight: Infinity,
                 maximizeButton: false,
                 maxWidth: Infinity,
@@ -41,6 +42,14 @@ Ox.Dialog = function(options, self) {
             })
             .options(options || {})
             .addClass('OxDialog')
+            .bindEvent({
+                key_enter: function() {
+                    keypress('enter');
+                },
+                key_escape: function() {
+                    keypress('escape');
+                }
+            })
             .hide()
             .appendTo(Ox.UI.$body);
 
@@ -128,24 +137,7 @@ Ox.Dialog = function(options, self) {
         self.$buttonsRight = $('<div>')
             .addClass('OxButtonsRight')
             .appendTo(self.$buttonsbar.$element);
-        var buttonsLeft,
-            buttonsRight,
-            index = Ox.map(self.options.buttons, function(v, i) {
-                return Ox.isEmpty(v) ? i : null;
-            })[0];
-        if (index) {
-            buttonsLeft = Ox.sub(self.options.buttons, 0, index);
-            buttonsRight = Ox.sub(self.options.buttons, index + 1);
-        } else {
-            buttonsLeft = [];
-            buttonsRight = self.options.buttons;
-        }
-        buttonsLeft.forEach(function($button) {
-            $button.addClass('OxLeft').appendTo(self.$buttonsLeft);
-        });
-        buttonsRight.forEach(function($button) {
-            $button.addClass('OxRight').appendTo(self.$buttonsRight);
-        });
+        setButtons();
     }
 
     if (!self.options.fixedCenter) {        
@@ -263,6 +255,22 @@ Ox.Dialog = function(options, self) {
         that.unwrap();
     }
 
+    function getButtonById(id) {
+        var ret = null;
+        Ox.forEach(self.options.buttons, function(button) {
+            if (button.options && button.options('id') == id) {
+                ret = button;
+                return false;
+            }
+        });
+        return ret;
+    }
+
+    function keypress(key) {
+        var id = self.options.keys[key];
+        id && getButtonById(id).$element.trigger('click');
+    }
+
     function maximize() {
         var offset = that.offset();
         decenter();
@@ -501,13 +509,36 @@ Ox.Dialog = function(options, self) {
         that.unwrap();
     }
 
+    function setButtons() {
+        var buttonsLeft,
+            buttonsRight,
+            index = Ox.map(self.options.buttons, function(v, i) {
+                return Ox.isEmpty(v) ? i : null;
+            })[0];
+        if (index) {
+            buttonsLeft = Ox.sub(self.options.buttons, 0, index);
+            buttonsRight = Ox.sub(self.options.buttons, index + 1);
+        } else {
+            buttonsLeft = [];
+            buttonsRight = self.options.buttons;
+        }
+        self.$buttonsLeft.empty();
+        buttonsLeft.forEach(function($button) {
+            $button.addClass('OxLeft').appendTo(self.$buttonsLeft);
+        });
+        self.$buttonsRight.empty();
+        buttonsRight.forEach(function($button) {
+            $button.addClass('OxRight').appendTo(self.$buttonsRight);
+        });
+    }
+
     function setContent() {
         var animate = !!self.$content
             isImage = !self.options.content.ox && self.options.content.is('img');
         if (animate) {
             self.$content.animate({
                 opacity: 0
-            }, 100, function() {
+            }, 250, function() {
                 $(this).remove() // fixme: removeElement?
             });
             self.options.content.css({
@@ -532,7 +563,7 @@ Ox.Dialog = function(options, self) {
         );
         animate && self.options.content.animate({
             opacity: 1
-        }, 100);
+        }, 250);
     }
 
     function setCSS(css, animate) {
@@ -591,7 +622,9 @@ Ox.Dialog = function(options, self) {
     }
 
     self.setOption = function(key, value) {
-        if (key == 'content') {
+        if (key == 'buttons') {
+            setButtons();
+        } else if (key == 'content') {
             setContent();
         } else if (key == 'height') {
             setMinAndMax();
@@ -631,6 +664,16 @@ Ox.Dialog = function(options, self) {
         return that;
     };
 
+    that.disableButton = function(id) {
+        getButtonById(id).options({disabled: true});
+        return that;
+    };
+
+    that.enableButton = function(id) {
+        getButtonById(id).options({disabled: false});
+        return that;
+    };
+
     that.open = function() {
         self.initialHeight = self.options.height;    
         self.initialWidth = self.options.width;