Add a “press Enter” hint to edit fields

See #93

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]

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

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 */