From 177f639492a9744530cb43a21d16115aed39da7f Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Sun, 31 May 2020 11:36:27 +0200 Subject: [PATCH] Editor Help Modal (#99) * removed css from body * added internal-link and translated-internal-link * icon in links are always fixedWidth * added help button Signed-off-by: Philip Molares Co-authored-by: Tilman Vatteroth --- public/locales/ar.json | 4 +- public/locales/ca.json | 4 +- public/locales/cs.json | 4 +- public/locales/de.json | 4 +- public/locales/en.json | 6 +- public/locales/es.json | 4 +- public/locales/fr.json | 4 +- public/locales/id.json | 4 +- public/locales/it.json | 4 +- public/locales/ja.json | 4 +- public/locales/ko.json | 4 +- public/locales/nl.json | 4 +- public/locales/pl.json | 4 +- public/locales/pt.json | 4 +- public/locales/ru.json | 4 +- public/locales/sk.json | 4 +- public/locales/sr.json | 4 +- public/locales/sv.json | 4 +- public/locales/vi.json | 4 +- public/locales/zh-CN.json | 4 +- public/locales/zh-TW.json | 4 +- .../application-loader/loading-screen.tsx | 2 +- .../editor/task-bar/help-button.tsx | 290 ++++++++++++++++++ src/components/editor/task-bar/task-bar.tsx | 6 +- src/components/landing/landing-layout.tsx | 2 +- .../layout/footer/powered-by-links.tsx | 10 +- .../landing/layout/style/index.scss | 2 - src/components/links/external-link.tsx | 9 +- src/components/links/internal-link.tsx | 30 ++ .../links/translated-external-link.tsx | 12 +- .../links/translated-internal-link.tsx | 11 + src/initializers/fontAwesome.ts | 7 +- 32 files changed, 399 insertions(+), 68 deletions(-) create mode 100644 src/components/editor/task-bar/help-button.tsx create mode 100644 src/components/links/internal-link.tsx create mode 100644 src/components/links/translated-internal-link.tsx diff --git a/public/locales/ar.json b/public/locales/ar.json index 66c63c35c..e41711755 100644 --- a/public/locales/ar.json +++ b/public/locales/ar.json @@ -64,7 +64,7 @@ "contacts": { "title": "جهات الاتصال", "community": "انضم إلى المجتمع", - "meetUsOn": "قابِلنا في %s", + "meetUsOn": "قابِلنا في {{service}}", "helpTranslating": "ساعدنا في الترجمة", "reportIssue": "بلغ عن خطأ" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/ca.json b/public/locales/ca.json index 1caeeafdc..13d82b901 100644 --- a/public/locales/ca.json +++ b/public/locales/ca.json @@ -64,7 +64,7 @@ "contacts": { "title": "Contactes", "community": "Unir-se a la comunitat", - "meetUsOn": "Coneix-nos a %s", + "meetUsOn": "Coneix-nos a {{service}}", "helpTranslating": "Ajuda'ns traduïnt", "reportIssue": "Reportar un problema" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/cs.json b/public/locales/cs.json index 28f81973e..ee17680ad 100644 --- a/public/locales/cs.json +++ b/public/locales/cs.json @@ -64,7 +64,7 @@ "contacts": { "title": "Kontakty", "community": "Připojit ke komunitě", - "meetUsOn": "Potkejte se s námi na %s", + "meetUsOn": "Potkejte se s námi na {{service}}", "helpTranslating": "Pomoci nám s překladem", "reportIssue": "Nahlásit problém" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/de.json b/public/locales/de.json index 431e2f63f..cf8d6e25e 100644 --- a/public/locales/de.json +++ b/public/locales/de.json @@ -64,7 +64,7 @@ "contacts": { "title": "Kontakte", "community": "Tritt der Community bei", - "meetUsOn": "Triff uns auf %s", + "meetUsOn": "Triff uns auf {{service}}", "helpTranslating": "Hilf uns beim Übersetzen", "reportIssue": "Fehlerbericht senden" }, @@ -193,4 +193,4 @@ } } } -} \ No newline at end of file +} diff --git a/public/locales/en.json b/public/locales/en.json index b0c03013e..757346cf0 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -82,7 +82,7 @@ "contacts": { "title": "Contacts", "community": "Join the community", - "meetUsOn": "Meet us on %s", + "meetUsOn": "Meet us on {{service}}", "helpTranslating": "Help us translating", "reportIssue": "Report an issue" }, @@ -224,7 +224,7 @@ "openIdLogin": "Invalid OpenID provided", "emailLogin": "Invalid email or password", "ldapLogin": "Invalid username or password" - } + } } } -} \ No newline at end of file +} diff --git a/public/locales/es.json b/public/locales/es.json index cd38235f1..0a2d0b28f 100644 --- a/public/locales/es.json +++ b/public/locales/es.json @@ -64,7 +64,7 @@ "contacts": { "title": "Contactos", "community": "Únete a la comunidad", - "meetUsOn": "Encuéntranos en %s", + "meetUsOn": "Encuéntranos en {{service}}", "helpTranslating": "Ayúdanos traduciendo", "reportIssue": "Reportar un problema" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/fr.json b/public/locales/fr.json index 967681d03..108cef49b 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -64,7 +64,7 @@ "contacts": { "title": "Contacts", "community": "Rejoignez la communauté", - "meetUsOn": "Rencontrez-nous sur %s", + "meetUsOn": "Rencontrez-nous sur {{service}}", "helpTranslating": "Aidez-nous à traduire", "reportIssue": "Signaler un problème" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/id.json b/public/locales/id.json index 10bb66824..9d5798edf 100644 --- a/public/locales/id.json +++ b/public/locales/id.json @@ -64,7 +64,7 @@ "contacts": { "title": "Kontak", "community": "Bergabung dengan komunitas", - "meetUsOn": "Temui kami di %s", + "meetUsOn": "Temui kami di {{service}}", "helpTranslating": "Bantu kami menerjemahkan", "reportIssue": "Laporkan kesalahan" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/it.json b/public/locales/it.json index 066cbfb0b..fa0d39673 100644 --- a/public/locales/it.json +++ b/public/locales/it.json @@ -64,7 +64,7 @@ "contacts": { "title": "Contatti", "community": "Unisciti alla comunità", - "meetUsOn": "Vieni a trovarci su %s", + "meetUsOn": "Vieni a trovarci su {{service}}", "helpTranslating": "Aiutaci nella traduzione", "reportIssue": "Segnala un problema" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/ja.json b/public/locales/ja.json index ab13dd3ae..8f61f65db 100644 --- a/public/locales/ja.json +++ b/public/locales/ja.json @@ -64,7 +64,7 @@ "contacts": { "title": "コンタクト", "community": "コミュニティに参加しましょう", - "meetUsOn": "%sでチャットする", + "meetUsOn": "{{service}}でチャットする", "helpTranslating": "翻訳のお手伝いをお願いします", "reportIssue": "問題を報告する" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/ko.json b/public/locales/ko.json index 1c9fae221..1593a61fd 100644 --- a/public/locales/ko.json +++ b/public/locales/ko.json @@ -61,7 +61,7 @@ "help": { "contacts": { "title": "연락처", - "meetUsOn": "%s에서 만나보세요", + "meetUsOn": "{{service}}에서 만나보세요", "reportIssue": "이슈 보고하기" }, "documents": { @@ -181,4 +181,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/nl.json b/public/locales/nl.json index a7449a436..81df5bde7 100644 --- a/public/locales/nl.json +++ b/public/locales/nl.json @@ -64,7 +64,7 @@ "contacts": { "title": "Contacten", "community": "Lid worden", - "meetUsOn": "Ontmoet ons op %s", + "meetUsOn": "Ontmoet ons op {{service}}", "helpTranslating": "Help ons vertalen", "reportIssue": "Probleem rapporteren" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/pl.json b/public/locales/pl.json index 3bec6d4a8..c0a71b085 100644 --- a/public/locales/pl.json +++ b/public/locales/pl.json @@ -64,7 +64,7 @@ "contacts": { "title": "Kontakty", "community": "Dołącz do społeczności", - "meetUsOn": "Spotkaj się z nami na %s", + "meetUsOn": "Spotkaj się z nami na {{service}}", "helpTranslating": "Pomóż nam w tłumaczeniu", "reportIssue": "Zgłoś błąd" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/pt.json b/public/locales/pt.json index da3cd4034..83fbfc002 100644 --- a/public/locales/pt.json +++ b/public/locales/pt.json @@ -64,7 +64,7 @@ "contacts": { "title": "Contatos", "community": "Join the community", - "meetUsOn": "Meet us on %s", + "meetUsOn": "Meet us on {{service}}", "helpTranslating": "Help us translating", "reportIssue": "Relatar um problema" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/ru.json b/public/locales/ru.json index 2e4754672..6556ba6c9 100644 --- a/public/locales/ru.json +++ b/public/locales/ru.json @@ -64,7 +64,7 @@ "contacts": { "title": "Контакты", "community": "Присоединиться к сообществу", - "meetUsOn": "Познакомьтесь с нами в %s", + "meetUsOn": "Познакомьтесь с нами в {{service}}", "helpTranslating": "Помочь с переводом", "reportIssue": "Сообщить о проблеме" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/sk.json b/public/locales/sk.json index 169009295..f2f257f26 100644 --- a/public/locales/sk.json +++ b/public/locales/sk.json @@ -64,7 +64,7 @@ "contacts": { "title": "Kontakty", "community": "Pripojiť sa ku komunite", - "meetUsOn": "Stretnite nás na %s", + "meetUsOn": "Stretnite nás na {{service}}", "helpTranslating": "Pomôžte nám s prekladom", "reportIssue": "Nahlásiť problém" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/sr.json b/public/locales/sr.json index f9401694a..50db9a862 100644 --- a/public/locales/sr.json +++ b/public/locales/sr.json @@ -63,7 +63,7 @@ "contacts": { "title": "Контакти", "community": "Приступите заједници", - "meetUsOn": "Пронађите нас на %s", + "meetUsOn": "Пронађите нас на {{service}}", "helpTranslating": "Помозите око превода", "reportIssue": "Пријава проблема" }, @@ -185,4 +185,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/sv.json b/public/locales/sv.json index 7cb65d7c9..e839033e8 100644 --- a/public/locales/sv.json +++ b/public/locales/sv.json @@ -64,7 +64,7 @@ "contacts": { "title": "Kontakter", "community": "Gå med i samhället", - "meetUsOn": "Träffa oss på %s", + "meetUsOn": "Träffa oss på {{service}}", "helpTranslating": "Hjälp oss att översätta", "reportIssue": "Rapportera ett fel" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/vi.json b/public/locales/vi.json index 47aa95910..ae5632c2d 100644 --- a/public/locales/vi.json +++ b/public/locales/vi.json @@ -63,7 +63,7 @@ "contacts": { "title": "Liên Lạc", "community": "Tham gia vào cộng đồng", - "meetUsOn": "Gặp chúng tôi ở %s", + "meetUsOn": "Gặp chúng tôi ở {{service}}", "helpTranslating": "Giúp chúng tôi dịch", "reportIssue": "Báo cáo vấn đề" }, @@ -185,4 +185,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index 43528e19f..e1f60ff80 100644 --- a/public/locales/zh-CN.json +++ b/public/locales/zh-CN.json @@ -64,7 +64,7 @@ "contacts": { "title": "联系我们", "community": "加入社区", - "meetUsOn": "在 %s 上联系我们", + "meetUsOn": "在 {{service}} 上联系我们", "helpTranslating": "帮助我们翻译", "reportIssue": "报告问题" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/public/locales/zh-TW.json b/public/locales/zh-TW.json index 4f18bba59..c7b2fb2f1 100644 --- a/public/locales/zh-TW.json +++ b/public/locales/zh-TW.json @@ -64,7 +64,7 @@ "contacts": { "title": "聯絡方式", "community": "加入社群", - "meetUsOn": "透過 %s 聯絡我們", + "meetUsOn": "透過 {{service}} 聯絡我們", "helpTranslating": "幫助我們改進翻譯", "reportIssue": "回報問題" }, @@ -186,4 +186,4 @@ "error": {} } } -} \ No newline at end of file +} diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx index 5b37e3a04..32a1a6c96 100644 --- a/src/components/application-loader/loading-screen.tsx +++ b/src/components/application-loader/loading-screen.tsx @@ -9,7 +9,7 @@ export interface LoadingScreenProps { export const LoadingScreen: React.FC = ({ failedTitle }) => { return (
-
+
diff --git a/src/components/editor/task-bar/help-button.tsx b/src/components/editor/task-bar/help-button.tsx new file mode 100644 index 000000000..8d7b83800 --- /dev/null +++ b/src/components/editor/task-bar/help-button.tsx @@ -0,0 +1,290 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import React, { Fragment, useState } from 'react' +import { Button, Card, Col, Modal, Row, Table } from 'react-bootstrap' +import { Trans, useTranslation } from 'react-i18next' +import { TranslatedExternalLink } from '../../links/translated-external-link' + +export const HelpButton: React.FC = () => { + const { t } = useTranslation() + const [show, setShow] = useState(false) + + const handleShow = () => setShow(true) + const handleClose = () => setShow(false) + return ( + + + + + + + + + + + + + + + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + + + + + + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 
#
+
+
    +
    • +
+ 		+ 
-
+
+
    +
    2. +
+ 		+ 
1.
+
+
    +
  • + + +
    • +
+ 		+ 
- [ ]
+
+
+ 		+ 
>
+
+ 
****
+
+ 
**
+
+ 
~~~~
+
19th + 
19^th^
+
H2O + 
H~2~O
+
+ + + 
++++
+
+ + + 
====
+
+ 
[link text](https://example.com)
+
+ 
![image alt](https:// "title")
+
+ 
``
+
+ 
+                              
+                                

+                                  

+                                    
+                                  

+                                  

+                                    var x = 5;
+                                  

+                                

+                              
+
+ 		+ 
```javascript
var x = 5;
```
+
:smile: + 
:smile:
+
Extern + 
{'{'}%youtube youtube_id %{'}'}
+
LaTeX + 
$L^aT_eX$
+
+
+

+ +

+
+ 		+ 
:::info

:::
+
+ + + + + + + + + ) +} diff --git a/src/components/editor/task-bar/task-bar.tsx b/src/components/editor/task-bar/task-bar.tsx index cf0aa3351..48b9ae58a 100644 --- a/src/components/editor/task-bar/task-bar.tsx +++ b/src/components/editor/task-bar/task-bar.tsx @@ -7,6 +7,7 @@ import { EditorViewMode } from './editor-view-mode' import { Trans, useTranslation } from 'react-i18next' import { EditorMenu } from './editor-menu' import { ConnectionIndicator } from './connection-indicator' +import { HelpButton } from './help-button' const TaskBar: React.FC = () => { useTranslation() @@ -20,10 +21,7 @@ const TaskBar: React.FC = () => { - +