more corrections and translations

src/widgets/avatar-upload.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 
 import LetterTile from './letter-tile.jsx';
 
+import { AVATAR_SIZE } from '../config.js';
+import { imageFileScaledToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+
 export default class AvatarUpload extends React.Component {
   constructor(props) {
     super(props);
@@ -54,7 +57,7 @@ export default class AvatarUpload extends React.Component {
                 title={this.props.title} />
             </div>
             :
-            <div className="blank">128&times;128</div>}
+            <div className="blank">{AVATAR_SIZE}&times;{AVATAR_SIZE}</div>}
         {this.props.readOnly ? null :
           <input type="file" id={randId} className="inputfile hidden"
             accept="image/*" onChange={this.handleFileUpload} />}

src/widgets/chip-input.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import Chip from './chip.jsx';
 
+import { makeImageUrl } from '../lib/blob-helpers.js';
+
 /* BEGIN ChipInput: group membership widget */
 export default class ChipInput extends React.Component {
   constructor(props) {

src/widgets/group-manager.jsx

@@ -1,11 +1,11 @@
 // GroupMembers: control for managing a list of group members.
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import ChipInput from './chip-input.jsx';
 import ContactList from './contact-list.jsx';
 
-export default class GroupManager extends React.Component {
+class GroupManager extends React.Component {
   constructor(props) {
     super(props);
 
@@ -25,7 +25,7 @@ export default class GroupManager extends React.Component {
   }
 
   static indexMembers(members) {
-    var index = {};
+    let index = {};
     members.map(function(m) {
       index[m.user] = {delta: 0, present: true}; // Delta: 0 unchanged, +1 added, -1 removed
     });
@@ -33,7 +33,7 @@ export default class GroupManager extends React.Component {
   }
 
   static selectedContacts(members) {
-    var sel = [];
+    let sel = [];
     members.map(function(m) {
       sel.push(m.user);
     });
@@ -41,7 +41,7 @@ export default class GroupManager extends React.Component {
   }
 
   handleContactSelected(userId, index) {
-    var status = this.state.index[userId];
+    let status = this.state.index[userId];
     if (status) {
       if (status.present) {
         // Prevent duplicate members
@@ -84,7 +84,8 @@ export default class GroupManager extends React.Component {
   }
 
   handleContactFilter(val) {
-    var msg = !val ?
+    const {formatMessage} = this.props.intl;
+    const msg = !val ?
       "You have no contacts :-(" :
       "No contacts match '" + val + "'";
 
@@ -129,10 +130,13 @@ export default class GroupManager extends React.Component {
   }
 
   render() {
+    const {formatMessage} = this.props.intl;
     return (
       <div id="group-manager">
         <div className="panel-form-row">
-          <label className="small">Group members</label>
+          <label className="small">
+            <FormattedMessage id="title_group_members" defaultMessage="Group members" description="Section title" />
+          </label>
         </div>
         <div className="panel-form-row">
           <ChipInput
@@ -167,3 +171,5 @@ export default class GroupManager extends React.Component {
     );
   }
 };
+
+export default injectIntl(GroupManager);

src/widgets/group-subs.jsx

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import LetterTile from './letter-tile.jsx';
+import { makeImageUrl } from '../lib/blob-helpers.js';
 
 export default class GroupSubs extends React.Component {
   constructor(props) {

src/widgets/image-preview.jsx

@@ -40,7 +40,8 @@ export default class ImagePreview extends React.PureComponent {
       <div id="image-preview" onClick={this.props.onClose}>
         <div id="image-preview-caption-panel">
           <a href={this.props.content.url} download={this.props.content.filename}>
-            <i className="material-icons">file_download</i> download
+            <i className="material-icons">file_download</i> <FormattedMessage
+              id="download_action" defaultMessage="download" description="Call to action [download]" />
           </a>
           <a href="javascript:;" onClick={this.props.onClose}><i className="material-icons gray">close</i></a>
         </div>

src/widgets/menu-cancel.jsx

@@ -1,5 +1,4 @@
 // The X menu to be displayed in title bars.
-
 import React from 'react';
 
 export default class MenuCancel extends React.PureComponent {

src/widgets/permissions-editor.jsx

@@ -1,11 +1,58 @@
 // PermissionsEditor: Component for editing permissions
 // <PermissionsEditor mode="JWROD" skip="O" onChange={this.handleCheckboxTest} />
-
 import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import CheckBox from './checkbox.jsx';
+import Contact from './contact.jsx';
 
-export default class PermissionsEditor extends React.Component {
+import { makeImageUrl } from '../lib/blob-helpers.js';
+
+// Translatable permission names.
+const messages = defineMessages({
+  'joiner': {
+    id: 'permission_join',
+    defaultMessage: "Join ({val})",
+    description: 'Name of J permission'
+  },
+  'reader': {
+    id: 'permission_read',
+    defaultMessage: "Read ({val})",
+    description: 'Name of R permission'
+  },
+  'writer': {
+    id: 'permission_write',
+    defaultMessage: "Write ({val})",
+    description: 'Name of W permission'
+  },
+  'preser': {
+    id: 'permission_pres',
+    defaultMessage: "Get notified ({val})",
+    description: 'Name of P permission'
+  },
+  'approver': {
+    id: 'permission_admin',
+    defaultMessage: "Approve ({val})",
+    description: 'Name of A permission'
+  },
+  'sharer': {
+    id: 'permission_share',
+    defaultMessage: "Share ({val})",
+    description: 'Name of S permission'
+  },
+  'deleter': {
+    id: 'permission_delete',
+    defaultMessage: "Delete ({val})",
+    description: 'Name of D permission'
+  },
+  'owner': {
+    id: 'permission_owner',
+    defaultMessage: "Owner ({val})",
+    description: 'Name of O permission'
+  }
+});
+
+class PermissionsEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -45,16 +92,17 @@ export default class PermissionsEditor extends React.Component {
   }
 
   render() {
+    const {formatMessage} = this.props.intl;
     const all = 'JRWPASDO';
     const names = {
-      'J': 'Join (J)',
-      'R': 'Read (R)',
-      'W': 'Write (W)',
-      'P': 'Get notified (P)',
-      'A': 'Approve (A)',
-      'S': 'Share (S)',
-      'D': 'Delete (D)',
-      'O': 'Owner (O)'
+      'J': formatMessage(messages.joiner, {val: 'J'}),
+      'R': formatMessage(messages.reader, {val: 'R'}),
+      'W': formatMessage(messages.writer, {val: 'W'}),
+      'P': formatMessage(messages.preser, {val: 'P'}),
+      'A': formatMessage(messages.approver, {val: 'A'}),
+      'S': formatMessage(messages.sharer, {val: 'S'}),
+      'D': formatMessage(messages.deleter, {val: 'D'}),
+      'O': formatMessage(messages.owner, {val: 'O'})
     };
 
     let skip = this.props.skip || '';
@@ -88,7 +136,8 @@ export default class PermissionsEditor extends React.Component {
             item={this.props.item}
             title={this.props.userTitle}
             avatar={makeImageUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
-        <label className="small">Permissions</label>
+        <label className="small"><FormattedMessage id="title_permissions"
+          defaultMessage="Permissions" description="Section title"/></label>
         <table className="permission-editor">
         {this.props.compare ?
           <thead><tr>
@@ -101,10 +150,16 @@ export default class PermissionsEditor extends React.Component {
         </tbody></table>
         <br />
         <div className="dialog-buttons">
-          <button className="blue" onClick={this.handleSubmit}>Ok</button>
-          <button className="white" onClick={this.handleCancel}>Cancel</button>
+          <button className="blue" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" />
+          </button>
+          <button className="white" onClick={this.handleCancel}>
+            <FormattedMessage id="button_cancel" />
+          </button>
         </div>
       </div>
     );
   }
 };
+
+export default injectIntl(PermissionsEditor);