diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css
index 9cbeefcd..d6f09170 100644
--- a/build/css/ox.ui.classic.css
+++ b/build/css/ox.ui.classic.css
@@ -18,6 +18,30 @@ Bars
//background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
}
+/*
+================================================================================
+Dialog
+================================================================================
+*/
+
+.OxThemeClassic .OxDialog {
+ background: rgba(224, 224, 224, 0.96);
+ //border: 1px solid rgba(128, 128, 128, 0.5);
+}
+
+.OxThemeClassic .OxDialog .OxTitle {
+ color: rgb(48, 48, 48);
+}
+
+.OxThemeClassic .OxDialog > .OxTitleBar {
+ //border-color: rgb(192, 192, 192);
+ //background: rgba(208, 208, 208, 0.96);
+}
+
+.OxThemeClassic .OxDialog > .OxButtonsBar {
+ //background: rgba(192, 192, 192, 0.96);
+}
+
/*
================================================================================
Forms
diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 08a6b84e..3f895d7c 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -49,6 +49,69 @@ Bars
margin: 4px 0 0 4px;
}
+/*
+================================================================================
+Dialog
+================================================================================
+*/
+
+.OxLayer {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ z-index: 10;
+}
+
+.OxDialog {
+ position: absolute;
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+}
+
+.OxDialog > .OxTitleBar {
+ //left: 0px;
+ //right: 0px;
+ //height: 16px;
+ padding: 3px 8px 5px 8px;
+ padding: 3px 0 5px 0;
+ cursor: move;
+ overflow: hidden;
+ white-space: nowrap;
+ -moz-border-radius-topleft: 8px;
+ -moz-border-radius-topright: 8px;
+ -webkit-border-top-left-radius: 8px;
+ -webkit-border-top-right-radius: 8px;
+}
+
+.OxDialog > .OxTitleBar > .OxTitle {
+ margin: 0 8px 0 8px;
+ font-size: 13px;
+ font-weight: bold;
+ text-overflow: ellipsis;
+}
+
+.OxDialog > .OxContent {
+ top: 24px;
+ //bottom: 32px;
+ height: 100%;
+}
+
+.OxDialog > .OxButtonsBar {
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ height: 24px;
+ padding: 8px;
+ text-align: right;
+ -moz-border-radius-bottomleft: 8px;
+ -moz-border-radius-bottomright: 8px;
+ -webkit-border-bottom-left-radius: 8px;
+ -webkit-border-bottom-right-radius: 8px;
+}
+
/*
================================================================================
Forms
diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index a13b4571..85987c98 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -18,6 +18,23 @@ Bars
background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
}
+/*
+================================================================================
+Dialog
+================================================================================
+*/
+
+.OxThemeModern .OxDialog {
+ background: rgba(48, 48, 48, 0.96);
+}
+.OxThemeModern .OxDialog > .OxTitleBar {
+ //background: rgba(32, 32, 32, 0.96);
+}
+
+.OxThemeModern .OxDialog > .OxButtonsBar {
+ //background: rgba(32, 32, 32, 0.96);
+}
+
/*
================================================================================
Forms
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 91033e0c..e02952e3 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -105,15 +105,15 @@ requires
return Ox.getset(self.options, Array.slice.call(arguments), self.change, that);
};
- that.request = function(fn, data, callback) {
- if(Ox.isFunction(data)) {
+ that.request = function(action, data, callback) {
+ if (arguments.length == 2) {
callback = data;
data = {};
}
return Ox.Request.send({
url: self.options.requestURL,
data: {
- "function": fn,
+ action: action,
data: JSON.stringify(data)
},
callback: callback
@@ -126,14 +126,6 @@ requires
}();
- /*
- ----------------------------------------------------------------------------
- Ox.Cache
- ----------------------------------------------------------------------------
- */
-
- // currently part of Ox.Request
-
/*
----------------------------------------------------------------------------
Ox.Event
@@ -457,13 +449,19 @@ requires
}
function error(request, status, error) {
+ var result;
try {
- var result = JSON.parse(request.responseText);
+ result = JSON.parse(request.responseText);
} catch(e) {
- var result = {status: {code:request.status, text:request.statusText}};
+ result = {
+ status: {
+ code: request.status,
+ text: request.statusText
+ }
+ };
}
options.callback(result);
- if(result.status.code >= 500) {
+ if (result.status.code >= 500) {
var $dialog = new Ox.Dialog({
title: "Error: Remote request failed.",
buttons: [
@@ -999,7 +997,7 @@ requires
/*
============================================================================
- Dialog
+ Ox.Dialog
============================================================================
*/
@@ -1008,7 +1006,7 @@ requires
options = $.extend({
title: "",
buttons: [],
- width: 256,
+ width: 384,
height: 128
}, options),
that = new Ox.Element()
@@ -1017,11 +1015,13 @@ requires
left: (($(document).width() - options.width) / 2) + "px",
top: (($(document).height() - options.height - 48) / 2) + "px",
width: options.width + "px",
- height: (options.height + 48) + "px"
+ height: (options.height + 60) + "px"
});
- that.$titlebar = new Ox.Element()
+ that.$titlebar = new Ox.Bar({
+ size: "medium"
+ })
.addClass("OxTitleBar")
- .html(options.title)
+ //.html(options.title)
.mousedown(function(e) {
var offset = that.offset(),
//maxLeft = $(document).width() - that.width(),
@@ -1031,8 +1031,11 @@ requires
documentWidth = $(document).width();
documentHeight = $(document).height();
$(window).mousemove(function(e) {
- var left = Ox.constrain(offset.left - x + e.clientX, 24 - options.width, documentWidth - 24),
- top = Ox.constrain(offset.top - y + e.clientY, -24 - options.height, documentHeight - 24);
+ $("*").css({
+ WebkitUserSelect: "none"
+ });
+ var left = Ox.limit(offset.left - x + e.clientX, 24 - options.width, documentWidth - 24),
+ top = Ox.limit(offset.top - y + e.clientY, 24, documentHeight - 24);
that.css({
left: left + "px",
top: top + "px"
@@ -1040,9 +1043,13 @@ requires
});
$(window).one("mouseup", function() {
$(window).unbind("mousemove");
+ $("*").css({
+ WebkitUserSelect: "auto"
+ });
});
})
.appendTo(that);
+ that.$title = new Ox.Element().addClass("OxTitle").html(options.title).appendTo(that.$titlebar);
that.$content = new Ox.Container()
.addClass("OxContent")
.css({
@@ -1058,6 +1065,12 @@ requires
});
options.buttons[0].focus();
that.$layer = $(".OxLayer"); // fixme: lazy loading of layer is fine, but save in var, dont look up
+ that.$buttons = options.buttons; // fixme: publicy accessible buttons, or dialog methods for manipulation?
+ self.onChange = function(key, value) {
+ if (key == "title") {
+ that.$title.html(value);
+ }
+ }
that.append = function($element) {
that.$content.append($element);
return that;
@@ -1184,6 +1197,11 @@ requires
}
}
}
+ that.toggleDisabled = function() {
+ that.options({
+ enabled: !self.options.disabled
+ });
+ }
that.toggleSelected = function() {
that.options({
selected: !self.options.selected
diff --git a/demos/test/app.html b/demos/test/app.html
index 23782cfb..fae46439 100644
--- a/demos/test/app.html
+++ b/demos/test/app.html
@@ -1,31 +1,18 @@
+
+ [32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
+
+