Merge branch 'develop' into luke/refactor-editable-list-from-alias-settings

src/autocomplete/CommandProvider.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../languageHandler';
+import { _t, _td } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import FuzzyMatcher from './FuzzyMatcher';
 import {TextualCompletion} from './Components';
@@ -27,82 +27,82 @@ const COMMANDS = [
     {
         command: '/me',
         args: '<message>',
-        description: 'Displays action',
+        description: _td('Displays action'),
     },
     {
         command: '/ban',
         args: '<user-id> [reason]',
-        description: 'Bans user with given id',
+        description: _td('Bans user with given id'),
     },
     {
         command: '/unban',
         args: '<user-id>',
-        description: 'Unbans user with given id',
+        description: _td('Unbans user with given id'),
     },
     {
         command: '/op',
         args: '<user-id> [<power-level>]',
-        description: 'Define the power level of a user',
+        description: _td('Define the power level of a user'),
     },
     {
         command: '/deop',
         args: '<user-id>',
-        description: 'Deops user with given id',
+        description: _td('Deops user with given id'),
     },
     {
         command: '/invite',
         args: '<user-id>',
-        description: 'Invites user with given id to current room',
+        description: _td('Invites user with given id to current room'),
     },
     {
         command: '/join',
         args: '<room-alias>',
-        description: 'Joins room with given alias',
+        description: _td('Joins room with given alias'),
     },
     {
         command: '/part',
         args: '[<room-alias>]',
-        description: 'Leave room',
+        description: _td('Leave room'),
     },
     {
         command: '/topic',
         args: '<topic>',
-        description: 'Sets the room topic',
+        description: _td('Sets the room topic'),
     },
     {
         command: '/kick',
         args: '<user-id> [reason]',
-        description: 'Kicks user with given id',
+        description: _td('Kicks user with given id'),
     },
     {
         command: '/nick',
         args: '<display-name>',
-        description: 'Changes your display nickname',
+        description: _td('Changes your display nickname'),
     },
     {
         command: '/ddg',
         args: '<query>',
-        description: 'Searches DuckDuckGo for results',
+        description: _td('Searches DuckDuckGo for results'),
     },
     {
         command: '/tint',
         args: '<color1> [<color2>]',
-        description: 'Changes colour scheme of current room',
+        description: _td('Changes colour scheme of current room'),
     },
     {
         command: '/verify',
         args: '<user-id> <device-id> <device-signing-key>',
-        description: 'Verifies a user, device, and pubkey tuple',
+        description: _td('Verifies a user, device, and pubkey tuple'),
     },
     {
         command: '/ignore',
         args: '<user-id>',
-        description: 'Ignores a user, hiding their messages from you',
+        description: _td('Ignores a user, hiding their messages from you'),
     },
     {
         command: '/unignore',
         args: '<user-id>',
-        description: 'Stops ignoring a user, showing their messages going forward',
+        description: _td('Stops ignoring a user, showing their messages going forward'),
     },
     // Omitting `/markdown` as it only seems to apply to OldComposer
 ];

src/components/structures/UserSettings.js

@@ -32,7 +32,7 @@ const AddThreepid = require('../../AddThreepid');
 const SdkConfig = require('../../SdkConfig');
 import Analytics from '../../Analytics';
 import AccessibleButton from '../views/elements/AccessibleButton';
-import { _t } from '../../languageHandler';
+import { _t, _td } from '../../languageHandler';
 import * as languageHandler from '../../languageHandler';
 import * as FormattingUtils from '../../utils/FormattingUtils';
 
