")
+ .addClass("OxText")
+ .css({
+ top: (self.options.size / 2 + 2) + "px",
+ width: self.width + "px",
+ height: (self.options.size == 64 ? 38 : 58) + "px"
+ })
+ that.$text = $("
")
+ .html(self.options.title + "
" + self.options.info + "") + .mouseenter(mouseenter) + .mouseleave(mouseleave) + that.$reflection = $("
" + self.options.info + "") + .mouseenter(mouseenter) + .mouseleave(mouseleave) + that.$reflection = $("
")
+ .addClass("OxReflection")
+ .css({
+ top: (self.options.size + 2) + "px",
+ width: self.options.size + "px",
+ height: (self.options.size / 2) + "px"
+ });
+ that.$reflectionImage = $("![]()
")
+ .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 = $("
")
+ .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 = $("
")
- .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)
diff --git a/build/png/ox.ui.classic/scrollbarHorizontalDecrement.png b/build/png/ox.ui.classic/scrollbarHorizontalDecrement.png
new file mode 100644
index 00000000..3dfec1cb
Binary files /dev/null and b/build/png/ox.ui.classic/scrollbarHorizontalDecrement.png differ
diff --git a/build/png/ox.ui.classic/scrollbarHorizontalIncrement.png b/build/png/ox.ui.classic/scrollbarHorizontalIncrement.png
new file mode 100644
index 00000000..bb62a3b2
Binary files /dev/null and b/build/png/ox.ui.classic/scrollbarHorizontalIncrement.png differ
diff --git a/demos/test/list.js b/demos/test/list.js
index c7afdcdb..b5861507 100644
--- a/demos/test/list.js
+++ b/demos/test/list.js
@@ -198,6 +198,34 @@ $(function() {
]
}),
+ $iconList = new Ox.IconList({
+ id: "list",
+ item: function(data, sort) {
+ return {
+ height: data["posterHeight"],
+ id: data["id"],
+ info: data[$.inArray(sort[0].key, ["title", "director"]) > -1 ? "year" : sort[0].key],
+ title: data["title"] + " (" + data["director"] + ")",
+ url: data["posterURL"],
+ width: data["posterWidth"]
+ };
+ },
+ keys: ["director", "id", "posterHeight", "posterWidth", "posterURL", "title"],
+ request: function(options) {
+ app.request("find", $.extend(options, {
+ query: constructQuery()
+ }), options.callback);
+ },
+ size: 128,
+ sort: [
+ {
+ key: "director",
+ operator: "+"
+ }
+ ],
+ unique: "id"
+ }),
+
$toolBar = Ox.Bar({
size: 24
}),
@@ -231,23 +259,23 @@ $(function() {
title: "View with Timelines"
},
{
- id: "timelines",
+ id: "maps",
title: "View with Maps"
},
{
- id: "timelines",
+ id: "calendars",
title: "View with Calendars"
},
{
- id: "timelines",
+ id: "clip",
title: "View as Clips"
},
{
- id: "timelines",
+ id: "map",
title: "View on Map"
},
{
- id: "timelines",
+ id: "calendar",
title: "View on Calendar"
},
]
@@ -441,6 +469,12 @@ $(function() {
$loadingIcon.stop();
});
+ Ox.Event.bind(null, "change_viewSelect", function(event, data) {
+ if (data.id == "icons") {
+ $list.replaceWith($iconList);
+ }
+ });
+
Ox.Event.bind(null, "submit_find", function(event, data) {
findCondition = {
key: data.key == "all" ? "" : data.key,
@@ -503,7 +537,6 @@ $(function() {
});
Ox.Event.bind(null, "load_list", function(event, data) {
- Ox.print("data", data)
var html = [
data.items + " movie" + (data.items != 1 ? "s" : ""),
Ox.formatDuration(data.runtime, "long"),