From 5f6da96baa529964d34705e539a3b4bf3a032027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Z=C3=A1rybnick=C3=BD?= <jakub.zarybnicky@inuits.eu>
Date: Sun, 17 Jun 2018 14:31:10 +0200
Subject: [PATCH] web: UI cleanup

---
 hledger-web/src/Handler/JournalR.hs         |  3 +-
 hledger-web/src/Handler/RegisterR.hs        | 11 +--
 hledger-web/src/Widget/AddForm.hs           | 23 +++++++
 hledger-web/src/Widget/Common.hs            | 18 -----
 hledger-web/static/hledger.css              | 55 +--------------
 hledger-web/static/hledger.js               | 74 ++++++++-------------
 hledger-web/templates/default-layout.hamlet | 34 +++++-----
 hledger-web/templates/journal.hamlet        | 12 +---
 hledger-web/templates/manage.hamlet         | 10 ++-
 hledger-web/templates/register.hamlet       | 23 ++-----
 10 files changed, 82 insertions(+), 181 deletions(-)

diff --git a/hledger-web/src/Handler/JournalR.hs b/hledger-web/src/Handler/JournalR.hs
index 06abdf33b..bf6014611 100644
--- a/hledger-web/src/Handler/JournalR.hs
+++ b/hledger-web/src/Handler/JournalR.hs
@@ -12,7 +12,7 @@ import Import
 import Hledger
 import Hledger.Cli.CliOptions
 import Hledger.Web.WebOptions
-import Widget.AddForm (addForm)
+import Widget.AddForm (addModal)
 import Widget.Common (accountQuery, mixedAmountAsHtml)
 
 -- | The formatted journal view, with sidebar.
@@ -27,7 +27,6 @@ getJournalR = do
       acctlink a = (RegisterR, [("q", accountQuery a)])
       (_, items) = journalTransactionsReport (reportopts_ $ cliopts_ opts) j m
 
-  (addView, addEnctype) <- generateFormPost (addForm j today)
   defaultLayout $ do
     setTitle "journal - hledger-web"
     $(widgetFile "journal")
diff --git a/hledger-web/src/Handler/RegisterR.hs b/hledger-web/src/Handler/RegisterR.hs
index 0462a2f6c..ba14a1f61 100644
--- a/hledger-web/src/Handler/RegisterR.hs
+++ b/hledger-web/src/Handler/RegisterR.hs
@@ -17,8 +17,8 @@ import Text.Hamlet (hamletFile)
 import Hledger
 import Hledger.Cli.CliOptions
 import Hledger.Web.WebOptions
-import Widget.AddForm (addForm)
-import Widget.Common (mixedAmountAsHtml, numberTransactionsReportItems)
+import Widget.AddForm (addModal)
+import Widget.Common (mixedAmountAsHtml)
 
 -- | The main journal/account register view, with accounts sidebar.
 getRegisterR :: Handler Html
@@ -31,13 +31,6 @@ getRegisterR = do
 
   let r@(balancelabel,items) = accountTransactionsReport (reportopts_ $ cliopts_ opts) j m $ fromMaybe Any $ inAccountQuery qopts
       balancelabel' = if isJust (inAccount qopts) then balancelabel else "Total"
-      evenodd x = if even x then "even" else "odd" :: Text
-      datetransition newm newd
-        | newm = "newmonth"
-        | newd = "newday"
-        | otherwise = "" :: Text
-
-  (addView, addEnctype) <- generateFormPost (addForm j today)
   defaultLayout $ do
     setTitle "register - hledger-web"
     $(widgetFile "register")
