update css for classic theme
This commit is contained in:
parent
da29507488
commit
9eb96ea54c
8 changed files with 417 additions and 47 deletions
|
@ -120,6 +120,58 @@ Forms
|
||||||
background: rgb(208, 208, 208);
|
background: rgb(208, 208, 208);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
================================================================================
|
||||||
|
Lists
|
||||||
|
================================================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.OxThemeClassic .OxTextList .OxItem .OxCell {
|
||||||
|
border-right: 1px solid rgb(224, 224, 224);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxItem:nth-child(odd) {
|
||||||
|
background: rgb(242, 242, 242);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxItem:nth-child(even) {
|
||||||
|
background: rgb(238, 238, 238);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(odd) {
|
||||||
|
background: rgb(226, 226, 226);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(even) {
|
||||||
|
background: rgb(222, 222, 222);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) {
|
||||||
|
background: rgb(194, 194, 194);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
|
||||||
|
background: rgb(190, 190, 190);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxBar .OxSelected {
|
||||||
|
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(160, 160, 160)), color-stop(1, rgb(128, 128, 128)));
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxBar .OxOrder {
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter {
|
||||||
|
background: rgb(232, 232, 232);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {
|
||||||
|
border-right: 1px solid rgb(232, 232, 232);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxItem.OxSelected .OxCell {
|
||||||
|
border-right: 1px solid rgb(216, 216, 216);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected .OxCell {
|
||||||
|
border-right: 1px solid rgb(184, 184, 184);
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxTextList .OxBody .OxItem .OxLine {
|
||||||
|
background: rgb(232, 232, 232);
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Menus
|
Menus
|
||||||
|
@ -163,16 +215,21 @@ Scrollbars
|
||||||
================================================================================
|
================================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.OxThemeClassic ::-webkit-scrollbar {
|
.OxThemeClassic ::-webkit-scrollbar:horizontal {
|
||||||
width: 12px;
|
border-top: 1px solid rgb(176, 176, 176);
|
||||||
height: 12px;
|
border-bottom: 1px solid rgb(176, 176, 176);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
||||||
|
}
|
||||||
|
.OxThemeClassic ::-webkit-scrollbar:vertical {
|
||||||
border-left: 1px solid rgb(176, 176, 176);
|
border-left: 1px solid rgb(176, 176, 176);
|
||||||
border-right: 1px solid rgb(176, 176, 176);
|
border-right: 1px solid rgb(176, 176, 176);
|
||||||
background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
||||||
}
|
}
|
||||||
.OxThemeClassic ::-webkit-scrollbar-button {
|
.OxThemeClassic ::-webkit-scrollbar-button:horizontal:decrement {
|
||||||
width: 12px;
|
background: url(../png/ox.ui.classic/scrollbarHorizontalDecrement.png);
|
||||||
height: 12px;
|
}
|
||||||
|
.OxThemeClassic ::-webkit-scrollbar-button:horizontal:increment {
|
||||||
|
background: url(../png/ox.ui.classic/scrollbarHorizontalIncrement.png);
|
||||||
}
|
}
|
||||||
.OxThemeClassic ::-webkit-scrollbar-button:vertical:decrement {
|
.OxThemeClassic ::-webkit-scrollbar-button:vertical:decrement {
|
||||||
background: url(../png/ox.ui.classic/scrollbarVerticalDecrement.png);
|
background: url(../png/ox.ui.classic/scrollbarVerticalDecrement.png);
|
||||||
|
@ -180,26 +237,30 @@ Scrollbars
|
||||||
.OxThemeClassic ::-webkit-scrollbar-button:vertical:increment {
|
.OxThemeClassic ::-webkit-scrollbar-button:vertical:increment {
|
||||||
background: url(../png/ox.ui.classic/scrollbarVerticalIncrement.png);
|
background: url(../png/ox.ui.classic/scrollbarVerticalIncrement.png);
|
||||||
}
|
}
|
||||||
.OxThemeClassic ::-webkit-scrollbar-thumb:vertical {
|
.OxThemeClassic ::-webkit-scrollbar-corner {
|
||||||
|
border-right: 1px solid rgb(176, 176, 176);
|
||||||
|
border-bottom: 1px solid rgb(176, 176, 176);
|
||||||
|
background: -webkit-gradient(linear, left top, right bottom, from(rgb(224, 224, 224)), to(rgb(160, 160, 160)));
|
||||||
|
}
|
||||||
|
.OxThemeClassic ::-webkit-scrollbar-thumb {
|
||||||
border: 1px solid rgb(176, 176, 176);
|
border: 1px solid rgb(176, 176, 176);
|
||||||
|
}
|
||||||
|
.OxThemeClassic ::-webkit-scrollbar-thumb:horizontal {
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
||||||
|
}
|
||||||
|
.OxThemeClassic ::-webkit-scrollbar-thumb:vertical {
|
||||||
background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
|
||||||
-webkit-border-radius: 6px;
|
}
|
||||||
|
.OxThemeClassic ::-webkit-scrollbar-track {
|
||||||
|
border: 1px solid rgb(176, 176, 176);
|
||||||
|
}
|
||||||
|
.OxThemeClassic ::-webkit-scrollbar-track:horizontal {
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
|
||||||
}
|
}
|
||||||
.OxThemeClassic ::-webkit-scrollbar-track:vertical {
|
.OxThemeClassic ::-webkit-scrollbar-track:vertical {
|
||||||
border: 1px solid rgb(176, 176, 176);
|
background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
|
||||||
background-image: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
|
|
||||||
-webkit-border-radius: 6px;
|
|
||||||
}
|
}
|
||||||
.OxThemeClassic ::-webkit-scrollbar:active,
|
.OxThemeClassic ::-webkit-scrollbar:active,
|
||||||
.OxThemeClassic ::-webkit-scrollbar-thumb:vertical:active {
|
.OxThemeClassic ::-webkit-scrollbar-thumb:active {
|
||||||
background: rgb(192, 192, 192);
|
background: rgb(64, 64, 64);
|
||||||
}
|
|
||||||
body {
|
|
||||||
scrollbar-face-color: #808080; /*/ obviously change this to whatever you want /*/
|
|
||||||
scrollbar-arrow-color: #FFFFFF;
|
|
||||||
scrollbar-highlight-color: #FFFBF0;
|
|
||||||
scrollbar-3dlight-color: #808080;
|
|
||||||
scrollbar-shadow-color: #FFFBF0;
|
|
||||||
scrollbar-darkshadow-color: #808080;
|
|
||||||
scrollbar-track-color: #CCCCCC;
|
|
||||||
}
|
}
|
|
@ -138,6 +138,16 @@ Dialog
|
||||||
cursor: se-resize;
|
cursor: se-resize;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
================================================================================
|
||||||
|
Drag & Drop
|
||||||
|
================================================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.OxDrag {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Forms
|
Forms
|
||||||
|
@ -878,10 +888,23 @@ Requests
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Drag & Drop
|
Scrollbars
|
||||||
================================================================================
|
================================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.OxDrag {
|
::-webkit-scrollbar {
|
||||||
cursor: move;
|
width: 12px;
|
||||||
}
|
height: 12px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-button {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
-webkit-border-radius: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
-webkit-border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -185,10 +185,6 @@ Scrollbars
|
||||||
================================================================================
|
================================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.OxThemeModern ::-webkit-scrollbar {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
.OxThemeModern ::-webkit-scrollbar:horizontal {
|
.OxThemeModern ::-webkit-scrollbar:horizontal {
|
||||||
border-top: 1px solid rgb(48, 48, 48);
|
border-top: 1px solid rgb(48, 48, 48);
|
||||||
border-bottom: 1px solid rgb(48, 48, 48);
|
border-bottom: 1px solid rgb(48, 48, 48);
|
||||||
|
@ -199,10 +195,6 @@ Scrollbars
|
||||||
border-right: 1px solid rgb(48, 48, 48);
|
border-right: 1px solid rgb(48, 48, 48);
|
||||||
background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
|
background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
|
||||||
}
|
}
|
||||||
.OxThemeModern ::-webkit-scrollbar-button {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
.OxThemeModern ::-webkit-scrollbar-button:horizontal:decrement {
|
.OxThemeModern ::-webkit-scrollbar-button:horizontal:decrement {
|
||||||
background: url(../png/ox.ui.modern/scrollbarHorizontalDecrement.png);
|
background: url(../png/ox.ui.modern/scrollbarHorizontalDecrement.png);
|
||||||
}
|
}
|
||||||
|
@ -222,7 +214,6 @@ Scrollbars
|
||||||
}
|
}
|
||||||
.OxThemeModern ::-webkit-scrollbar-thumb {
|
.OxThemeModern ::-webkit-scrollbar-thumb {
|
||||||
border: 1px solid rgb(48, 48, 48);
|
border: 1px solid rgb(48, 48, 48);
|
||||||
-webkit-border-radius: 6px;
|
|
||||||
}
|
}
|
||||||
.OxThemeModern ::-webkit-scrollbar-thumb:horizontal {
|
.OxThemeModern ::-webkit-scrollbar-thumb:horizontal {
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
|
||||||
|
@ -232,7 +223,6 @@ Scrollbars
|
||||||
}
|
}
|
||||||
.OxThemeModern ::-webkit-scrollbar-track {
|
.OxThemeModern ::-webkit-scrollbar-track {
|
||||||
border: 1px solid rgb(32, 32, 32);
|
border: 1px solid rgb(32, 32, 32);
|
||||||
-webkit-border-radius: 6px;
|
|
||||||
}
|
}
|
||||||
.OxThemeModern ::-webkit-scrollbar-track:horizontal {
|
.OxThemeModern ::-webkit-scrollbar-track:horizontal {
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
|
||||||
|
|
|
@ -1498,7 +1498,93 @@ Ox.trim = function(str) { // is in jQuery
|
||||||
"foo"
|
"foo"
|
||||||
*/
|
*/
|
||||||
return str.replace(/^\s+|\s+$/g, "");
|
return str.replace(/^\s+|\s+$/g, "");
|
||||||
}
|
};
|
||||||
|
|
||||||
|
Ox.truncate = function(str, len, pad, pos) {
|
||||||
|
/*
|
||||||
|
>>> Ox.truncate("anticonstitutionellement", 16, "...", "center")
|
||||||
|
anticon...lement
|
||||||
|
*/
|
||||||
|
var pad = pad || {},
|
||||||
|
pos = pos || "right",
|
||||||
|
strlen = str.length,
|
||||||
|
padlen = pad.length,
|
||||||
|
left, right;
|
||||||
|
if (strlen > len) {
|
||||||
|
if (pos == "left") {
|
||||||
|
str = pad + str.substr(padlen + strlen - len);
|
||||||
|
} else if (pos == "center") {
|
||||||
|
left = Math.ceil((len - padlen) / 2);
|
||||||
|
right = Math.floor((len - padlen) / 2);
|
||||||
|
str = str.substr(0, left) + pad + str.substr(-right);
|
||||||
|
} else if (pos == "right") {
|
||||||
|
str = str.substr(0, len - padlen) + pad;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
};
|
||||||
|
|
||||||
|
Ox.wordwrap = function(str, len, sep, bal, spa) {
|
||||||
|
/*
|
||||||
|
>>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "<br/>"")
|
||||||
|
Anticonstitutionellement, <br/>Paris s'eveille
|
||||||
|
>>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 16, "<br/>")
|
||||||
|
Anticonstitution<br />ellement, Paris <br/>s'eveille
|
||||||
|
>>> Ox.wordwrap("These are short words", 16, "<br/>", true)
|
||||||
|
These are <br/>short words
|
||||||
|
*/
|
||||||
|
var len = len || 80,
|
||||||
|
sep = sep || "<br/>",
|
||||||
|
bal = bal || false,
|
||||||
|
spa = spa || true,
|
||||||
|
words = str.split(" "),
|
||||||
|
lines;
|
||||||
|
if (bal) {
|
||||||
|
// balance lines: test if same number of lines
|
||||||
|
// can be achieved with a shorter line length
|
||||||
|
lines = Ox.wordwrap(str, len, sep, false).split(sep);
|
||||||
|
if (lines.length > 1) {
|
||||||
|
// test shorter line, unless
|
||||||
|
// that means cutting a word
|
||||||
|
var max = Ox.max($.map(words, function(word) {
|
||||||
|
return word.length;
|
||||||
|
}));
|
||||||
|
while (len > max) {
|
||||||
|
len--;
|
||||||
|
if (Ox.wordwrap(str, len, sep, false).split(sep).length > lines.length) {
|
||||||
|
len++;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
lines = [""];
|
||||||
|
$.each(words, function(i, word) {
|
||||||
|
if ((lines[lines.length - 1] + word + " ").length <= len + 1) {
|
||||||
|
// word fits in current line
|
||||||
|
lines[lines.length - 1] += word + " ";
|
||||||
|
} else {
|
||||||
|
if (word.length <= len) {
|
||||||
|
// word fits in next line
|
||||||
|
lines.push(word + " ");
|
||||||
|
} else {
|
||||||
|
// word is longer than line
|
||||||
|
var chr = len - lines[lines.length - 1].length;
|
||||||
|
lines[lines.length - 1] += word.substr(0, chr);
|
||||||
|
for (var pos = chr; pos < word.length; pos += len) {
|
||||||
|
lines.push(word.substr(pos, len));
|
||||||
|
}
|
||||||
|
lines[lines.length - 1] += " ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!spa) {
|
||||||
|
lines = $.map(lines, function(line) {
|
||||||
|
return Ox.trim(line);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Ox.trim(lines.join(sep));
|
||||||
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
|
|
|
@ -2321,8 +2321,8 @@ requires
|
||||||
})
|
})
|
||||||
.options(options)
|
.options(options)
|
||||||
.addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size));
|
.addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size));
|
||||||
self.buttonId = self.options.id + "_button"
|
self.buttonId = self.options.id + "_button";
|
||||||
self.groupId = self.options.id + "_group"
|
self.groupId = self.options.id; // + "_group"
|
||||||
self.menuId = self.options.id + "_menu",
|
self.menuId = self.options.id + "_menu",
|
||||||
|
|
||||||
$.each(self.options.items, function(i, item) {
|
$.each(self.options.items, function(i, item) {
|
||||||
|
@ -2398,6 +2398,177 @@ requires
|
||||||
============================================================================
|
============================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
Ox.IconList = function(options, self) {
|
||||||
|
|
||||||
|
var self = self || {},
|
||||||
|
that = new Ox.Element({}, self)
|
||||||
|
.defaults({
|
||||||
|
id: "",
|
||||||
|
item: function() {},
|
||||||
|
keys: [],
|
||||||
|
orientation: "both",
|
||||||
|
request: function() {},
|
||||||
|
size: 128,
|
||||||
|
sort: [],
|
||||||
|
})
|
||||||
|
.options(options || {});
|
||||||
|
|
||||||
|
$.extend(self, {
|
||||||
|
itemHeight: self.options.size * 1.5,
|
||||||
|
itemWidth: self.options.size
|
||||||
|
});
|
||||||
|
|
||||||
|
that.$element = new Ox.List({
|
||||||
|
construct: constructItem,
|
||||||
|
itemHeight: self.itemHeight,
|
||||||
|
itemWidth: self.itemWidth,
|
||||||
|
keys: $,
|
||||||
|
orientation: "both",
|
||||||
|
request: function() {},
|
||||||
|
rowLength: 1,
|
||||||
|
size: 128,
|
||||||
|
type: "icon",
|
||||||
|
}, self)
|
||||||
|
.click(click)
|
||||||
|
.dblclick(dblclick)
|
||||||
|
.scroll(scroll);
|
||||||
|
|
||||||
|
function click() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function constructItem(data) {
|
||||||
|
var data = self.options.item(data, self.options.sort);
|
||||||
|
return new Ox.IconItem($.extend(data, {
|
||||||
|
size: self.options.size
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function dblclick() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function scroll() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
Ox.IconItem = function(options, self) {
|
||||||
|
|
||||||
|
var self = self || {}
|
||||||
|
that = new Ox.Element({}, self)
|
||||||
|
.defaults({
|
||||||
|
height: 0,
|
||||||
|
id: "",
|
||||||
|
info: "",
|
||||||
|
size: 128,
|
||||||
|
title: "",
|
||||||
|
width: 0,
|
||||||
|
url: ""
|
||||||
|
})
|
||||||
|
.options(options || {});
|
||||||
|
|
||||||
|
$.extend(self, {
|
||||||
|
height: self.options.size * 1.5,
|
||||||
|
url: oxui.path + "/png/ox.ui." + Ox.theme() + "/icon.png",
|
||||||
|
width: self.options.size + 4
|
||||||
|
});
|
||||||
|
|
||||||
|
that.css({
|
||||||
|
width: self.width + "px",
|
||||||
|
height: self.height + "px"
|
||||||
|
});
|
||||||
|
that.$icon = $("<div>")
|
||||||
|
.addClass("OxIcon")
|
||||||
|
.css({
|
||||||
|
top: self.options.size == 64 ? -70 : -128,
|
||||||
|
width: self.options.size + "px",
|
||||||
|
height: self.options.size + "px"
|
||||||
|
});
|
||||||
|
that.$iconImage = $("<img>")
|
||||||
|
.attr({
|
||||||
|
src: self.url
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
width: iconWidth + "px",
|
||||||
|
height: iconHeight + "px"
|
||||||
|
})
|
||||||
|
.mouseenter(mouseenter)
|
||||||
|
.mouseleave(mouseleave)
|
||||||
|
.one("load", function() {
|
||||||
|
that.$iconImage.attr({
|
||||||
|
src: self.options.url
|
||||||
|
});
|
||||||
|
});
|
||||||
|
that.$textBox = $("<div>")
|
||||||
|
.addClass("OxText")
|
||||||
|
.css({
|
||||||
|
top: (self.options.size / 2 + 2) + "px",
|
||||||
|
width: self.width + "px",
|
||||||
|
height: (self.options.size == 64 ? 38 : 58) + "px"
|
||||||
|
})
|
||||||
|
that.$text = $("<div>")
|
||||||
|
.html(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",
|
||||||
|
width: self.options.size + "px",
|
||||||
|
height: (self.options.size / 2) + "px"
|
||||||
|
});
|
||||||
|
that.$reflectionImage = $("<img>")
|
||||||
|
.addClass("OxReflection")
|
||||||
|
.attr({
|
||||||
|
src: self.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"
|
||||||
|
});
|
||||||
|
|
||||||
|
that.append(
|
||||||
|
that.$reflection.append(
|
||||||
|
that.$reflectionImage
|
||||||
|
).append(
|
||||||
|
that.$gradientImage
|
||||||
|
)
|
||||||
|
).append(
|
||||||
|
that.$textBox.append(
|
||||||
|
that.$text
|
||||||
|
)
|
||||||
|
).append(
|
||||||
|
that.$icon.append(
|
||||||
|
that.$iconImage
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
function mouseenter() {
|
||||||
|
that.addClass("OxHover");
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseleave() {
|
||||||
|
that.removeClass("OxHover");
|
||||||
|
}
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
Ox.List = function(options, self) {
|
Ox.List = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
|
@ -2925,6 +3096,7 @@ requires
|
||||||
});
|
});
|
||||||
|
|
||||||
that.$element = self.options.construct(self.options.data)
|
that.$element = self.options.construct(self.options.data)
|
||||||
|
.addClass("OxItem")
|
||||||
.attr({
|
.attr({
|
||||||
id: self.options.id
|
id: self.options.id
|
||||||
})
|
})
|
||||||
|
@ -3114,7 +3286,6 @@ requires
|
||||||
|
|
||||||
function constructItem(data) {
|
function constructItem(data) {
|
||||||
var $item = $("<div>")
|
var $item = $("<div>")
|
||||||
.addClass("OxItem")
|
|
||||||
.css({
|
.css({
|
||||||
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + "px"
|
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + "px"
|
||||||
});
|
});
|
||||||
|
@ -3139,6 +3310,9 @@ requires
|
||||||
positions = $.map(self.visibleColumns, function(v, i) {
|
positions = $.map(self.visibleColumns, function(v, i) {
|
||||||
return self.columnPositions[i] - self.columnPositions[startPos]
|
return self.columnPositions[i] - self.columnPositions[startPos]
|
||||||
});
|
});
|
||||||
|
$(".OxColumn" + Ox.toTitleCase(id)).css({
|
||||||
|
opacity: 0.1
|
||||||
|
});
|
||||||
that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work?
|
that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work?
|
||||||
cursor: "move"
|
cursor: "move"
|
||||||
});
|
});
|
||||||
|
@ -3176,6 +3350,9 @@ requires
|
||||||
self.visibleColumns.splice(stopPos, 0, column);
|
self.visibleColumns.splice(stopPos, 0, column);
|
||||||
self.columnWidths.splice(stopPos, 0, width);
|
self.columnWidths.splice(stopPos, 0, width);
|
||||||
Ox.print("s.vC", self.visibleColumns)
|
Ox.print("s.vC", self.visibleColumns)
|
||||||
|
$(".OxColumn" + Ox.toTitleCase(id)).css({
|
||||||
|
opacity: 1
|
||||||
|
});
|
||||||
that.$titles[stopPos].removeClass("OxDrag").css({
|
that.$titles[stopPos].removeClass("OxDrag").css({
|
||||||
cursor: "pointer"
|
cursor: "pointer"
|
||||||
});
|
});
|
||||||
|
@ -4329,7 +4506,7 @@ requires
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.attr({
|
.attr({
|
||||||
src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png"
|
src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png" // fixme: oxui.themePath needed?
|
||||||
})
|
})
|
||||||
.addClass(
|
.addClass(
|
||||||
"OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
|
"OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
|
||||||
|
|
BIN
build/png/ox.ui.classic/scrollbarHorizontalDecrement.png
Normal file
BIN
build/png/ox.ui.classic/scrollbarHorizontalDecrement.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
BIN
build/png/ox.ui.classic/scrollbarHorizontalIncrement.png
Normal file
BIN
build/png/ox.ui.classic/scrollbarHorizontalIncrement.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
|
@ -198,6 +198,34 @@ $(function() {
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
$iconList = new Ox.IconList({
|
||||||
|
id: "list",
|
||||||
|
item: function(data, sort) {
|
||||||
|
return {
|
||||||
|
height: data["posterHeight"],
|
||||||
|
id: data["id"],
|
||||||
|
info: data[$.inArray(sort[0].key, ["title", "director"]) > -1 ? "year" : sort[0].key],
|
||||||
|
title: data["title"] + " (" + data["director"] + ")",
|
||||||
|
url: data["posterURL"],
|
||||||
|
width: data["posterWidth"]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
keys: ["director", "id", "posterHeight", "posterWidth", "posterURL", "title"],
|
||||||
|
request: function(options) {
|
||||||
|
app.request("find", $.extend(options, {
|
||||||
|
query: constructQuery()
|
||||||
|
}), options.callback);
|
||||||
|
},
|
||||||
|
size: 128,
|
||||||
|
sort: [
|
||||||
|
{
|
||||||
|
key: "director",
|
||||||
|
operator: "+"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
unique: "id"
|
||||||
|
}),
|
||||||
|
|
||||||
$toolBar = Ox.Bar({
|
$toolBar = Ox.Bar({
|
||||||
size: 24
|
size: 24
|
||||||
}),
|
}),
|
||||||
|
@ -231,23 +259,23 @@ $(function() {
|
||||||
title: "View with Timelines"
|
title: "View with Timelines"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "timelines",
|
id: "maps",
|
||||||
title: "View with Maps"
|
title: "View with Maps"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "timelines",
|
id: "calendars",
|
||||||
title: "View with Calendars"
|
title: "View with Calendars"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "timelines",
|
id: "clip",
|
||||||
title: "View as Clips"
|
title: "View as Clips"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "timelines",
|
id: "map",
|
||||||
title: "View on Map"
|
title: "View on Map"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "timelines",
|
id: "calendar",
|
||||||
title: "View on Calendar"
|
title: "View on Calendar"
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
@ -441,6 +469,12 @@ $(function() {
|
||||||
$loadingIcon.stop();
|
$loadingIcon.stop();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Ox.Event.bind(null, "change_viewSelect", function(event, data) {
|
||||||
|
if (data.id == "icons") {
|
||||||
|
$list.replaceWith($iconList);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
Ox.Event.bind(null, "submit_find", function(event, data) {
|
Ox.Event.bind(null, "submit_find", function(event, data) {
|
||||||
findCondition = {
|
findCondition = {
|
||||||
key: data.key == "all" ? "" : data.key,
|
key: data.key == "all" ? "" : data.key,
|
||||||
|
@ -503,7 +537,6 @@ $(function() {
|
||||||
|
|
||||||
});
|
});
|
||||||
Ox.Event.bind(null, "load_list", function(event, data) {
|
Ox.Event.bind(null, "load_list", function(event, data) {
|
||||||
Ox.print("data", data)
|
|
||||||
var html = [
|
var html = [
|
||||||
data.items + " movie" + (data.items != 1 ? "s" : ""),
|
data.items + " movie" + (data.items != 1 ? "s" : ""),
|
||||||
Ox.formatDuration(data.runtime, "long"),
|
Ox.formatDuration(data.runtime, "long"),
|
||||||
|
|
Loading…
Reference in a new issue