making the app adaptive - now works on mobile

README.md

@@ -1,13 +1,13 @@
 # Single-page chat with Tinode
 
-Example using Tinode to build a single-page chat application. The app uses
+Example using [Tinode](https://github.com/tinode/chat/) to build a single-page chat application. The app uses
-[React](https://facebook.github.io/react/), Google's [material design fonts](https://www.google.com/fonts/)
+[React](https://facebook.github.io/react/), Google's material design [fonts](https://www.google.com/fonts/)
-and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-web). The [Tinode javascript library](https://github.com/tinode/tinode-js/) has no
+and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-web). The [Tinode javascript library](https://github.com/tinode/tinode-js/) has no external dependencies.
-external dependencies.
 
-This is work in progress. Bugs are expected. The work was tested in the latest Chrome & Firefox only.
+This is work in progress. Bugs are expected. The app was tested in the latest Chrome & Firefox only.
 
-Try it at http://api.tinode.co/x/example-react-js/
+Try it at http://api.tinode.co/x/example-react-js/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`.
+Password is `<login>123`, e.g. login for `alice` is `alice123`.
 
 License: [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)
 

css/base.css

@@ -14,7 +14,7 @@ html, body {
   color: #666;
   overflow: hidden;
   background-color: silver;
-  box-shadow: inset 0 10em #3949AB; /* the deep-plue stripe accross the top */
+  box-shadow: inset 0 10rem #3949AB; /* the deep-plue stripe accross the top */
 }
 
 a {
@@ -36,6 +36,9 @@ form {
   font-size: 1.2rem;
 }
 
+form label {
+  font-size: 1rem;
+}
 /* Input fields and buttons */
 
 button {
@@ -123,27 +126,31 @@ textarea, input {
   font-size: 1.05rem;
   background: transparent;
   border: none;
-  border-bottom: 1px solid #ccc;
-  border-radius: 0.2rem;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-  width: 100%;
   margin: 0.25rem 0;
   padding: 0 0.125rem;
   outline: none;
-  transition: all 0.2s ease-in-out;
   box-sizing: border-box;
   color: #666;
 }
-textarea:focus, input:focus {
-  border-bottom: 1px solid #2196f3;
-  box-shadow: 0 1px 0 rgba(33, 150, 243, 0.25);
-}
-input {
-  height: 2.5rem;
-}
 textarea {
   resize: none;
 }
+input[type="text"],
+input[type="password"],
+textarea {
+  height: 2.5rem;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0.2rem;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+}
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus {
+  border-bottom: 1px solid #2196f3;
+  box-shadow: 0 1px 0 rgba(33, 150, 243, 0.25);
+}
 /* Scrollbar styling for Chrome. Firefox does not support scrollbar styling.  */
 ::-webkit-scrollbar {
 	width: 0.6rem;
@@ -161,7 +168,7 @@ textarea {
 /* END of input and buttons */
 
 form {
-  padding: 0.5em 0.75em;
+  padding: 0.5rem 0.75rem;
   line-height: 1.75;
   font-size: 1.2rem;
 }
@@ -170,8 +177,8 @@ form {
 
 #mountPoint {
   height: 100%;
-  padding-top: 1em;
+  padding-top: 1rem;
-  padding-bottom: 3em;
+  padding-bottom: 3rem;
 }
 
 /* Top-level application layout style: sidepanel + main view */
@@ -179,12 +186,12 @@ form {
   position: relative;
   display: flex;
   height: 100%;
-  width: 80em;
+  max-width: 80rem;
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
-  border-radius: 0.25em;
+  border-radius: 0.25rem;
-  box-shadow: 1px 2px 0.3em gray;
+  box-shadow: 1px 2px 0.3rem gray;
   background-color: white;
 }
 
@@ -192,7 +199,8 @@ form {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 30em;
+  width: 24rem;
+  min-width: 24rem;
   height: 100%;
 }
 
@@ -202,6 +210,28 @@ form {
   width: 100%;
   height: 100%;
 }
+
+@media (max-width: 960px) {
+  #mountPoint {
+    padding: 0;
+  }
+}
+
+@media (max-width: 640px) {
+  #app-container {
+    width: 100%;
+  }
+
+  #sidepanel {
+    width: 100%;
+  }
+}
+
+/* Class to alternatively hide sidepanel/topic-view */
+.nodisplay {
+  display: none!important;
+}
+
 /* END of top-level layout */
 
 /* Sidepanel styles */
@@ -251,6 +281,20 @@ form {
   border-radius: 33%;
 }
 
+/* Application settings */
+#settings-form ul {
+  list-style: none;
+}
+
+#settings-form li {
+  vertical-align: middle;
+}
+#settings-form label {
+  display: inline-block;
+  padding-left: 0.5rem;
+}
+
+
 /* Area which displays an error message */
 #alert-box {
   padding: 0.5em;
@@ -302,7 +346,7 @@ form {
 #contact-box .avatar {
   width: 3rem;
   height: auto;
-  border-radius: 33%;
+  border-radius: 40%;
 }
 
 /* Online-offline indicator positioned inside avatar-box */
@@ -347,7 +391,7 @@ form {
   width: 4.5rem;
   height: auto;
   box-sizing: border-box;
-  margin: 0 0.5rem;
+  margin-left: 0.5rem;
   padding: 0;
 }
 
@@ -416,26 +460,28 @@ form {
 /* Topic/messages view */
 #topic-caption-panel {
   display: flex;
-  align-items: baseline;
+  align-items:center;;
-  justify-content: space-between;
+  justify-content: flex-start;
   flex: none;
-  padding: 0.5em;
+  padding: 0.5rem;
-  height: 4em;
+  height: 4rem;
   background-color: #b0bec5;
   box-shadow: 0 1px 2px gray;
   z-index: 1; /* otherwise the shadow becomes invisible */
 }
 
-/*
+#hide-message-view {
-#topic-title {
+  display: block;
+  margin-right: 0.5rem;
 }
-#topic-last-seen {
+
+#topic-users {
+  margin-left: auto;
 }
-*/
 
 /* Scrollable panel where the messages are shown */
 #messages-panel {
-  padding: 0.75em;
+  padding: 0.75rem;
   overflow-y: scroll;
   background-color: #eceff1;
   height: 100%;
@@ -447,7 +493,7 @@ form {
   display: flex;
   align-items: center;
   flex: none;
-  padding: 0.5em;
+  padding: 0.5rem;
   background-color: #eceff1;
   box-shadow: 0 -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
   z-index: 2;
@@ -462,12 +508,18 @@ form {
   justify-content: center;
   background-color: #e0f7fa;
 }
+#dummy-view a {
+  text-decoration: none;
+  display: block;
+  text-align: center;
+  vertical-align: middle;
+}
 
 /* Talk bubbles */
 .chat-box {
   list-style: none;
-  padding: 0 0 3.5em 0;
+  padding: 0 0 3.5rem 0;
-  margin: 0 1em 0 1em;
+  margin: 0 0.5rem;
 }
 
 .chat-box li {
@@ -683,6 +735,6 @@ form {
 }
 .avatar-box .material-icons {
   color: rgba(250, 250, 250, 0.8); /* #fafafa, gray 50 */
-  background-color: #bdbdbd;
+  background-color: #e0e0e0;
-  border-radius: 2pt;
+  border-radius: 40%;
 }

index.html

@@ -29,6 +29,7 @@
     <script type="text/babel">
     // Name of this application, used in the User-Agent
     var APP_NAME = "TinodeReact/1.0";
+
     // Host name and posrt to connect to
     var HOST = "api.tinode.co";
     // var HOST = "localhost:6060";
@@ -45,6 +46,10 @@
     // Delay before sending a read notification, milliseconds.
     var READ_DELAY = 3*1000;
 
+    // Mediaquery breakpoint between desktop and mobile, in px. Should match the value
+    // in @meadia (max-size: 640px) in base.css
+    var MEDIA_BREAKPOINT = 640;
+
     // Short representation of time in the past.
     function shortDateFormat(then) {
 	    var now = new Date();
@@ -94,9 +99,9 @@
         this.props.onLogin(this.state.login.trim(), this.state.password.trim());
       },
       render: function() {
-        var submitClassList = "blue";
+        var submitClasses = "blue";
         if (this.props.disabled) {
-          submitClassList += " disabled";
+          submitClasses += " disabled";
         }
         return (
           <div>
@@ -112,7 +117,7 @@
                 onChange={this.handlePasswordChange}
                 required />
               <div className="dialog-buttons">
-                <button className={submitClassList} type="submit">Sign in</button>
+                <button className={submitClasses} type="submit">Sign in</button>
               </div>
             </form>
           </div>
@@ -172,9 +177,9 @@
         }
       },
       render: function() {
-        var submitClassList = "blue";
+        var submitClasses = "blue";
         if (this.props.disabled) {
-          submitClassList += " disabled";
+          submitClasses += " disabled";
         }
         return (
           <div>
@@ -191,9 +196,9 @@
                 <CreateAccountView.AvatarUpload onImageChanged={this.handleImageChanged} />
               </div>
               <input type="text" placeholder="Full name, e.g. John Doe"
-                value={this.state.fn} onChange={this.handleFnChange} required />
+                value={this.state.fn} onChange={this.handleFnChange} />
               <div className="dialog-buttons">
-                <button className={submitClassList} type="submit">Sign up</button>
+                <button className={submitClasses} type="submit">Sign up</button>
               </div>
             </form>
           </div>
@@ -208,7 +213,6 @@
         };
       },
       handleFileUpload(e) {
-        console.log("handleFileUpload");
         var instance = this;
         var img = new Image();
         img.crossOrigin = 'Anonymous';
@@ -228,9 +232,7 @@
           ctx.drawImage(this, sx, sy, size, size, 0, 0, 64, 64);
           instance.setState({dataUrl: canvas.toDataURL("image/jpg")});
           canvas = null;
-          console.log("handleFileUpload.onLoad: done");
         };
-        console.log(e);
         img.src = URL.createObjectURL(e.target.files[0]);
       },
       render: function() {
@@ -238,7 +240,7 @@
           <div className="avatar-upload">
             {this.state.dataUrl ?
               <img src={this.state.dataUrl} className="preview" /> :
-              <div className="blank">48&times;48</div>}
+              <div className="blank">64&times;64</div>}
             <input type="file" id="file-input-avatar" className="inputfile hidden"
               accept="image/*" onChange={this.handleFileUpload} />
             <label htmlFor="file-input-avatar" className="round">
@@ -252,11 +254,43 @@
 
     /* BEGIN Tinode config panel */
     var SettingsView = React.createClass({
+      getInitialState: function() {
+        return {
+          hostName: HOST,
+        };
+      },
+      handleSubmit: function(e) {
+        e.preventDefault();
+      },
+      handleHostNameChange: function(e) {
+        this.setState({hostName: e.target.value});
+      },
       render: function() {
         return (
-          <div id="settings-form">
+          <form id="settings-form" onSubmit={this.handleSubmit}>
-            <big>Not implemented</big>
+            <p>This form does not do anything yet</p>
-          </div>
+            <label htmlFor="host-name">Host:</label>
+            <input type="text" id="host-name" placeholder="api.tinode.co"
+              value={this.state.hostName} onChange={this.handleHostNameChange} required autofocus />
+            <p>Wire transport:</p>
+            <ul>
+              <li>
+                <input type="radio" id="transport-default" name="transport-select" defaultChecked />
+                <label htmlFor="transport-default">default</label>
+              </li>
+              <li>
+                <input type="radio" id="transport-ws" name="transport-select" />
+                <label htmlFor="transport-ws">websocket</label>
+              </li>
+              <li>
+                <input type="radio" id="transport-lp" name="transport-select" />
+                <label htmlFor="transport-lp">long polling</label>
+              </li>
+            </ul>
+            <div className="dialog-buttons">
+              <button type="submit" className="blue">Update</button>
+            </div>
+          </form>
         );
       }
     });
@@ -279,6 +313,8 @@
                   <SideNavbar.MenuStart onSignUp={this.props.onSignUp} onSettings={this.props.onSettings} /> :
                     this.props.state === 'settings' ?
                     <SideNavbar.MenuCancel onCancel={this.props.onCancel} /> :
+                    this.props.state === 'edit-account' ?
+                    <SideNavbar.MenuCancel onCancel={this.props.onCancel} /> :
                     this.props.state === 'register' ?
                     <SideNavbar.MenuCancel onCancel={this.props.onCancel} /> :
                     this.props.state === 'contacts' ?
@@ -339,13 +375,15 @@
             title = "Create Account"; break;
           case 'settings':
             title = "Settings"; break;
+          case 'edit-account':
+            title = "Edit Account"; break;
           case 'contacts':
             title = this.props.title;
             avatar = this.props.avatar;
           default:;
         };
         return (
-          <div id="sidepanel">
+          <div id="sidepanel" className={this.props.hideSelf ? 'nodisplay' : null}>
             <SideNavbar state={this.props.state}
               title={title} avatar={avatar}
               onSignUp={this.props.onSignUp}
@@ -369,6 +407,9 @@
               this.props.state === 'settings' ?
               <SettingsView onCancel={this.props.onCancel} /> :
 
+              this.props.state === 'edit-account' ?
+              <EditAccountView onCancel={this.props.onCancel} /> :
+
               this.props.state === 'contacts' ?
               <ContactsView
                 data={this.props.subscriptions}
@@ -396,6 +437,18 @@
 
     /* END Side panel */
 
+    /* EditAccount parameters */
+    var EditAccountView = React.createClass({
+      render: function() {
+        return (
+          <form id="edit-account">
+            <p>Not implemented</p>
+          </form>
+        );
+      }
+    });
+    /* END EditAccount */
+
     /* BEGIN Contact list (list of topics) */
 
     /* A form for initiating a new topic
@@ -532,35 +585,6 @@
     /* END Contact list */
 
     /* BEGIN Conversation panel */
-    /* Don't delete it for now: maybe needed for debugging
-    var messagesList = [
-      {
-        id: 1, content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet tellus interdum. \
-Integer sodales accumsan sem, ut malesuada velit egestas vel. Aenean consequat consectetur justo eget venenatis. Morbi \
-eleifend fringilla urna euismod tristique. Nullam at magna vel mauris rutrum finibus. Duis eu dignissim magna. Donec \
-        lobortis suscipit vulputate. Cras luctus elit ex, vitae lobortis magna lobortis bibendum.",
-        timestamp: new Date(2015, 11, 31, 22, 23, 24, 567), response: false
-      },
-      {
-        id: 2, content: "Duis porttitor est nec diam lobortis, non aliquam risus aliquam. \
-Nulla vitae est aliquam, egestas nunc dapibus, dapibus risus.\
-Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
-Nullam vitae condimentum lectus, quis maximus elit.\
-\
-Nunc ac nisi risus. Integer eget augue vel risus commodo blandit. Nulla faucibus convallis neque sed eleifend. Vestibulum\
-dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac habitasse platea dictumst.",
-        timestamp: new Date(2016, 0, 1, 2, 3, 4, 567),
-        response: true
-      },
-      {id: 3, content: "Ooga chaka ooga ooga!", timestamp: new Date(2016, 0, 2, 16, 17, 18, 567), response: false},
-      {id: 4, content: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
-      Nullam vitae condimentum lectus, quis maximus elit.", timestamp: new Date(2016, 0, 3, 1, 2, 3, 567), response: true},
-      {id: 5, content: "Integer sodales accumsan sem, ut malesuada velit egestas vel. Aenean consequat consectetur justo eget venenatis.",
-        timestamp: new Date(2016, 0, 3, 4, 5, 6, 567), response: true},
-      {id: 6, content: "No way.", timestamp: new Date(2016, 0, 3, 15, 16, 17, 567), response: false},
-      {id: 7, content: "OK!", timestamp: new Date(2016, 0, 3, 18, 19, 20, 567), response: true}
-    ];
-    */
     var Received = {
       UNDEF: -2,
       SENDING: -1,
@@ -751,13 +775,18 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
           }
 
           component = (
-            <div id="topic-view">
+            <div id="topic-view" className={this.props.hideSelf ? 'nodisplay' : null}>
               <div id="topic-caption-panel">
-                <div>
+                {this.props.displayMobile ?
+                  <a href="#" id="hide-message-view" onClick={this.props.onHideMessageView}>
+                    <i className="material-icons big">arrow_back</i>
+                  </a> :
+                  null}
+                <div id="topic-title-group">
                   <div id="topic-title" className="panel-title">{this.state.title}</div>
                   <div id="topic-last-seen">{lastSeen}</div>
                 </div>
-                <div>users online and menu buttons</div>
+                <div id="topic-users">users online and menu buttons</div>
               </div>
               <div id="messages-panel" ref="messagesPanel">
                 <ul className="chat-box">
@@ -769,7 +798,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
           );
         } else {
           component = (
-            <MessagesView.Dummy />
+            <MessagesView.Dummy hideSelf={this.props.hideSelf} />
           );
         }
         return component;
@@ -827,13 +856,13 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
     /* This is just a static page to display when no conversation is selected. */
     MessagesView.Dummy = React.createClass({
       render: function() {
+        var version = document.lastModified;
         return (
-          <div id="dummy-view">
+          <div id="dummy-view" className={this.props.hideSelf ? 'nodisplay' : null}>
             <a href="https://github.com/tinode/chat/">
-              <div>
+              <img id="logo" alt="logo" src="img/logo.svg" />
-                <img id="logo" alt="logo" src="img/logo.svg" />
+              <h2>Tinode Demo Chat</h2>
-                <h2>Tinode Demo Chat</h2>
+              <p>Version: {version}</p>
-              </div>
             </a>
           </div>
         );
@@ -891,16 +920,30 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
           errorText: '',
           topicSelected: '',
           loginDisabled: false,
-          subscriptions: {}
+          subscriptions: {},
+          displayMobile: (window.innerWidth <= MEDIA_BREAKPOINT),
+          mobilePanel: 'sidepanel'
         };
       },
       componentDidMount: function() {
+        window.addEventListener('resize', this.handleResize);
         Tinode.enableLogging(true);
-        Tinode.onDisconnect = this.handleDicsonnect;
+        Tinode.onDisconnect = this.handleDisconnect;
         // Setup with the default transport, usually websocket.
         Tinode.setup(APP_NAME, HOST, API_KEY);
       },
-      handleDicsonnect: function() {
+      componentWillUnmount: function(){
+        window.removeEventListener('resize', this.handleResize);
+      },
+      handleResize: function(){
+        var mobile = document.documentElement.clientWidth <= MEDIA_BREAKPOINT;
+        if (this.state.displayMobile != mobile) {
+          this.setState({displayMobile: mobile});
+        }
+        console.log("viewport (mob=" + mobile + "): " + document.documentElement.clientWidth +
+          "x" + document.documentElement.clientHeight);
+      },
+      handleDisconnect: function() {
         this.setState({
           sidePanelSelected: 'login',
           sidePanelTitle: null,
@@ -910,7 +953,8 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
           errorText: 'disconnected',
           topicSelected: '',
           loginDisabled: false,
-          subscriptions: {}
+          subscriptions: {},
+          mobilePanel: 'sidepanel'
         });
       },
       // User clicked Login button in the side panel.
@@ -949,7 +993,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
       // Registration of a new account.
       handleNewAccount: function(login_, password_, public_, private_) {
         var instance = this;
-        Tinode.connect().then(function(){
+        Tinode.connect().then(function() {
           return Tinode.createUserBasic(login_, password_,
             {login: "basic", public: public_, private: private_});
         }).catch(function(err) {
@@ -958,7 +1002,11 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
       },
       // User clicked on a contact in the side panel.
       handleTopicSelected: function(topicName) {
-        this.setState({topicSelected: topicName});
+        this.setState({topicSelected: topicName, mobilePanel: 'topic-view'});
+      },
+      // In mobile view user requested to show sidepanel
+      handleHideMessageView: function() {
+        this.setState({mobilePanel: 'sidepanel'});
       },
       // User clicked on a message send button.
       handleSendMessage: function(msg) {
@@ -971,7 +1019,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
       },
       // User chose Settings menu item.
       handleSettings: function() {
-        this.setState({sidePanelSelected: 'settings'});
+        this.setState({sidePanelSelected: this.state.loggedIn ? 'edit-account' : 'settings'});
       },
       // User clicked Cancel button in Setting or Sign Up panel.
       handleSidepanelCancel: function() {
@@ -996,6 +1044,8 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
               onCancel={this.handleDialogCancel} />
 
             <SidepanelView
+              displayMobile={this.state.displayMobile}
+              hideSelf={(this.state.displayMobile && this.state.mobilePanel !== 'sidepanel')}
               state={this.state.sidePanelSelected}
               title={this.state.sidePanelTitle}
               avatar={this.state.sidePanelAvatar}
@@ -1011,6 +1061,9 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
               onCancel={this.handleSidepanelCancel} />
 
             <MessagesView
+              onHideMessageView={this.handleHideMessageView}
+              displayMobile={this.state.displayMobile}
+              hideSelf={(this.state.displayMobile && this.state.mobilePanel !== 'topic-view')}
               topicSelected={this.state.topicSelected}
               onData={this.tnData}
               sendMessage={this.handleSendMessage} />