daily commit

2016-01-02 20:16:30 -08:00
parent 2121a6a4f2
commit 391a956af8
3 changed files with 145 additions and 16 deletions
@@ -1,3 +1,14 @@
+html, body {
+  margin:0;
+  padding:0;
+  height:100%;
+}
+
+.fullScreen {
+  width: 100%!important;
+  height: 100%!important;
+}
+
 .menuContainer {
  width: 30em;
  margin: 0;
@@ -11,7 +22,7 @@
 }

 .messagesContainer {
-  width: 100%;
+  width: auto;
  height: 100%;
 }

@@ -149,3 +160,8 @@
 .chatBox-body > p + p {
  margin-top: 0.5em;
 }
+
+footer {
+  position: fixed;
+  bottom: 0;
+}
@@ -10,11 +10,27 @@
    <script src="https://fb.me/react-0.14.5.js"></script>
    <script src="https://fb.me/react-dom-0.14.5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  </head>
  <body>
-    <div id="mountPoint"></div>
+    <div id="mountPoint" class="fullScreen"></div>
    <script type="text/babel">
+    function shortDateFormat(then) {
+	    var now = new Date();
+      if (then.getFullYear() == now.getFullYear()) {
+  	    if (then.getMonth() == now.getMonth() && then.getDate() == now.getDate()) {
+    	    return then.toLocaleTimeString(undefined, {hour12: false, hour: '2-digit', minute: '2-digit'});
+        } else {
+    	    return then.toLocaleDateString(undefined,
+            {hour12: false, month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
+        }
+      }
+      return then.toLocaleDateString(undefined,
+        {hour12: false, year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
+    }
+
    var LoginNavbar = React.createClass({
      render: function() {
        return (
@@ -26,7 +42,7 @@
              <div>
                <ul className="nav navbar-nav navbar-right">
                  <li className="dropdown">
-                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
+                    <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                      <big><span className="glyphicon glyphicon-option-vertical"></span></big>
                    </a>
                    <ul className="dropdown-menu">
@@ -115,6 +131,28 @@
      {id: "usrDAVE", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}
    ];

+    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.\
+<br />\
+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: "OK!", timestamp: new Date(2016, 0, 2, 15, 16, 17, 567), response: false}
+    ];
+
    var Contact = React.createClass({
        render: function() {
          return (
@@ -197,28 +235,107 @@
      }
    });

+    var Message = React.createClass({
+      getInitialState: function() {
+        return {received: 0};
+      },
+      render: function() {
+        var timestamp = shortDateFormat(this.props.timestamp);
+        return (
+          <li className={this.props.response ? 'chatBox-inverted' : null}>
+            <div className="chatBox-panel">
+              <div className="chatBox-body">
+                <p>{this.props.content}
+                  <span className="pull-right timestamp">
+                    <small className="text-muted">{timestamp}</small> <Message.ReceivedMarker />
+                  </span>
+                </p>
+              </div>
+            </div>
+          </li>
+        );
+      }
+    });
+
+    Message.ReceivedMarker = React.createClass({
+      getInitialState: function() {
+        return {received: 0};
+      },
+      render: function() {
+        var checkMark = null;
+        if (this.state.received > 0) {
+          checkMark = '&#x2714;';
+          if (this.state.received > 1) {
+            checkMark += <span style="margin-left:-0.5em;">&#x2714;</span>;
+          }
+        }
+        return (
+          <span>{checkMark}</span>
+        );
+      }
+    });
+
+    Message.Send = React.createClass({
+      render: function() {
+        return (
+          <div className="input-group">
+            <label htmlFor="sendMessage" className="sr-only">Add topic</label>
+            <input id="sendMessage" className="form-control" type="text" placeholder="New message" />
+            <span className= "input-group-btn">
+              <button className= "btn btn-default" type = "button">
+                <i className="glyphicon glyphicon-send"></i>
+              </button>
+            </span>
+          </div>
+        );
+      }
+    });
+    var MessagesView = React.createClass({
+      getInitialState: function() {
+        return {messages: []};
+      },
+      componentDidMount: function() {
+        this.setState({messages: messagesList});
+      },
+      render: function() {
+        var messageNodes = this.state.messages.map(function(msg) {
+          return (
+            <Message content={msg.content} timestamp={msg.timestamp} response={msg.response} key={msg.id} />
+          );
+        });
+        return (
+          <ul className="chatBox">
+            {messageNodes}
+          </ul>
+        );
+      }
+    });
+
    var AppView = React.createClass({
      getInitialState: function() {
-        return {loggedIn: false};
+        return {loggedIn: false, chatTitle: "Bob Smith"};
      },
      handleLogin: function(ok) {
        this.setState({loggedIn: ok});
      },
      render: function() {
        return (
-          <div className="container-fluid">
-          <div className="row">
+          <div className="container-fluid fullScreen">
+          <div className="row fullScreen">
            <div className="menuContainer">
              {this.state.loggedIn ? <ContactsView data={contactsData} /> : <LoginView onLogin={this.handleLogin} />}
            </div>
            <div className="col-md-12 messagesContainer">
-              <div className="row">
-              <div className="panel panel-default">
+              <div className="row fullScreen">
+              <div className="panel panel-default fullScreen">
                <div className="panel-heading">
-                  <h3 className="panel-title">Chat with X</h3>
+                  <h3 className="panel-title">{this.state.chatTitle}</h3>
                </div>
                <div className="panel-body">
-                  Messages go here
+                  <MessagesView />
+                </div>
+                <div className="panel-footer">
+                  <Message.Send />
                </div>
              </div>
              </div>
@@ -119,10 +119,6 @@
 </head>
 <body>

-  <li><a href="#"><span className="glyphicon glyphicon-user"></span> Sign Up</a></li>
-  <li><a href="#"><span className="glyphicon glyphicon-cog"></span> Settings</a></li>
-  <li><a href="https://github.com/tinode/chat/"><span className="glyphicon glyphicon-info-sign"></span> About</a></li>
-  
 <nav id="main-navbar" class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
@@ -234,10 +230,10 @@
    </li>
    <li>
      <div class="chatBox-panel">
-        <div class="chatBox-body">
+        <!--div class="chatBox-body"-->
          <p>OK!
          <span class="pull-right timestamp"><small class="text-muted">12:24</small> &#x2714;</span></p>
-        </div>
+        <!--/div-->
      </div>
    </li>
  </ul>