From 83951b0083eb284cf1847732c7dfbeb4e0f3d4fc Mon Sep 17 00:00:00 2001
From: Artyom <yom@artyom.me>
Date: Thu, 21 Jul 2016 20:46:16 +0300
Subject: [PATCH] =?UTF-8?q?Add=20a=20=E2=80=9Cpress=20Enter=E2=80=9D=20hin?=
 =?UTF-8?q?t=20to=20edit=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

See #93
---
 src/JS.hs      |  8 ++++++--
 src/View.hs    | 22 +++++++++++++---------
 static/css.css |  7 +++++++
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/JS.hs b/src/JS.hs
index b853cc1..20a109b 100644
--- a/src/JS.hs
+++ b/src/JS.hs
@@ -396,13 +396,17 @@ makeTraitEditor =
       switchSection(traitNode, "editable");
       return false; };
     cancelBtn = $("<span>", {"class":"text-button"})[0];
+    info = $("<span>", {"style":"float:right"})[0];
+    enter = $("<span>", {
+      "class": "edit-field-instruction",
+      "text" : "press Enter to save" })[0];
     markdown = $("<a>", {
       "href"   : "/markdown",
       "target" : "_blank",
-      "style"  : "float:right",
       "text"   : "Markdown" })[0];
+    $(info).append(enter, markdown);
     $(cancelBtn).append(a);
-    $(sectionNode).append(area, br, cancelBtn, markdown);
+    $(sectionNode).append(area, br, cancelBtn, info);
   |]
 
 {- Note [blurb diffing]
diff --git a/src/View.hs b/src/View.hs
index db3ed3f..bb0d0f8 100644
--- a/src/View.hs
+++ b/src/View.hs
@@ -996,6 +996,7 @@ renderItemTraits item = cached (CacheItemTraits (item^.uid)) $ do
             (\val -> JS.addPro (JS.selectUid listUid, item^.uid, val) <>
                      JS.assign val ("" :: Text))
             Nothing
+            (Just "press Enter to add")
           textButton "edit off" $
             JS.switchSectionsEverywhere(this, "normal" :: Text)
 
@@ -1021,6 +1022,7 @@ renderItemTraits item = cached (CacheItemTraits (item^.uid)) $ do
             (\val -> JS.addCon (JS.selectUid listUid, item^.uid, val) <>
                      JS.assign val ("" :: Text))
             Nothing
+            (Just "press Enter to add")
           textButton "edit off" $
             JS.switchSectionsEverywhere(this, "normal" :: Text)
 
@@ -1265,21 +1267,23 @@ smallMarkdownEditor
   -> MarkdownInline -- ^ Default text
   -> (JS -> JS)     -- ^ “Submit” handler, receiving the contents of the editor
   -> Maybe JS       -- ^ “Cancel” handler (if “Cancel” is needed)
+  -> Maybe Text     -- ^ Instruction (e.g. “press Enter to add”)
   -> HtmlT m ()
-smallMarkdownEditor attr (view mdText -> s) submit mbCancel = do
+smallMarkdownEditor attr (view mdText -> s) submit mbCancel mbInstr = do
   textareaId <- randomLongUid
   let val = JS $ T.format "document.getElementById(\"{}\").value" [textareaId]
   textarea_ ([class_ "fullwidth", uid_ textareaId, autocomplete_ "off",
               onEnter (submit val)] ++ attr) $
     toHtml s
-  case mbCancel of
-    Nothing -> return ()
-    Just cancel -> do
-      br_ []
-      textButton "cancel" $
-        JS.assign val s <>
-        cancel
-  a_ [href_ "/markdown", target_ "_blank", style_ "float:right"] "Markdown"
+  br_ []
+  for_ mbCancel $ \cancel -> do
+    textButton "cancel" $
+      JS.assign val s <>
+      cancel
+  span_ [style_ "float:right"] $ do
+    for_ mbInstr $ \instr ->
+      span_ [class_ "edit-field-instruction"] (toHtml instr)
+    a_ [href_ "/markdown", target_ "_blank"] "Markdown"
 
 thisNode :: MonadRandom m => HtmlT m JQuerySelector
 thisNode = do
diff --git a/static/css.css b/static/css.css
index fd8be6f..4c7fd5e 100644
--- a/static/css.css
+++ b/static/css.css
@@ -206,6 +206,13 @@ input {
   font-size: 100%;
 }
 
+.edit-field-instruction {
+  margin-right: 3.5em;
+  font-size: 75%;
+  vertical-align: 1px;
+  color: #666;
+}
+
 .text-button > a:visited {color: #008ACE;}
 h1           > a:visited {color: #008ACE;}  /* for header in category pages */