allow for max width in menus

This commit is contained in:
rlx 2011-11-02 18:21:49 +00:00
parent 4bb3196c03
commit 16556c0604
4 changed files with 11 additions and 0 deletions

View file

@ -1173,6 +1173,7 @@ Lists
white-space: nowrap; white-space: nowrap;
} }
.OxTextList .OxHead .OxTitle img { .OxTextList .OxHead .OxTitle img {
display: block;
width: 10px; width: 10px;
height: 10px; height: 10px;
margin: 1px 0 0 -1px; margin: 1px 0 0 -1px;
@ -1248,6 +1249,7 @@ Lists
padding: 0; padding: 0;
} }
.OxTextList .OxItem .OxCell > img { .OxTextList .OxItem .OxCell > img {
display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin: -1px 0 0 -4px; margin: -1px 0 0 -4px;
@ -1528,6 +1530,8 @@ Menus
} }
.OxMenu .OxItem .OxCell.OxTitle { .OxMenu .OxItem .OxCell.OxTitle {
padding-left: 4px; padding-left: 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.OxMenu .OxItem .OxCell.OxModifiers { .OxMenu .OxItem .OxCell.OxModifiers {

View file

@ -13,6 +13,7 @@ Ox.Input <f:Ox.Element> Input Element
autocompleteReplaceCorrect <b> if true, only valid values can be entered autocompleteReplaceCorrect <b> if true, only valid values can be entered
autocompleteSelect <b> if true, menu is displayed autocompleteSelect <b> if true, menu is displayed
autocompleteSelectHighlight <b> if true, value in menu is highlighted autocompleteSelectHighlight <b> if true, value in menu is highlighted
autocompleteSelectMaxWidth <n|0> Maximum width of autocomplete menu, or 0
autocompleteSelectSubmit <b> if true, submit input on menu selection autocompleteSelectSubmit <b> if true, submit input on menu selection
autocorrect <s|r|f|null> ('email', 'float', 'int', 'phone', 'url'), or autocorrect <s|r|f|null> ('email', 'float', 'int', 'phone', 'url'), or
<r> regexp(value), or <r> regexp(value), or
@ -73,6 +74,7 @@ Ox.Input = function(options, self) {
autocompleteSelect: false, autocompleteSelect: false,
autocompleteSelectHighlight: false, autocompleteSelectHighlight: false,
autocompleteSelectMax: 0, autocompleteSelectMax: 0,
autocompleteSelectMaxWidth: 0,
autocompleteSelectSubmit: false, autocompleteSelectSubmit: false,
autovalidate: null, autovalidate: null,
changeOnKeypress: false, changeOnKeypress: false,
@ -424,6 +426,7 @@ Ox.Input = function(options, self) {
var menu = Ox.Menu({ var menu = Ox.Menu({
element: self.$input, element: self.$input,
id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?, id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
maxWidth: self.options.autocompleteSelectMaxWidth,
offset: { offset: {
left: 4, left: 4,
top: 0 top: 0

View file

@ -35,6 +35,7 @@ Ox.Menu = function(options, self) {
id: '', id: '',
items: [], items: [],
mainmenu: null, mainmenu: null,
maxWidth: 0,
offset: { offset: {
left: 0, left: 0,
top: 0 top: 0
@ -198,6 +199,7 @@ Ox.Menu = function(options, self) {
var position; var position;
if ('id' in item) { if ('id' in item) {
that.items.push(Ox.MenuItem(Ox.extend(item, { that.items.push(Ox.MenuItem(Ox.extend(item, {
maxWidth: self.options.maxWidth,
menu: that, menu: that,
position: position = that.items.length position: position = that.items.length
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?; })).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;

View file

@ -32,6 +32,7 @@ Ox.MenuItem = function(options, self) {
id: '', id: '',
items: [], items: [],
keyboard: '', keyboard: '',
maxWidth: 0,
menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral? menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
position: 0, position: 0,
title: [], title: [],
@ -70,6 +71,7 @@ Ox.MenuItem = function(options, self) {
.append( .append(
that.$title = $('<td>', { that.$title = $('<td>', {
'class': 'OxCell OxTitle', 'class': 'OxCell OxTitle',
css: self.options.maxWidth ? {maxWidth: self.options.maxWidth} : {},
html: self.options.title[0] html: self.options.title[0]
}) })
) )