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 || {},