Clean up inbox/compose view rendering and swapping

Templatize the inbox view and use the same pattern for in-window view switching as is now used with the conversation/message detail views. This means doing more with markup and less jquery manipulation of individual subelements of the inbox view.
10 years ago · a72ea7966d
parent fd6e2954f7
commit a72ea7966d
4 changed files with 59 additions and 57 deletions
--- a/index.html
+++ b/index.html
@ -13,21 +13,15 @@
        <link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
    </head>
    <body class='signal index'>
-        <div class='title-bar' id='header'>
-          <div class='new-conversation-title hide'>
-            <button class='back'></button>
-            <span class='title-text'>New Message</span>
+        <script type="text/x-tmpl-mustache" id="inbox">
+          <div class='title-bar' id='header'>
+            <div class='socket-status'></div>
          </div>
-          <div class='socket-status'></div>
-        </div>
-        <div class='notifications'>
-            <div class='notification info'>
-            </div>
-        </div>
-        <div id='gutter' class='gutter'>
-            <div id='contacts'></div>
-            <span class='fab'></span>
-        </div>
+          <div id='gutter' class='gutter'>
+              <div id='contacts'></div>
+              <span class='fab'></span>
+          </div>
+        </script>
        <script type="text/x-tmpl-mustache" id="phone-number">
            <div class="phone-input-form">
                <div class="number-container">
@ -54,23 +48,29 @@
            </div>
        </script>
        <script type='text/x-tmpl-mustache' id='new-conversation'>
-            <div class='new-group-update-form clearfix'>
-              <div class='group-avatar'>
-                <div class='paperclip'></div>
-                <input type='file' name='avatar' class='file-input'>
-              </div>
-              <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
-            </div>
-            <div class='recipients-container'>
-              <span class='recipients'></span>
-              <input type='text' class='new-message' placeholder="Name or phone number" />
-            </div>
-            <div class='buttons'>
-              <button class='create'>Next</button>
+            <div class='title-bar' id='header'>
+              <button class='back'></button>
+              <span class='title-text'>New Message</span>
            </div>
-            <div class='results'>
-              <div class='new-contact contact'></div>
-              <div class='contacts'></div>
+            <div id='gutter' class='gutter'>
+              <div class='new-group-update-form clearfix'>
+                <div class='group-avatar'>
+                  <div class='paperclip'></div>
+                  <input type='file' name='avatar' class='file-input'>
+                </div>
+                <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
+              </div>
+              <div class='recipients-container'>
+                <span class='recipients'></span>
+                <input type='text' class='new-message' placeholder="Name or phone number" />
+              </div>
+              <div class='buttons'>
+                <button class='create'>Next</button>
+              </div>
+              <div class='results'>
+                <div class='new-contact contact'></div>
+                <div class='contacts'></div>
+              </div>
            </div>
        </script>
        <script type='text/x-tmpl-mustache' id='attachment-preview'>
--- a/js/index.js
+++ b/js/index.js
@ -22,7 +22,7 @@
    if (textsecure.storage.getUnencrypted("number_id") === undefined) {
        window.location = '/options.html';
    } else {
-        new Whisper.InboxView({el: $('body')});
+        new Whisper.InboxView().$el.prependTo($('body'));
        textsecure.storage.putUnencrypted("unreadCount", 0);
        extension.navigator.setBadgeText("");
    }
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@ -53,18 +53,18 @@
        }
    });

-    Whisper.InboxView = Backbone.View.extend({
+    Whisper.InboxView = Whisper.View.extend({
+        template: $('#inbox').html(),
        initialize: function () {
-            this.$gutter = $('#gutter');
-            this.$contacts = $('#contacts');
-            this.$fab = this.$el.find('.fab');
-            this.$back = this.$el.find('.new-conversation-title');
+            this.render();

            this.newConversationView = new Whisper.NewConversationView();
-            this.newConversationView.$el.hide().appendTo(this.$gutter);
+            this.newConversationView.$el.hide();
+            this.listenTo(this.newConversationView, 'open',
+                this.openConversation.bind(this, null));

            this.inbox = new Whisper.ConversationListView({
-                el         : this.$contacts,
+                el         : this.$el.find('#contacts'),
                collection : bg.inbox
            }).render();

@ -75,34 +75,24 @@
            }.bind(this));
        },
        events: {
-            'keyup': 'keyup',
-            'click .back': 'hideCompose',
            'click .fab': 'showCompose',
-            'select #contacts .contact': 'openConversation',
-            'open .new-conversation': 'openConversation'
+            'select .contact': 'openConversation',
        },
        openConversation: function(e, data) {
            bg.openConversation(data.modelId);
            this.hideCompose();
        },
        showCompose: function() {
-            this.$fab.hide();
-            this.$contacts.hide();
            this.newConversationView.reset();
+            this.$el.hide();
+            this.newConversationView.$el.insertAfter(this.$el);
            this.newConversationView.$el.show();
            this.newConversationView.$input.focus();
-            this.$back.show();
+            this.listenToOnce(this.newConversationView, 'back', this.hideCompose);
        },
        hideCompose: function() {
            this.newConversationView.$el.hide();
-            this.$contacts.show();
-            this.$fab.show();
-            this.$back.hide();
-        },
-        keyup: function(e) {
-            if (e.keyCode === 27) {
-                this.hideCompose();
-            }
+            this.$el.show();
        }
    });

--- a/js/views/new_conversation_view.js
+++ b/js/views/new_conversation_view.js
@ -101,7 +101,19 @@
            'select .new-contact': 'addNewRecipient',
            'select .contacts': 'addRecipient',
            'remove .recipient': 'removeRecipient',
-            'click .create': 'create'
+            'click .create': 'create',
+            'click .back': 'goBack',
+            'keyup': 'keyup'
+        },
+
+        keyup: function(e) {
+            if (e.keyCode === 27) {
+                this.goBack();
+            }
+        },
+
+        goBack: function() {
+            this.trigger('back');
        },

        initNewContact: function() {
@ -180,12 +192,12 @@
                type: 'private'
            });
            conversation.fetch().then(function() {
-                this.$el.trigger('open', { modelId: conversation.id });
+                this.trigger('open', { modelId: conversation.id });
            }.bind(this)).fail(function() {
                var saved = conversation.save(); // false or indexedDBRequest
                if (saved) {
                    saved.then(function() {
-                        this.$el.trigger('open', { modelId: conversation.id });
+                        this.trigger('open', { modelId: conversation.id });
                    }.bind(this));
                }
            }.bind(this));
@ -210,7 +222,7 @@
                    var id = getString(groupId);
                    var group = new Whisper.Conversation(attributes);
                    group.save({ id: id, groupId: id }).then(function() {
-                        this.$el.trigger('open', {modelId: id});
+                        this.trigger('open', {modelId: id});
                    }.bind(this));
                }.bind(this));
            }.bind(this));