updating dialog

build/css/ox.ui.classic.css

@@ -43,6 +43,10 @@ Dialog
     color: rgb(48, 48, 48);
 }
 
+.OxThemeClassic .OxDialog > .OxButtonsBar {
+    border-top: 1px solid rgb(192, 192, 192);
+}
+
 /*
 ================================================================================
 Forms
@@ -172,3 +176,12 @@ Scrollbars
 .OxThemeClassic ::-webkit-scrollbar-thumb:vertical:active {
     background: rgb(192, 192, 192);
 }
+body {
+    scrollbar-face-color: #808080; /*/ obviously change this to whatever you want /*/
+    scrollbar-arrow-color: #FFFFFF;
+    scrollbar-highlight-color: #FFFBF0;
+    scrollbar-3dlight-color: #808080;
+    scrollbar-shadow-color: #FFFBF0;
+    scrollbar-darkshadow-color: #808080;
+    scrollbar-track-color: #CCCCCC;
+}

build/css/ox.ui.css

@@ -90,17 +90,18 @@ Dialog
 .OxDialog > .OxContent {
     top: 24px;
     height: 100%;
-    padding: 16px;
+    padding: 16px 16px 0 16px;
     font-size: 12px;
     line-height: 16px;
 }
 
 .OxDialog > .OxButtonsBar {
-    left: 0px;
+    left: 0;
-    right: 0px;
+    right: 0;
-    bottom: 0px;
+    bottom: 0;
-    height: 32px;
+    height: 24px;
-    padding: 0 4px 0 4px;
+    padding: 5px 4px 0 4px;
+    border-top-width: 1px;
     text-align: right;
     -moz-border-radius-bottomleft: 8px;
     -moz-border-radius-bottomright: 8px;
@@ -109,7 +110,7 @@ Dialog
 }
 
 .OxDialog > .OxButtonsBar > .OxButton {
-    margin: 8px 4px 0 4px;
+    margin: 0 4px 0 4px;
 }
 
 /*

build/js/ox.ui.js

@@ -1230,49 +1230,49 @@ requires
     */
 
     Ox.Dialog = function(options, self) {
-        // fixme: this was just pasted from previous version ... update
         // fixme: dialog should be derived from a generic draggable
         var self = self || {},
-            options = $.extend({
+            that = new Ox.Element("div", self)
-                title: "",
+                .defaults({
-                buttons: [],
+                    title: "",
-                width: 384,
+                    buttons: [],
-                height: 128
+                    width: 384,
-            }, options),
+                    height: 128
-            that = new Ox.Element()
+                })
+                .options(options || {})
                 .addClass("OxDialog")
                 .css({
-                    left: (($(document).width() - options.width) / 2) + "px",
+                    left: (($document.width() - self.options.width) / 2) + "px",
-                    top: (($(document).height() - options.height - 92) / 2) + "px",
+                    top: (($document.height() - self.options.height - 68) / 2) + "px",
-                    width: options.width + "px",
+                    width: self.options.width + "px",
-                    height: (options.height + 92) + "px"
+                    height: (self.options.height + 68) + "px"
                 });
         that.$titlebar = new Ox.Bar({
                 size: "medium"
             })
             .addClass("OxTitleBar")
-            //.html(options.title)
+            //.html(self.options.title)
             .mousedown(function(e) {
                 var offset = that.offset(),
                     //maxLeft = $(document).width() - that.width(),
                     //maxTop = $(document).height() - that.height(),
                     x = e.clientX,
                     y = e.clientY,
-                    documentWidth = $(document).width();
+                    documentWidth = $document.width();
-                    documentHeight = $(document).height();
+                    documentHeight = $document.height();
                 $(window).mousemove(function(e) {
                     $("*").css({
                         WebkitUserSelect: "none"
                     });
-                    var left = Ox.limit(offset.left - x + e.clientX, 24 - options.width, documentWidth - 24),
+                    var left = Ox.limit(offset.left - x + e.clientX, 24 - self.options.width, documentWidth - 24),
                         top = Ox.limit(offset.top - y + e.clientY, 24, documentHeight - 24);
                     that.css({
                         left: left + "px",
                         top: top + "px"
                     });
                 });
-                $(window).one("mouseup", function() {
+                $window.one("mouseup", function() {
-                    $(window).unbind("mousemove");
+                    $window.unbind("mousemove");
                     $("*").css({
                         WebkitUserSelect: "auto"
                     });
@@ -1281,19 +1281,19 @@ requires
             .appendTo(that);
         that.$title = new Ox.Element()
             .addClass("OxTitle")
-            .html(options.title)
+            .html(self.options.title)
             .appendTo(that.$titlebar);
         that.$content = new Ox.Container()
             .addClass("OxContent")
             .css({
-                height: options.height + "px"
+                height: self.options.height + "px"
             })
             .appendTo(that);
         that.$buttonsbar = new Ox.Element()
             .addClass("OxButtonsBar")
             .appendTo(that);
         that.$buttons = [];
-        $.each(options.buttons, function(i, button) {
+        $.each(self.options.buttons, function(i, button) {
             that.$buttons[i] = new Ox.Button({
                 size: "medium",
                 value: button.value
@@ -2745,7 +2745,9 @@ requires
             }
         }
 
-        that.addItem = function(item, position)
+        that.addItem = function(item, position) {
+            
+        };
 
         that.addItemAfter = function(item, id) {
 

demos/test/index.html

@@ -226,6 +226,11 @@
                     type: "text",
                     value: "Switch Theme"
                 }).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
+                Ox.Button({
+                    size: "large",
+                    type: "text",
+                    value: "Open Dialog"
+                }).addClass("margin").click(openDialog).appendTo($toolbars[0]);
                 Ox.Button({
                     size: size,
                     type: "text",
@@ -448,6 +453,27 @@
                     selected: 1
                 }).addClass("margin").width(160).appendTo(mainPanel);
                 //*/
+                function openDialog() {
+                    var $dialog = new Ox.Dialog({
+                            title: "Dialog",
+                            buttons: [
+                                {
+                                    value: "Do Nothing",
+                                    click: function() {}
+                                },
+                                {
+                                    value: "Close",
+                                    click: function() {
+                                        $dialog.close();
+                                    }
+                                }
+                            ]
+                        })
+                        .append($.map(Ox.range(100), function(v, i) {
+                            return "Line #" + (i + 1)
+                        }).join("<br/>"))
+                        .open();
+                }
                 function switchTheme() {
                     if (Ox.theme() == "classic") {
                         Ox.theme("modern");