more better icon view
This commit is contained in:
rolux
parent
87cba1090c
commit
618cbada78
5 changed files with 259 additions and 42 deletions
|
|
@ -165,6 +165,29 @@ Lists
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxThemeClassic .OxIconList .OxItem > .OxReflection > div {
|
||||
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 1));
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.5)), color-stop(1, rgba(240, 240, 240, 1)));
|
||||
}
|
||||
.OxThemeClassic .OxIconList .OxItem.OxSelected > .OxIcon img {
|
||||
border-color: rgb(128, 128, 128);
|
||||
-moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
|
||||
-webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
|
||||
}
|
||||
.OxThemeClassic .OxIconList .OxItem > .OxText > div {
|
||||
text-shadow: rgb(255, 255, 255) 1px 1px 0;
|
||||
}
|
||||
.OxThemeClassic .OxIconList .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);
|
||||
-webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
|
||||
}
|
||||
.OxThemeModern .OxIconList .OxItem > .OxText > div > .OxInfo {
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
|
||||
.OxThemeClassic .OxTextList .OxItem .OxCell {
|
||||
border-right: 1px solid rgb(224, 224, 224);
|
||||
}
|
||||
|
|
@ -187,19 +210,22 @@ Lists
|
|||
background: rgb(206, 206, 206);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar {
|
||||
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxSelected {
|
||||
background: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(240, 240, 240)), to(rgb(208, 208, 208)));
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxSelected {
|
||||
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
||||
//color: rgb(0, 0, 0);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxOrder {
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter {
|
||||
background: rgb(176, 176, 176);
|
||||
background: rgb(192, 192, 192);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBar .OxSelect {
|
||||
border-color: rgb(192, 192, 192);
|
||||
}
|
||||
.OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {
|
||||
border-right: 1px solid rgb(232, 232, 232);
|
||||
|
|
|
|||
|
|
@ -669,28 +669,74 @@ Lists
|
|||
}
|
||||
|
||||
.OxIconList .OxPage {
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem {
|
||||
float: left;
|
||||
margin: 4px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.OxIconList .OxItem.OxHover,
|
||||
.OxIconList .OxItem.OxSelected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxIcon > img {
|
||||
.OxIconList .OxItem > .OxIcon img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
.OxIconList .OxItem > .OxReflection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxReflection > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxReflection > img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-transform: scaleY(-1);
|
||||
-webkit-transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxText {
|
||||
text-align: center;
|
||||
}
|
||||
.OxIconList .OxItem > .OxText > div {
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 1px 2px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
max-width: 120px;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
//-moz-user-select: text;
|
||||
//-webkit-user-select: text;
|
||||
}
|
||||
|
||||
.OxTextList .OxCell {
|
||||
|
|
@ -777,7 +823,6 @@ Lists
|
|||
width: 10px;
|
||||
height: 16px;
|
||||
border-width: 0 1px 0 1px;
|
||||
border-color: rgb(32, 32, 32);
|
||||
background: rgba(0, 0, 0, 0);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -146,6 +146,29 @@ Lists
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxThemeModern .OxIconList .OxItem > .OxReflection > div {
|
||||
background: -moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1));
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(16, 16, 16, 0.5)), color-stop(1, rgba(16, 16, 16, 1)));
|
||||
}
|
||||
.OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon img {
|
||||
border-color: rgb(128, 128, 128);
|
||||
-moz-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 {
|
||||
text-shadow: rgb(0, 0, 0) 1px 1px 0;
|
||||
}
|
||||
.OxThemeModern .OxIconList .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);
|
||||
-webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
|
||||
}
|
||||
.OxThemeModern .OxIconList .OxItem > .OxText > div > .OxInfo {
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
|
||||
.OxThemeModern .OxTextList .OxItem .OxCell {
|
||||
border-right: 1px solid rgb(32, 32, 32);
|
||||
}
|
||||
|
|
@ -178,6 +201,9 @@ Lists
|
|||
.OxThemeModern .OxTextList .OxBar .OxResize .OxCenter {
|
||||
background: rgb(24, 24, 24);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBar .OxSelect {
|
||||
border-color: rgb(24, 24, 24);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBody .OxItem .OxCell {
|
||||
border-right: 1px solid rgb(24, 24, 24);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -458,6 +458,18 @@ Ox.sum = function(obj) {
|
|||
return sum;
|
||||
};
|
||||
|
||||
Ox.unique = function(arr) {
|
||||
/*
|
||||
>>> Ox.unique([1, 2, 3, 1])
|
||||
[1, 2, 3]
|
||||
*/
|
||||
var unique = [];
|
||||
$.each(arr, function(i, v) {
|
||||
unique.indexOf(v) == -1 && unique.push(v);
|
||||
});
|
||||
return unique;
|
||||
};
|
||||
|
||||
Ox.unserialize = function(str) {
|
||||
var arr, obj = {};
|
||||
Ox.each(str.split("&"), function(i, v) {
|
||||
|
|
@ -1722,7 +1734,7 @@ Ox.wordwrap = function(str, len, sep, bal, spa) {
|
|||
var len = len || 80,
|
||||
sep = sep || "<br/>",
|
||||
bal = bal || false,
|
||||
spa = spa || true,
|
||||
spa = Ox.isUndefined(spa) ? true : spa,
|
||||
words = str.split(" "),
|
||||
lines;
|
||||
if (bal) {
|
||||
|
|
|
|||
|
|
@ -5635,10 +5635,10 @@ requires
|
|||
itemHeight: self.itemHeight,
|
||||
itemWidth: self.itemWidth,
|
||||
keys: 'foo',
|
||||
orientation: 'both',
|
||||
orientation: self.options.orientation,
|
||||
keys: self.options.keys,
|
||||
request: self.options.request,
|
||||
rowLength: 1,
|
||||
rowLength: 4,
|
||||
size: 128,
|
||||
type: 'icon',
|
||||
}/*, self*/)
|
||||
|
|
@ -5685,7 +5685,7 @@ requires
|
|||
width: 0,
|
||||
url: ''
|
||||
})
|
||||
.options(options || {});
|
||||
.options(options || {})
|
||||
|
||||
Ox.print('IconItem', options);
|
||||
|
||||
|
|
@ -5702,7 +5702,7 @@ requires
|
|||
that.$icon = $('<div>')
|
||||
.addClass('OxIcon')
|
||||
.css({
|
||||
top: self.options.size == 64 ? -70 : -128,
|
||||
top: self.options.size == 64 ? -70 : -120,
|
||||
width: self.options.size + 'px',
|
||||
height: self.options.size + 'px'
|
||||
});
|
||||
|
|
@ -5711,59 +5711,66 @@ requires
|
|||
src: self.options.url
|
||||
})
|
||||
.css({
|
||||
//width: self.options.size + 'px',
|
||||
//height: self.options.size + 'px'
|
||||
width: self.options.width + 'px',
|
||||
height: self.options.height + 'px'
|
||||
})
|
||||
.mouseenter(mouseenter)
|
||||
.mouseleave(mouseleave)
|
||||
.one('load', function() {
|
||||
/*
|
||||
.load(function() {
|
||||
that.$iconImage.attr({
|
||||
src: self.options.url
|
||||
});
|
||||
})
|
||||
Ox.print('width:', that.$iconImage[0].width);
|
||||
});
|
||||
*/
|
||||
that.$textBox = $('<div>')
|
||||
.addClass('OxText')
|
||||
.css({
|
||||
top: (self.options.size / 2 + 2) + 'px',
|
||||
width: self.width + 'px',
|
||||
top: (self.options.size / 2) + 'px',
|
||||
width: self.options.size + 'px',
|
||||
height: (self.options.size == 64 ? 38 : 58) + 'px'
|
||||
})
|
||||
that.$text = $('<div>')
|
||||
.html(self.options.title + '<br/><span class="OxInfo">' + self.options.info + '</span>')
|
||||
.html(
|
||||
formatTitle(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',
|
||||
top: self.options.size + 'px',
|
||||
width: self.options.size + 'px',
|
||||
height: (self.options.size / 2) + 'px'
|
||||
});
|
||||
that.$reflectionImage = $('<img>')
|
||||
.addClass('OxReflection')
|
||||
.attr({
|
||||
src: /*self.url*/self.options.url
|
||||
src: self.options.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'
|
||||
//top: (-self.options.size / 2) + 'px',
|
||||
width: self.options.width + 'px',
|
||||
height: (self.options.size / 2) + 'px'
|
||||
});
|
||||
|
||||
that.append(
|
||||
that.$reflection.append(
|
||||
that.$reflectionImage
|
||||
).append(
|
||||
that.$gradientImage
|
||||
that.$gradient
|
||||
)
|
||||
).append(
|
||||
that.$textBox.append(
|
||||
|
|
@ -5775,12 +5782,28 @@ requires
|
|||
)
|
||||
);
|
||||
|
||||
function formatTitle(title) {
|
||||
var lines = Ox.wordwrap(title, 23, '<br/>', true, false).split('<br/>');
|
||||
return $.map(lines, function(line, i) {
|
||||
if (i < 3) {
|
||||
return line;
|
||||
} else if (i == 3) {
|
||||
return lines.length == 4 ? line : Ox.truncate($.map(lines, function(line, i) {
|
||||
return i < 3 ? null : line;
|
||||
}).join(' '), 23, '...', 'center');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}).join('<br/>');
|
||||
}
|
||||
|
||||
function mouseenter() {
|
||||
Ox.print('mouseenter');
|
||||
that.addClass('OxHover');
|
||||
}
|
||||
|
||||
function mouseleave() {
|
||||
that.removeClass('OxHover');
|
||||
//that.removeClass('OxHover');
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
@ -5813,6 +5836,7 @@ requires
|
|||
$pages: [],
|
||||
clickTimeout: 0,
|
||||
ids: {},
|
||||
itemMargin: self.options.type == 'text' ? 0 : 8,
|
||||
keyboardEvents: {
|
||||
key_alt_control_a: invertSelection,
|
||||
key_control_a: selectAll,
|
||||
|
|
@ -5829,15 +5853,29 @@ requires
|
|||
requests: [],
|
||||
selected: []
|
||||
});
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'left' : 'up')] = selectPrevious;
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'right' : 'down')] = selectNext;
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_left' : 'shift_up')] = addPreviousToSelection;
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_right' : 'shift_down')] = addNextToSelection;
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')] = selectPrevious;
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'down' : 'right')] = selectNext;
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_up' : 'shift_left')] = addPreviousToSelection;
|
||||
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_down' : 'shift_right')] = addNextToSelection;
|
||||
if (self.options.orientation == 'both') {
|
||||
self.keyboardEvents['key_down'] = selectBelow;
|
||||
self.keyboardEvents['key_up'] = selectAbove;
|
||||
self.keyboardEvents['key_shift_down'] = addBelowToSelection;
|
||||
self.keyboardEvents['key_shift_up'] = addAboveToSelection;
|
||||
}
|
||||
|
||||
updateQuery();
|
||||
Ox.print('s.o', self.options)
|
||||
that.addEvent(self.keyboardEvents);
|
||||
|
||||
function addAboveToSelection() {
|
||||
var pos = getAbove();
|
||||
if (pos > -1) {
|
||||
addToSelection(pos);
|
||||
scrollTo(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function addAllToSelection(pos) {
|
||||
var arr,
|
||||
len = self.$items.length;
|
||||
|
|
@ -5873,6 +5911,14 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function addBelowToSelection() {
|
||||
var pos = getBelow();
|
||||
if (pos > -1) {
|
||||
addToSelection(pos);
|
||||
scrollTo(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function addNextToSelection() {
|
||||
var pos = getNext();
|
||||
if (pos > -1) {
|
||||
|
|
@ -5897,6 +5943,11 @@ requires
|
|||
}
|
||||
Ox.print('addToSelection')
|
||||
triggerSelectEvent();
|
||||
} else {
|
||||
// allow for 'cursor navigation' if orientation == 'both'
|
||||
self.selected.splice(self.selected.indexOf(pos), 1);
|
||||
self.selected.push(pos);
|
||||
Ox.print('self.selected', self.selected)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -5978,6 +6029,29 @@ requires
|
|||
return $item;
|
||||
}
|
||||
|
||||
function getAbove() {
|
||||
var pos = -1;
|
||||
if (self.selected.length) {
|
||||
pos = self.selected[self.selected.length - 1] - getRowLength(); // fixme: need self.rowLength
|
||||
Ox.print(getRowLength(), getWidth())
|
||||
if (pos < 0) {
|
||||
pos = -1;
|
||||
}
|
||||
}
|
||||
return pos;
|
||||
}
|
||||
|
||||
function getBelow() {
|
||||
var pos = -1;
|
||||
if (self.selected.length) {
|
||||
pos = self.selected[self.selected.length - 1] + getRowLength();
|
||||
if (pos >= self.$items.length) {
|
||||
pos = -1;
|
||||
}
|
||||
}
|
||||
return pos;
|
||||
}
|
||||
|
||||
function getHeight() {
|
||||
return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
|
||||
}
|
||||
|
|
@ -5985,7 +6059,9 @@ requires
|
|||
function getNext() {
|
||||
var pos = -1;
|
||||
if (self.selected.length) {
|
||||
pos = Ox.max(self.selected) + 1;
|
||||
pos = (self.options.orientation == 'both' ?
|
||||
self.selected[self.selected.length - 1] :
|
||||
Ox.max(self.selected)) + 1;
|
||||
if (pos == self.$items.length) {
|
||||
pos = -1;
|
||||
}
|
||||
|
|
@ -6035,11 +6111,22 @@ requires
|
|||
function getPrevious() {
|
||||
var pos = -1;
|
||||
if (self.selected.length) {
|
||||
pos = Ox.min(self.selected) - 1;
|
||||
pos = (self.options.orientation == 'both' ?
|
||||
self.selected[self.selected.length - 1] :
|
||||
Ox.max(self.selected)) - 1;
|
||||
}
|
||||
return pos;
|
||||
}
|
||||
|
||||
function getRow(pos) {
|
||||
return Math.floor(pos / getRowLength());
|
||||
}
|
||||
|
||||
function getRowLength() {
|
||||
// fixme: should the first margin be a separate listMargin?
|
||||
return Math.floor((getWidth() - self.itemMargin) / (self.options.itemWidth + self.itemMargin));
|
||||
}
|
||||
|
||||
function getSelectedIds() {
|
||||
// fixme: is carring self.ids around the best way?
|
||||
return $.map(self.selected, function(v, i) {
|
||||
|
|
@ -6201,12 +6288,19 @@ requires
|
|||
}
|
||||
|
||||
function scrollTo(pos) {
|
||||
var positions = [], scroll, size;
|
||||
var itemHeight = self.options.itemHeight + self.itemMargin,
|
||||
itemWidth = self.options.itemWidth + self.itemMargin,
|
||||
positions = [],
|
||||
scroll,
|
||||
size;
|
||||
if (self.options.orientation == 'horizontal') {
|
||||
|
||||
} else if (self.options.orientation == 'vertical') {
|
||||
positions[0] = self.options.itemHeight * pos;
|
||||
positions[1] = positions[0] + self.options.itemHeight;
|
||||
positions[0] = pos * itemWidth;
|
||||
positions[1] = positions[0] + itemWidth;
|
||||
scroll = that.scrollLeft();
|
||||
size = getWidth();
|
||||
} else {
|
||||
positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight;
|
||||
positions[1] = positions[0] + itemHeight;
|
||||
scroll = that.scrollTop();
|
||||
size = getHeight();
|
||||
if (positions[0] < scroll) {
|
||||
|
|
@ -6218,8 +6312,6 @@ requires
|
|||
scrollTop: (positions[1] - size) + 'px'
|
||||
}, 0);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -6238,6 +6330,14 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function selectAbove() {
|
||||
var pos = getAbove();
|
||||
if (pos > -1) {
|
||||
select(pos);
|
||||
scrollTo(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
$.each(Ox.range(self.listLength), function(i, v) {
|
||||
Ox.print('adding', v);
|
||||
|
|
@ -6245,6 +6345,14 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function selectBelow() {
|
||||
var pos = getBelow();
|
||||
if (pos > -1) {
|
||||
select(pos);
|
||||
scrollTo(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function selectNext() {
|
||||
var pos = getNext();
|
||||
if (pos > -1) {
|
||||
|
|
@ -6600,7 +6708,7 @@ requires
|
|||
.html(v.title)
|
||||
.mousedown(function(e) {
|
||||
timeout = setTimeout(function() {
|
||||
dragColumn(v.id, e);
|
||||
self.options.columnsMovable && dragColumn(v.id, e);
|
||||
timeout = 0;
|
||||
}, 250);
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue