0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

improve InfoList

Browse source
This commit is contained in:
rlx 2011-10-16 12:32:02 +00:00
parent 1a4332c49c
commit 95f3d536ec
7 changed files with 105 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
source/Ox.UI/css/Ox.UI.css
View file

@ -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;

10
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -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();

8
source/Ox.UI/js/List/Ox.IconItem.js
View file

@ -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'
});

2
source/Ox.UI/js/List/Ox.IconList.js
View file

@ -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() {

71
source/Ox.UI/js/List/Ox.InfoList.js
View file

@ -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;
};

2
source/Ox.UI/js/Panel/Ox.SplitPanel.js
View file

@ -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({

22
source/Ox.UI/themes/modern/css/modern.css
View file

@ -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);
}