update css for classic theme
This commit is contained in:
Rolux
parent
da29507488
commit
9eb96ea54c
8 changed files with 417 additions and 47 deletions
|
|
@ -1498,7 +1498,93 @@ Ox.trim = function(str) { // is in jQuery
|
|||
"foo"
|
||||
*/
|
||||
return str.replace(/^\s+|\s+$/g, "");
|
||||
}
|
||||
};
|
||||
|
||||
Ox.truncate = function(str, len, pad, pos) {
|
||||
/*
|
||||
>>> Ox.truncate("anticonstitutionellement", 16, "...", "center")
|
||||
anticon...lement
|
||||
*/
|
||||
var pad = pad || {},
|
||||
pos = pos || "right",
|
||||
strlen = str.length,
|
||||
padlen = pad.length,
|
||||
left, right;
|
||||
if (strlen > len) {
|
||||
if (pos == "left") {
|
||||
str = pad + str.substr(padlen + strlen - len);
|
||||
} else if (pos == "center") {
|
||||
left = Math.ceil((len - padlen) / 2);
|
||||
right = Math.floor((len - padlen) / 2);
|
||||
str = str.substr(0, left) + pad + str.substr(-right);
|
||||
} else if (pos == "right") {
|
||||
str = str.substr(0, len - padlen) + pad;
|
||||
}
|
||||
}
|
||||
return str;
|
||||
};
|
||||
|
||||
Ox.wordwrap = function(str, len, sep, bal, spa) {
|
||||
/*
|
||||
>>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "<br/>"")
|
||||
Anticonstitutionellement, <br/>Paris s'eveille
|
||||
>>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 16, "<br/>")
|
||||
Anticonstitution<br />ellement, Paris <br/>s'eveille
|
||||
>>> Ox.wordwrap("These are short words", 16, "<br/>", true)
|
||||
These are <br/>short words
|
||||
*/
|
||||
var len = len || 80,
|
||||
sep = sep || "<br/>",
|
||||
bal = bal || false,
|
||||
spa = spa || true,
|
||||
words = str.split(" "),
|
||||
lines;
|
||||
if (bal) {
|
||||
// balance lines: test if same number of lines
|
||||
// can be achieved with a shorter line length
|
||||
lines = Ox.wordwrap(str, len, sep, false).split(sep);
|
||||
if (lines.length > 1) {
|
||||
// test shorter line, unless
|
||||
// that means cutting a word
|
||||
var max = Ox.max($.map(words, function(word) {
|
||||
return word.length;
|
||||
}));
|
||||
while (len > max) {
|
||||
len--;
|
||||
if (Ox.wordwrap(str, len, sep, false).split(sep).length > lines.length) {
|
||||
len++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
lines = [""];
|
||||
$.each(words, function(i, word) {
|
||||
if ((lines[lines.length - 1] + word + " ").length <= len + 1) {
|
||||
// word fits in current line
|
||||
lines[lines.length - 1] += word + " ";
|
||||
} else {
|
||||
if (word.length <= len) {
|
||||
// word fits in next line
|
||||
lines.push(word + " ");
|
||||
} else {
|
||||
// word is longer than line
|
||||
var chr = len - lines[lines.length - 1].length;
|
||||
lines[lines.length - 1] += word.substr(0, chr);
|
||||
for (var pos = chr; pos < word.length; pos += len) {
|
||||
lines.push(word.substr(pos, len));
|
||||
}
|
||||
lines[lines.length - 1] += " ";
|
||||
}
|
||||
}
|
||||
});
|
||||
if (!spa) {
|
||||
lines = $.map(lines, function(line) {
|
||||
return Ox.trim(line);
|
||||
});
|
||||
}
|
||||
return Ox.trim(lines.join(sep));
|
||||
};
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
|
|
|
|||
|
|
@ -2321,8 +2321,8 @@ requires
|
|||
})
|
||||
.options(options)
|
||||
.addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size));
|
||||
self.buttonId = self.options.id + "_button"
|
||||
self.groupId = self.options.id + "_group"
|
||||
self.buttonId = self.options.id + "_button";
|
||||
self.groupId = self.options.id; // + "_group"
|
||||
self.menuId = self.options.id + "_menu",
|
||||
|
||||
$.each(self.options.items, function(i, item) {
|
||||
|
|
@ -2398,6 +2398,177 @@ requires
|
|||
============================================================================
|
||||
*/
|
||||
|
||||
Ox.IconList = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
.defaults({
|
||||
id: "",
|
||||
item: function() {},
|
||||
keys: [],
|
||||
orientation: "both",
|
||||
request: function() {},
|
||||
size: 128,
|
||||
sort: [],
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
$.extend(self, {
|
||||
itemHeight: self.options.size * 1.5,
|
||||
itemWidth: self.options.size
|
||||
});
|
||||
|
||||
that.$element = new Ox.List({
|
||||
construct: constructItem,
|
||||
itemHeight: self.itemHeight,
|
||||
itemWidth: self.itemWidth,
|
||||
keys: $,
|
||||
orientation: "both",
|
||||
request: function() {},
|
||||
rowLength: 1,
|
||||
size: 128,
|
||||
type: "icon",
|
||||
}, self)
|
||||
.click(click)
|
||||
.dblclick(dblclick)
|
||||
.scroll(scroll);
|
||||
|
||||
function click() {
|
||||
|
||||
}
|
||||
|
||||
function constructItem(data) {
|
||||
var data = self.options.item(data, self.options.sort);
|
||||
return new Ox.IconItem($.extend(data, {
|
||||
size: self.options.size
|
||||
}));
|
||||
}
|
||||
|
||||
function dblclick() {
|
||||
|
||||
}
|
||||
|
||||
function scroll() {
|
||||
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
Ox.IconItem = function(options, self) {
|
||||
|
||||
var self = self || {}
|
||||
that = new Ox.Element({}, self)
|
||||
.defaults({
|
||||
height: 0,
|
||||
id: "",
|
||||
info: "",
|
||||
size: 128,
|
||||
title: "",
|
||||
width: 0,
|
||||
url: ""
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
$.extend(self, {
|
||||
height: self.options.size * 1.5,
|
||||
url: oxui.path + "/png/ox.ui." + Ox.theme() + "/icon.png",
|
||||
width: self.options.size + 4
|
||||
});
|
||||
|
||||
that.css({
|
||||
width: self.width + "px",
|
||||
height: self.height + "px"
|
||||
});
|
||||
that.$icon = $("<div>")
|
||||
.addClass("OxIcon")
|
||||
.css({
|
||||
top: self.options.size == 64 ? -70 : -128,
|
||||
width: self.options.size + "px",
|
||||
height: self.options.size + "px"
|
||||
});
|
||||
that.$iconImage = $("<img>")
|
||||
.attr({
|
||||
src: self.url
|
||||
})
|
||||
.css({
|
||||
width: iconWidth + "px",
|
||||
height: iconHeight + "px"
|
||||
})
|
||||
.mouseenter(mouseenter)
|
||||
.mouseleave(mouseleave)
|
||||
.one("load", function() {
|
||||
that.$iconImage.attr({
|
||||
src: self.options.url
|
||||
});
|
||||
});
|
||||
that.$textBox = $("<div>")
|
||||
.addClass("OxText")
|
||||
.css({
|
||||
top: (self.options.size / 2 + 2) + "px",
|
||||
width: self.width + "px",
|
||||
height: (self.options.size == 64 ? 38 : 58) + "px"
|
||||
})
|
||||
that.$text = $("<div>")
|
||||
.html(self.options.title + "<br/><span class=\"OxInfo\">" + self.options.info + "</span>")
|
||||
.mouseenter(mouseenter)
|
||||
.mouseleave(mouseleave)
|
||||
that.$reflection = $("<div>")
|
||||
.addClass("OxReflection")
|
||||
.css({
|
||||
top: (self.options.size + 2) + "px",
|
||||
width: self.options.size + "px",
|
||||
height: (self.options.size / 2) + "px"
|
||||
});
|
||||
that.$reflectionImage = $("<img>")
|
||||
.addClass("OxReflection")
|
||||
.attr({
|
||||
src: self.url
|
||||
})
|
||||
.css({
|
||||
width: self.options.width + "px",
|
||||
height: self.options.height + "px"
|
||||
})
|
||||
.one("load", function() {
|
||||
that.$reflectionImage.attr({
|
||||
src: self.options.url
|
||||
});
|
||||
});
|
||||
that.$gradient = $("<div>")
|
||||
.addClass("OxGradient")
|
||||
.css({
|
||||
top: (-self.options.size - 2) + "px"
|
||||
});
|
||||
|
||||
that.append(
|
||||
that.$reflection.append(
|
||||
that.$reflectionImage
|
||||
).append(
|
||||
that.$gradientImage
|
||||
)
|
||||
).append(
|
||||
that.$textBox.append(
|
||||
that.$text
|
||||
)
|
||||
).append(
|
||||
that.$icon.append(
|
||||
that.$iconImage
|
||||
)
|
||||
);
|
||||
|
||||
function mouseenter() {
|
||||
that.addClass("OxHover");
|
||||
}
|
||||
|
||||
function mouseleave() {
|
||||
that.removeClass("OxHover");
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
Ox.List = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
|
|
@ -2925,6 +3096,7 @@ requires
|
|||
});
|
||||
|
||||
that.$element = self.options.construct(self.options.data)
|
||||
.addClass("OxItem")
|
||||
.attr({
|
||||
id: self.options.id
|
||||
})
|
||||
|
|
@ -3114,7 +3286,6 @@ requires
|
|||
|
||||
function constructItem(data) {
|
||||
var $item = $("<div>")
|
||||
.addClass("OxItem")
|
||||
.css({
|
||||
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + "px"
|
||||
});
|
||||
|
|
@ -3139,6 +3310,9 @@ requires
|
|||
positions = $.map(self.visibleColumns, function(v, i) {
|
||||
return self.columnPositions[i] - self.columnPositions[startPos]
|
||||
});
|
||||
$(".OxColumn" + Ox.toTitleCase(id)).css({
|
||||
opacity: 0.1
|
||||
});
|
||||
that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work?
|
||||
cursor: "move"
|
||||
});
|
||||
|
|
@ -3176,6 +3350,9 @@ requires
|
|||
self.visibleColumns.splice(stopPos, 0, column);
|
||||
self.columnWidths.splice(stopPos, 0, width);
|
||||
Ox.print("s.vC", self.visibleColumns)
|
||||
$(".OxColumn" + Ox.toTitleCase(id)).css({
|
||||
opacity: 1
|
||||
});
|
||||
that.$titles[stopPos].removeClass("OxDrag").css({
|
||||
cursor: "pointer"
|
||||
});
|
||||
|
|
@ -4329,7 +4506,7 @@ requires
|
|||
})
|
||||
.options(options || {})
|
||||
.attr({
|
||||
src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png"
|
||||
src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png" // fixme: oxui.themePath needed?
|
||||
})
|
||||
.addClass(
|
||||
"OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue