Get messages sending with new ui

Also convert index.html to 4-space indentation.
11 years ago · 44f272a181
parent 95c31629b7
commit 44f272a181
3 changed files with 108 additions and 105 deletions
--- a/index.html
+++ b/index.html
@ -10,7 +10,8 @@
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href='/favicon.ico' rel='shortcut icon'>
-    <link href="/stylesheets/normalize.css" rel="stylesheet" type="text/css" /><link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
+        <link href="/stylesheets/normalize.css" rel="stylesheet" type="text/css" />
+        <link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
    </head>
    <body class='signal index' data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="nacl/pnacl/{config}">
        <div class='title-bar'>
@ -33,38 +34,18 @@
            <div class='search'>
                <input name='contact_search' placeholder='Search' type='search'>
            </div>
-      <script type='text/x-tmpl-mustache' id='contact'>
-        <img class='avatar' src='{{ contact_avatar }}'>
-        <div class='contact-details'>
-          <h3>
-            {{ contact_name }}
-          </h3>
-          <p class='last-message'>
-            {{ last_message }}
-          </p>
-          <span class='last-timestamp'>
-            {{ last_message_timestamp }}
-          </span>
-      </script>
        </div>
-    <div class='conversation'>
+        <div id= 'conversation' class='conversation'>
            <ul id='discussion' class='discussion'>
-        <script type='text/x-tmpl-mustache' id='message'>
-          <div class='bubble bubble_context {{ bubble_class }}'>
-            <ul class='volley'>
-              <li class='message'>
-                {{ message }}
-              </li>
-            </ul>
-          </div>
-        </script>
            </ul>
            <div class='send-message-area'>
                <div class='message-composer'>
+                    <form id='send'>
                        <input class='send-message' rows='6' type='textarea'>
                        <div class='attachments'>
                            Add Files
                        </div>
+                    </form>
                </div>
                <div class='extension-details'>
                    <ul>
@ -76,8 +57,31 @@
                </div>
            </div>
        </div>
-    <!-- / Final Scripts -->
+        <script type='text/x-tmpl-mustache' id='message'>
+            <div class='bubble bubble_context {{ bubble_class }}'>
+            <ul class='volley'>
+                <li class='message'>
+                {{ message }}
+                </li>
+            </ul>
+            </div>
+        </script>
+        <script type='text/x-tmpl-mustache' id='contact'>
+            <img class='avatar' src='{{ contact_avatar }}'>
+            <div class='contact-details'>
+                <h3>
+                {{ contact_name }}
+                </h3>
+                <p class='last-message'>
+                {{ last_message }}
+                </p>
+                <span class='last-timestamp'>
+                {{ last_message_timestamp }}
+                </span>
+            </div>
+        </script>
        <script type="text/javascript" src="js-deps/nacl-common.js"></script>
+        <script type="text/javascript" src="js-deps/jquery.js"></script>
        <script type="text/javascript" src="js-deps/CryptoJS.js"></script>
        <script type="text/javascript" src="js-deps/curve255.js"></script>
        <script type="text/javascript" src="js-deps/Long.min.js"></script>
@ -106,6 +110,5 @@
        <script type="text/javascript" src="js/views/conversation_list_view.js"></script>
        <script type="text/javascript" src="js/views/conversation_view.js"></script>
        <script type="text/javascript" src="js/popup.js"></script>
-
    </body>
 </html>
--- a/js/views/conversation_list_item_view.js
+++ b/js/views/conversation_list_item_view.js
@ -21,10 +21,10 @@ var Whisper = Whisper || {};
    },

    open: function(e) {
-      $('#main').trigger('close'); // detach any existing conversation views
+      $('#conversation').trigger('close'); // detach any existing conversation views
      if (!this.view) {
        this.view = new Whisper.ConversationView({
-          el: $('#main'),
+          el: $('#conversation'),
          model: this.model
        });
      } else {
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@ -10,13 +10,13 @@ var Whisper = Whisper || {};
      this.view = new Whisper.MessageListView({collection: this.model.messages()});
    },
    events: {
-      'submit #new-message': 'sendMessage',
+      'submit #send': 'sendMessage',
      'close': 'undelegateEvents'
    },

    sendMessage: function(e) {
      e.preventDefault();
-      var input = $('#new-message-text');
+      var input = this.$el.find('#send input');
      if (input.val().length > 0) {
        this.model.sendMessage(input.val());
        input.val("");