From 54b7d9de9fa804e7d2e083ed6d3396c32f787d65 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 3 Oct 2011 15:02:19 +0000 Subject: [PATCH] fix css for selects with labels, allow for checkboxes with labels --- source/Ox.UI/css/Ox.UI.css | 40 +++++++++------------ source/Ox.UI/js/Form/Ox.Checkbox.js | 35 ++++++++++++------ source/Ox.UI/js/Form/Ox.Input.js | 4 ++- source/Ox.UI/js/Form/Ox.Select.js | 11 ++++-- source/Ox.UI/themes/classic/css/classic.css | 13 +++++++ source/Ox.UI/themes/modern/css/modern.css | 16 +++++++++ 6 files changed, 81 insertions(+), 38 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 9a709915..e9dce39b 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -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; +} + /* */ diff --git a/source/Ox.UI/js/Form/Ox.Checkbox.js b/source/Ox.UI/js/Form/Ox.Checkbox.js index fc64b173..0e3536fe 100644 --- a/source/Ox.UI/js/Form/Ox.Checkbox.js +++ b/source/Ox.UI/js/Form/Ox.Checkbox.js @@ -5,11 +5,13 @@ Ox.Checkbox Checkbox Element (options) -> Checkbox Element (options, self) -> Checkbox Element options Options object - disabled if true, checkbox is disabled - id element id - group if true, checkbox is part of a group checked if true, checkbox is checked - title text on label + disabled if true, checkbox is disabled + group if true, checkbox is part of a group + id element id + label Label (on the left side) + labelWidth Label width + title Title (on the right side) width width in px self 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', diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index ee98a22f..a5b7bfa4 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -24,6 +24,8 @@ Ox.Input Input Element height px (for type='textarea' and type='range' with orientation='horizontal') id element id key to be passed to autocomplete and autovalidate functions + label Label + labelWidth Label width max max value if type is 'int' or 'float' min min value if type is 'int' or 'float' name will be displayed by autovalidate function ('invalid ' + name) @@ -31,7 +33,7 @@ Ox.Input Input Element picker picker object rangeOptions range options arrows boolean, if true, display arrows - //arrowStep number, step when clicking arrows + //arrowStep number, step when clicking arrows //arrowSymbols array of two strings max number, maximum value min number, minimum value diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index f9b09fcd..41ea4c63 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -8,6 +8,8 @@ Ox.Select Select Object options Options object id element id items items + label Label + labelWidth Label width max minimum number of selected items min maximum number of selected items overlap 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' diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 1ac0ee58..f401b9bd 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -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 diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 91d5bd91..ce7effa0 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -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