ignore

css/base.css

@@ -248,6 +248,11 @@ textarea {
   resize: none;
   padding-top: 0.45rem;
 }
+
+textarea.inplace-edit {
+  height: unset;
+}
+
 /* END of input and buttons */
 
 /* BEGIN scrollbar styling.  */
@@ -1042,7 +1047,7 @@ i.search {
   flex-direction: column;
   flex-shrink: 0;
   width: 8rem;
-  height: 10rem;
+  height: 8.5rem;
   margin-left: 0.5rem;
   font-size: 4.5rem;
   padding: 0;
@@ -1134,6 +1139,7 @@ i.search {
 
 .avatar-upload .inputfile + label.round {
   display: flex;
+  position: absolute;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -1142,10 +1148,8 @@ i.search {
   line-height: 3rem;
   border-radius: 50%;
   box-shadow: 0 1px 4px rgba(0,0,0,0.4);
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: -1rem;
   bottom: 0;
+  right: 0;
   background-color: #fafafa;
   z-index: 1;
 }

src/i18n/de.json

@@ -1270,5 +1270,19 @@
     "description": "Validate credentail call to action",
     "missing": false,
     "obsolete": false
+  },
+  "description_editing_placeholder": {
+    "translation": "",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1270,5 +1270,19 @@
     "description": "Validate credentail call to action",
     "missing": false,
     "obsolete": false
+  },
+  "description_editing_placeholder": {
+    "translation": "Optional description",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "Description",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1270,5 +1270,19 @@
     "description": "Validate credentail call to action",
     "missing": false,
     "obsolete": false
+  },
+  "description_editing_placeholder": {
+    "translation": "",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -183,6 +183,10 @@
     "defaultMessage": "content deleted",
     "description": "Shown when messages are deleted"
   },
+  "description_editing_placeholder": {
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description"
+  },
   "download_action": {
     "defaultMessage": "download",
     "description": "Call to action [download]"
@@ -271,6 +275,10 @@
     "defaultMessage": "Default access mode:",
     "description": "Label for default access mode"
   },
+  "label_description": {
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description"
+  },
   "label_file_name": {
     "defaultMessage": "File name:",
     "description": "Label for a file name"

src/i18n/ko.json

@@ -1280,5 +1280,19 @@
     "translation": "메시지에접근할수없음",
     "missing": false,
     "obsolete": true
+  },
+  "description_editing_placeholder": {
+    "translation": "",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1270,5 +1270,19 @@
     "description": "Validate credentail call to action",
     "missing": false,
     "obsolete": false
+  },
+  "description_editing_placeholder": {
+    "translation": "",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1270,5 +1270,19 @@
     "description": "Validate credentail call to action",
     "missing": false,
     "obsolete": false
+  },
+  "description_editing_placeholder": {
+    "translation": "",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -58,7 +58,7 @@
   "badge_danger": {
     "defaultMessage": "Untrustworthy",
     "description": "Suspicious or untrustworthy account or topic badge",
-    "missing": false,
+    "missing": true,
     "obsolete": false
   },
   "badge_owner": {
@@ -71,13 +71,13 @@
   "badge_staff": {
     "defaultMessage": "Staff-managed",
     "description": "Explanation of a staff-managed account or topic badge",
-    "missing": false,
+    "missing": true,
     "obsolete": false
   },
   "badge_verified": {
     "defaultMessage": "Verified/official",
     "description": "Explanation of a verified account or topic badge",
-    "missing": false,
+    "missing": true,
     "obsolete": false
   },
   "badge_you": {
@@ -300,7 +300,7 @@
   "delete_account_warning": {
     "defaultMessage": "Are you sure you want to delete your account? It cannot be undone.",
     "description": "Warning message when deleting an account",
-    "missing": false,
+    "missing": true,
     "obsolete": false
   },
   "delete_messages_warning": {
@@ -759,7 +759,7 @@
   "menu_item_restore_topic": {
     "defaultMessage": "Restore",
     "description": "Restore topic from archive",
-    "missing": false,
+    "missing": true,
     "obsolete": false
   },
   "menu_item_send_retry": {
@@ -1080,7 +1080,7 @@
   "sidepanel_title_crop": {
     "defaultMessage": "Drag to Adjust",
     "description": "Sidepanel title for AvatarCropView.",
-    "missing": false,
+    "missing": true,
     "obsolete": false
   },
   "sidepanel_title_login": {
@@ -1269,5 +1269,19 @@
     "translation": "您確定要刪除您的帳號嗎？此操作無法復原。",
     "missing": false,
     "obsolete": true
+  },
+  "description_editing_placeholder": {
+    "translation": "",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1270,5 +1270,19 @@
     "description": "Validate credentail call to action",
     "missing": false,
     "obsolete": false
+  },
+  "description_editing_placeholder": {
+    "translation": "",
+    "defaultMessage": "Optional description",
+    "description": "Placeholder for editing topic description",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_description": {
+    "translation": "",
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description",
+    "missing": true,
+    "obsolete": false
   }
 }

src/widgets/in-place-edit.jsx

@@ -1,6 +1,5 @@
 // In-place text editor. Shows text with an icon which toggles it into an input field.
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import VisiblePassword from './visible-password.jsx';
 
@@ -8,6 +7,8 @@ export default class InPlaceEdit extends React.Component {
   constructor(props) {
     super(props);
 
+    this.selfRef = React.createRef();
+
     this.state = {
       active: props.active,
       initialValue: props.value || '',
@@ -47,10 +48,13 @@ export default class InPlaceEdit extends React.Component {
     }
   }
 
-  handleStartEditing() {
+   handleStartEditing() {
     if (!this.props.readOnly) {
-      ReactDOM.findDOMNode(this).focus();
+      this.setState({active: true}, () => {
-      this.setState({active: true});
+        if (this.selfRef.current) {
+          this.selfRef.current.focus();
+        }
+      });
     }
   }
 
@@ -75,12 +79,9 @@ export default class InPlaceEdit extends React.Component {
   }
 
   render() {
-    if (this.state.active) {
+    if (!this.state.active) {
-      var fieldType = this.props.type || 'text';
+      let spanText = this.props.type == 'password' ? '••••••••' : this.state.value;
-    } else {
+      let spanClass = 'in-place-edit' + (this.props.readOnly ? ' disabled' : '');
-      var spanText = this.props.type == 'password' ? '••••••••' : this.state.value;
-      var spanClass = 'in-place-edit' +
-        (this.props.readOnly ? ' disabled' : '');
       if (!spanText) {
         spanText = this.props.placeholder;
         spanClass += ' placeholder';
@@ -89,32 +90,35 @@ export default class InPlaceEdit extends React.Component {
         // FIXME: this is wrong for RTL languages.
         spanText = spanText.substring(0, 19) + '...';
       }
+      return (<span className={spanClass} onClick={this.handleStartEditing}>
+        <span className="content">{spanText}</span>
+      </span>);
     }
-    return (
+
-      this.state.active ?
+    let element;
-        (fieldType == 'password' ?
+    let attr = {};
-          <VisiblePassword
+    if (this.props.type == 'password') {
-            value={this.state.value}
+      element = VisiblePassword;
-            placeholder={this.props.placeholder}
+      attr.onFinished = this.handlePasswordFinished;
-            required={this.props.required ? 'required' : ''}
+    } else {
-            autoComplete={this.props.autoComplete}
+      if (this.props.multiline > 1) {
-            autoFocus={true}
+        element = 'textarea';
-            onFinished={this.handlePasswordFinished}/>
+        attr.rows = this.props.multiline;
-          :
+        attr.className = 'inplace-edit';
-          <input type={fieldType}
+      } else {
-            value={this.state.value}
+        element = 'input';
-            placeholder={this.props.placeholder}
+        attr.type = this.props.type || 'text';
-            required={this.props.required ? 'required' : ''}
+      }
-            autoComplete={this.props.autoComplete}
+      attr.onChange = this.handeTextChange;
-            autoFocus
+      attr.onKeyDown = this.handleKeyDown;
-            onChange={this.handeTextChange}
+      attr.onBlur = this.handleEditingFinished;
-            onKeyDown={this.handleKeyDown}
+    }
-            onBlur={this.handleEditingFinished} />
+    attr.placeholder = this.props.placeholder;
-        )
+    attr.required = this.props.required ? 'required' : '';
-        :
+    attr.autoComplete = this.props.autoComplete;
-        <span className={spanClass} onClick={this.handleStartEditing}>
+    attr.autoFocus = true;
-          <span className="content">{spanText}</span>
+    attr.ref = this.selfRef;
-        </span>
+
-    );
+    return React.createElement(element, attr, null);
   }
 };

src/widgets/topic-desc-edit.jsx

@@ -22,7 +22,7 @@ export default class TopicDescEdit extends React.Component {
     const topic = this.props.tinode.getTopic(this.props.topic);
     const acs = topic.getAccessMode();
     this.state = {
-      isMe: this.props.tinode.isMe(this.props.topic),
+      isMe: Tinode.isMeTopicName(this.props.topic),
       owner: acs && acs.isOwner(),
       fullName: topic.public ? topic.public.fn : undefined,
       avatar: makeImageUrl(topic.public ? topic.public.photo : null),
@@ -155,7 +155,7 @@ export default class TopicDescEdit extends React.Component {
       <>
         <div className="panel-form-row">
           <div className="panel-form-column">
-          {this.state.me ? <>
+          {this.state.isMe ? <>
             <label className="small">
               <FormattedMessage id="label_your_name" defaultMessage="Your name"
               description="Label for full name editing" />
@@ -205,6 +205,24 @@ export default class TopicDescEdit extends React.Component {
             onImageUpdated={this.handleImageUpdated}
             onError={this.props.onError} />
         </div>
+        <div className="panel-form-column">
+          <div><label className="small">
+            <FormattedMessage id="label_description" defaultMessage="Description"
+              description="Label for editing topic description" />
+          </label></div>
+          <div>
+            <FormattedMessage id="description_editing_placeholder"
+              defaultMessage="Optional description"
+              description="Placeholder for editing topic description">{
+              (private_placeholder) => <InPlaceEdit
+                placeholder={private_placeholder}
+                readOnly={!editable}
+                value={this.state.description}
+                multiline={2}
+                onFinished={this.handleDescriptionUpdate} />
+            }</FormattedMessage>
+          </div>
+        </div>
         {editable ?
           <>
             <div className="hr" />