diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index 8fb6be2c..dae9754e 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -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 { diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 5f77550d..29e1fba3 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -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 { diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index 7b24091d..bddb523e 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -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); diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 8028fb76..39a125d6 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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,82 +6332,25 @@ requires .addClass('OxHead') .appendTo(that.$bar); that.$head.$content.addClass('OxTitles'); - that.$titles = []; - $.each(self.visibleColumns, function(i, v) { - var $order, $resize, $left, $center, $right, timeout = 0; - self.columnWidths[i] = v.width; - that.$titles[i] = $('
') - .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id)) - .css({ - width: (v.width - 9) + 'px', - textAlign: v.align + 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' }) - .html(v.title) - .mousedown(function(e) { - timeout = setTimeout(function() { - dragColumn(v.id, e); - timeout = 0; - }, 250); - }) - .mouseup(function() { - if (timeout) { - clearTimeout(timeout); - timeout = 0; - clickColumn(v.id); - } - }) - .appendTo(that.$head.$content.$element); - self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2; - $order = $('
') - .addClass('OxOrder') - .html(oxui.symbols['triangle_' + ( - v.operator === '' ? 'up' : 'down' - )]) - .click(function() { - $(this).prev().trigger('click') - }) - .appendTo(that.$head.$content.$element); - $resize = $('
') - .addClass('OxResize') - .mousedown(function(e) { - var startWidth = self.columnWidths[i], - startX = e.clientX; - $window.mousemove(function(e) { - var x = e.clientX, - width = Ox.limit( - startWidth - startX + x, - self.options.columnWidth[0], - self.options.columnWidth[1] - ); - resizeColumn(v.id, width); - }); - $window.one('mouseup', function() { - $window.unbind('mousemove'); - }); - }) - .dblclick(function() { - resizeColumn(v.id, v.width); - }) - .appendTo(that.$head.$content.$element); - $left = $('
').addClass('OxLeft').appendTo($resize); - $center = $('
').addClass('OxCenter').appendTo($resize); - $right = $('
').addClass('OxRight').appendTo($resize); - }); - that.$head.$content.css({ - width: (Ox.sum(self.columnWidths) + 2) + 'px' - }); - Ox.print('s.sC', self.selectedColumn) - if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var - toggleSelected(self.options.columns[self.selectedColumn].id); - that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({ - width: (self.options.columns[self.selectedColumn].width - 25) + 'px' - }); + .bindEvent('change', changeColumns) + .appendTo(that.$bar.$element); } - that.$select = new Ox.Button({ - style: 'symbol', - title: 'select', - type: 'image' - }).appendTo(that.$bar.$element); // Body @@ -6396,7 +6384,49 @@ requires 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) { @@ -6410,10 +6440,86 @@ requires ); } + 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; + that.$titles[i] = $('
') + .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id)) + .css({ + width: (v.width - 9) + 'px', + textAlign: v.align + }) + .html(v.title) + .mousedown(function(e) { + timeout = setTimeout(function() { + dragColumn(v.id, e); + timeout = 0; + }, 250); + }) + .mouseup(function() { + if (timeout) { + clearTimeout(timeout); + timeout = 0; + clickColumn(v.id); + } + }) + .appendTo(that.$head.$content.$element); + self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2; + $order = $('
') + .addClass('OxOrder') + .html(oxui.symbols['triangle_' + ( + v.operator === '' ? 'up' : 'down' + )]) + .click(function() { + $(this).prev().trigger('click') + }) + .appendTo(that.$head.$content.$element); + $resize = $('
') + .addClass('OxResize') + .mousedown(function(e) { + var startWidth = self.columnWidths[i], + startX = e.clientX; + $window.mousemove(function(e) { + var x = e.clientX, + width = Ox.limit( + startWidth - startX + x, + self.options.columnWidth[0], + self.options.columnWidth[1] + ); + resizeColumn(v.id, width); + }); + $window.one('mouseup', function() { + $window.unbind('mousemove'); + }); + }) + .dblclick(function() { + resizeColumn(v.id, v.width); + }) + .appendTo(that.$head.$content.$element); + $left = $('
').addClass('OxLeft').appendTo($resize); + $center = $('
').addClass('OxCenter').appendTo($resize); + $right = $('
').addClass('OxRight').appendTo($resize); + }); + that.$head.$content.css({ + width: (Ox.sum(self.columnWidths) + 2) + 'px' + }); + Ox.print('s.sC', self.selectedColumn) + if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var + toggleSelected(self.options.columns[self.selectedColumn].id); + that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({ + width: (self.options.columns[self.selectedColumn].width - 25) + 'px' + }); + } + } + function constructItem(data) { var $item = $('
') .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 = $('
') @@ -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() {