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

2025-09-17 17:14:18 +02:00 · 2020-07-08 10:40:53 -04:00
parent bfc0361784
commit 074b49fa8c
97 changed files with 293 additions and 167 deletions
--- a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
@@ -6,6 +6,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import CustomFilter from './CustomFilter';
+import translate from 'Utilities/String/translate';
 import styles from './CustomFiltersModalContent.css';

 function CustomFiltersModalContent(props) {
@@ -24,7 +25,7 @@ function CustomFiltersModalContent(props) {
  return (
    <ModalContent onModalClose={onModalClose}>
      <ModalHeader>
-        Custom Filters
+        {translate('CustomFilters')}
      </ModalHeader>

      <ModalBody>
--- a/frontend/src/Components/Form/FormInputGroup.js
+++ b/frontend/src/Components/Form/FormInputGroup.js
@@ -21,6 +21,7 @@ import TagSelectInputConnector from './TagSelectInputConnector';
 import TextTagInputConnector from './TextTagInputConnector';
 import TextInput from './TextInput';
 import FormInputHelpText from './FormInputHelpText';
+import translate from 'Utilities/String/translate';
 import styles from './FormInputGroup.css';

 function getComponent(type) {
@@ -195,7 +196,7 @@ function FormInputGroup(props) {
          <Link
            to={helpLink}
          >
-            More Info
+            {translate('MoreInfo')}
          </Link>
      }

--- a/frontend/src/Components/Menu/FilterMenu.js
+++ b/frontend/src/Components/Menu/FilterMenu.js
@@ -4,6 +4,7 @@ import { icons } from 'Helpers/Props';
 import FilterMenuContent from './FilterMenuContent';
 import Menu from './Menu';
 import ToolbarMenuButton from './ToolbarMenuButton';
+import translate from 'Utilities/String/translate';
 import styles from './FilterMenu.css';

 class FilterMenu extends Component {
@@ -57,7 +58,7 @@ class FilterMenu extends Component {
        >
          <ButtonComponent
            iconName={icons.FILTER}
-            text="Filter"
+            text={translate('Filter')}
            isDisabled={isDisabled}
            indicator={selectedFilterKey !== 'all'}
          />
--- a/frontend/src/Components/Menu/FilterMenuContent.js
+++ b/frontend/src/Components/Menu/FilterMenuContent.js
@@ -4,6 +4,7 @@ import MenuContent from './MenuContent';
 import FilterMenuItem from './FilterMenuItem';
 import MenuItem from './MenuItem';
 import MenuItemSeparator from './MenuItemSeparator';
+import translate from 'Utilities/String/translate';

 class FilterMenuContent extends Component {

@@ -61,7 +62,7 @@ class FilterMenuContent extends Component {
        {
          showCustomFilters &&
            <MenuItem onPress={onCustomFiltersPress}>
-              Custom Filters
+              {translate('CustomFilters')}
            </MenuItem>
        }
      </MenuContent>
--- a/frontend/src/Components/Menu/SortMenu.js
+++ b/frontend/src/Components/Menu/SortMenu.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { icons } from 'Helpers/Props';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
+import translate from 'Utilities/String/translate';

 function SortMenu(props) {
  const {
@@ -19,7 +20,7 @@ function SortMenu(props) {
    >
      <ToolbarMenuButton
        iconName={icons.SORT}
-        text="Sort"
+        text={translate('Sort')}
        isDisabled={isDisabled}
      />
      {children}
--- a/frontend/src/Components/Menu/ViewMenu.js
+++ b/frontend/src/Components/Menu/ViewMenu.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { icons } from 'Helpers/Props';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
+import translate from 'Utilities/String/translate';

 function ViewMenu(props) {
  const {
@@ -17,7 +18,7 @@ function ViewMenu(props) {
    >
      <ToolbarMenuButton
        iconName={icons.VIEW}
-        text="View"
+        text={translate('View')}
        isDisabled={isDisabled}
      />
      {children}
--- a/frontend/src/Components/Page/Header/MovieSearchInput.js
+++ b/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,
--- a/frontend/src/Components/Page/Header/PageHeader.css
+++ b/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;
  }
 }
--- a/frontend/src/Components/Page/Header/PageHeader.js
+++ b/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}
          />
--- a/frontend/src/Components/Page/Sidebar/PageSidebar.js
+++ b/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'
      }
    ]