some css for textareas
This commit is contained in:
parent
c84de6d0f0
commit
89c9f1c98c
2 changed files with 34 additions and 102 deletions
|
@ -69,6 +69,7 @@ Forms
|
||||||
.OxThemeClassic .OxButton,
|
.OxThemeClassic .OxButton,
|
||||||
.OxThemeClassic input.OxCheckbox,
|
.OxThemeClassic input.OxCheckbox,
|
||||||
.OxThemeClassic input.OxInput,
|
.OxThemeClassic input.OxInput,
|
||||||
|
.OxThemeClassic textarea,
|
||||||
.OxThemeClassic .OxLabel,
|
.OxThemeClassic .OxLabel,
|
||||||
.OxThemeClassic .OxTrack {
|
.OxThemeClassic .OxTrack {
|
||||||
border: 1px solid rgb(176, 176, 176);
|
border: 1px solid rgb(176, 176, 176);
|
||||||
|
@ -162,7 +163,9 @@ Forms
|
||||||
background: rgb(224, 224, 224);
|
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);
|
-moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
|
||||||
-webkit-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);
|
color: rgb(128, 128, 128);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -177,7 +177,6 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadImages(callback) {
|
function loadImages(callback) {
|
||||||
window.OxImageCache = [];
|
|
||||||
$.getJSON(oxui.path + 'json/ox.ui.images.json', function(data) {
|
$.getJSON(oxui.path + 'json/ox.ui.images.json', function(data) {
|
||||||
var counter = 0,
|
var counter = 0,
|
||||||
length = data.length;
|
length = data.length;
|
||||||
|
@ -187,7 +186,6 @@ requires
|
||||||
image.onload = function() {
|
image.onload = function() {
|
||||||
(++counter == length) && callback();
|
(++counter == length) && callback();
|
||||||
}
|
}
|
||||||
window.OxImageCache.push(image);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -2993,7 +2991,7 @@ requires
|
||||||
width: self.inputWidth + 'px',
|
width: self.inputWidth + 'px',
|
||||||
textAlign: self.options.textAlign
|
textAlign: self.options.textAlign
|
||||||
}, self.options.type == 'textarea' ? {
|
}, self.options.type == 'textarea' ? {
|
||||||
height: self.options.height + 'px'
|
height: self.options.height + 'px',
|
||||||
} : {}))
|
} : {}))
|
||||||
.val(self.options.value)
|
.val(self.options.value)
|
||||||
.blur(blur)
|
.blur(blur)
|
||||||
|
@ -3001,6 +2999,34 @@ requires
|
||||||
.focus(focus)
|
.focus(focus)
|
||||||
.appendTo(that.$element);
|
.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) {
|
if (self.hasPasswordPlaceholder) {
|
||||||
self.$input.hide();
|
self.$input.hide();
|
||||||
self.$placeholder = $('<input>')
|
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) {
|
Ox.LargeTimeline = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
|
|
Loading…
Reference in a new issue