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>
This commit is contained in:
Petr Vobornik 2014-02-27 18:21:05 +01:00
parent c82c598163
commit fddb2212bc
6 changed files with 56 additions and 23 deletions

View File

@ -30,9 +30,27 @@
@checkbox-selected-color: darken(@checkbox-hover-color, 20%); @checkbox-selected-color: darken(@checkbox-hover-color, 20%);
/* Checkboxes and Radios */ /* Checkboxes and Radios */
.radio, .checkbox {
position: relative;
padding: 0;
}
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { 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, input[type="checkbox"] + label,
@ -45,7 +63,7 @@ input[type="radio"] + label {
.fa; .fa;
font-size: 125%; font-size: 125%;
vertical-align: -11%; vertical-align: -7%;
margin-right: 5px; 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 { input[type="checkbox"] + label:before {
content: "@{fa-var-square-o} "; content: @fa-var-square-o;
} }
input[type="checkbox"]:checked + label:before { input[type="checkbox"]:checked + label:before {
content: "@{fa-var-check-square-o} "; content: @fa-var-check-square-o;
color: @checkbox-selected-color; color: @checkbox-selected-color;
} }
@ -99,10 +127,6 @@ input[type="radio"]:checked + label:before {
color: @checkbox-selected-color; color: @checkbox-selected-color;
} }
input[type="radio"]:disabled + label {
color: @checkbox-disabled-color;
}
.form-horizontal { .form-horizontal {
.controls { .controls {

View File

@ -1166,6 +1166,10 @@ IPA.option_widget_base = function(spec, that) {
var id = that._option_next_id + input_name; var id = that._option_next_id + input_name;
var enabled = that.enabled && option.enabled; var enabled = that.enabled && option.enabled;
var opt_cont = $('<span/>', {
"class": that.intput_type
}).appendTo(container);
option.input_node = $('<input/>', { option.input_node = $('<input/>', {
id: id, id: id,
type: that.input_type, type: that.input_type,
@ -1174,13 +1178,13 @@ IPA.option_widget_base = function(spec, that) {
value: option.value, value: option.value,
title: option.tooltip || that.tooltip, title: option.tooltip || that.tooltip,
change: that.on_input_change change: that.on_input_change
}).appendTo(container); }).appendTo(opt_cont);
option.label_node = $('<label/>', { option.label_node = $('<label/>', {
html: option.label || '', html: option.label || '',
title: option.tooltip || that.tooltip, title: option.tooltip || that.tooltip,
'for': id 'for': id
}).appendTo(container); }).appendTo(opt_cont);
that.new_option_id(); that.new_option_id();
}; };
@ -1557,6 +1561,10 @@ IPA.standalone_option = function(spec, container, label) {
spec.type = spec.type || 'checkbox'; spec.type = spec.type || 'checkbox';
var opt_cont = $('<span/>', {
'class': spec.type
});
var input = $('<input/>', spec); var input = $('<input/>', spec);
if (!label) { if (!label) {
@ -1571,11 +1579,12 @@ IPA.standalone_option = function(spec, container, label) {
}); });
if (container) { if (container) {
input.appendTo(container); input.appendTo(opt_cont);
label_el.appendTo(container); label_el.appendTo(opt_cont);
opt_cont.appendTo(container);
} }
return [input, label_el]; return [input, label_el, opt_cont];
}; };
/** /**

View File

@ -37,10 +37,10 @@ ZONE_DATA = {
('textbox', 'idnsname', ZONE_PKEY), ('textbox', 'idnsname', ZONE_PKEY),
('textbox', 'idnssoamname', 'ns'), ('textbox', 'idnssoamname', 'ns'),
('textbox', 'ip_address', '192.168.1.1'), ('textbox', 'ip_address', '192.168.1.1'),
('checkbox', 'force', ''), ('checkbox', 'force', 'checked'),
], ],
'mod': [ 'mod': [
('checkbox', 'idnsallowsyncptr', ''), ('checkbox', 'idnsallowsyncptr', 'checked'),
], ],
} }
@ -63,7 +63,7 @@ RECORD_MOD_DATA = {
CONFIG_MOD_DATA = { CONFIG_MOD_DATA = {
'mod': [ 'mod': [
('checkbox', 'idnsallowsyncptr', ''), ('checkbox', 'idnsallowsyncptr', 'checked'),
], ],
} }

View File

@ -61,14 +61,14 @@ class host_tasks(UI_driver):
] ]
if ip: if ip:
add_data.append(('textbox', 'ip_address', ip)) add_data.append(('textbox', 'ip_address', ip))
add_data.append(('checkbox', 'force', '')) add_data.append(('checkbox', 'force', None))
del_data = [ del_data = [
('checkbox', 'updatedns', '') ('checkbox', 'updatedns', None)
] ]
else: else:
add_data = [ add_data = [
('textbox', 'fqdn', '%s.%s' % (host, domain)), ('textbox', 'fqdn', '%s.%s' % (host, domain)),
('checkbox', 'force', ''), ('checkbox', 'force', None),
] ]
del_data = None del_data = None
@ -204,7 +204,7 @@ class test_host(host_tasks):
http://www.freeipa.org/page/V3/Kerberos_Flags http://www.freeipa.org/page/V3/Kerberos_Flags
""" """
name = 'ipakrbokasdelegate' name = 'ipakrbokasdelegate'
mod = {'mod': [('checkbox', name, '')]} mod = {'mod': [('checkbox', name, None)]}
checked = ['checked'] checked = ['checked']
self.init_app() self.init_app()

View File

@ -41,7 +41,7 @@ class sevice_tasks(UI_driver):
('combobox', 'host', host) ('combobox', 'host', host)
], ],
'mod': [ 'mod': [
('checkbox', 'ipakrbokasdelegate', ''), ('checkbox', 'ipakrbokasdelegate', None),
], ],
} }
@ -177,7 +177,7 @@ class test_service(sevice_tasks):
""" """
pkey = self.get_http_pkey() pkey = self.get_http_pkey()
name = 'ipakrbokasdelegate' name = 'ipakrbokasdelegate'
mod = {'mod': [('checkbox', name, '')]} mod = {'mod': [('checkbox', name, None)]}
checked = ['checked'] checked = ['checked']
self.init_app() self.init_app()

View File

@ -1005,7 +1005,7 @@ class UI_driver(object):
elif widget_type == 'radio': elif widget_type == 'radio':
self.check_option(key, val, parent) self.check_option(key, val, parent)
elif widget_type == 'checkbox': elif widget_type == 'checkbox':
self.check_option(key, parent=parent) self.check_option(key, val, parent=parent)
elif widget_type == 'selectbox': elif widget_type == 'selectbox':
self.select('select[name=%s]' % key, val, parent) self.select('select[name=%s]' % key, val, parent)
elif widget_type == 'combobox': elif widget_type == 'combobox':