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

fix css for selects with labels, allow for checkboxes with labels

Browse source
This commit is contained in:
rlx 2011-10-03 15:02:19 +00:00
parent 0b53fc0566
commit 54b7d9de9f
6 changed files with 81 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -851,14 +851,9 @@ OxSelect
border-style: solid;
border-radius: 8px;
}
.OxSelect.OxSelected,
.OxSelect.OxSelected > .OxLabel {
.OxSelect.OxSelected {
border-radius: 8px 8px 0 0;
}
.OxSelect > .OxLabel {
float: left;
margin: -1px;
}
.OxSelect > .OxTitle {
float: left;
height: 14px;
@ -871,30 +866,27 @@ OxSelect
white-space: nowrap;
//margin-right: -16px;
}
.OxSelect.OxOverlapLeft > .OxTitle {
//padding-left: 20px;
//padding-right: 8px;
//margin-left: -32px;
}
.OxSelect.OxOverlapRight > .OxTitle {
//padding-left: 8px;
//padding-right: 20px;
//margin-right: -32px;
}
.OxSelect > .OxButton {
float: right;
margin: -1px;
}
.OxSelect.OxOverlapLeft > .OxButton {
//padding-left: 15px;
//padding-right: 1px;
//margin-left: -16px;
.OxLabelSelect > .OxLabel {
float: left;
margin: -1px;
}
.OxSelect.OxOverlapRight > .OxButton {
//padding-left: 1px;
//padding-right: 15px;
//margin-right: -16px;
.OxLabelSelect > .OxTitle {
border-left-width: 1px;
border-left-style: solid;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.OxLabelSelect.OxSelected {
border-bottom-left-radius: 8px;
}
.OxLabelSelect.OxSelected > .OxTitle {
border-bottom-left-radius: 0;
}
/*
*/

35
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -5,11 +5,13 @@ Ox.Checkbox <f:Ox.Element> Checkbox Element
(options) -> <f> Checkbox Element
(options, self) -> <f> Checkbox Element
options <o> Options object
disabled <b> if true, checkbox is disabled
id <s> element id
group <b> if true, checkbox is part of a group
checked <b> if true, checkbox is checked
title <s> text on label
disabled <b> if true, checkbox is disabled
group <b> if true, checkbox is part of a group
id <s> element id
label <s> Label (on the left side)
labelWidth <n|64> Label width
title <s> Title (on the right side)
width <n> width in px
self <o> Shared private variable
change <!> triggered when checked property changes, passes {checked, id, title}
@ -20,10 +22,12 @@ Ox.Checkbox = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
disabled: false,
id: '',
group: false,
checked: false,
disabled: false,
group: false,
id: '',
label: '',
labelWidth: 64,
overlap: 'none',
title: '',
width: 'auto'
@ -41,20 +45,31 @@ Ox.Checkbox = function(options, self) {
self.options.width != 'auto' && that.css({
width: self.options.width + 'px'
});
Ox.print(self.options.width - 16, self.options.label * (self.options.labelWidth - 16))
self.$title = Ox.Label({
disabled: self.options.disabled,
id: self.options.id + 'Label',
overlap: 'left',
title: self.options.title,
width: self.options.width - 16
- !!self.options.label * self.options.labelWidth
})
.css({
float: 'right'
})
.css({float: 'right'})
.click(clickTitle)
.appendTo(that);
}
if (self.options.label) {
self.$label = Ox.Label({
overlap: 'right',
textAlign: 'right',
title: self.options.label,
width: self.options.labelWidth
})
.css({float: 'left'})
.appendTo(that);
}
self.$button = Ox.Button({
disabled: self.options.disabled,
id: self.options.id + 'Button',

2
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -24,6 +24,8 @@ Ox.Input <f:Ox.Element> Input Element
height <n> px (for type='textarea' and type='range' with orientation='horizontal')
id <s> element id
key <s> to be passed to autocomplete and autovalidate functions
label <s|''> Label
labelWidth <n|64> Label width
max <n> max value if type is 'int' or 'float'
min <n> min value if type is 'int' or 'float'
name <s> will be displayed by autovalidate function ('invalid ' + name)

11
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -8,6 +8,8 @@ Ox.Select <f:Ox.Element> Select Object
options <o> Options object
id <s> element id
items <a|[]> items
label <s|''> Label
labelWidth <n|64> Label width
max <n|1> minimum number of selected items
min <n|1> maximum number of selected items
overlap <s|'none'> can be none, left or right
@ -32,6 +34,8 @@ Ox.Select = function(options, self) {
.defaults({
id: '',
items: [],
label: '',
labelWidth: 64,
max: 1,
min: 1,
overlap: 'none', // can be none, left or right
@ -46,9 +50,10 @@ Ox.Select = function(options, self) {
// or allow for extra action items below options
.options(options)
.addClass(
'OxSelect Ox' + Ox.toTitleCase(self.options.size) +
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
Ox.toTitleCase(self.options.overlap))
'OxSelect Ox' + Ox.toTitleCase(self.options.size) + (
self.options.overlap == 'none'
? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
) + (self.options.label ? ' OxLabelSelect' : '')
)
.css(self.options.width == 'auto' ? {} : {
width: self.options.width - 2 + 'px'

13
source/Ox.UI/themes/classic/css/classic.css
View file

@ -297,6 +297,19 @@ Forms
background: rgb(240, 240, 240);
}
.OxThemeClassic .OxLabelSelect > .OxTitle {
border-color: rgb(176, 176, 176);
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
background: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
}
.OxThemeClassic .OxLabelSelect.OxSelected > .OxTitle {
background: -moz-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
background: -o-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
}
/*
================================================================================
Images

16
source/Ox.UI/themes/modern/css/modern.css
View file

@ -193,6 +193,7 @@ Forms
.OxThemeModern .OxSelect > .OxTitle {
color: rgb(192, 192, 192);
}
.OxThemeModern .OxInputLabel {
color: rgb(192, 192, 192);
}
@ -280,6 +281,21 @@ Forms
background: rgb(16, 16, 16);
}
.OxThemeModern .OxLabelSelect > .OxTitle {
border-color: rgb(48, 48, 48);
background: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
background: -o-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
background: -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
}
.OxThemeModern .OxLabelSelect.OxSelected > .OxTitle {
background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
background: -o-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
background: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
}
/*
================================================================================
Images