diff --git a/css/conversation.css b/css/conversation.css index 062d73379..6c74a802a 100644 --- a/css/conversation.css +++ b/css/conversation.css @@ -3,14 +3,19 @@ position: relative; min-height: 64px; margin: auto; - padding: 1em; - border-radius: 10px; - border: 2px solid #acdbf5; + padding: 0.5em; background-color: #7fd0ed; color: #fff; - margin-bottom: 0.5em; -webkit-animation-duration: 1s; -webkit-animation-name: convoopen; + clear: both; +} +li.conversation { + border-bottom: 1px solid #ccc; +} + +.conversation .name { + padding: 1em 0 1em 3em; } .conversation.closed { @@ -54,9 +59,7 @@ float: right; } .conversation .image { - position: absolute; - top: 8px; - left: 10px; + float: left; display: inline-block; background-color: #fff; border: 2px solid #acdbf5; diff --git a/css/popup.css b/css/popup.css index 1ef45a78a..1f497784c 100644 --- a/css/popup.css +++ b/css/popup.css @@ -19,11 +19,75 @@ body { margin: 0; - min-width: 400px; min-height: 500px; font-family: sans-serif; color: #333; } +/* layout 2 col full height */ +html { + overflow: auto; + height: 100%; +} +body { + margin:0; + padding:0; + border:0; /* This removes the border around the viewport in old versions of IE */ + width:100%; + height: 100%; + min-width:400px; /* Minimum width of layout - remove line if not required */ + /* The min-width property does not work in old versions of Internet Explorer */ +} +/* column container */ +.colmask { + position:relative; /* This fixes the IE7 overflow hidden bug */ + clear:both; + float:left; + width:100%; /* width of whole page */ + height: 100%; + overflow:hidden; /* This chops off any overhanging divs */ +} +/* common column settings */ +.colleft { + float:left; + width:100%; + height: 100%; + position:relative; + border-right: 2px solid #acdbf5; +} +.col1, +.col2 { + float:left; + position:relative; + padding:0 0 1em 0; + overflow:hidden; +} +/* 2 Column (left menu) settings */ +.leftmenu .colleft { + right:72%; /* right column width */ + background:#f4f4f4; /* left column background colour */ +} +.leftmenu .col1 { + width:72%; /* right column content width */ + left:100%; /* 100% plus left column left padding */ +} +.leftmenu .col2 { + width:28%; /* left column content width (column width minus left and right padding) */ +} +/* end layout */ + +/* +#sidebar { + float: left; + width: 30%; + padding: 1em; +} + +#main { + margin-left: 35%; + padding: 1em; + border-left: 2px solid #acdbf5; +} +*/ .container { max-width: 960px; @@ -33,6 +97,7 @@ body { header { padding: 5px 0; + background-color: #7fd0ed; } label { @@ -40,6 +105,7 @@ label { margin-right: 1em; } +#compose-create, #compose-cancel { float: right; } @@ -48,11 +114,12 @@ label { padding: 0.3em 1em; } -#popup_send_numbers { - margin-bottom: 0; +#send_numbers { + max-width: 70%; + margin-bottom: 1em; } -#popup_send_numbers:focus + .contacts, +#send_numbers:focus + .contacts, .contacts:hover { display: block; z-index: 10; diff --git a/js/popup.js b/js/popup.js index 72fafa62b..f3f454387 100644 --- a/js/popup.js +++ b/js/popup.js @@ -20,8 +20,9 @@ textsecure.registerOnLoadFunction(function() { extension.navigator.tabs.create("options.html"); } else { - new Whisper.ConversationListView(); + new Whisper.ConversationListView({el: $('#contacts')}); new Whisper.ConversationComposeView({el: $('body')}); + Whisper.Threads.fetch({reset: true}); $('.my-number').text(textsecure.storage.getUnencrypted("number_id").split(".")[0]); textsecure.storage.putUnencrypted("unreadCount", 0); extension.navigator.setBadgeText(""); diff --git a/js/views/conversation_list_view.js b/js/views/conversation_list_view.js new file mode 100644 index 000000000..db00c22f1 --- /dev/null +++ b/js/views/conversation_list_view.js @@ -0,0 +1,29 @@ +var Whisper = Whisper || {}; + +(function () { + 'use strict'; + + Whisper.ConversationListView = Whisper.ListView.extend({ + tagName: 'ul', + id: 'contacts', + itemView: Whisper.ConversationView, + collection: Whisper.Threads, + + events: { + 'select .conversation': 'select', + 'deselect': 'deselect' + }, + + select: function(e) { + var target = $(e.target).closest('.conversation'); + target.siblings().addClass('closed'); + target.addClass('selected').trigger('open'); + return false; + }, + + deselect: function() { + this.$el.find('.selected').removeClass('selected').trigger('close'); + this.$el.find('.conversation').show(); + } + }); +})(); diff --git a/js/views/conversations/index.js b/js/views/conversations/index.js deleted file mode 100644 index 7edd29116..000000000 --- a/js/views/conversations/index.js +++ /dev/null @@ -1,46 +0,0 @@ -var Whisper = Whisper || {}; - -(function () { - 'use strict'; - - Whisper.ConversationListView = Backbone.View.extend({ - tagName: 'ul', - id: 'conversations', - initialize: function() { - this.views = {}; - this.threads = Whisper.Threads; - this.listenTo(this.threads, 'change:completed', this.render); // auto update - this.listenTo(this.threads, 'add', this.addThread); - this.listenTo(this.threads, 'reset', this.addAll); - this.listenTo(this.threads, 'all', this.render); - this.listenTo(Whisper.Messages, 'add', this.addMessage); - - // Suppresses 'add' events with {reset: true} and prevents the app view - // from being re-rendered for every model. Only renders when the 'reset' - // event is triggered at the end of the fetch. - //this.messages.threads({reset: true}); - Whisper.Threads.fetch({reset: true}); - Whisper.Messages.fetch(); - - this.$el.appendTo($('#inbox')); - }, - - addThread: function(thread) { - this.views[thread.id] = new Whisper.ConversationView({model: thread}); - this.$el.prepend(this.views[thread.id].render().el); - }, - - addAll: function() { - this.$el.html(''); - _.each(this.threads.where({'active': true}), this.addThread, this); - }, - - addMessage: function(message) { - var thread = message.thread(); - if (!_.has(this.views, thread.id)) { - this.addThread(thread); - } - thread.trigger('message', message); - } - }); -})(); diff --git a/js/views/conversations/show.js b/js/views/conversations/show.js index 928c707f0..802df8ec9 100644 --- a/js/views/conversations/show.js +++ b/js/views/conversations/show.js @@ -34,10 +34,13 @@ var Whisper = Whisper || {}; className: 'conversation', events: { - 'click': 'toggle', + 'click': 'open', 'submit form': 'sendMessage' }, initialize: function() { + this.template = $('#contact').html(); + Mustache.parse(this.template); + this.listenTo(this.model, 'change', this.render); // auto update this.listenTo(this.model, 'message', this.addMessage); // auto update this.listenTo(this.model, 'destroy', this.remove); // auto update @@ -50,15 +53,7 @@ var Whisper = Whisper || {}; this.$name = $(''); this.$header = $('
').append(this.$image, this.$name); - this.$button = $(' -
+
+
+
+
+
+
- +
+
+ + + - +