New checkboxes and radio styles

https://fedorahosted.org/freeipa/ticket/3904

3 files changed, 103 insertions, 9 deletions

diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
new file mode 100644
index 000000000..986a86d6f
--- /dev/null
+++ b/install/ui/less/forms-override.less
@@ -0,0 +1,91 @@
+/*  Authors:
+ *    UXD team
+ *    Petr Vobornik <pvoborni@redhat.com>
+ *
+ * Copyright (C) 2013 Red Hat
+ * see file 'COPYING' for use and warranty information
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+// This file contains overrides of reference RCUE implementation to comply
+// with IPA design
+
+/* Checkboxes and Radios */
+input[type="checkbox"],
+input[type="radio"] {
+  display: none;
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  display: inline-block;
+  margin: 4px;
+  padding: 0 24px;
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+input[type="checkbox"] + label {
+  background-image: url('../img/checkbutton-background.png');
+}
+
+input[type="checkbox"]:hover + label {
+  background-image: url('../img/checkbutton-background-hover.png');
+}
+
+input[type="checkbox"]:checked + label {
+  background-image: url('../img/checkbutton-background-selected.png');
+}
+
+input[type="checkbox"]:disabled + label {
+  background-image: url('../img/checkbutton-background-disabled.png');
+}
+
+input[type="checkbox"]:checked:disabled + label {
+  background-image: url('../img/checkbutton-background-selected-disabled.png');
+}
+
+input[type="radio"] + label {
+  background-image: url('../img/radiobutton-background.png');
+}
+
+input[type="radio"]:hover + label {
+  background-image: url('../img/radiobutton-background-hover.png');
+}
+
+input[type="radio"]:checked + label {
+  background-image: url('../img/radiobutton-background-selected.png');
+}
+
+input[type="radio"]:disabled + label {
+  background-image: url('../img/radiobutton-background-disabled.png');
+}
+
+input[type="radio"]:checked:disabled + label {
+  background-image: url('../img/radiobutton-background-selected-disabled.png');
+}
+
+.form-horizontal {
+
+    // lower radio's label width to keep it aligned with other labels when
+    // radio is part of form label
+
+    input[type="radio"] + .control-label,
+    input[type="radio"] + .control-label {
+        width: 144px;
+        padding: 3px 0 0 16px;
+        margin: 0 0 3px 0;
+    }
+}
\ No newline at end of file
diff --git a/install/ui/less/rcue.less b/install/ui/less/rcue.less
index f27583698..fc8f51484 100644
--- a/install/ui/less/rcue.less
+++ b/install/ui/less/rcue.less
@@ -5,3 +5,4 @@
 @import "rcue/buttons";
 @import "rcue/forms";
 @import "brand";
+@import "forms-override.less";
diff --git a/ipatests/test_webui/ui_driver.py b/ipatests/test_webui/ui_driver.py
index d9bd54701..b4f02ab0f 100644
--- a/ipatests/test_webui/ui_driver.py
+++ b/ipatests/test_webui/ui_driver.py
@@ -714,7 +714,8 @@ class UI_driver(object):
 
     def check_option(self, name, value=None, parent=None):
         """
-        Find checkbox or radio with name which matches ^NAME\d$
+        Find checkbox or radio with name which matches ^NAME\d$ and
+        check it by clicking on a label.
         """
         if not parent:
             parent = self.get_form()
@@ -722,15 +723,16 @@ class UI_driver(object):
         if value is not None:
             s += "[@value='%s']" % value
         opts = self.find(s, "xpath", parent, many=True)
-        opt = None
+        label = None
         # Select only the one which matches exactly the name
         for o in opts:
             n = o.get_attribute("name")
-            if n == name or re.match("^%s\d$" % name, n):
-                opt = o
+            if n == name or re.match("^%s\d+$" % name, n):
+                s = "label[for='%s']" % o.get_attribute("id")
+                label = self.find(s, By.CSS_SELECTOR, parent, strict=True)
                 break
-        assert opt is not None, "Option not found: %s" % name
-        opt.click()
+        assert label is not None, "Option not found: %s" % name
+        label.click()
 
     def select_combobox(self, name, value, parent=None):
         """
@@ -884,9 +886,9 @@ class UI_driver(object):
             parent = self.get_form()
 
         s = self.get_table_selector(table_name)
-        s += " tbody td input[value='%s']" % pkey
-        checkbox = self.find(s, By.CSS_SELECTOR, parent, strict=True)
-        checkbox.click()
+        s += " tbody td input[value='%s']+label" % pkey
+        label = self.find(s, By.CSS_SELECTOR, parent, strict=True)
+        label.click()
         self.wait()
 
     def get_record_value(self, pkey, column, parent=None, table_name=None):