@@ -63,55 +63,55 @@ const gHVersionLabel = function(repo, token='') {
 const SETTINGS_LABELS = [
     {
         id: 'autoplayGifsAndVideos',
-        label: 'Autoplay GIFs and videos',
+        label: _td('Autoplay GIFs and videos'),
     },
     {
         id: 'hideReadReceipts',
-        label: 'Hide read receipts',
+        label: _td('Hide read receipts'),
     },
     {
         id: 'dontSendTypingNotifications',
-        label: "Don't send typing notifications",
+        label: _td("Don't send typing notifications"),
     },
     {
         id: 'alwaysShowTimestamps',
-        label: 'Always show message timestamps',
+        label: _td('Always show message timestamps'),
     },
     {
         id: 'showTwelveHourTimestamps',
-        label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
+        label: _td('Show timestamps in 12 hour format (e.g. 2:30pm)'),
     },
     {
         id: 'hideJoinLeaves',
-        label: 'Hide join/leave messages (invites/kicks/bans unaffected)',
+        label: _td('Hide join/leave messages (invites/kicks/bans unaffected)'),
     },
     {
         id: 'hideAvatarDisplaynameChanges',
-        label: 'Hide avatar and display name changes',
+        label: _td('Hide avatar and display name changes'),
     },
     {
         id: 'useCompactLayout',
-        label: 'Use compact timeline layout',
+        label: _td('Use compact timeline layout'),
     },
     {
         id: 'hideRedactions',
-        label: 'Hide removed messages',
+        label: _td('Hide removed messages'),
     },
     {
         id: 'enableSyntaxHighlightLanguageDetection',
-        label: 'Enable automatic language detection for syntax highlighting',
+        label: _td('Enable automatic language detection for syntax highlighting'),
     },
     {
         id: 'MessageComposerInput.autoReplaceEmoji',
-        label: 'Automatically replace plain text Emoji',
+        label: _td('Automatically replace plain text Emoji'),
     },
     {
         id: 'MessageComposerInput.dontSuggestEmoji',
-        label: 'Disable Emoji suggestions while typing',
+        label: _td('Disable Emoji suggestions while typing'),
     },
     {
         id: 'Pill.shouldHidePillAvatar',
-        label: 'Hide avatars in user and room mentions',
+        label: _td('Hide avatars in user and room mentions'),
     },
 /*
     {
@@ -124,7 +124,7 @@ const SETTINGS_LABELS = [
 const ANALYTICS_SETTINGS_LABELS = [
     {
         id: 'analyticsOptOut',
-        label: 'Opt out of analytics',
+        label: _td('Opt out of analytics'),
         fn: function(checked) {
             Analytics[checked ? 'disable' : 'enable']();
         },
@@ -134,7 +134,7 @@ const ANALYTICS_SETTINGS_LABELS = [
 const WEBRTC_SETTINGS_LABELS = [
     {
         id: 'webRtcForceTURN',
-        label: 'Disable Peer-to-Peer for 1:1 calls',
+        label: _td('Disable Peer-to-Peer for 1:1 calls'),
     },
 ];
 
@@ -143,7 +143,7 @@ const WEBRTC_SETTINGS_LABELS = [
 const CRYPTO_SETTINGS_LABELS = [
     {
         id: 'blacklistUnverifiedDevices',
-        label: 'Never send encrypted messages to unverified devices from this device',
+        label: _td('Never send encrypted messages to unverified devices from this device'),
         fn: function(checked) {
             MatrixClientPeg.get().setGlobalBlacklistUnverifiedDevices(checked);
         },
@@ -166,12 +166,12 @@ const CRYPTO_SETTINGS_LABELS = [
 const THEMES = [
     {
         id: 'theme',
-        label: 'Light theme',
+        label: _td('Light theme'),
         value: 'light',
     },
     {
         id: 'theme',
-        label: 'Dark theme',
+        label: _td('Dark theme'),
         value: 'dark',
     },
 ];
@@ -793,7 +793,7 @@ module.exports = React.createClass({
                    onChange={onChange}
             />
             <label htmlFor={setting.id + "_" + setting.value}>
-                { setting.label }
+                { _t(setting.label) }
             </label>
         </div>;
     },

src/components/views/dialogs/KeyShareDialog.js

@@ -18,7 +18,7 @@ import Modal from '../../../Modal';
 import React from 'react';
 import sdk from '../../../index';
 
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 
 /**
  * Dialog which asks the user whether they want to share their keys with
@@ -116,11 +116,11 @@ export default React.createClass({
 
         let text;
         if (this.state.wasNewDevice) {
-            text = "You added a new device '%(displayName)s', which is"
+            text = _td("You added a new device '%(displayName)s', which is"
-                + " requesting encryption keys.";
+                + " requesting encryption keys.");
         } else {
-            text = "Your unverified device '%(displayName)s' is requesting"
+            text = _td("Your unverified device '%(displayName)s' is requesting"
-                + " encryption keys.";
+                + " encryption keys.");
         }
         text = _t(text, {displayName: displayName});
 

src/components/views/elements/AppTile.js

@@ -23,7 +23,7 @@ import PlatformPeg from '../../../PlatformPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
@@ -195,9 +195,9 @@ export default React.createClass({
     // These strings are translated at the point that they are inserted in to the DOM, in the render method
     _deleteWidgetLabel() {
         if (this._canUserModify()) {
-            return 'Delete widget';
+            return _td('Delete widget');
         }
-        return 'Revoke widget access';
+        return _td('Revoke widget access');
     },
 
     /* TODO -- Store permission in account data so that it is persisted across multiple devices */

src/components/views/room_settings/AliasSettings.js

@@ -258,7 +258,6 @@ module.exports = React.createClass({
                 <div className="mx_RoomSettings_aliasLabel">
                     { _t('The main address for this room is') }: { canonical_alias_section }
                 </div>
-
                 <EditableItemList
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}

src/components/views/rooms/MessageComposerInput.js

@@ -30,7 +30,7 @@ import SlashCommands from '../../../SlashCommands';
 import KeyCode from '../../../KeyCode';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import Analytics from '../../../Analytics';
 
 import dis from '../../../dispatcher';
@@ -1032,10 +1032,10 @@ export default class MessageComposerInput extends React.Component {
      buttons. */
     getSelectionInfo(editorState: EditorState) {
         const styleName = {
-            BOLD: 'bold',
+            BOLD: _td('bold'),
-            ITALIC: 'italic',
+            ITALIC: _td('italic'),
-            STRIKETHROUGH: 'strike',
+            STRIKETHROUGH: _td('strike'),
-            UNDERLINE: 'underline',
+            UNDERLINE: _td('underline'),
         };
 
         const originalStyle = editorState.getCurrentInlineStyle().toArray();
@@ -1044,10 +1044,10 @@ export default class MessageComposerInput extends React.Component {
             .filter((styleName) => !!styleName);
 
         const blockName = {
-            'code-block': 'code',
+            'code-block': _td('code'),
-            'blockquote': 'quote',
+            'blockquote': _td('quote'),
-            'unordered-list-item': 'bullet',
+            'unordered-list-item': _td('bullet'),
-            'ordered-list-item': 'numbullet',
+            'ordered-list-item': _td('numbullet'),
         };
         const originalBlockType = editorState.getCurrentContent()
             .getBlockForKey(editorState.getSelection().getStartKey())

src/components/views/rooms/PresenceLabel.js

@@ -70,7 +70,7 @@ module.exports = React.createClass({
         if (presence === "online") return _t("Online");
         if (presence === "unavailable") return _t("Idle"); // XXX: is this actually right?
         if (presence === "offline") return _t("Offline");
-        return "Unknown";
+        return _t("Unknown");
     },
 
     render: function() {

src/i18n/strings/en_EN.json

@@ -881,6 +881,9 @@
     "The room '%(roomName)s' could not be removed from the summary.": "The room '%(roomName)s' could not be removed from the summary.",
     "Failed to remove a user from the summary of %(groupId)s": "Failed to remove a user from the summary of %(groupId)s",
     "The user '%(displayName)s' could not be removed from the summary.": "The user '%(displayName)s' could not be removed from the summary.",
+    "Light theme": "Light theme",
+    "Dark theme": "Dark theme",
+    "Unknown": "Unknown",
     "Failed to add the following rooms to the summary of %(groupId)s:": "Failed to add the following rooms to the summary of %(groupId)s:",
     "The room '%(roomName)s' could not be removed from the summary.": "The room '%(roomName)s' could not be removed from the summary.",
     "Add rooms to the group": "Add rooms to the group",

src/languageHandler.js

@@ -29,6 +29,12 @@ counterpart.setSeparator('|');
 // Fall back to English
 counterpart.setFallbackLocale('en');
 
+// Function which only purpose is to mark that a string is translatable
+// Does not actually do anything. It's helpful for automatic extraction of translatable strings
+export function _td(s) {
+    return s;
+}
+
 // The translation function. This is just a simple wrapper to counterpart,
 // but exists mostly because we must use the same counterpart instance
 // between modules (ie. here (react-sdk) and the app (riot-web), and if we