updating dialog
This commit is contained in:
Rolux
parent
0aec06616b
commit
6c2304022d
4 changed files with 71 additions and 29 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
.defaults({
|
||||
title: "",
|
||||
buttons: [],
|
||||
width: 384,
|
||||
height: 128
|
||||
}, options),
|
||||
that = new Ox.Element()
|
||||
})
|
||||
.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) {
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
Loading…
Reference in a new issue