New: Translation support for UI Sidebar, Search Input, Base Menus

frontend/src/Components/Page/Header/MovieSearchInput.js

@@ -7,6 +7,7 @@ import Icon from 'Components/Icon';
 import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
 import MovieSearchResult from './MovieSearchResult';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import translate from 'Utilities/String/translate';
 import FuseWorker from './fuse.worker';
 import styles from './MovieSearchInput.css';
 
@@ -227,7 +228,7 @@ class MovieSearchInput extends Component {
       className: styles.input,
       name: 'movieSearch',
       value,
-      placeholder: 'Search',
+      placeholder: translate('Search'),
       autoComplete: 'off',
       spellCheck: false,
       onChange: this.onChange,

frontend/src/Components/Page/Header/PageHeader.css

@@ -43,9 +43,28 @@
   flex-grow: 1;
 }
 
+.translate {
+  composes: link from '~Components/Link/Link.css';
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  color: #fff;
+  text-align: center;
+  line-height: 60px;
+
+  &:hover {
+    color: $toobarButtonHoverColor;
+  }
+}
+
 .donate {
   composes: link from '~Components/Link/Link.css';
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 30px;
   color: $themeRed;
   text-align: center;
@@ -64,8 +83,11 @@
   .sidebarToggleContainer {
     display: flex;
   }
+}
 
-  .donate {
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .donate,
+  .translate {
     display: none;
   }
 }

frontend/src/Components/Page/Header/PageHeader.js

@@ -77,6 +77,13 @@ class PageHeader extends Component {
             to="https://radarr.video/donate.html"
             size={14}
           />
+          <IconButton
+            className={styles.translate}
+            title="Suggest translation change"
+            name={icons.TRANSLATE}
+            to="https://translate.servarr.com/projects/radarr/radarr/"
+            size={24}
+          />
           <PageHeaderActionsMenuConnector
             onKeyboardShortcutsPress={this.onOpenKeyboardShortcutsModal}
           />

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -8,6 +8,7 @@ import locationShape from 'Helpers/Props/Shapes/locationShape';
 import dimensions from 'Styles/Variables/dimensions';
 import OverlayScroller from 'Components/Scroller/OverlayScroller';
 import Scroller from 'Components/Scroller/Scroller';
+import translate from 'Utilities/String/translate';
 import QueueStatusConnector from 'Activity/Queue/Status/QueueStatusConnector';
 import HealthStatusConnector from 'System/Status/Health/HealthStatusConnector';
 import MessagesConnector from './Messages/MessagesConnector';
@@ -20,20 +21,20 @@ const SIDEBAR_WIDTH = parseInt(dimensions.sidebarWidth);
 const links = [
   {
     iconName: icons.MOVIE_CONTINUING,
-    title: 'Movies',
+    title: translate('Movies'),
     to: '/',
     alias: '/movies',
     children: [
       {
-        title: 'Add New',
+        title: translate('AddNew'),
         to: '/add/new'
       },
       {
-        title: 'Import',
+        title: translate('Import'),
         to: '/add/import'
       },
       {
-        title: 'Discover',
+        title: translate('Discover'),
         to: '/add/discover'
       }
     ]
@@ -41,26 +42,26 @@ const links = [
 
   {
     iconName: icons.CALENDAR,
-    title: 'Calendar',
+    title: translate('Calendar'),
     to: '/calendar'
   },
 
   {
     iconName: icons.ACTIVITY,
-    title: 'Activity',
+    title: translate('Activity'),
     to: '/activity/queue',
     children: [
       {
-        title: 'Queue',
+        title: translate('Queue'),
         to: '/activity/queue',
         statusComponent: QueueStatusConnector
       },
       {
-        title: 'History',
+        title: translate('History'),
         to: '/activity/history'
       },
       {
-        title: 'Blacklist',
+        title: translate('Blacklist'),
         to: '/activity/blacklist'
       }
     ]
@@ -68,55 +69,55 @@ const links = [
 
   {
     iconName: icons.SETTINGS,
-    title: 'Settings',
+    title: translate('Settings'),
     to: '/settings',
     children: [
       {
-        title: 'Media Management',
+        title: translate('MediaManagement'),
         to: '/settings/mediamanagement'
       },
       {
-        title: 'Profiles',
+        title: translate('Profiles'),
         to: '/settings/profiles'
       },
       {
-        title: 'Quality',
+        title: translate('Quality'),
         to: '/settings/quality'
       },
       {
-        title: 'Custom Formats',
+        title: translate('CustomFormats'),
         to: '/settings/customformats'
       },
       {
-        title: 'Indexers',
+        title: translate('Indexers'),
         to: '/settings/indexers'
       },
       {
-        title: 'Download Clients',
+        title: translate('DownloadClients'),
         to: '/settings/downloadclients'
       },
       {
-        title: 'Lists',
+        title: translate('Lists'),
         to: '/settings/netimports'
       },
       {
-        title: 'Connect',
+        title: translate('Connect'),
         to: '/settings/connect'
       },
       {
-        title: 'Metadata',
+        title: translate('Metadata'),
         to: '/settings/metadata'
       },
       {
-        title: 'Tags',
+        title: translate('Tags'),
         to: '/settings/tags'
       },
       {
-        title: 'General',
+        title: translate('General'),
         to: '/settings/general'
       },
       {
-        title: 'UI',
+        title: translate('UI'),
         to: '/settings/ui'
       }
     ]
@@ -124,32 +125,32 @@ const links = [
 
   {
     iconName: icons.SYSTEM,
-    title: 'System',
+    title: translate('System'),
     to: '/system/status',
     children: [
       {
-        title: 'Status',
+        title: translate('Status'),
         to: '/system/status',
         statusComponent: HealthStatusConnector
       },
       {
-        title: 'Tasks',
+        title: translate('Tasks'),
         to: '/system/tasks'
       },
       {
-        title: 'Backup',
+        title: translate('Backup'),
         to: '/system/backup'
       },
       {
-        title: 'Updates',
+        title: translate('Updates'),
         to: '/system/updates'
       },
       {
-        title: 'Events',
+        title: translate('Events'),
         to: '/system/events'
       },
       {
-        title: 'Log Files',
+        title: translate('LogFiles'),
         to: '/system/logs/files'
       }
     ]