update css for classic theme

build/css/ox.ui.classic.css

@@ -120,6 +120,58 @@ Forms
     background: rgb(208, 208, 208);
 }
 
+/*
+================================================================================
+Lists
+================================================================================
+*/
+
+.OxThemeClassic .OxTextList .OxItem .OxCell {
+    border-right: 1px solid rgb(224, 224, 224);
+}
+.OxThemeClassic .OxTextList .OxItem:nth-child(odd) {
+    background: rgb(242, 242, 242);
+}
+.OxThemeClassic .OxTextList .OxItem:nth-child(even) {
+    background: rgb(238, 238, 238);
+}
+.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(odd) {
+    background: rgb(226, 226, 226);
+}
+.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(even) {
+    background: rgb(222, 222, 222);
+}
+.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) {
+    background: rgb(194, 194, 194);
+}
+.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
+    background: rgb(190, 190, 190);
+}
+.OxThemeClassic .OxTextList .OxBar .OxSelected {
+    background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(160, 160, 160)), color-stop(1, rgb(128, 128, 128)));
+    color: rgb(0, 0, 0);
+}
+.OxThemeClassic .OxTextList .OxBar .OxOrder {
+    color: rgb(0, 0, 0);
+}
+.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter {
+    background: rgb(232, 232, 232);
+}
+.OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {
+    border-right: 1px solid rgb(232, 232, 232);
+}
+.OxThemeClassic .OxTextList .OxItem.OxSelected .OxCell {
+    border-right: 1px solid rgb(216, 216, 216);
+}
+.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected .OxCell {
+    border-right: 1px solid rgb(184, 184, 184);
+    color: rgb(0, 0, 0);
+}
+.OxThemeClassic .OxTextList .OxBody .OxItem .OxLine {
+    background: rgb(232, 232, 232);
+}
+
 /*
 ================================================================================
 Menus
@@ -163,16 +215,21 @@ Scrollbars
 ================================================================================
 */
 
