From 89c9f1c98c99e89a39a94ebda4fc75b3950d17dd Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Tue, 1 Feb 2011 13:45:48 +0000
Subject: [PATCH] some css for textareas
---
build/css/ox.ui.classic.css | 7 +-
build/js/ox.ui.js | 129 ++++++++----------------------------
2 files changed, 34 insertions(+), 102 deletions(-)
diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css
index 4ab764a4..8b53fffd 100644
--- a/build/css/ox.ui.classic.css
+++ b/build/css/ox.ui.classic.css
@@ -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);
}
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 607943cc..009267f1 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -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 = $('')
@@ -10692,103 +10718,6 @@ requires
};
- Ox.Flipbook = function(options, self) {
-
- var self = self || {},
- frame = $('![]()
').css({
- 'position': 'absolute',
- 'width': '100%',
- 'height': 'auto'
- })
- .hide(),
- icon = $('![]()
').css({
- 'position': 'absolute',
- 'width': '100%',
- 'height': 'auto'
- }),
- frames = {},
- timestamp = $('').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 || {},