From 95f3d536ec1020fd1b757a2b988c0aad4897e333 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sun, 16 Oct 2011 12:32:02 +0000 Subject: [PATCH] improve InfoList --- source/Ox.UI/css/Ox.UI.css | 36 ++++++------ source/Ox.UI/js/Calendar/Ox.Calendar.js | 10 ++-- source/Ox.UI/js/List/Ox.IconItem.js | 8 ++- source/Ox.UI/js/List/Ox.IconList.js | 2 +- source/Ox.UI/js/List/Ox.InfoList.js | 71 ++++++++++++++++++----- source/Ox.UI/js/Panel/Ox.SplitPanel.js | 2 + source/Ox.UI/themes/modern/css/modern.css | 22 ++++--- 7 files changed, 105 insertions(+), 46 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 4aa5baf3..67f8a595 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/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 > .OxText, -.OxInfoList .OxItem > .OxIcon, -.OxInfoList .OxItem > .OxText { - //left: -2px; -} - -.OxIconList .OxItem > .OxIcon, -.OxInfoList .OxItem > .OxIcon { +.OxIconList .OxItem > .OxIcon { overflow: hidden; } .OxIconList .OxItem > .OxIcon > img, .OxIconList .OxItem > .OxIcon > .OxVideoPlayer, -.OxInfoList .OxItem > .OxIcon > img, -.OxInfoList .OxItem > .OxIcon > .OxVideoPlayer { +.OxInfoList .OxInfoIcon > .OxIcon > img, +.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; diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index 50d0369d..c163b758 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/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(); diff --git a/source/Ox.UI/js/List/Ox.IconItem.js b/source/Ox.UI/js/List/Ox.IconItem.js index 87bb24b4..4f7faf25 100644 --- a/source/Ox.UI/js/List/Ox.IconItem.js +++ b/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 = $('
') .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 = $('
') .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' }); diff --git a/source/Ox.UI/js/List/Ox.IconList.js b/source/Ox.UI/js/List/Ox.IconList.js index b4d7b284..8b7ee512 100644 --- a/source/Ox.UI/js/List/Ox.IconList.js +++ b/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() { diff --git a/source/Ox.UI/js/List/Ox.InfoList.js b/source/Ox.UI/js/List/Ox.InfoList.js index f10dc424..2a28fecb 100644 --- a/source/Ox.UI/js/List/Ox.InfoList.js +++ b/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 - }) - .addClass('OxInfoList'); + }, Ox.clone(self)) + .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', - height: '192px', - margin: '4px', - background: 'rgba(255, 255, 255, 0.1)' + width: '132px', + height: '194px', + margin: '2px', + //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; }; \ No newline at end of file diff --git a/source/Ox.UI/js/Panel/Ox.SplitPanel.js b/source/Ox.UI/js/Panel/Ox.SplitPanel.js index b2476274..89d6fb38 100644 --- a/source/Ox.UI/js/Panel/Ox.SplitPanel.js +++ b/source/Ox.UI/js/Panel/Ox.SplitPanel.js @@ -25,6 +25,8 @@ Ox.SplitPanel 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({ diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index f5c776dd..3ff3e0a9 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/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); }