split out a few modules, handle esc key

src/widgets/doc-preview.jsx

@@ -46,7 +46,7 @@ export default class DocPreview extends React.PureComponent {
     }
     return (
       <div id="image-preview">
-        <div id="image-preview-caption-panel">
+        <div id="preview-caption-panel">
           <span>{this.props.content.name}</span>
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>

src/widgets/image-preview.jsx

@@ -77,7 +77,7 @@ export default class ImagePreview extends React.PureComponent {
 
     return (
       <div id="image-preview">
-        <div id="image-preview-caption-panel">
+        <div id="preview-caption-panel">
           {this.props.onSendMessage ?
             <span>{fname}</span>
             :

src/widgets/new-topic-group.jsx

@@ -161,7 +161,7 @@ export default class NewTopicGroup extends React.PureComponent {
           <div className="group">
             <label className="small" htmlFor="new-topic-desc">
               <FormattedMessage id="label_description" defaultMessage="Description"
-                description="Label for editing topic description" />
+                description="Label for description of user or topic" />
             </label>
             <FormattedMessage id="description_editing_placeholder" defaultMessage="Description (optional)"
               description="Placeholder for editing topic description">{

src/widgets/show-qrcode.jsx

@@ -23,6 +23,7 @@ export default class ShowQRCode extends React.PureComponent {
       <div className="panel-form-column">
         <br />
         <div className="qr-code" ref={this.qrCodeRef} />
+        <div><tt>{this.props.uri}</tt></div>
         <div className="dialog-buttons">
           <button className="outline" onClick={this.props.onCancel}>
             <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />

src/widgets/the-card-preview.jsx

@@ -21,13 +21,15 @@ export default class TheCardPreview extends React.PureComponent {
     super(props);
 
     this.state = {
-      content: null
+      content: props.content.object
     };
 
-    importVCard(props.content.file)
-      .then(card => {
-        this.setState({ content: card });
-      });
+    if (!props.content.object) {
+      importVCard(props.content.file)
+        .then(card => {
+          this.setState({ content: card });
+        });
+    }
 
     this.handleSendCard = this.handleSendCard.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -122,7 +124,7 @@ export default class TheCardPreview extends React.PureComponent {
 
     return (
       <div id="image-preview">
-        <div id="image-preview-caption-panel">
+        <div id="preview-caption-panel">
           <span><FormattedMessage id="label_contact_card" defaultMessage="Contact Card"
             description="Label for contact card preview" /></span>
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}>
@@ -153,7 +155,7 @@ export default class TheCardPreview extends React.PureComponent {
                 <div className="group">
                   <label className="small">
                     <FormattedMessage id="label_description" defaultMessage="Description"
-                      description="Label for description" />
+                      description="Label for description of user or topic" />
                   </label>
                   <div className="quoted">{note}</div>
                 </div>

src/widgets/topic-desc-edit.jsx

@@ -363,7 +363,7 @@ class TopicDescEdit extends React.Component {
           <div className="group">
             <div><label className="small">
               <FormattedMessage id="label_description" defaultMessage="Description"
-                description="Label for editing topic description" />
+                description="Label for description of user or topic" />
             </label></div>
             <div>
               <FormattedMessage id="description_editing_placeholder"

src/widgets/video-preview.jsx

@@ -81,7 +81,7 @@ class VideoPreview extends React.PureComponent {
 
     return (
       <div id="image-preview">
-        <div id="image-preview-caption-panel">
+        <div id="preview-caption-panel">
           <span>{this.props.content.filename}</span>
           <a href="#" onClick={e => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>