Use a dialog to add a payment

5 files changed, 82 insertions, 37 deletions

diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index 2ad6a9c..4bd1ad6 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -19,7 +19,7 @@ design = do
 
   ".textInput" ? do
     position relative
-    marginBottom (em 1)
+    marginBottom (em 1.5)
     paddingTop (px inputTop)
     marginTop (px (-10))
 
@@ -57,3 +57,23 @@ design = do
         position absolute
         color Color.chestnutRose
         fontSize (pct 80)
+
+  ".radioGroup" ? do
+    position relative
+    marginBottom (em 2)
+
+    ".title" ? do
+      color Color.silver
+      marginBottom (em 0.8)
+
+    ".radioElems" ? do
+      display flex
+      "justify-content" -: "space-around"
+
+      label ? do
+        marginBottom (px 5)
+        display block
+        cursor pointer
+        input ? do
+          margin (px 0) (px 8) (px (-1)) (px 0)
+          cursor pointer
diff --git a/src/server/Design/LoggedIn/Home/Search.hs b/src/server/Design/LoggedIn/Home/Search.hs
index 1bc91ef..726b4cf 100644
--- a/src/server/Design/LoggedIn/Home/Search.hs
+++ b/src/server/Design/LoggedIn/Home/Search.hs
@@ -8,6 +8,10 @@ import Clay
 
 import Design.Constants
 
+import qualified Design.Helper as Helper
+import qualified Design.Color as Color
+import qualified Design.Constants as Constants
+
 design :: Css
 design = do
   marginBottom blockMarginBottom
@@ -17,3 +21,11 @@ design = do
   ".textInput" ? do
     display inlineBlock
     marginRight (px 30)
+    marginBottom (px 0)
+
+  ".stat" ? do
+    lineHeight (pct 100)
+
+  ".addPayment" ? do
+    Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+    float floatRight
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index b68f48f..538bc6d 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -33,32 +33,20 @@ design = do
   ".row" ? do
     fontSize (px 18)
     height (px rowHeightPx)
+    ".cell:first-child::before" ? do
+      display block
+      content (stringContent "")
+      position absolute
+      top (px 0)
+      left (px 0)
+      width (px 0)
+      height (px rowHeightPx)
+      backgroundColor Color.mossGreen
+      transition "width" (sec 0.3) ease (sec 0)
+      opacity (0.8)
 
     hover & do
-      let (borderW, triangleW, triangleH) = (4, 6, 8)
-      ".cell:first-child::before" ? do
-        display block
-        content (stringContent "")
-        position absolute
-        top (px 0)
-        left (px 0)
-
-        width (px borderW)
-        height (px rowHeightPx)
-        backgroundColor Color.mossGreen
-
-      ".cell:first-child::after" ? do
-        display block
-        content (stringContent "")
-        position absolute
-        top (px (rowHeightPx `Prelude.div` 2 - triangleH))
-        left (px borderW)
-
-        width (px 0)
-        height (px 0)
-        borderTop solid (px triangleH) transparent
-        borderBottom solid (px triangleH) transparent
-        borderLeft solid (px triangleW) Color.mossGreen
+      ".cell:first-child::before" ? width (px 5)
 
     nthChild "odd" & do
       backgroundColor Color.wildSand
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index 1653ea7..c87a2c1 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -54,10 +54,15 @@ data Key =
 
   -- Payments
 
-  | Add
+  | Name
+  | Cost
+  | Frequency
+  | InvalidFrequency
+  | AddPayment
   | PaymentNotDeleted
   | Punctual
   | Monthly
+
   | SingularMonthlyCount
   | PluralMonthlyCount
   | PaymentsTitle
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 8a640d1..f4087a4 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -200,10 +200,30 @@ m l CostRequired =
 
 -- Payments
 
-m l Add =
+m l Name =
   case l of
-    English -> "Add"
-    French  -> "Ajouter"
+    English -> "Name"
+    French  -> "Nom"
+
+m l Cost =
+  case l of
+    English -> "Cost"
+    French  -> "Coût"
+
+m l Frequency =
+  case l of
+    English -> "Frequency"
+    French  -> "Fréquence"
+
+m l InvalidFrequency =
+  case l of
+    English -> "Invalid frequency"
+    French  -> "Fréquence invalide"
+
+m l AddPayment =
+  case l of
+    English -> "Add a payment"
+    French  -> "Ajouter un paiement"
 
 m l PaymentNotDeleted =
   case l of
@@ -213,12 +233,12 @@ m l PaymentNotDeleted =
 m l Punctual =
   case l of
     English -> "Punctual"
-    French  -> "Ponctuel"
+    French  -> "Ponctuelle"
 
 m l Monthly =
   case l of
     English -> "Monthly"
-    French  -> "Mensuel"
+    French  -> "Mensuelle"
 
 m l SingularMonthlyCount =
   case l of
@@ -227,7 +247,7 @@ m l SingularMonthlyCount =
 
 m l PluralMonthlyCount =
   case l of
-    English -> "{1} monthly payments totalling {2}"
+    English -> "{1} monthly payments worth {2}"
     French  -> "{1} paiements mensuels comptabilisant {2}"
 
 m l PaymentsTitle =
@@ -253,7 +273,7 @@ m l SearchText =
 m l Worth =
   case l of
     English -> "{1} worth {2}"
-    French  -> "{1} valant {2}"
+    French  -> "{1} comptabilisant {2}"
 
 -- Statistics
 
@@ -348,13 +368,13 @@ m l InvalidInt =
 
 m l SmallerIntThan =
   case l of
-    English -> "Integer bigger than {1} required"
-    French  -> "Entier supérieur à {1} requis"
+    English -> "Integer bigger than {1} or equal required"
+    French  -> "Entier supérieur ou égal à {1} requis"
 
 m l GreaterIntThan =
   case l of
-    English -> "Integer smaller than {1} required"
-    French  -> "Entier inférieur à {1} requis"
+    English -> "Integer smaller than {1} or equal required"
+    French  -> "Entier inférieur ou égal à {1} requis"
 
 -- Dialog