feat(web-app): Add feedback button with internationalized tooltip

Close #525 Co-authored-by: Louis Tariot <louis.tariot@irit.fr> Co-authored-by: Erik Martin-Dorel <erik.martin-dorel@irit.fr>
ocaml-sf · Apr 18, 2023 · cc2b15b · cc2b15b
1 parent 3a7c42e
commit cc2b15b
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 3 deletions.
diff --git a/src/app/learnocaml_index_main.ml b/src/app/learnocaml_index_main.ml
@@ -642,8 +642,9 @@ let set_string_translations () =
   List.iter
     (fun (el, text) ->
        (Tyxml_js.To_dom.of_input el)##.placeholder := Js.string text)
-    placeholder_translations
-
+    placeholder_translations;
+  Manip.SetHTMLElement.title (find_component "learnocaml-main-feedback")
+    [%i"Send feedback to Learn-OCaml developers"]
 
 let () =
   Lwt.async_exception_hook := begin fun e ->

diff --git a/static/css/learnocaml_main.css b/static/css/learnocaml_main.css
@@ -169,6 +169,20 @@ body {
 
 /* Large screen: two columns w/ menu in the left column */
 @media (min-width: 1000px) {
+  #learnocaml-main-toolbar a.btn {
+    margin-left: 17px;
+  }
+
+  #learnocaml-main-toolbar a.btn > img {
+    border: 1px #fff solid;
+    background: linear-gradient(to bottom, #bbb 0%, #888 100%);
+    border-radius: 5px;
+    padding: 5px;
+    width: 18px;
+    box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
+    text-align: center;
+  }
+
   #learnocaml-main-toolbar {
     position: absolute;
     left: 0; top: 0; height: 60px; width: 360px;
@@ -181,6 +195,7 @@ body {
   #learnocaml-main-toolbar > button {
     display: none;
   }
+
   #learnocaml-main-toolbar::before {
     z-index: 1004;
     position: absolute;
@@ -215,6 +230,21 @@ body {
 }
 /* Medium screen: one column w/ popup menu */
 @media (max-width: 999px) {
+  #learnocaml-main-toolbar a.btn {
+    margin-left: 10px;
+  }
+
+  #learnocaml-main-toolbar a.btn > img {
+    border: 1px #fff solid;
+    background: linear-gradient(to bottom, #bbb 0%, #888 100%);
+    color: #fff;
+    border-radius: 5px;
+    padding: 5px;
+    width: 18px;
+    box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
+    text-align: center;
+  }
+
   #learnocaml-main-toolbar {
     position: absolute;
     top: 0; left: 0px; right: 0px;
@@ -233,6 +263,7 @@ body {
     position: relative;
     display: block;
   }
+
   #learnocaml-main-toolbar > button > * {
     padding: 5px;
     color: #eee;
@@ -280,6 +311,17 @@ body {
 }
 /* Small screen: no button labels, thinner bars & buttons */
 @media (max-width: 549px) {
+  #learnocaml-main-toolbar a.btn > img {
+    border: 1px #fff solid;
+    background: linear-gradient(to bottom, #bbb 0%, #888 100%);
+    color: #fff;
+    border-radius: 4px;
+    padding: 3px;
+    width: 13px;
+    box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
+    text-align: center;
+  }
+
   #learnocaml-main-panel,
   #learnocaml-main-content {
     top: 40px;

diff --git a/static/icons/icon_feedback.svg b/static/icons/icon_feedback.svg
diff --git a/static/index.html b/static/index.html
@@ -25,6 +25,9 @@
       <div class="logo">
         <img src="/icons/logo_ocsf.svg">
         <span>Learn OCaml</span>
+        <a class="btn" href="https://github.com/learn-ocaml-community/teaching-feedback#readme" target = "_blank">
+          <img id="learnocaml-main-feedback" title="Send Feedback" src="/icons/icon_feedback.svg">
+        </a>
       </div>
     </div>
     <div id="learnocaml-main-panel" class="hidden">

diff --git a/translations/fr.po b/translations/fr.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: learn-ocaml ~dev\n"
-"PO-Revision-Date: 2022-12-29 00:17+0100\n"
+"PO-Revision-Date: 2023-04-18 19:58+0200\n"
 "Last-Translator: Erik Martin-Dorel <erik.martin-dorel@irit.fr>\n"
 "Language-Team: OCSF\n"
 "Language: french\n"
@@ -523,6 +523,10 @@ msgstr "Vous avez déjà un token ? Par ici !"
 msgid "Connect"
 msgstr "Se connecter"
 
+#: File "src/app/learnocaml_index_main.ml", line 631, characters 35-50
+msgid "Send feedback to Learn-OCaml developers"
+msgstr "Envoyer un commentaire aux développeurs Learn-OCaml"
+
 #: File "src/app/learnocaml_index_main.ml", line 638, characters 9-19 640,
 #: "src/app/learnocaml_teacher_tab.ml", 558, 22-32
 msgid "Nickname"
@@ -1084,3 +1088,4 @@ msgstr "Erreur inattendue:\n"
 
 #~ msgid "This session has been closed. You can close this tab."
 #~ msgstr "La session a été fermée. Vous pouvez fermer cet onglet."
+