diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2014-02-27 18:21:05 +0100 |
---|---|---|
committer | Petr Vobornik <pvoborni@redhat.com> | 2014-03-20 08:57:42 +0100 |
commit | fddb2212bc3394068ba0cd6aebbfcf2e77cb6def (patch) | |
tree | 891556c9c078d553cc463dd963fa41e8213c081e /install | |
parent | c82c598163996997570807827e02de11ca541c94 (diff) | |
download | freeipa-fddb2212bc3394068ba0cd6aebbfcf2e77cb6def.tar.gz freeipa-fddb2212bc3394068ba0cd6aebbfcf2e77cb6def.tar.xz freeipa-fddb2212bc3394068ba0cd6aebbfcf2e77cb6def.zip |
webui-css: improve radio,checkbox keyboard support and color
checkboxes and radio buttons:
- do not change color on hover when disabled
- are focusable and checkable be keyboard again. This uses a little
trick where the real checkbox is hidden under the artificial
checkbox. That way it has the same position and therefore it
works even in containers with overflow set.
https://fedorahosted.org/freeipa/ticket/4217
Reviewed-By: Adam Misnyovszki <amisnyov@redhat.com>
Diffstat (limited to 'install')
-rw-r--r-- | install/ui/less/forms-override.less | 40 | ||||
-rw-r--r-- | install/ui/src/freeipa/widget.js | 19 |
2 files changed, 46 insertions, 13 deletions
diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less index ac442bb0b..b8c2e5d35 100644 --- a/install/ui/less/forms-override.less +++ b/install/ui/less/forms-override.less @@ -30,9 +30,27 @@ @checkbox-selected-color: darken(@checkbox-hover-color, 20%); /* Checkboxes and Radios */ + +.radio, .checkbox { + position: relative; + padding: 0; +} + input[type="checkbox"], input[type="radio"] { - display: none; + display: inline; + position: absolute; + overflow: hidden; + margin:0; + padding:0; + border:0; + outline:0; + opacity:0; +} + +input[type="checkbox"]:focus + label:before, +input[type="radio"]:focus + label:before { + outline: thin dotted @checkbox-selected-color; } input[type="checkbox"] + label, @@ -45,7 +63,7 @@ input[type="radio"] + label { .fa; font-size: 125%; - vertical-align: -11%; + vertical-align: -7%; margin-right: 5px; } } @@ -81,12 +99,22 @@ input[type="checkbox"]:disabled + label { } } +input[type="radio"]:disabled:checked + label, +input[type="checkbox"]:disabled:checked + label { + color: @checkbox-color; + + &:before, + &:hover:before { + color: @checkbox-color; + } +} + input[type="checkbox"] + label:before { - content: "@{fa-var-square-o} "; + content: @fa-var-square-o; } input[type="checkbox"]:checked + label:before { - content: "@{fa-var-check-square-o} "; + content: @fa-var-check-square-o; color: @checkbox-selected-color; } @@ -99,10 +127,6 @@ input[type="radio"]:checked + label:before { color: @checkbox-selected-color; } -input[type="radio"]:disabled + label { - color: @checkbox-disabled-color; -} - .form-horizontal { .controls { diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js index 6ee61c658..f3b6c97d7 100644 --- a/install/ui/src/freeipa/widget.js +++ b/install/ui/src/freeipa/widget.js @@ -1166,6 +1166,10 @@ IPA.option_widget_base = function(spec, that) { var id = that._option_next_id + input_name; var enabled = that.enabled && option.enabled; + var opt_cont = $('<span/>', { + "class": that.intput_type + }).appendTo(container); + option.input_node = $('<input/>', { id: id, type: that.input_type, @@ -1174,13 +1178,13 @@ IPA.option_widget_base = function(spec, that) { value: option.value, title: option.tooltip || that.tooltip, change: that.on_input_change - }).appendTo(container); + }).appendTo(opt_cont); option.label_node = $('<label/>', { html: option.label || '', title: option.tooltip || that.tooltip, 'for': id - }).appendTo(container); + }).appendTo(opt_cont); that.new_option_id(); }; @@ -1557,6 +1561,10 @@ IPA.standalone_option = function(spec, container, label) { spec.type = spec.type || 'checkbox'; + var opt_cont = $('<span/>', { + 'class': spec.type + }); + var input = $('<input/>', spec); if (!label) { @@ -1571,11 +1579,12 @@ IPA.standalone_option = function(spec, container, label) { }); if (container) { - input.appendTo(container); - label_el.appendTo(container); + input.appendTo(opt_cont); + label_el.appendTo(opt_cont); + opt_cont.appendTo(container); } - return [input, label_el]; + return [input, label_el, opt_cont]; }; /** |