Merge branch 'next' of https://github.com/tinode/webapp into next

css/base.css

@@ -3064,4 +3064,9 @@ ul.tabbar li.active > a {
   li .menuTrigger {
     opacity: 0.3;
   }
+
+  #send-message-input {
+    /* Just an indicator that the screen is in mobile mode */
+    transition-property: -tinode-mobile;
+  }
 }

src/views/info-view.jsx

@@ -480,7 +480,7 @@ class InfoView extends React.Component {
             tinode={this.props.tinode}
             topic={this.props.topic}
             onCredAdd={this.props.onCredAdd}
-            onTopicTagsUpdateRequest={this.props.onTopicTagsUpdateRequest}
+            onUpdateTagsRequest={this.props.onTopicTagsUpdateRequest}
             onCredConfirm={this.props.onCredConfirm}
             onCredDelete={this.props.onCredDelete}
             onUpdateTopicDesc={this.props.onTopicDescUpdateRequest}

src/views/sidepanel-view.jsx

@@ -182,7 +182,7 @@ class SidepanelView extends React.PureComponent {
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
             onUpdateTopicDesc={this.props.onUpdateAccountDesc}
-            onUpdateTags={this.props.onUpdateAccountTags}
+            onUpdateTagsRequest={this.props.onUpdateAccountTags}
             onCredAdd={this.props.onCredAdd}
             onCredDelete={this.props.onCredDelete}
             onCredConfirm={this.props.onCredConfirm}

src/views/tinode-web.jsx

@@ -1168,7 +1168,7 @@ class TinodeWeb extends React.Component {
     });
   }
 
