improve InfoList

source/Ox.UI/css/Ox.UI.css

@@ -1012,26 +1012,18 @@ Lists
 }
 
 .OxIconList .OxItem > div,
-.OxInfoList .OxIcon > div {
+.OxInfoList .OxInfoIcon > div {
     position: relative;
 }
 
-.OxIconList .OxItem > .OxIcon,
+.OxIconList .OxItem > .OxIcon {
-.OxIconList .OxItem > .OxText,
-.OxInfoList .OxItem > .OxIcon,
-.OxInfoList .OxItem > .OxText {
-    //left: -2px;
-}
-
-.OxIconList .OxItem > .OxIcon,
-.OxInfoList .OxItem > .OxIcon {
     overflow: hidden;
 }
 
 .OxIconList .OxItem > .OxIcon > img,
 .OxIconList .OxItem > .OxIcon > .OxVideoPlayer,
-.OxInfoList .OxItem > .OxIcon > img,
+.OxInfoList .OxInfoIcon > .OxIcon > img,
-.OxInfoList .OxItem > .OxIcon > .OxVideoPlayer {
+.OxInfoList .OxInfoIcon > .OxIcon > .OxVideoPlayer {
     position: absolute;
     left: 0;
     right: 0;
@@ -1043,12 +1035,12 @@ Lists
 }
 
 .OxIconList .OxItem > .OxReflection,
-.OxInfoList .OxItem > .OxReflection {
+.OxIconList .OxInfoIcon > .OxReflection {
     overflow: hidden;
 }
 
 .OxIconList .OxItem > .OxReflection > div,
-.OxInfoList .OxItem > .OxReflection > div {
+.OxInfoList .OxInfoIcon > .OxReflection > div {
     position: absolute;
     left: 0;
     top: 0;
@@ -1057,7 +1049,7 @@ Lists
 }
 
 .OxIconList .OxItem > .OxReflection > img,
-.OxInfoList .OxItem > .OxReflection > img {
+.OxInfoList .OxInfoIcon > .OxReflection > img {
     position: absolute;
     left: 0;
     top: 0;
@@ -1066,11 +1058,11 @@ Lists
 }
 
 .OxIconList .OxItem > .OxText,
-.OxInfoList .OxItem > .OxText {
+.OxInfoList .OxInfoIcon > .OxText {
     text-align: center;
 }
 .OxIconList .OxItem > .OxText > div,
-.OxInfoList .OxItem > .OxText > div {
+.OxInfoList .OxInfoIcon > .OxText > div {
     display: inline-block;
     //font-size: 9px;
     font-weight: bold;
@@ -1085,12 +1077,20 @@ Lists
     //-webkit-user-select: text;
 }
 .OxIconList .OxItem > .OxText > div > div,
-.OxIconList .OxItem > .OxText > div > div > div {
+.OxIconList .OxInfoIcon > .OxText > div > div > div {
     //font-size: 9px;
     font-weight: bold;
     text-align: center;
 }
 
+.OxInfoList .OxInfoIcon {
+    text-align: center;
+    //overflow: hidden;
+}
+.OxInfoList .OxInfoIcon .OxReflection {
+    overflow: hidden;
+}
+
 
 .OxTextList {
     top: 0;

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -698,11 +698,6 @@ Ox.Calendar = function(options, self) {
             }
             self.lineEvents[line].push(event);            
         });
-        self.contentHeight = Math.max(
-            self.lineEvents.length * 16,
-            self.options.height // - 72 // 24 + 16 + 16 + 16
-        );
-        self.$content.css({height: self.contentHeight + 'px'});
     }
 
     function getMouseDate(e) {
@@ -892,6 +887,11 @@ Ox.Calendar = function(options, self) {
     }
 
     function renderCalendar() {
+        self.contentHeight = Math.max(
+            self.lineEvents.length * 16,
+            self.options.height // - 72 // 24 + 16 + 16 + 16
+        );
+        self.$content.css({height: self.contentHeight + 'px'});
         $('.OxBackground').empty();
         $('.OxEvent').remove();
         renderBackground();

source/Ox.UI/js/List/Ox.IconItem.js

@@ -31,6 +31,7 @@ Ox.IconItem = function(options, self) {
                 iconWidth: 128,
                 imageHeight: 128,
                 imageWidth: 128,
+                isInfoList: false,
                 itemHeight: 192,
                 itemWidth: 128,
                 id: '',
@@ -72,7 +73,8 @@ Ox.IconItem = function(options, self) {
     that.$icon = $('<div>')
         .addClass('OxIcon')
         .css({
-            top: self.options.iconWidth == 64 ? -64 : -124,
+            top: self.options._isInfoList
+                ? 0 : self.options.iconWidth == 64 ? -64 : -124,
             width: (self.options.iconWidth + 4) + 'px',
             height: (self.options.iconHeight + 4) + 'px'
         });
@@ -93,7 +95,9 @@ Ox.IconItem = function(options, self) {
     that.$textBox = $('<div>')
         .addClass('OxText')
         .css({
-            top: self.options.iconHeight - self.options.itemWidth / 2 + 'px',
+            top: self.options._isInfoList
+                ? self.options.iconHeight
+                : self.options.iconHeight - self.options.itemWidth / 2 + 'px',
             width: self.options.itemWidth + 4 + 'px',
             height: (self.options.itemWidth == 64 ? 30 : 58) + 'px'
         });

source/Ox.UI/js/List/Ox.IconList.js

@@ -76,7 +76,7 @@ Ox.IconList = function(options, self) {
             sort: self.options.sort,
             type: 'icon',
             unique: self.options.unique
-        }, Ox.extend({}, self)) // pass event handler
+        }, Ox.clone(self)) // pass event handler
         .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
         .bindEvent({
             select: function() {

source/Ox.UI/js/List/Ox.InfoList.js

@@ -39,8 +39,13 @@ Ox.InfoList = function(options, self) {
             sort: self.options.sort,
             type: 'info',
             unique: self.options.unique
-        })
+        }, Ox.clone(self))
-        .addClass('OxInfoList');
+        .addClass('OxInfoList')
+        .bindEvent({
+            select: function() {
+                self.options.selected = that.$element.options('selected');
+            }
+        });
 
     updateKeys();
 
@@ -64,10 +69,10 @@ Ox.InfoList = function(options, self) {
         var $icon = Ox.Element()
                 .css({
                     float: 'left',
-                    width: '128px',
+                    width: '132px',
-                    height: '192px',
+                    height: '194px',
-                    margin: '4px',
+                    margin: '2px',
-                    background: 'rgba(255, 255, 255, 0.1)'
+                    //background: 'blue'
                 })
                 .append(
                     Ox.IconItem(Ox.extend(data.icon, {
@@ -76,10 +81,11 @@ Ox.InfoList = function(options, self) {
                             iconWidth: 128, //self.iconWidth,
                             imageHeight: data.height,
                             imageWidth: data.width,
+                            isInfoList: true,
                             itemHeight: self.itemHeight,
                             itemWidth: 128,
                         }))
-                        .addClass('OxIcon')
+                        .addClass('OxInfoIcon')
                         .css({
                             position: 'absolute'
                         })
@@ -89,7 +95,8 @@ Ox.InfoList = function(options, self) {
                     float: 'left',
                     width: getItemWidth() - 152 + 'px',
                     height: '192px',
-                    margin: '4px'
+                    margin: '4px',
+                    //background: 'green'
                 }),
             $infobox = Ox.Element()
                 .css({
@@ -103,7 +110,8 @@ Ox.InfoList = function(options, self) {
                 .css({
                     width: getItemWidth() - 8 + 'px',
                     height: 192 + 'px',
-                    margin: '4px'
+                    margin: '4px',
+                    //background: 'red'
                 })
                 .append($icon)
                 .append($info);
@@ -153,10 +161,6 @@ Ox.InfoList = function(options, self) {
                 $parent.parent().css({width: width - 152});
                 $parent.parent().parent().css({width: width - 8});
                 Ox.print('@@@', this.className, id)
-                Ox.print('@@@', this.className, id)
-                Ox.print('@@@', this.className, id)
-                Ox.print('@@@', this.className, id)
-                Ox.print('@@@', this.className, id)
                 Ox.UI.elements[id].options({width: width - 152});
             });
         }
@@ -167,6 +171,47 @@ Ox.InfoList = function(options, self) {
         return that;
     };
 
+    that.paste = function(data) {
+        that.$element.paste(data);
+        return that;
+    };
+
+    that.reloadList = function() {
+        that.$element.reloadList();
+        return that;
+    };
+
+    that.scrollToSelection = function() {
+        that.$element.scrollToSelection();
+        return that;
+    };
+
+    that.size = function() {
+        that.$element.size();
+    };
+
+    that.sortList = function(key, operator) {
+        self.options.sort = [{
+            key: key,
+            operator: operator
+        }];
+        updateKeys();
+        that.$element.sortList(key, operator);
+        return that;
+    };
+
+    that.value = function(id, key, value) {
+        // fixme: make this accept id, {k: v, ...}
+        if (arguments.length == 1) {
+            return that.$element.value(id);
+        } else if (arguments.length == 2) {
+            return that.$element.value(id, key);
+        } else {
+            that.$element.value(id, key, value);
+            return that;
+        }
+    };
+
     return that;
 
 };

source/Ox.UI/js/Panel/Ox.SplitPanel.js

@@ -25,6 +25,8 @@ Ox.SplitPanel <f:Ox.Element> SpliPanel Object
 
 Ox.SplitPanel = function(options, self) {
 
+    // fixme: doubleclick on resizebar should reset to initial size
+
     self = self || {};
     var that = Ox.Element({}, self) // fixme: Container?
             .defaults({

source/Ox.UI/themes/modern/css/modern.css

@@ -328,47 +328,55 @@ Lists
 */
 
 .OxThemeModern .OxIconList .OxItem > .OxIcon > img.OxLoading,
-.OxThemeModern .OxInfoList .OxItem > .OxIcon > img.OxLoading {
+.OxThemeModern .OxInfoList .OxItem .OxIcon > img.OxLoading {
     border-color: rgb(48, 48, 48);
     background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
     background: -o-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
     background: -webkit-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
 }
 .OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon > img,
-.OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon > .OxVideoPlayer {
+.OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon > .OxVideoPlayer,
+.OxThemeModern .OxInfoList .OxItem.OxSelected .OxIcon > img,
+.OxThemeModern .OxInfoList .OxItem.OxSelected .OxIcon > .OxVideoPlayer {
     border-color: rgb(64, 64, 64);
     -moz-box-shadow: 0 0 4px rgba(64, 64, 64, 1);
     -o-box-shadow: 0 0 4px rgba(64, 64, 64, 1);
     -webkit-box-shadow: 0 0 4px rgba(64, 64, 64, 1);
 }
 .OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon > img,
-.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon .OxVideoPlayer {
+.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon .OxVideoPlayer,
+.OxThemeModern .OxInfoList.OxFocus .OxItem.OxSelected .OxIcon > img,
+.OxThemeModern .OxInfoList.OxFocus .OxItem.OxSelected .OxIcon .OxVideoPlayer {
     border-color: rgb(128, 128, 128);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -o-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
 }
-.OxThemeModern .OxIconList .OxItem > .OxText > div {
+.OxThemeModern .OxIconList .OxItem > .OxText > div,
+.OxThemeModern .OxInfoList .OxItem .OxText > div {
     text-shadow: rgb(0, 0, 0) -1px -1px 0,
         rgb(0, 0, 0) -1px 1px 0,
         rgb(0, 0, 0) 1px -1px 0,
         rgb(0, 0, 0) 1px 1px 0;
 }
-.OxThemeModern .OxIconList .OxItem.OxSelected > .OxText > div {
+.OxThemeModern .OxIconList .OxItem.OxSelected > .OxText > div,
+.OxThemeModern .OxInfoList .OxItem.OxSelected .OxText > div {
     border-color: rgb(64, 64, 64);
     background: rgba(64, 64, 64, 0.5);
     -moz-box-shadow: 0 0 4px rgba(64, 64, 64, 1);
     -o-box-shadow: 0 0 4px rgba(64, 64, 64, 1);
     -webkit-box-shadow: 0 0 4px rgba(64, 64, 64, 1);
 }
-.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxText > div {
+.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxText > div,
+.OxThemeModern .OxInfoList.OxFocus .OxItem.OxSelected .OxText > div {
     border-color: rgb(128, 128, 128);
     background: rgba(128, 128, 128, 0.5);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -o-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
 }
-.OxThemeModern .OxIconList .OxItem > .OxText > div > .OxInfo {
+.OxThemeModern .OxIconList .OxItem > .OxText > div > .OxInfo,
+.OxThemeModern .OxInfoList .OxItem .OxText > div > .OxInfo {
     color: rgb(128, 128, 128);
 }