fix: add translation for app logo title (#1733)

* fix: add translation for app logo title

fixes #1724

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

locales/en.json

@@ -1,7 +1,8 @@
 {
     "app": {
         "slogan": "The best platform to write and share markdown.",
-        "title": "Collaborative markdown notes"
+        "title": "Collaborative markdown notes",
+        "icon": "HedgeDoc logo with text"
     },
     "notificationTest": {
       "title": "Test",

src/components/application-loader/application-loader.module.scss

@@ -5,8 +5,6 @@
  */
 
 .loader {
-  @import "./animations.scss";
-
   height: 100%;
   width: 100%;
 

src/components/application-loader/application-loader.tsx

@@ -7,7 +7,7 @@
 import React, { Suspense } from 'react'
 import { useBackendBaseUrl } from '../../hooks/common/use-backend-base-url'
 import { createSetUpTaskList } from './initializers'
-import { LoadingScreen } from './loading-screen'
+import { LoadingScreen } from './loading-screen/loading-screen'
 import { useCustomizeAssetsUrl } from '../../hooks/common/use-customize-assets-url'
 import { Logger } from '../../utils/logger'
 import { useAsync } from 'react-use'

src/components/application-loader/initializers/fetch-motd.ts

@@ -46,12 +46,11 @@ export const fetchMotd = async (customizeAssetsUrl: string): Promise<void> => {
     return
   }
 
-  const motdText = await response.text()
-
   const lastModified = response.headers.get('Last-Modified') || response.headers.get('etag')
   if (!lastModified) {
     log.warn("'Last-Modified' or 'Etag' not found for motd.txt!")
   }
 
+  const motdText = await response.text()
   setMotd(motdText, lastModified)
 }

src/components/application-loader/loading-screen/animated-hedge-doc-logo/animated-hedge-doc-logo.tsx

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import LogoColor from '../../../common/hedge-doc-logo/logo_color.svg'
+import styles from './animations.module.scss'
+
+export interface HedgeDocLogoProps {
+  animation: AnimationType
+}
+
+export enum AnimationType {
+  JUMP = 'animation-jump',
+  SHAKE = 'animation-shake'
+}
+
+/**
+ * Shows an animated hedgedoc logo.
+ *
+ * @param animation The name of the animation
+ */
+export const AnimatedHedgeDocLogo: React.FC<HedgeDocLogoProps> = ({ animation }) => {
+  return (
+    <LogoColor
+      className={`w-auto ${styles[animation]}`}
+      title={'HedgeDoc logo'}
+      alt={'HedgeDoc logo'}
+      height={256}
+      width={256}
+    />
+  )
+}

src/components/application-loader/loading-screen/animated-hedge-doc-logo/animations.module.scss

@@ -4,15 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-@keyframes animation-roll {
-  0% {
-    transform: translateX(calc(-100vw / 2 - 100%)) rotateZ(0deg);
-  }
-  100% {
-    transform: translateX(calc(100vw / 2 + 100%)) rotateZ(720deg);
-  }
-}
-
 @keyframes animation-jump {
   0% {
     transform: scale(1, 1) translateY(0);
@@ -73,14 +64,6 @@
   }
 }
 
-.animation-roll {
-  transform-origin: center center;
-  animation-duration: 4s;
-  animation-iteration-count: infinite;
-  animation-name: animation-roll;
-  animation-timing-function: linear;
-}
-
 .animation-jump {
   transform-origin: bottom;
   animation-duration: 2s;

src/components/application-loader/loading-screen/loading-screen.tsx

@@ -1,14 +1,14 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import React from 'react'
 import { Alert } from 'react-bootstrap'
-import { HedgeDocLogo, HedgeDocLogoSize } from '../common/hedge-doc-logo/hedge-doc-logo'
+import { AnimatedHedgeDocLogo, AnimationType } from './animated-hedge-doc-logo/animated-hedge-doc-logo'
-import { ShowIf } from '../common/show-if/show-if'
+import { ShowIf } from '../../common/show-if/show-if'
-import styles from './application-loader.module.scss'
+import styles from '../application-loader.module.scss'
 
 export interface LoadingScreenProps {
   failedTaskName?: string
@@ -23,8 +23,8 @@ export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTaskName })
   return (
     <div className={`${styles.loader} ${styles.middle} text-light overflow-hidden`}>
       <div className='mb-3 text-light'>
-        <span className={`d-block ${failedTaskName ? styles['animation-shake'] : styles['animation-jump']}`}>
+        <span className={`d-block`}>
-          <HedgeDocLogo size={HedgeDocLogoSize.BIG} />
+          <AnimatedHedgeDocLogo animation={failedTaskName ? AnimationType.SHAKE : AnimationType.JUMP} />
         </span>
       </div>
       <ShowIf condition={!!failedTaskName}>

src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx

@@ -4,10 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import LogoBwHorizontal from './logo_text_bw_horizontal.svg'
 import LogoColorVertical from './logo_text_color_vertical.svg'
 import LogoWbHorizontal from './logo_text_wb_horizontal.svg'
+import { useTranslation } from 'react-i18next'
 
 export enum HedgeDocLogoSize {
   SMALL = 32,
@@ -27,13 +28,17 @@ export enum HedgeDocLogoType {
 }
 
 export const HedgeDocLogoWithText: React.FC<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM, logoType }) => {
+  const { t } = useTranslation()
+  const altText = useMemo(() => t('app.icon'), [t])
+  const style = useMemo(() => ({ height: size }), [size])
+
   switch (logoType) {
     case HedgeDocLogoType.COLOR_VERTICAL:
-      return <LogoColorVertical className={'w-auto'} alt={'HedgeDoc logo with text'} style={{ height: size }} />
+      return <LogoColorVertical className={'w-auto'} title={altText} style={style} />
     case HedgeDocLogoType.BW_HORIZONTAL:
-      return <LogoBwHorizontal className={'w-auto'} alt={'HedgeDoc logo with text'} style={{ height: size }} />
+      return <LogoBwHorizontal className={'w-auto'} title={altText} style={style} />
     case HedgeDocLogoType.WB_HORIZONTAL:
-      return <LogoWbHorizontal className={'w-auto'} alt={'HedgeDoc logo with text'} style={{ height: size }} />
+      return <LogoWbHorizontal className={'w-auto'} title={altText} style={style} />
     default:
       return null
   }

src/components/common/hedge-doc-logo/hedge-doc-logo.tsx

@@ -1,22 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import React from 'react'
-import LogoColor from './logo_color.svg'
-
-export enum HedgeDocLogoSize {
-  SMALL = 32,
-  MEDIUM = 64,
-  BIG = 256
-}
-
-export interface HedgeDocLogoProps {
-  size?: HedgeDocLogoSize | number
-}
-
-export const HedgeDocLogo: React.FC<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM }) => {
-  return <LogoColor alt='logo' className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }} />
-}

src/pages/n/[id].tsx

@@ -30,7 +30,7 @@ import { Logger } from '../../utils/logger'
 import { NoteType } from '../../redux/note-details/types/note-details'
 import type { NextPage } from 'next'
 import { isClientSideRendering } from '../../utils/is-client-side-rendering'
-import { LoadingScreen } from '../../components/application-loader/loading-screen'
+import { LoadingScreen } from '../../components/application-loader/loading-screen/loading-screen'
 import { NoteAndAppTitleHead } from '../../components/layout/note-and-app-title-head'
 
 const EditorPane = React.lazy(() => import('../../components/editor-page/editor-pane/editor-pane'))