-.OxThemeClassic ::-webkit-scrollbar {
+.OxThemeClassic ::-webkit-scrollbar:horizontal {
-    width: 12px;
+    border-top: 1px solid rgb(176, 176, 176);
-    height: 12px;
+    border-bottom: 1px solid rgb(176, 176, 176);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+}
+.OxThemeClassic ::-webkit-scrollbar:vertical {
     border-left: 1px solid rgb(176, 176, 176);
     border-right: 1px solid rgb(176, 176, 176);
     background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
 }
-.OxThemeClassic ::-webkit-scrollbar-button {
+.OxThemeClassic ::-webkit-scrollbar-button:horizontal:decrement {
-    width: 12px;
+    background: url(../png/ox.ui.classic/scrollbarHorizontalDecrement.png);
-    height: 12px;
+}
+.OxThemeClassic ::-webkit-scrollbar-button:horizontal:increment {
+    background: url(../png/ox.ui.classic/scrollbarHorizontalIncrement.png);
 }
 .OxThemeClassic ::-webkit-scrollbar-button:vertical:decrement {
     background: url(../png/ox.ui.classic/scrollbarVerticalDecrement.png);
@@ -180,26 +237,30 @@ Scrollbars
 .OxThemeClassic ::-webkit-scrollbar-button:vertical:increment {
     background: url(../png/ox.ui.classic/scrollbarVerticalIncrement.png);
 }
-.OxThemeClassic ::-webkit-scrollbar-thumb:vertical {
+.OxThemeClassic ::-webkit-scrollbar-corner {
+    border-right: 1px solid rgb(176, 176, 176);
+    border-bottom: 1px solid rgb(176, 176, 176);
+    background: -webkit-gradient(linear, left top, right bottom, from(rgb(224, 224, 224)), to(rgb(160, 160, 160)));
+}
+.OxThemeClassic ::-webkit-scrollbar-thumb {
     border: 1px solid rgb(176, 176, 176);
+}
+.OxThemeClassic ::-webkit-scrollbar-thumb:horizontal {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+}
+.OxThemeClassic ::-webkit-scrollbar-thumb:vertical {
     background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
-    -webkit-border-radius: 6px;
+}
+.OxThemeClassic ::-webkit-scrollbar-track {
+    border: 1px solid rgb(176, 176, 176);
+}
+.OxThemeClassic ::-webkit-scrollbar-track:horizontal {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
 }
 .OxThemeClassic ::-webkit-scrollbar-track:vertical {
-    border: 1px solid rgb(176, 176, 176);
+    background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
-    background-image: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
-    -webkit-border-radius: 6px;
 }
 .OxThemeClassic ::-webkit-scrollbar:active,
-.OxThemeClassic ::-webkit-scrollbar-thumb:vertical:active {
+.OxThemeClassic ::-webkit-scrollbar-thumb:active {
-    background: rgb(192, 192, 192);
+    background: rgb(64, 64, 64);
-}
-body {
-    scrollbar-face-color: #808080; /*/ obviously change this to whatever you want /*/
-    scrollbar-arrow-color: #FFFFFF;
-    scrollbar-highlight-color: #FFFBF0;
-    scrollbar-3dlight-color: #808080;
-    scrollbar-shadow-color: #FFFBF0;
-    scrollbar-darkshadow-color: #808080;
-    scrollbar-track-color: #CCCCCC;
 }

build/css/ox.ui.css

@@ -138,6 +138,16 @@ Dialog
     cursor: se-resize;
 }
 
+/*
+================================================================================
+Drag & Drop
+================================================================================
+*/
+
+.OxDrag {
+    cursor: move;
+}
+
 /*
 ================================================================================
 Forms
@@ -878,10 +888,23 @@ Requests
 
 /*
 ================================================================================
-Drag & Drop
+Scrollbars
 ================================================================================
 */
 
-.OxDrag {
+::-webkit-scrollbar {
-    cursor: move;
+    width: 12px;
-}
+    height: 12px;
+}
+::-webkit-scrollbar-button {
+    width: 12px;
+    height: 12px;
+}
+::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 6px;
+}
+::-webkit-scrollbar-track {
+    -webkit-border-radius: 6px;
+}
+
+

build/css/ox.ui.modern.css

@@ -185,10 +185,6 @@ Scrollbars
 ================================================================================
 */
 
-.OxThemeModern ::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-}
 .OxThemeModern ::-webkit-scrollbar:horizontal {
     border-top: 1px solid rgb(48, 48, 48);
     border-bottom: 1px solid rgb(48, 48, 48);
@@ -199,10 +195,6 @@ Scrollbars
     border-right: 1px solid rgb(48, 48, 48);
     background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
 }
-.OxThemeModern ::-webkit-scrollbar-button {
-    width: 12px;
-    height: 12px;
-}
 .OxThemeModern ::-webkit-scrollbar-button:horizontal:decrement {
     background: url(../png/ox.ui.modern/scrollbarHorizontalDecrement.png);
 }
@@ -222,7 +214,6 @@ Scrollbars
 }
 .OxThemeModern ::-webkit-scrollbar-thumb {
     border: 1px solid rgb(48, 48, 48);
-    -webkit-border-radius: 6px;
 }
 .OxThemeModern ::-webkit-scrollbar-thumb:horizontal {
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
@@ -232,7 +223,6 @@ Scrollbars
 }
 .OxThemeModern ::-webkit-scrollbar-track {
     border: 1px solid rgb(32, 32, 32);
-    -webkit-border-radius: 6px;
 }
 .OxThemeModern ::-webkit-scrollbar-track:horizontal {
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));

build/js/ox.js

@@ -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));    
+};
 
 /*
 ================================================================================

build/js/ox.ui.js

@@ -2321,8 +2321,8 @@ requires
                 })
                 .options(options)
                 .addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size));
-        self.buttonId = self.options.id + "_button"
+        self.buttonId = self.options.id + "_button";
-        self.groupId = self.options.id + "_group"
+        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)

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"),