From 0de8d83b9e7052f3e1113328ca4689281f42f8b1 Mon Sep 17 00:00:00 2001
From: Robert Klotzner <robert.klotzner@gmx.at>
Date: Thu, 18 Apr 2019 11:47:37 +0200
Subject: [PATCH] Introduced checkbox-container

So in the signing widget we can click anywhere on the row for selecting
the checkbox.
---
 .../sass/common.blocks/_checkbox-container.scss  | 16 ++++++++++++++++
 frontend/sass/index.scss                         |  1 +
 frontend/src/Frontend/UI/DeploymentSettings.hs   | 13 +++++++++----
 frontend/src/Frontend/UI/Widgets.hs              |  4 ++--
 4 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 frontend/sass/common.blocks/_checkbox-container.scss

diff --git a/frontend/sass/common.blocks/_checkbox-container.scss b/frontend/sass/common.blocks/_checkbox-container.scss
new file mode 100644
index 000000000..f0e013f4f
--- /dev/null
+++ b/frontend/sass/common.blocks/_checkbox-container.scss
@@ -0,0 +1,16 @@
+/*
+  A checkbox-container is some element that contains a single checkbox
+  somewhere and should behave like all of it were the checkbox. E.g. hover on
+  the container changes the checkbox style, the cursor will be a pointer
+  everywhere in the container and a click should toggle the checkbox (this
+  needs to be taken care of in code.)
+*/
+.checkbox-container {
+  cursor: pointer;
+}
+
+.checkbox-container:hover .checkbox__checkmark {
+  background-color: $hover-background;
+}
+
+
diff --git a/frontend/sass/index.scss b/frontend/sass/index.scss
index fa9a75d1b..916fb9b68 100644
--- a/frontend/sass/index.scss
+++ b/frontend/sass/index.scss
@@ -28,6 +28,7 @@
 @import 'common.blocks/select';
 @import 'common.blocks/label';
 @import 'common.blocks/checkbox';
+@import 'common.blocks/checkbox-container';
 
 @import 'common.blocks/segment';
 @import 'common.blocks/pane';
diff --git a/frontend/src/Frontend/UI/DeploymentSettings.hs b/frontend/src/Frontend/UI/DeploymentSettings.hs
index 98b077e22..90012a75b 100644
--- a/frontend/src/Frontend/UI/DeploymentSettings.hs
+++ b/frontend/src/Frontend/UI/DeploymentSettings.hs
@@ -154,9 +154,14 @@ signingItem
   => (Text, Dynamic t KeyPair)
   -> m (Dynamic t Bool)
 signingItem (n, _) = do
-    elClass "tr" "table__row" $ do
-      el "td" $ text n
-      box <- elClass "td" "signing-selector__check-box-cell" $
-        uiCheckbox "signing-selector__check-box-label" False def blank
+    elClass "tr" "table__row checkbox-container" $ mdo
+      (e, ()) <- el' "td" $ text n
+      let onTextClick = domEvent Click e
+      box <- elClass "td" "signing-selector__check-box-cell" $ do
+        let cfg = toggleCheckbox box onTextClick
+        uiCheckbox "signing-selector__check-box-label" False cfg blank
       pure (value box)
 
+toggleCheckbox :: Reflex t => Checkbox t -> Event t a -> CheckboxConfig t
+toggleCheckbox box =
+  (\v -> def { _checkboxConfig_setValue = v }) . fmap not . tag (current $ value box)
diff --git a/frontend/src/Frontend/UI/Widgets.hs b/frontend/src/Frontend/UI/Widgets.hs
index 191e72a24..ece56ae2f 100644
--- a/frontend/src/Frontend/UI/Widgets.hs
+++ b/frontend/src/Frontend/UI/Widgets.hs
@@ -67,8 +67,8 @@ import           Frontend.UI.Widgets.Helpers (imgWithAlt, makeClickable,
 --   In contrast to `checkbox` this is not only the actual checkbox but also a
 --   containing label, as this is the only way to have a styled checkbox.
 --
---   Note that this is actually a secondary type checkbox, I have yet to
---   generalize this yet.
+--   Note that this is actually a secondary type checkbox, I have to
+--   generalize this at some point.
 uiCheckbox
   :: (DomBuilder t m, PostBuild t m)
   => CssClass