fix for dialog center/reset

This commit is contained in:
rolux 2010-09-04 16:28:40 +02:00
parent 680b4c6c96
commit d86fce4560
4 changed files with 266 additions and 110 deletions

View File

@ -41,18 +41,25 @@ Dialog
}
.OxThemeClassic .OxDialog .OxBar {
background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
//background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96));
//background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
background: -moz-linear-gradient(top, rgba(224, 224, 224, 0.96), rgba(192, 192, 192, 0.96));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(224, 224, 224, 0.96)), to(rgba(192, 192, 192, 0.96)));
}
.OxThemeClassic .OxDialog .OxContent {
background: rgba(224, 224, 224, 0.96);
//background: rgba(224, 224, 224, 0.96);
background: rgba(208, 208, 208, 0.96);
}
.OxThemeClassic .OxDialog .OxTitle {
color: rgb(48, 48, 48);
}
.OxThemeClassic .OxLayer {
background: rgb(255, 255, 255);
}
/*
================================================================================
Forms
@ -131,7 +138,8 @@ Forms
//-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
//-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
}
.OxThemeClassic div.OxInput.OxFocus {
.OxThemeClassic div.OxInput.OxFocus,
.OxThemeClassic .OxSelect.OxFocus {
-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
}
@ -173,10 +181,10 @@ Lists
background: rgb(222, 222, 222);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) {
background: rgb(194, 194, 194);
background: rgb(210, 210, 210);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
background: rgb(190, 190, 190);
background: rgb(206, 206, 206);
}
.OxThemeClassic .OxTextList .OxBar {
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
@ -200,7 +208,7 @@ Lists
border-right: 1px solid rgb(216, 216, 216);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected .OxCell {
border-right: 1px solid rgb(184, 184, 184);
border-right: 1px solid rgb(200, 200, 200);
color: rgb(0, 0, 0);
}
.OxThemeClassic .OxTextList .OxBody .OxItem .OxLine {

View File

@ -746,14 +746,23 @@ Lists
background: rgb(24, 24, 24);
cursor: ew-resize;
}
.OxTextList .OxBar .OxButton {
.OxTextList .OxBar .OxSelect {
position: absolute;
right: 0px;
width: 11px;
width: 10px;
height: 16px;
border-width: 0 1px 0 1px;
border-color: rgb(32, 32, 32);
background: rgba(0, 0, 0, 0);
font-size: 11px;
text-align: center;
cursor: pointer;
overflow: hidden;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.OxTextList .OxBar .OxSelect > input {
margin-right: -3px;
}
.OxTextList .OxBody {

View File

@ -51,6 +51,10 @@ Dialog
background: rgba(48, 48, 48, 0.96);
}
.OxThemeModern .OxLayer {
background: rgb(0, 0, 0);
}
/*
================================================================================
@ -118,7 +122,8 @@ Forms
background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
}
.OxThemeModern div.OxInput.OxFocus {
.OxThemeModern div.OxInput.OxFocus,
.OxThemeModern .OxSelect.OxFocus {
//border: 1px solid rgb(80, 80, 80);
-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);

View File

@ -312,12 +312,13 @@ requires
blur: function(id) {
var index = stack.indexOf(id);
if (index == stack.length - 1) {
$elements[id].removeClass('OxFocus');
//$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
stack.length == 1 ? stack.pop() :
stack.splice(stack.length - 2, 0, stack.pop());
Ox.Event.unbindKeyboard($elements[id].options('id'));
stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options('id'));
//$elements[id].removeClass('OxFocus');
$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
stack.length && $elements[stack[stack.length - 1]].addClass('OxFocus');
Ox.print('blur', id, stack);
}
},
@ -327,8 +328,9 @@ requires
stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options('id'));
index > -1 && stack.splice(index, 1);
stack.push(id);
$elements[id].addClass('OxFocus');
Ox.Event.bindKeyboard($elements[id].options('id'));
$('.OxFocus').removeClass('OxFocus'); // fixme: see above
$elements[id].addClass('OxFocus');
Ox.print('focus', id, stack);
}
},
@ -1471,6 +1473,7 @@ requires
// fixme: dialog should be derived from a generic draggable
// fixme: pass button elements directly
// fixme: buttons should have a close attribute, or the dialog a close id
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
@ -1483,7 +1486,12 @@ requires
width: 384
})
.options(options || {})
.addClass('OxDialog');
.addClass('OxDialog')
.addEvent({
key_escape: function() {
that.close();
}
});
if (!Ox.isArray(self.options.buttons[0])) {
self.options.buttons = [[], self.options.buttons];
@ -1496,10 +1504,12 @@ requires
.mousedown(drag)
.dblclick(center)
.appendTo(that);
that.$title = new Ox.Element()
.addClass('OxTitle')
.html(self.options.title)
.appendTo(that.$titlebar);
// fixme: should the following be a container?
that.$content = new Ox.Element()
.addClass('OxContent')
@ -1508,9 +1518,11 @@ requires
overflow: 'auto'
})
.appendTo(that);
that.$buttonsbar = new Ox.Bar({})
.addClass('OxButtonsBar')
.appendTo(that);
that.$buttons = [];
$.each(self.options.buttons[0], function(i, button) {
that.$buttons[i] = new Ox.Button({
@ -1522,11 +1534,13 @@ requires
.click(button.click) // fixme: rather use event?
.appendTo(that.$buttonsbar);
});
that.$resize = new Ox.Element()
.addClass('OxResize')
.mousedown(resize)
.dblclick(reset)
.appendTo(that.$buttonsbar);
$.each(self.options.buttons[1].reverse(), function(i, button) {
that.$buttons[that.$buttons.length] = new Ox.Button({
disabled: button.disabled || false,
@ -1538,8 +1552,10 @@ requires
.click(button.click) // fixme: rather use event?
.appendTo(that.$buttonsbar);
});
that.$buttons[0].focus();
that.$layer = new Ox.Element() // fixme: Layer widget, that would handle click?
that.$layer = new Ox.Element() // fixme: Layer widget that would handle click?
.addClass('OxLayer')
.mousedown(mousedownLayer)
.mouseup(mouseupLayer);
@ -1610,9 +1626,9 @@ requires
}
function reset() {
that.css({
that/*.css({
left: Math.max(that.offset().left, 24 - that.width())
})
})*/
.width(self.options.width)
.height(self.options.height);
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
@ -1695,6 +1711,7 @@ requires
getButtonById(id).options({
disabled: true
});
return that;
};
that.enable = function() {
@ -1706,17 +1723,19 @@ requires
getButtonById(id).options({
disabled: false
});
return that;
};
that.open = function() {
that.$layer.appendTo($body);
center();
reset();
that.css({
opacity: 0
}).appendTo($body).animate({
opacity: 1
}, 200);
center();
reset();
that.gainFocus();
$window.bind('mouseup', mouseupLayer)
return that;
};
@ -2273,9 +2292,10 @@ requires
autocompleteSelect boolean, if true, menu is displayed
autocompleteSelectHighlight boolean, if true, value in menu is highlighted
autocompleteSelectSubmit boolean, if true, submit input on menu selection
autovalidate string ('email', 'float', 'integer', 'phone', 'url'), or
autocorrect string ('email', 'float', 'integer', 'phone', 'url'), or
regexp(value), or
function(key, value, blur, callback), returns value
auto validate --remote validation--
clear boolean, if true, has clear button
disabled boolean, if true, is disabled
height integer, px (for type='textarea' and type='range' with orientation='horizontal')
@ -2892,7 +2912,9 @@ requires
self.onChange = function(key, value) {
var inputWidth, val;
if (key == 'value') {
if (key == 'placeholder') {
setPlaceholder();
} else if (key == 'value') {
val = self.$input.val();
self.$input.val(value);
setPlaceholder();
@ -3974,6 +3996,10 @@ requires
)
.css(self.options.width == 'auto' ? {} : {
width: self.options.width + 'px'
})
.addEvent({
key_escape: loseFocus,
key_down: showMenu
});
$.extend(self, {
@ -4002,7 +4028,7 @@ requires
self.options.title ? self.options.title :
self.options.items[self.checked[0]].title
)
.click(clickButton)
.click(showMenu)
.appendTo(that.$element);
}
@ -4012,7 +4038,7 @@ requires
title: 'select',
type: 'image'
})
.bindEvent('click', clickButton)
.bindEvent('click', showMenu)
.appendTo(that);
self.$menu = new Ox.Menu({
@ -4033,11 +4059,6 @@ requires
hide: hideMenu
});
function clickButton() {
that.addClass('OxSelected');
self.$menu.showMenu();
}
function clickMenu(event, data) {
}
@ -4049,7 +4070,9 @@ requires
self.options.title ? self.options.title :
data.checked[0].title
);
that.triggerEvent('change', data);
that.triggerEvent('change', {
selected: data.checked
});
}
function hideMenu() {
@ -4057,6 +4080,16 @@ requires
self.$button.removeClass('OxSelected');
}
function loseFocus() {
that.loseFocus();
}
function showMenu() {
that.gainFocus();
that.addClass('OxSelected');
self.$menu.showMenu();
}
self.onChange = function(key, value) {
};
@ -6182,8 +6215,17 @@ requires
}
};
that.clearCache = function() { // fixme: unused? make private?
that.clearCache = function() { // used by TextList resizeColumn
self.$pages = [];
return that;
};
that.reload = function() {
clear();
that.clearCache();
that.$content.empty();
loadPages(self.page);
return that;
};
that.sort = function(key, operator) {
@ -6195,6 +6237,7 @@ requires
that.triggerEvent('sort', self.options.sort[0]);
updateSort();
}
return that;
}
return that;
@ -6241,7 +6284,9 @@ requires
that = new Ox.Element({}, self)
.defaults({
columns: [],
columnWidth: [40, 800],
columnsMovable: false,
columnsRemovable: false,
//columnWidth: [40, 800],
id: '',
request: function() {}, // {sort, range, keys, callback}
sort: []
@ -6287,7 +6332,118 @@ requires
.addClass('OxHead')
.appendTo(that.$bar);
that.$head.$content.addClass('OxTitles');
constructHead();
if (self.options.columnsRemovable) {
that.$select = new Ox.Select({
id: self.options.id + 'SelectColumns',
items: $.map(self.options.columns, function(v, i) {
return {
checked: v.visible,
disabled: v.removable === false,
id: v.id,
title: v.title
}
}),
max: -1,
min: 1,
type: 'image'
})
.bindEvent('change', changeColumns)
.appendTo(that.$bar.$element);
}
// Body
that.$body = new Ox.List({
construct: constructItem,
id: self.options.id,
itemHeight: 16,
itemWidth: getItemWidth(),
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
}),
orientation: 'vertical',
request: self.options.request,
sort: self.options.sort,
type: 'text',
unique: self.unique
})
.addClass('OxBody')
.scroll(function() {
var scrollLeft = $(this).scrollLeft();
if (scrollLeft != self.scrollLeft) {
self.scrollLeft = scrollLeft;
that.$head.scrollLeft(scrollLeft);
}
})
.appendTo(that);
that.$body.$content.css({
width: getItemWidth() + 'px'
});
Ox.print('s.vC', self.visibleColumns)
function addColumn(id) {
Ox.print('addColumn', id);
var column,
index = 0;
$.each(self.options.columns, function(i, v) {
if (v.visible) {
index++;
} else if (v.id == id) {
column = v;
return false;
}
});
column.visible = true;
self.visibleColumns.splice(index, 0, column);
that.$head.$content.empty();
constructHead();
that.$body.options({
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
})
});
that.$body.reload();
}
function changeColumns(event, data) {
var add,
ids = [];
$.each(data.selected, function(i, column) {
var index = getColumnIndexById(column.id);
if (!self.options.columns[index].visible) {
addColumn(column.id);
add = true;
return false;
}
ids.push(column.id);
});
if (!add) {
$.each(self.visibleColumns, function(i, column) {
if (ids.indexOf(column.id) == -1) {
removeColumn(column.id);
return false
}
});
}
}
function clickColumn(id) {
Ox.print('clickColumn', id);
var i = getColumnIndexById(id),
isSelected = self.options.sort[0].key == self.options.columns[i].id;
that.sort(
self.options.columns[i].id, isSelected ?
(self.options.sort[0].operator === '' ? '-' : '') :
self.options.columns[i].operator
);
}
function constructHead() {
that.$titles = [];
self.columnPositions = [];
self.columnWidths = [];
$.each(self.visibleColumns, function(i, v) {
var $order, $resize, $left, $center, $right, timeout = 0;
self.columnWidths[i] = v.width;
@ -6358,62 +6514,12 @@ requires
width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
});
}
that.$select = new Ox.Button({
style: 'symbol',
title: 'select',
type: 'image'
}).appendTo(that.$bar.$element);
// Body
that.$body = new Ox.List({
construct: constructItem,
id: self.options.id,
itemHeight: 16,
itemWidth: getItemWidth(),
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
}),
orientation: 'vertical',
request: self.options.request,
sort: self.options.sort,
type: 'text',
unique: self.unique
})
.addClass('OxBody')
.scroll(function() {
var scrollLeft = $(this).scrollLeft();
if (scrollLeft != self.scrollLeft) {
self.scrollLeft = scrollLeft;
that.$head.scrollLeft(scrollLeft);
}
})
.appendTo(that);
that.$body.$content.css({
width: getItemWidth() + 'px'
});
Ox.print('s.vC', self.visibleColumns)
function addColumn(id) {
}
function clickColumn(id) {
Ox.print('clickColumn', id);
var i = getColumnIndexById(id),
isSelected = self.options.sort[0].key == self.options.columns[i].id;
that.sort(
self.options.columns[i].id, isSelected ?
(self.options.sort[0].operator === '' ? '-' : '') :
self.options.columns[i].operator
);
}
function constructItem(data) {
var $item = $('<div>')
.css({
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + 'px'
width: getItemWidth() + 'px'
});
$.each(self.visibleColumns, function(i, v) {
var $cell = $('<div>')
@ -6506,8 +6612,8 @@ requires
}
function getItemWidth() {
return Ox.sum(self.columnWidths)
return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
//return Ox.sum(self.columnWidths)
}
function moveColumn(id, pos) {
@ -6529,7 +6635,35 @@ requires
}
function removeColumn(id) {
Ox.print('removeColumn', id);
var className = '.OxColumn' + Ox.toTitleCase(id),
index = getColumnIndexById(id),
position = getColumnPositionById(id),
$column = $('.OxTitle' + className),
$order = $column.next(),
$resize = $order.next();
self.options.columns[index].visible = false;
self.visibleColumns.splice(position, 1);
self.columnWidths.splice(position, 1);
itemWidth = getItemWidth();
$column.remove();
$order.remove();
$resize.remove();
$.each(that.$body.find('.OxItem'), function(i, v) {
var $v = $(v);
$v.children(className).remove();
$v.css({
width: itemWidth + 'px'
});
});
that.$body.$content.css({
width: itemWidth + 'px'
});
that.$body.options({
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
})
});
}
function resize() {
@ -7339,6 +7473,7 @@ requires
function clickItem(position) {
var item = that.items[position],
toggled;
that.hideMenu();
if (!item.options('items').length) {
if (that.options('parent')) {
that.options('parent').hideMenu().triggerEvent('click');
@ -7381,7 +7516,6 @@ requires
item.toggleTitle();
}
}
that.hideMenu();
}
function clickSelectedItem() {