-  handleUpdateAccountTagsRequest(tags) {
+  handleUpdateAccountTagsRequest(_, tags) {
     this.tinode.getMeTopic().setMeta({tags: tags})
       .catch(err => this.handleError(err.message, 'err'));
   }

src/widgets/send-message.jsx

@@ -90,6 +90,10 @@ class SendMessage extends React.PureComponent {
   componentDidMount() {
     if (this.messageEditArea) {
       this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.
+        this.messageEditArea.focus();
+      }
     }
 
     this.setState({quote: this.formatReply()});
@@ -103,7 +107,10 @@ class SendMessage extends React.PureComponent {
 
   componentDidUpdate(prevProps) {
     if (this.messageEditArea) {
-      this.messageEditArea.focus();
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.
+        this.messageEditArea.focus();
+      }
     }
 
     if (prevProps.topicName != this.props.topicName) {
@@ -266,11 +273,10 @@ class SendMessage extends React.PureComponent {
                       onDeleted={_ => this.setState({audioRec: false})}
                       onFinished={this.handleAttachAudio}/>
                   </Suspense>) :
-                  <textarea id="sendMessage" placeholder={prompt}
+                  <textarea id="send-message-input" placeholder={prompt}
                     value={this.state.message} onChange={this.handleMessageTyping}
                     onKeyPress={this.handleKeyPress}
-                    ref={(ref) => {this.messageEditArea = ref;}}
+                    ref={ref => {this.messageEditArea = ref;}} />)}
-                    autoFocus />)}
               {this.state.message || !audioEnabled ?
                 <a href="#" onClick={this.handleSend} title={formatMessage(messages.icon_title_send)}>
                   <i className="material-icons">{sendIcon}</i>

src/widgets/topic-common.jsx

@@ -117,7 +117,7 @@ export default class TopicCommon extends React.Component {
   // Request server to change tags.
   handleTagsUpdated(tags) {
     if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
-      this.props.onTopicTagsUpdateRequest(this.props.topic, tags);
+      this.props.onUpdateTagsRequest(this.props.topic, tags);
     }
   }
 

umd/251.prod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"251.prod.js","mappings":"skNAOA,MAAMA,UAAkBC,IAAAA,cACtBC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,QAAU,CAAC,EAChBC,EAAAA,SAAuBC,IAAQH,KAAKC,QAAQE,EAAGC,MAAQD,EAAGE,IAAI,IAE9DL,KAAKM,MAAQ,CACXC,YAAaT,EAAMS,aAAe,KAClCC,SAAUR,KAAKC,QAAQH,EAAMS,aAAe,MAC5CE,YAAa,IAGfT,KAAKU,aAAeV,KAAKU,aAAaC,KAAKX,MAC3CA,KAAKY,eAAiBZ,KAAKY,eAAeD,KAAKX,MAC/CA,KAAKa,cAAgBb,KAAKa,cAAcF,KAAKX,MAC7CA,KAAKc,oBAAsBd,KAAKc,oBAAoBH,KAAKX,KAC3D,CAEAU,aAAaK,GACXf,KAAKgB,SAAS,CAACP,YAAaT,KAAKiB,aAAaF,EAAEG,OAAOC,QACzD,CAEAP,eAAeG,GACbA,EAAEK,iBACFpB,KAAKF,MAAMuB,SAASrB,KAAKM,MAAMG,YAAYa,OAC7C,CAGAT,cAAcE,GACE,UAAVA,EAAEQ,KACJvB,KAAKY,eAAeG,EAExB,CAEAD,sBACEd,KAAKF,MAAM0B,sBAAsBxB,KAAKM,MAAMC,YAAaP,KAAKM,MAAME,SACtE,CAGAS,aAAaQ,GACX,OAAKA,EAKEA,EAAOC,QAAQ,eAAgB,IAJ7BD,CAKX,CAEAE,SACE,OACE,oCACE,0BAAMC,UAAU,YAAYC,QAAS7B,KAAKc,qBACxC,0BAAMc,UAAU,iBAAgBE,EAAAA,EAAAA,IAAU9B,KAAKM,MAAMC,aAAa,KAAa,IAC7EP,KAAKM,MAAME,SAAS,KACxB,2BAAOuB,KAAK,MAAMC,YAAahC,KAAKM,MAAM0B,YACtCb,MAAOnB,KAAKM,MAAMG,YAAawB,SAAUjC,KAAKU,aAC9CwB,UAAW,GAAIC,UAAWnC,KAAKa,cAAeuB,UAAQ,EAACC,UAAWrC,KAAKF,MAAMuC,YAGvF,EAGF,SAAeC,EAAAA,EAAAA,YAAW3C,E","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.codeMap = {};\n    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n    this.state = {\n      countryCode: props.countryCode || 'US',\n      dialCode: this.codeMap[props.countryCode || 'US'],\n      localNumber: ''\n    };\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleFinished = this.handleFinished.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.showCountrySelector = this.showCountrySelector.bind(this);\n  }\n\n  handleChange(e) {\n    this.setState({localNumber: this.filterNumber(e.target.value)});\n  }\n\n  handleFinished(e) {\n    e.preventDefault();\n    this.props.onSubmit(this.state.localNumber.trim());\n  }\n\n\n  handleKeyDown(e) {\n    if (e.key === 'Enter') {\n      this.handleFinished(e);\n    }\n  }\n\n  showCountrySelector() {\n    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n  }\n\n  // Filter out characters not permitted in a phone number.\n  filterNumber(number) {\n    if (!number) {\n      return number;\n    }\n    // Leave numbers, space, (, ), -, and .\n    // The + is not allowed: it's handled by the country code portion.\n    return number.replace(/[^-\\s().\\d]/g, '');\n  }\n\n  render() {\n    return (\n      <>\n        <span className=\"dial-code\" onClick={this.showCountrySelector}>\n          <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n          +{this.state.dialCode}&nbsp;</span>\n        <input type=\"tel\" placeholder={this.state.placeholder}\n            value={this.state.localNumber} onChange={this.handleChange}\n            maxLength={17} onKeyDown={this.handleKeyDown} required autoFocus={this.props.autoFocus} />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["PhoneEdit","React","constructor","props","super","this","codeMap","dcodes","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","onSubmit","trim","key","onShowCountrySelector","number","replace","render","className","onClick","flagEmoji","type","placeholder","onChange","maxLength","onKeyDown","required","autoFocus","injectIntl"],"sourceRoot":""}

umd/index.dev.js

@@ -5022,7 +5022,7 @@ class InfoView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       tinode: this.props.tinode,
       topic: this.props.topic,
       onCredAdd: this.props.onCredAdd,
-      onTopicTagsUpdateRequest: this.props.onTopicTagsUpdateRequest,
+      onUpdateTagsRequest: this.props.onTopicTagsUpdateRequest,
       onCredConfirm: this.props.onCredConfirm,
       onCredDelete: this.props.onCredDelete,
       onUpdateTopicDesc: this.props.onTopicDescUpdateRequest,
@@ -7601,7 +7601,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       tinode: this.props.tinode,
       myUserId: this.props.myUserId,
       onUpdateTopicDesc: this.props.onUpdateAccountDesc,
-      onUpdateTags: this.props.onUpdateAccountTags,
+      onUpdateTagsRequest: this.props.onUpdateAccountTags,
       onCredAdd: this.props.onCredAdd,
       onCredDelete: this.props.onCredDelete,
       onCredConfirm: this.props.onCredConfirm,
@@ -8717,7 +8717,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       this.handleError(err.message, 'err');
     });
   }
