improvements for icon view
This commit is contained in:
rolux
parent
34179ec451
commit
8936d0fb8c
|
|
@ -165,15 +165,20 @@ Lists
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxThemeClassic .OxIconList .OxItem > .OxReflection > div {
|
||||
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(240, 240, 240, 1));
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.75)), color-stop(1, rgba(240, 240, 240, 1)));
|
||||
.OxThemeClassic .OxIconList .OxItem > .OxIcon img.OxLoading {
|
||||
border-color: rgb(208, 208, 208);
|
||||
background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(224, 224, 224)));
|
||||
}
|
||||
.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 > .OxReflection > div {
|
||||
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(240, 240, 240, 1));
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.75)), color-stop(1, rgba(240, 240, 240, 1)));
|
||||
}
|
||||
.OxThemeClassic .OxIconList .OxItem > .OxText > div {
|
||||
text-shadow: rgb(255, 255, 255) 1px 1px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,25 +146,20 @@ Lists
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxThemeModern .OxIconList .OxItem {
|
||||
//background: rgb(20, 20, 20);
|
||||
}
|
||||
.OxThemeModern .OxIconList .OxItem img.OxLoading {
|
||||
background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));
|
||||
}
|
||||
.OxThemeModern .OxIconList .OxItem > .OxIcon img.OxLoading {
|
||||
border-color: rgb(48, 48, 48);
|
||||
}
|
||||
.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.75)), color-stop(1, rgba(16, 16, 16, 1)));
|
||||
background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));
|
||||
}
|
||||
.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 > .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.75)), color-stop(1, rgba(16, 16, 16, 1)));
|
||||
}
|
||||
.OxThemeModern .OxIconList .OxItem > .OxText > div {
|
||||
text-shadow: rgb(0, 0, 0) 1px 1px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1731,7 +1731,8 @@ Ox.wordwrap = function(str, len, sep, bal, spa) {
|
|||
>>> Ox.wordwrap("These are short words", 16, "<br/>", true)
|
||||
These are <br/>short words
|
||||
*/
|
||||
var len = len || 80,
|
||||
var str = str.toString(),
|
||||
len = len || 80,
|
||||
sep = sep || "<br/>",
|
||||
bal = bal || false,
|
||||
spa = Ox.isUndefined(spa) ? true : spa,
|
||||
|
|
|
|||
|
|
@ -5632,29 +5632,36 @@ requires
|
|||
|
||||
that.$element = new Ox.List({
|
||||
construct: constructItem,
|
||||
id: self.options.id,
|
||||
itemHeight: self.itemHeight,
|
||||
itemWidth: self.itemWidth,
|
||||
keys: 'foo',
|
||||
keys: self.options.keys,
|
||||
orientation: self.options.orientation,
|
||||
keys: self.options.keys,
|
||||
request: self.options.request,
|
||||
// rowLength: 4,
|
||||
size: 128,
|
||||
size: self.options.size,
|
||||
sort: self.options.sort,
|
||||
type: 'icon',
|
||||
unique: self.options.unique
|
||||
}/*, self*/)
|
||||
.addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
|
||||
.click(click)
|
||||
.dblclick(dblclick)
|
||||
.scroll(scroll);
|
||||
|
||||
updateKeys();
|
||||
|
||||
function click() {
|
||||
|
||||
}
|
||||
|
||||
function constructItem(data) {
|
||||
var data = self.options.item(data, self.options.sort, self.options.size);
|
||||
var data = self.options.item(data, self.options.sort, self.options.size),
|
||||
ratio = data.width / data.height;
|
||||
return new Ox.IconItem($.extend(data, {
|
||||
size: self.options.size
|
||||
height: self.options.size / (ratio <= 1 ? 1 : ratio),
|
||||
size: self.options.size,
|
||||
width: self.options.size * (ratio >= 1 ? 1 : ratio)
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -5666,7 +5673,27 @@ requires
|
|||
|
||||
}
|
||||
|
||||
Ox.print('IconList', that.options('id'))
|
||||
function updateKeys() {
|
||||
self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
|
||||
that.$element.options({
|
||||
keys: self.options.keys
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
if (key == 'request') {
|
||||
that.$element.options(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
that.sortList = function(key, operator) {
|
||||
self.options.sort = [{
|
||||
key: key,
|
||||
operator: operator
|
||||
}];
|
||||
updateKeys();
|
||||
that.$element.sortList(key, operator);
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
|
|
@ -5677,21 +5704,26 @@ requires
|
|||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
.defaults({
|
||||
height: 0,
|
||||
height: 128,
|
||||
id: '',
|
||||
info: '',
|
||||
size: 128,
|
||||
title: '',
|
||||
width: 0,
|
||||
width: 128,
|
||||
url: ''
|
||||
})
|
||||
.options(options || {})
|
||||
|
||||
$.extend(self, {
|
||||
fontSize: self.options.size == 64 ? 7 : 9,
|
||||
height: self.options.size * 1.5,
|
||||
lineLength: self.options.size == 64 ? 17 : 23,
|
||||
lines: self.options.size == 64 ? 4 : 5,
|
||||
url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png',
|
||||
width: self.options.size
|
||||
});
|
||||
self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
|
||||
self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
|
||||
|
||||
that.css({
|
||||
width: self.width + 'px',
|
||||
|
|
@ -5700,7 +5732,7 @@ requires
|
|||
that.$icon = $('<div>')
|
||||
.addClass('OxIcon')
|
||||
.css({
|
||||
top: self.options.size == 64 ? -70 : -120,
|
||||
top: self.options.size == 64 ? -68 : -120,
|
||||
width: (self.options.size + 4) + 'px',
|
||||
height: self.options.size + 'px'
|
||||
});
|
||||
|
|
@ -5726,9 +5758,11 @@ requires
|
|||
})
|
||||
that.$text = $('<div>')
|
||||
.addClass('OxTarget')
|
||||
.css({
|
||||
fontSize: self.fontSize + 'px'
|
||||
})
|
||||
.html(
|
||||
formatTitle(self.options.title) +
|
||||
'<br/><span class="OxInfo">' + self.options.info + '</span>'
|
||||
self.title + '<br/><span class="OxInfo">' + self.info + '</span>'
|
||||
)
|
||||
.mouseenter(mouseenter)
|
||||
.mouseleave(mouseleave);
|
||||
|
|
@ -5771,15 +5805,15 @@ requires
|
|||
)
|
||||
);
|
||||
|
||||
function formatTitle(title) {
|
||||
var lines = Ox.wordwrap(title, 23, '<br/>', true, false).split('<br/>');
|
||||
function formatText(text, maxLines, maxLength) {
|
||||
var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>');
|
||||
return $.map(lines, function(line, i) {
|
||||
if (i < 3) {
|
||||
if (i < maxLines - 1) {
|
||||
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 if (i == maxLines - 1) {
|
||||
return lines.length == maxLines ? line : Ox.truncate($.map(lines, function(line, i) {
|
||||
return i < maxLines - 1 ? null : line;
|
||||
}).join(' '), maxLength, '...', 'center');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -5818,7 +5852,7 @@ requires
|
|||
keys: [],
|
||||
orientation: 'vertical',
|
||||
pageLength: 100,
|
||||
request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
|
||||
request: function() {}, // (sort:, range:, callback:), without parameter returns {items, size etc.}
|
||||
//rowLength: 1,
|
||||
sort: [],
|
||||
type: 'text',
|
||||
|
|
@ -5865,7 +5899,7 @@ requires
|
|||
key_shift_up: addAboveToSelection
|
||||
});
|
||||
self.pageLengthByRowLength = [
|
||||
0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60
|
||||
0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60, 64, 68, 72, 76, 60
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -6428,6 +6462,7 @@ requires
|
|||
var ids = getSelectedIds();
|
||||
setTimeout(function() {
|
||||
var ids_ = getSelectedIds();
|
||||
Ox.print('ids', ids, 'ids after 100 msec', ids_)
|
||||
if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) {
|
||||
that.triggerEvent('select', {
|
||||
ids: ids
|
||||
|
|
@ -6515,7 +6550,7 @@ requires
|
|||
return that;
|
||||
};
|
||||
|
||||
that.sort = function(key, operator) {
|
||||
that.sortList = function(key, operator) {
|
||||
if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
|
||||
self.options.sort[0] = {
|
||||
key: key,
|
||||
|
|
@ -6723,7 +6758,7 @@ requires
|
|||
Ox.print('clickColumn', id);
|
||||
var i = getColumnIndexById(id),
|
||||
isSelected = self.options.sort[0].key == self.options.columns[i].id;
|
||||
that.sort(
|
||||
that.sortList(
|
||||
self.options.columns[i].id, isSelected ?
|
||||
(self.options.sort[0].operator === '' ? '-' : '') :
|
||||
self.options.columns[i].operator
|
||||
|
|
@ -7033,7 +7068,7 @@ requires
|
|||
return that;
|
||||
}
|
||||
|
||||
that.sort = function(key, operator) {
|
||||
that.sortList = function(key, operator) {
|
||||
var isSelected = key == self.options.sort[0].key;
|
||||
self.options.sort = [
|
||||
{
|
||||
|
|
@ -7048,7 +7083,7 @@ requires
|
|||
self.selectedColumn = getColumnIndexById(key);
|
||||
toggleSelected(self.options.columns[self.selectedColumn].id);
|
||||
}
|
||||
that.$body.sort(self.options.sort[0].key, self.options.sort[0].operator);
|
||||
that.$body.sortList(self.options.sort[0].key, self.options.sort[0].operator);
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -8217,7 +8252,7 @@ requires
|
|||
};
|
||||
|
||||
that.getItem = function(id) {
|
||||
Ox.print('id', id)
|
||||
//Ox.print('id', id)
|
||||
var ids = id.split('_'),
|
||||
item;
|
||||
if (ids.length == 1) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user