some css for textareas

This commit is contained in:
rlx 2011-02-01 13:45:48 +00:00
parent c84de6d0f0
commit 89c9f1c98c
2 changed files with 34 additions and 102 deletions

View file

@ -69,6 +69,7 @@ Forms
.OxThemeClassic .OxButton,
.OxThemeClassic input.OxCheckbox,
.OxThemeClassic input.OxInput,
.OxThemeClassic textarea,
.OxThemeClassic .OxLabel,
.OxThemeClassic .OxTrack {
border: 1px solid rgb(176, 176, 176);
@ -162,7 +163,9 @@ Forms
background: rgb(224, 224, 224);
}
.OxThemeClassic textarea {
background: rgb(240, 240, 240);
}
/*
================================================================================
@ -204,7 +207,7 @@ Lists
-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 {
.OxThemeClassic .OxIconList .OxItem > .OxText > div > .OxInfo {
color: rgb(128, 128, 128);
}

View file

@ -177,7 +177,6 @@ requires
}
function loadImages(callback) {
window.OxImageCache = [];
$.getJSON(oxui.path + 'json/ox.ui.images.json', function(data) {
var counter = 0,
length = data.length;
@ -187,7 +186,6 @@ requires
image.onload = function() {
(++counter == length) && callback();
}
window.OxImageCache.push(image);
});
});
}
@ -2993,7 +2991,7 @@ requires
width: self.inputWidth + 'px',
textAlign: self.options.textAlign
}, self.options.type == 'textarea' ? {
height: self.options.height + 'px'
height: self.options.height + 'px',
} : {}))
.val(self.options.value)
.blur(blur)
@ -3001,6 +2999,34 @@ requires
.focus(focus)
.appendTo(that.$element);
// fixme: is there a better way than this one?
if (self.options.type == 'textarea') {
$.extend(self, {
colors: Ox.theme() == 'classic' ?
[208, 232, 244] :
[0, 16, 32],
colorstops: [8 / self.options.height, self.options.height - 8 / self.options.height]
});
self.$input.css({
background: '-moz-linear-gradient(top, rgb(' +
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + '), rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
Math.round(self.colorstops[0] * 100) + '%, rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
Math.round(self.colorstops[1] * 100) + '%, rgb(' +
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))'
});
self.$input.css({
background: '-webkit-gradient(linear, left top, left bottom, from(rgb(' +
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + ')), color-stop(' +
self.colorstops[0] + ', ' + 'rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), color-stop( ' +
self.colorstops[1] + ', ' + 'rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), to(rgb(' +
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + ')))'
});
}
if (self.hasPasswordPlaceholder) {
self.$input.hide();
self.$placeholder = $('<input>')
@ -10692,103 +10718,6 @@ requires
};
Ox.Flipbook = function(options, self) {
var self = self || {},
frame = $('<img>').css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
})
.hide(),
icon = $('<img>').css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
}),
frames = {},
timestamp = $('<div>').css({
'position': 'absolute',
'text-align': 'center',
'width': '100%',
})
.hide(),
that = new Ox.Element('div', self)
.defaults({
frames: {},
duration: 0,
icon: '',
})
.options(options || {})
.append(icon)
.append(frame)
.append(timestamp)
.mouseover(function() {
frame.show();
timestamp.show();
icon.hide();
})
.mousemove(function(event) {
var position = getPosition(event),
image = getFrame(position),
frameHeight = image.height;
frame.attr('src', image.src);
timestamp.html(Ox.formatDuration(position, 'short'));
var height = (that.height() - frameHeight)/2;
frame.css({'top': height + 'px'});
timestamp.css({'top': (frameHeight + height) + 'px'});
})
.mouseout(function() {
frame.hide();
timestamp.hide();
icon.show();
})
.mousedown(function(event) {
that.triggerEvent('click', {
'position': getPosition(event)
});
});
function getPosition(event) {
var position = Math.floor(event.clientX - that.offset().left);
position = (position / that.width()) * self.options.duration;
return position;
}
function getFrame(position) {
var frame;
$.each(frames, function(i, img) {
if(!frame || i <= position)
frame = img;
});
return frame;
}
function cacheFrames() {
$.each(self.options.frames, function(i, src) {
frames[i] = new Image();
frames[i].onload = function() {
frameHeight = frames[i].height / frames[i].width * that.width();
}
frames[i].src = src;
});
}
self.onChange = function(key, value) {
if (key == 'frames') {
cacheFrames();
} else if (key == 'icon') {
icon.attr('src', value);
}
}
if(options.icon)
icon.attr('src', options.icon);
cacheFrames();
return that;
};
Ox.LargeTimeline = function(options, self) {
var self = self || {},