diff --git a/hledger-web/src/Widget/AddForm.hs b/hledger-web/src/Widget/AddForm.hs
index 5cb8f3675..15800e093 100644
--- a/hledger-web/src/Widget/AddForm.hs
+++ b/hledger-web/src/Widget/AddForm.hs
@@ -2,10 +2,12 @@
 {-# LANGUAGE GADTs #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE QuasiQuotes #-}
+{-# LANGUAGE RankNTypes #-}
 {-# LANGUAGE TemplateHaskell #-}
 
 module Widget.AddForm
   ( addForm
+  , addModal
   ) where
 
 import Control.Monad.State.Strict (evalStateT)
@@ -26,6 +28,27 @@ import Settings (widgetFile)
 
 -- XXX <select> which journal to add to
 
+addModal ::
+     ( MonadWidget m
+     , r ~ Route (HandlerSite m)
+     , m ~ WidgetFor (HandlerSite m)
+     , RenderMessage (HandlerSite m) FormMessage
+     )
+  => r -> Journal -> Day -> m ()
+addModal addR j today = do
+  (addView, addEnctype) <- generateFormPost (addForm j today)
+  [whamlet|
+<div .modal.fade #addmodal tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
+  <div .modal-dialog .modal-lg>
+    <div .modal-content>
+      <div .modal-header>
+        <button type="button" .close data-dismiss="modal" aria-hidden="true">&times;
+        <h3 .modal-title #addLabel>Add a transaction
+      <div .modal-body>
+        <form#addform.form action=@{addR} method=POST enctype=#{addEnctype}>
+          ^{addView}
+|]
+
 addForm ::
      (site ~ HandlerSite m, RenderMessage site FormMessage, MonadHandler m)
   => Journal
diff --git a/hledger-web/src/Widget/Common.hs b/hledger-web/src/Widget/Common.hs
index 7a26c0a4a..88e998891 100644
--- a/hledger-web/src/Widget/Common.hs
+++ b/hledger-web/src/Widget/Common.hs
@@ -1,4 +1,3 @@
-{-# LANGUAGE BangPatterns #-}
 {-# LANGUAGE LambdaCase #-}
 {-# LANGUAGE NamedFieldPuns #-}
 {-# LANGUAGE OverloadedStrings #-}
@@ -10,7 +9,6 @@ module Widget.Common
   , balanceReportAsHtml
   , helplink
   , mixedAmountAsHtml
-  , numberTransactionsReportItems
   , fromFormSuccess
   , writeValidJournal
   , journalFile404
@@ -18,11 +16,9 @@ module Widget.Common
 
 import Data.Default (def)
 import Data.Foldable (find, for_)
-import Data.List (mapAccumL)
 import Data.Semigroup ((<>))
 import Data.Text (Text)
 import qualified Data.Text as T
-import Data.Time.Calendar (Day, toGregorian)
 import System.FilePath (takeFileName)
 import Text.Blaze ((!), textValue)
 import qualified Text.Blaze.Html5 as H
@@ -50,7 +46,6 @@ writeValidJournal f txt =
   liftIO (readJournal def (Just f) txt) >>= \case
     Left e -> return (Left e)
     Right _ -> do
-      -- And write to the file
       _ <- liftIO (writeFileWithBackupIfChanged f txt)
       return (Right ())
 
@@ -102,19 +97,6 @@ accountQuery = ("inacct:" <>) .  quoteIfSpaced
 accountOnlyQuery :: AccountName -> Text
 accountOnlyQuery = ("inacctonly:" <>) . quoteIfSpaced
 
-numberTransactionsReportItems :: [TransactionsReportItem] -> [(Int, Bool, Bool, TransactionsReportItem)]
-numberTransactionsReportItems = snd . mapAccumL number (0, nulldate)
-  where
-    number :: (Int, Day) -> TransactionsReportItem -> ((Int, Day), (Int, Bool, Bool, TransactionsReportItem))
-    number (!n, !prevd) i@(t, _, _, _, _, _) = ((n', d), (n', newday, newmonth, i))
-      where
-        n' = n + 1
-        d = tdate t
-        newday = d /= prevd
-        newmonth = dm /= prevdm || dy /= prevdy
-        (dy, dm, _) = toGregorian d
-        (prevdy, prevdm, _) = toGregorian prevd
-
 mixedAmountAsHtml :: MixedAmount -> HtmlUrl a
 mixedAmountAsHtml b _ =
   for_ (lines (showMixedAmountWithoutPrice b)) $ \t -> do
diff --git a/hledger-web/static/hledger.css b/hledger-web/static/hledger.css
index 8aa843a55..ec8d65c74 100644
--- a/hledger-web/static/hledger.css
+++ b/hledger-web/static/hledger.css
@@ -20,37 +20,6 @@
 /*------------------------------------------------------------------------------------------*/
 /* 4. typeahead styles */
 
-/*
-.typeahead,
-.tt-query,
-.tt-hint {
-  width: 396px;
-  height: 30px;
-  padding: 8px 12px;
-  font-size: 24px;
-  line-height: 30px;
-  border: 2px solid #ccc;
-  -webkit-border-radius: 8px;
-     -moz-border-radius: 8px;
-          border-radius: 8px;
-  outline: none;
-}
-
-.typeahead {
-  background-color: #fff;
-}
-
-.typeahead:focus {
-  border: 2px solid #0097cf;
-}
-
-.tt-query {
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-*/
 .tt-hint {
   color: #bbb;
 }
@@ -100,7 +69,7 @@ code {
 
 ul {
     list-style-type: none;
-	  padding: 0;
+    padding: 0;
 }
 
 #main-content {
@@ -200,24 +169,6 @@ ul {
     whitespace: nowrap;
 }
 
-#main-content {
-   /*
-    -webkit-transition: width 0.3s ease, margin 0.3s ease;
-    -moz-transition: width 0.3s ease, margin 0.3s ease;
-    -o-transition: width 0.3s ease, margin 0.3s ease;
-    transition: width 0.3s ease, margin 0.3s ease;
-*/
-}
-
-#sidebar-menu {
-    /*
-    -webkit-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
-    -moz-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
-    -o-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
-    transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
-*/
-}
-
 .col-any-0 {
     width:0 !important;
     height:0 !important;
@@ -229,10 +180,6 @@ ul {
     font-size:large;
 }
 
-#searchbar {
-    width: 100% !important;
-}
-
 @media screen and (max-width: 768px) {
     .row-offcanvas {
         position: relative;
diff --git a/hledger-web/static/hledger.js b/hledger-web/static/hledger.js
index ecc73f708..1e4214b1c 100644
--- a/hledger-web/static/hledger.js
+++ b/hledger-web/static/hledger.js
@@ -4,9 +4,13 @@
 // STARTUP
 
 $(document).ready(function() {
-  // cache the input element as a variable
-  // for minor performance   benefits
-  var dateEl = $('#dateWrap');
+  // date picker
+  // http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
+  var dateEl = $('#dateWrap').datepicker({
+    showOnFocus: false,
+    autoclose: true,
+    format: 'yyyy-mm-dd'
+  });;
 
   // ensure add form always focuses its first field
   $('#addmodal')
@@ -18,21 +22,6 @@ $(document).ready(function() {
       dateEl.datepicker('hide');
     });
 
-  // show add form if ?add=1
-  if ($.url.param('add')) { addformShow(true); }
-
-  // date picker
-  // http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
-  dateEl.datepicker({
-    showOnFocus: false,
-    autoclose: true,
-    format: 'yyyy-mm-dd'
-  });
-
-  // sidebar account hover handlers
-  $('#sidebar td a').mouseenter(function(){ $(this).parent().addClass('mouseover'); });
-  $('#sidebar td').mouseleave(function(){ $(this).removeClass('mouseover'); });
-
   // keyboard shortcuts
   // 'body' seems to hold focus better than document in FF
   $('body').bind('keydown', 'h',       function(){ $('#helpmodal').modal('toggle'); return false; });
@@ -42,12 +31,12 @@ $(document).ready(function() {
   $('body').bind('keydown', 'a',       function(){ addformShow(); return false; });
   $('body').bind('keydown', 'n',       function(){ addformShow(); return false; });
   $('body').bind('keydown', 'f',       function(){ $('#searchform input').focus(); return false; });
+  $('body, #addform input, #addform select').bind('keydown', 'ctrl++',       addformAddPosting);
   $('body, #addform input, #addform select').bind('keydown', 'ctrl+shift+=', addformAddPosting);
   $('body, #addform input, #addform select').bind('keydown', 'ctrl+=',       addformAddPosting);
   $('body, #addform input, #addform select').bind('keydown', 'ctrl+-',       addformDeletePosting);
   $('.amount-input:last').keypress(addformAddPosting);
 
-
   // highlight the entry from the url hash
   if (window.location.hash && $(window.location.hash)[0]) {
     $(window.location.hash).addClass('highlighted');
@@ -173,49 +162,38 @@ function focus($el) {
 
 // Insert another posting row in the add form.
 function addformAddPosting() {
-  $('.amount-input:last').off('keypress');
-  // do nothing if it's not currently visible
-  if (!$('#addform').is(':visible')) return;
-  // save a copy of last row
-  var lastrow = $('#addform .form-group:last').clone();
+  if (!$('#addform').is(':visible')) {
+    return;
+  }
 
-  // replace the submit button with an amount field, clear and renumber it, add the keybindings
+  var prevLastRow = $('.amount-input:last');
+  prevLastRow.off('keypress');
+
+  // Clone the currently last row
+  $('#addform .account-postings').append(prevLastRow.clone());
   var num = $('#addform .account-group').length;
 
-  // insert the new last row
-  $('#addform .account-postings').append(lastrow);
-  // TODO: Enable typehead on dynamically created inputs
-
-  var $acctinput = $('.account-input:last');
-  var $amntinput = $('.amount-input:last');
   // clear and renumber the field, add keybindings
-  $acctinput
+  // XXX Enable typehead on dynamically created inputs
+  $('.amount-input:last')
     .val('')
-    .prop('name', 'account')
-    .prop('placeholder', 'Account ' + (num + 1));
-  //lastrow.find('input') // not :last this time
-  $acctinput
-    .bind('keydown', 'ctrl+shift+=', addformAddPosting)
-    .bind('keydown', 'ctrl+=', addformAddPosting)
-    .bind('keydown', 'ctrl+-', addformDeletePosting);
-
-  $amntinput
-    .val('')
-    .prop('name','amount')
-    .prop('placeholder','Amount ' + (num + 1))
+    .prop('placeholder','Amount ' + num)
     .keypress(addformAddPosting);
 
-  $acctinput
+  $('.account-input:last')
+    .val('')
+    .prop('placeholder', 'Account ' + num)
+    .bind('keydown', 'ctrl++', addformAddPosting)
     .bind('keydown', 'ctrl+shift+=', addformAddPosting)
     .bind('keydown', 'ctrl+=', addformAddPosting)
     .bind('keydown', 'ctrl+-', addformDeletePosting);
-
 }
 
 // Remove the add form's last posting row, if empty, keeping at least two.
 function addformDeletePosting() {
-  var num = $('#addform .account-group').length;
-  if (num <= 2) return;
+  if ($('#addform .account-group').length <= 2) {
+    return;
+  }
   // remember if the last row's field or button had focus
   var focuslost =
     $('.account-input:last').is(':focus')
diff --git a/hledger-web/templates/default-layout.hamlet b/hledger-web/templates/default-layout.hamlet
index e0cc684a7..75dc248b9 100644
--- a/hledger-web/templates/default-layout.hamlet
+++ b/hledger-web/templates/default-layout.hamlet
@@ -7,29 +7,27 @@
 <div#topbar .col-md-8 .col-sm-8 .col-xs-10>
   <h1>#{takeFileName (journalFilePath j)}
 
-<div #sidebar-menu .sidebar-offcanvas.#{sideShowmd}.#{sideShowsm}>
+<div#sidebar-menu .sidebar-offcanvas.#{sideShowmd}.#{sideShowsm}>
   <table .main-menu .table>
     ^{accounts}
 
-<div .col-xs-12.#{mainShowmd}.#{mainShowsm}>
+<div#main-content .col-xs-12.#{mainShowmd}.#{mainShowsm}>
   $maybe m <- msg
     <div #message .alert.alert-info>#{m}
-  <div .row>
-    <form#searchform .form-inline method=GET>
-      <div .form-group .col-md-12 .col-sm-12 .col-xs-12>
-        <div #searchbar .input-group>
-          <input .form-control name=q value=#{q} placeholder="Search"
-            title="Enter hledger search patterns to filter the data below">
-          <div .input-group-btn>
-            $if not (T.null q)
-              <a href=@{here} .btn .btn-default title="Clear search terms">
-                <span .glyphicon .glyphicon-remove-circle>
-            <button .btn .btn-default type=submit title="Apply search terms">
-              <span .glyphicon .glyphicon-search>
-            <button .btn .btn-default type=button data-toggle="modal" data-target="#helpmodal"
-               title="Show search and general help">?
-            <a href="@{ManageR}" .btn.btn-default title="Manage journal files">
-              <span .glyphicon .glyphicon-wrench>
+  <form#searchform.input-group method=GET>
+    <input .form-control name=q value=#{q} placeholder="Search"
+      title="Enter hledger search patterns to filter the data below">
+    <div .input-group-btn>
+      $if not (T.null q)
+        <a href=@{here} .btn .btn-default title="Clear search terms">
+          <span .glyphicon .glyphicon-remove-circle>
+      <button .btn .btn-default type=submit title="Apply search terms">
+        <span .glyphicon .glyphicon-search>
+      <a href="@{ManageR}" .btn.btn-default title="Manage journal files">
+        <span .glyphicon .glyphicon-wrench>
+      <button .btn .btn-default type=button data-toggle="modal" data-target="#helpmodal"
+         title="Show search and general help">
+        <span .glyphicon .glyphicon-question-sign>
   ^{widget}
 
 <div .modal.fade #helpmodal tabindex="-1" role="dialog" aria-labelledby="helpLabel" aria-hidden="true">
diff --git a/hledger-web/templates/journal.hamlet b/hledger-web/templates/journal.hamlet
index d05227408..09726cb63 100644
--- a/hledger-web/templates/journal.hamlet
+++ b/hledger-web/templates/journal.hamlet
@@ -16,7 +16,7 @@
         <td .date nowrap>#{show (tdate torig)}
         <td .description colspan=2>#{textElideRight 60 (tdescription torig)}
         <td .amount style="text-align:right;">
-          $if not split || not (isZeroMixedAmount amt)
+          $if not split && not (isZeroMixedAmount amt)
             \^{mixedAmountAsHtml amt}
 
       $forall Posting { paccount = acc, pamount = amt } <- tpostings torig
@@ -30,12 +30,4 @@
           <td .amount .nonhead style="text-align:right;">
             ^{mixedAmountAsHtml amt}
 
-<div .modal #addmodal tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
-  <div .modal-dialog .modal-lg>
-    <div .modal-content>
-      <div .modal-header>
-        <button type="button" .close data-dismiss="modal" aria-hidden="true">&times;
-        <h3 .modal-title #addLabel>Add a transaction
-      <div .modal-body>
-        <form#addform.form action=@{AddR} method=POST enctype=#{addEnctype}>
-          ^{addView}
+^{addModal AddR j today}
diff --git a/hledger-web/templates/manage.hamlet b/hledger-web/templates/manage.hamlet
index 4a300abbf..a8b107e01 100644
--- a/hledger-web/templates/manage.hamlet
+++ b/hledger-web/templates/manage.hamlet
@@ -11,14 +11,12 @@
       <tbody>
         $forall (path, _) <- jfiles j
           <tr>
-            <td>
+            <td style="vertical-align:middle">
               #{path}
             <td style="text-align:right">
-              <a href=@{EditR path}>
+              <a.btn.btn-default href=@{EditR path}>
                 Edit
-              &nbsp;&nbsp;
-              <a href=@{UploadR path}>
+              <a.btn.btn-default href=@{UploadR path}>
                 Upload
-              &nbsp;&nbsp;
-              <a href=@{DownloadR path}>
+              <a.btn.btn-default href=@{DownloadR path}>
                 Download
diff --git a/hledger-web/templates/register.hamlet b/hledger-web/templates/register.hamlet
index 10536a048..b09c97609 100644
--- a/hledger-web/templates/register.hamlet
+++ b/hledger-web/templates/register.hamlet
@@ -4,13 +4,13 @@
 <div .hidden-xs>
   ^{registerChartHtml $ transactionsReportByCommodity r}
 
-<div .table-responsive>
-  <table.registerreport .table .table-striped .table-condensed>
+<div.table-responsive>
+  <table .table.table-striped.table-condensed>
     <thead>
       <tr>
         <th style="text-align:left;">
           Date
-          <span .glyphicon .glyphicon-chevron-up>
+          <span .glyphicon.glyphicon-chevron-up>
         <th style="text-align:left;">Description
         <th style="text-align:left;">To/From Account(s)
         <th style="text-align:right; white-space:normal;">Amount Out/In
@@ -18,9 +18,8 @@
           #{balancelabel'}
 
     <tbody>
-      $forall (n, newd, newm, (torig, tacct, split, acct, amt, bal)) <- numberTransactionsReportItems items
-        <tr ##{tindex torig} .item.#{evenodd n}.#{datetransition newm newd}
-            title="#{show torig}" style="vertical-align:top;">
+      $forall (torig, tacct, split, acct, amt, bal) <- items
+        <tr ##{tindex torig} .item title="#{show torig}" style="vertical-align:top;">
           <td .date>
             <a href="@{JournalR}#transaction-#{tindex torig}">
               #{show (tdate tacct)}
@@ -28,15 +27,7 @@
           <td .account>#{elideRight 40 acct}
           <td .amount style="text-align:right; white-space:nowrap;">
             $if not split || not (isZeroMixedAmount amt)
-              \^{mixedAmountAsHtml amt}
+              ^{mixedAmountAsHtml amt}
           <td .balance style="text-align:right;">^{mixedAmountAsHtml bal}
 
-<div .modal #addmodal tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
-  <div .modal-dialog .modal-lg>
-    <div .modal-content>
-      <div .modal-header>
-        <button type="button" .close data-dismiss="modal" aria-hidden="true">&times;
-        <h3 .modal-title #addLabel>Add a transaction
-      <div .modal-body>
-        <form#addform.form action=@{AddR} method=POST enctype=#{addEnctype}>
-          ^{addView}
+^{addModal AddR j today}