-  handleUpdateAccountTagsRequest(tags) {
+  handleUpdateAccountTagsRequest(_, tags) {
     this.tinode.getMeTopic().setMeta({
       tags: tags
     }).catch(err => this.handleError(err.message, 'err'));
@@ -15323,6 +15323,9 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
   componentDidMount() {
     if (this.messageEditArea) {
       this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        this.messageEditArea.focus();
+      }
     }
     this.setState({
       quote: this.formatReply()
@@ -15335,7 +15338,9 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
   }
   componentDidUpdate(prevProps) {
     if (this.messageEditArea) {
-      this.messageEditArea.focus();
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        this.messageEditArea.focus();
+      }
     }
     if (prevProps.topicName != this.props.topicName) {
       this.setState({
@@ -15496,15 +15501,14 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       }),
       onFinished: this.handleAttachAudio
     })) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", {
-      id: "sendMessage",
+      id: "send-message-input",
       placeholder: prompt,
       value: this.state.message,
       onChange: this.handleMessageTyping,
       onKeyPress: this.handleKeyPress,
       ref: ref => {
         this.messageEditArea = ref;
-      },
+      }
-      autoFocus: true
     }), this.state.message || !audioEnabled ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
       onClick: this.handleSend,
@@ -15952,7 +15956,7 @@ class TopicCommon extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
   }
   handleTagsUpdated(tags) {
     if (!(0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_3__.arrayEqual)(this.state.tags.slice(0), tags.slice(0))) {
-      this.props.onTopicTagsUpdateRequest(this.props.topic, tags);
+      this.props.onUpdateTagsRequest(this.props.topic, tags);
     }
   }
   render() {

umd/src_widgets_phone-edit_jsx.dev.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src_widgets_phone-edit_jsx.dev.js","mappings":";;;;;;;;;;;;;;;;;;;AAE0B;AACc;AACC;AACI;AAE7C,MAAMI,SAAS,SAASJ,4DAAmB,CAAC;EAC1CM,WAAW,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAEZ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC;IACjBN,iDAAsB,CAACS,EAAE,IAAI;MAAE,IAAI,CAACH,OAAO,CAACG,EAAE,CAACC,IAAI,CAAC,GAAGD,EAAE,CAACE,IAAI;IAAE,CAAC,CAAC;IAElE,IAAI,CAACC,KAAK,GAAG;MACXC,WAAW,EAAER,KAAK,CAACQ,WAAW,IAAI,IAAI;MACtCC,QAAQ,EAAE,IAAI,CAACR,OAAO,CAACD,KAAK,CAACQ,WAAW,IAAI,IAAI,CAAC;MACjDE,WAAW,EAAE;IACf,CAAC;IAED,IAAI,CAACC,YAAY,GAAG,IAAI,CAACA,YAAY,CAACC,IAAI,CAAC,IAAI,CAAC;IAChD,IAAI,CAACC,cAAc,GAAG,IAAI,CAACA,cAAc,CAACD,IAAI,CAAC,IAAI,CAAC;IACpD,IAAI,CAACE,aAAa,GAAG,IAAI,CAACA,aAAa,CAACF,IAAI,CAAC,IAAI,CAAC;IAClD,IAAI,CAACG,mBAAmB,GAAG,IAAI,CAACA,mBAAmB,CAACH,IAAI,CAAC,IAAI,CAAC;EAChE;EAEAD,YAAY,CAACK,CAAC,EAAE;IACd,IAAI,CAACC,QAAQ,CAAC;MAACP,WAAW,EAAE,IAAI,CAACQ,YAAY,CAACF,CAAC,CAACG,MAAM,CAACC,KAAK;IAAC,CAAC,CAAC;EACjE;EAEAP,cAAc,CAACG,CAAC,EAAE;IAChBA,CAAC,CAACK,cAAc,EAAE;IAClB,IAAI,CAACrB,KAAK,CAACsB,QAAQ,CAAC,IAAI,CAACf,KAAK,CAACG,WAAW,CAACa,IAAI,EAAE,CAAC;EACpD;EAGAT,aAAa,CAACE,CAAC,EAAE;IACf,IAAIA,CAAC,CAACQ,GAAG,KAAK,OAAO,EAAE;MACrB,IAAI,CAACX,cAAc,CAACG,CAAC,CAAC;IACxB;EACF;EAEAD,mBAAmB,GAAG;IACpB,IAAI,CAACf,KAAK,CAACyB,qBAAqB,CAAC,IAAI,CAAClB,KAAK,CAACC,WAAW,EAAE,IAAI,CAACD,KAAK,CAACE,QAAQ,CAAC;EAC/E;EAGAS,YAAY,CAACQ,MAAM,EAAE;IACnB,IAAI,CAACA,MAAM,EAAE;MACX,OAAOA,MAAM;IACf;IAGA,OAAOA,MAAM,CAACC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;EAC3C;EAEAC,MAAM,GAAG;IACP,OACE,0HACE;MAAM,SAAS,EAAC,WAAW;MAAC,OAAO,EAAE,IAAI,CAACb;IAAoB,GAC5D;MAAM,SAAS,EAAC;IAAc,GAAEnB,yDAAS,CAAC,IAAI,CAACW,KAAK,CAACC,WAAW,CAAC,EAAC,MAAM,CAAO,KAC9E,EAAC,IAAI,CAACD,KAAK,CAACE,QAAQ,EAAC,MAAM,CAAO,EACrC;MAAO,IAAI,EAAC,KAAK;MAAC,WAAW,EAAE,IAAI,CAACF,KAAK,CAACsB,WAAY;MAClD,KAAK,EAAE,IAAI,CAACtB,KAAK,CAACG,WAAY;MAAC,QAAQ,EAAE,IAAI,CAACC,YAAa;MAC3D,SAAS,EAAE,EAAG;MAAC,SAAS,EAAE,IAAI,CAACG,aAAc;MAAC,QAAQ;MAAC,SAAS,EAAE,IAAI,CAACd,KAAK,CAAC8B;IAAU,EAAG,CAC7F;EAEP;AACF;AAEA,iEAAepC,sDAAU,CAACG,SAAS,CAAC","sources":["webpack://tinode-webapp/./src/widgets/phone-edit.jsx"],"sourcesContent":["// Editor for a phone number.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport * as dcodes from '../dcodes.json';\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneEdit extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.codeMap = {};\n    dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });\n\n    this.state = {\n      countryCode: props.countryCode || 'US',\n      dialCode: this.codeMap[props.countryCode || 'US'],\n      localNumber: ''\n    };\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleFinished = this.handleFinished.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.showCountrySelector = this.showCountrySelector.bind(this);\n  }\n\n  handleChange(e) {\n    this.setState({localNumber: this.filterNumber(e.target.value)});\n  }\n\n  handleFinished(e) {\n    e.preventDefault();\n    this.props.onSubmit(this.state.localNumber.trim());\n  }\n\n\n  handleKeyDown(e) {\n    if (e.key === 'Enter') {\n      this.handleFinished(e);\n    }\n  }\n\n  showCountrySelector() {\n    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);\n  }\n\n  // Filter out characters not permitted in a phone number.\n  filterNumber(number) {\n    if (!number) {\n      return number;\n    }\n    // Leave numbers, space, (, ), -, and .\n    // The + is not allowed: it's handled by the country code portion.\n    return number.replace(/[^-\\s().\\d]/g, '');\n  }\n\n  render() {\n    return (\n      <>\n        <span className=\"dial-code\" onClick={this.showCountrySelector}>\n          <span className=\"country-flag\">{flagEmoji(this.state.countryCode)}&nbsp;</span>\n          +{this.state.dialCode}&nbsp;</span>\n        <input type=\"tel\" placeholder={this.state.placeholder}\n            value={this.state.localNumber} onChange={this.handleChange}\n            maxLength={17} onKeyDown={this.handleKeyDown} required autoFocus={this.props.autoFocus} />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(PhoneEdit);\n"],"names":["React","injectIntl","dcodes","flagEmoji","PhoneEdit","PureComponent","constructor","props","codeMap","default","forEach","dc","code","dial","state","countryCode","dialCode","localNumber","handleChange","bind","handleFinished","handleKeyDown","showCountrySelector","e","setState","filterNumber","target","value","preventDefault","onSubmit","trim","key","onShowCountrySelector","number","replace","render","placeholder","autoFocus"],"sourceRoot":""}