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

add Ox.LoadingScreen and Ox.ImageElement, update CSS

Browse source
This commit is contained in:
rolux 2013-03-07 12:50:54 +05:30
parent a34c8b5b11
commit 0d784b3dc4
8 changed files with 139 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2691,6 +2691,17 @@ Miscellaneous
padding: 0;
}
.OxLoadingScreen {
position: absolute;
}
.OxLoadingScreen > div {
position: absolute;
text-align: center;
}
.OxLoadingScreen > div > div {
margin-top: 4px;
}
.OxSpecialLink {
padding: 0 2px 0 2px;
border-radius: 2px;

6
source/Ox.UI/css/theme.css
View file

@ -1155,6 +1155,12 @@ Miscellaneous
================================================================================
*/
.$themeClass .OxImageElement > .OxLoadingScreen {
background-image: -moz-linear-gradient(top, $imageLoadingGradient);
background-image: -o-linear-gradient(top, $imageLoadingGradient);
background-image: -webkit-linear-gradient(top, $imageLoadingGradient);
}
.$themeClass .OxSelectableElement {
background-image: -moz-linear-gradient(top, $listItemGradient);
background-image: -o-linear-gradient(top, $listItemGradient);

54
source/Ox.UI/js/Core/ImageElement.js Normal file
View file

@ -0,0 +1,54 @@
'use strict';
Ox.ImageElement = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
height: 0,
src: '',
width: 0
})
.options(options || {})
.update({
height: setSizes,
src: loadImage,
width: setSizes
})
.addClass('OxImageElement');
self.$screen = Ox.LoadingScreen({size: 16}).appendTo(that);
loadImage();
setSizes();
function loadImage() {
if (self.$image) {
self.$image.off({load: showImage}).remove();
}
self.$image = $('<img>')
.one({load: showImage})
.attr({src: self.options.src});
}
function setSizes() {
var css = {
width: self.options.width,
height: self.options.height
};
self.$screen && self.$screen.options(css);
css = Ox.map(css, function(value) {
return value + 'px';
});
that.css(css);
self.$image.css(css);
}
function showImage() {
self.$screen.remove();
self.$image.appendTo(that);
}
return that;
};

60
source/Ox.UI/js/Core/LoadingScreen.js Normal file
View file

@ -0,0 +1,60 @@
'use strict';
Ox.LoadingScreen = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
height: 256,
size: 32,
text: '',
width: 256
})
.options(options || {})
.update({
height: setSizes,
text: function() {
self.$text && self.$text.html(self.options.text);
},
width: setSizes
})
.addClass('OxLoadingScreen');
self.$box = $('<div>').appendTo(that);
setSizes();
$('<img>')
.attr({src: Ox.UI.getImageURL('symbolLoadingAnimated')})
.css({
width: self.options.size + 'px',
height: self.options.size + 'px'
})
.appendTo(self.$box);
if (self.options.text) {
self.$text = $('<div>')
.html(self.options.text)
.appendTo(self.$box);
}
function setSizes() {
var css = {
width: (self.options.text ? 256 : self.options.size),
height: self.options.size + (self.options.text ? 24 : 0)
};
css.left = Math.floor((self.options.width - css.width) / 2);
css.top = Math.floor((self.options.height - css.height) / 2);
css = Ox.map(css, function(value) {
return value + 'px';
});
that.css({
width: self.options.width + 'px',
height: self.options.height + 'px'
});
self.$box.css(css);
}
return that;
};

2
source/Ox.UI/themes/aqua/json/theme.jsonc
View file

@ -77,6 +77,8 @@
"gridGradient": [[248, 248, 248], [232, 232, 232]],
"imageLoadingGradient": [[255, 255, 255], [224, 224, 224]],
"inputGradient": [[224, 224, 224], [255, 255, 255]],
"inputActiveGradient": [[208, 208, 208], [240, 240, 240]],
"inputDisabledGradient": [[224, 224, 224], [224, 224, 224]],

2
source/Ox.UI/themes/oxdark/json/theme.jsonc
View file

@ -77,6 +77,8 @@
"gridGradient": [[8, 8, 8], [24, 24, 24]],
"imageLoadingGradient": [[32, 32, 32], [0, 0, 0]],
"inputGradient": [[0, 0, 0], [32, 32, 32]],
"inputActiveGradient": [[16, 16, 16], [48, 48, 48]],
"inputDisabledGradient": [[16, 16, 16], [16, 16, 16]],

2
source/Ox.UI/themes/oxlight/json/theme.jsonc
View file

@ -77,6 +77,8 @@
"gridGradient": [[248, 248, 248], [232, 232, 232]],
"imageLoadingGradient": [[255, 255, 255], [224, 224, 224]],
"inputGradient": [[208, 208, 208], [255, 255, 255]],
"inputActiveGradient": [[192, 192, 192], [240, 240, 240]],
"inputDisabledGradient": [[224, 224, 224], [224, 224, 224]],

2
source/Ox.UI/themes/oxmedium/json/theme.jsonc
View file

@ -77,6 +77,8 @@
"gridGradient": [[248, 248, 248], [232, 232, 232]],
"imageLoadingGradient": [[160, 160, 160], [128, 128, 128]],
"inputGradient": [[144, 144, 144], [176, 176, 176]],
"inputActiveGradient": [[160, 160, 160], [192, 192, 192]],
"inputDisabledGradient": [[144, 144, 144], [144, 144, 144]],