From 67ec27bcba6d4fc69640ea222cc70a8bf5b6f8c5 Mon Sep 17 00:00:00 2001 From: Rolux Date: Sat, 20 Feb 2010 09:12:03 +0530 Subject: [PATCH] updating dialog --- build/css/ox.ui.classic.css | 13 +++++++++++ build/css/ox.ui.css | 15 ++++++------ build/js/ox.ui.js | 46 +++++++++++++++++++------------------ demos/test/index.html | 26 +++++++++++++++++++++ 4 files changed, 71 insertions(+), 29 deletions(-) diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index fb8b443..8a2cd52 100644 --- a/build/css/ox.ui.classic.css +++ b/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; +} \ No newline at end of file diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 2d15402..e67a953 100644 --- a/build/css/ox.ui.css +++ b/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; - right: 0px; - bottom: 0px; - height: 32px; - padding: 0 4px 0 4px; + left: 0; + right: 0; + bottom: 0; + height: 24px; + 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; } /* diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 0e784ed..ae0c98d 100644 --- a/build/js/ox.ui.js +++ b/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({ - title: "", - buttons: [], - width: 384, - height: 128 - }, options), - that = new Ox.Element() + that = new Ox.Element("div", self) + .defaults({ + title: "", + buttons: [], + width: 384, + height: 128 + }) + .options(options || {}) .addClass("OxDialog") .css({ - left: (($(document).width() - options.width) / 2) + "px", - top: (($(document).height() - options.height - 92) / 2) + "px", - width: options.width + "px", - height: (options.height + 92) + "px" + left: (($document.width() - self.options.width) / 2) + "px", + top: (($document.height() - self.options.height - 68) / 2) + "px", + width: self.options.width + "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(); - documentHeight = $(document).height(); + documentWidth = $document.width(); + 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).unbind("mousemove"); + $window.one("mouseup", function() { + $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) { diff --git a/demos/test/index.html b/demos/test/index.html index 481aa51..7035da8 100644 --- a/demos/test/index.html +++ b/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("
")) + .open(); + } function switchTheme() { if (Ox.theme() == "classic") { Ox.theme("modern");