From 7d9490e50304cb3706951cce796f2e821ea84b84 Mon Sep 17 00:00:00 2001 From: lilia Date: Thu, 3 Sep 2015 13:33:17 -0700 Subject: [PATCH] Add contact list view Used by member list view. Refactored some templates for shared markup. Fixes strange behavior where members in the list were hoverable and selectable. // FREEBIE --- background.html | 27 ++++++++++--------- js/views/contact_list_view.js | 35 +++++++++++++++++++++++++ js/views/conversation_list_item_view.js | 6 ++--- js/views/group_member_list_view.js | 2 +- js/views/new_group_update_view.js | 2 +- stylesheets/_global.scss | 14 +++++----- stylesheets/_index.scss | 4 +-- stylesheets/manifest.css | 14 +++++----- 8 files changed, 72 insertions(+), 32 deletions(-) create mode 100644 js/views/contact_list_view.js diff --git a/background.html b/background.html index 02bd8db7..40491bb7 100644 --- a/background.html +++ b/background.html @@ -113,26 +113,28 @@ + + + diff --git a/js/views/contact_list_view.js b/js/views/contact_list_view.js new file mode 100644 index 00000000..47bfdd35 --- /dev/null +++ b/js/views/contact_list_view.js @@ -0,0 +1,35 @@ +/* vim: ts=4:sw=4:expandtab + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program. If not, see . + */ +(function () { + 'use strict'; + window.Whisper = window.Whisper || {}; + + Whisper.ContactListView = Whisper.ListView.extend({ + tagName: 'div', + itemView: Whisper.View.extend({ + tagName: 'div', + className: 'contact', + template: Whisper.View.Templates.contact, + render_attributes: function() { + return { + title: this.model.getTitle(), + number: this.model.getNumber(), + avatar: this.model.getAvatar() + }; + } + }) + }); +})(); diff --git a/js/views/conversation_list_item_view.js b/js/views/conversation_list_item_view.js index acb7153b..3472e400 100644 --- a/js/views/conversation_list_item_view.js +++ b/js/views/conversation_list_item_view.js @@ -20,8 +20,8 @@ // list of conversations, showing user/group and last message sent Whisper.ConversationListItemView = Whisper.View.extend({ tagName: 'div', - className: 'contact', - template: $('#contact').html(), + className: 'conversation-list-item contact', + template: Whisper.View.Templates.conversation_preview, events: { 'click': 'select' }, @@ -41,7 +41,7 @@ render: function() { this.$el.html( Mustache.render(this.template, { - contact_name: this.model.getTitle(), + title: this.model.getTitle(), last_message: this.model.get('lastMessage'), last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'), number: this.model.getNumber(), diff --git a/js/views/group_member_list_view.js b/js/views/group_member_list_view.js index ee0eab1a..01811e2e 100644 --- a/js/views/group_member_list_view.js +++ b/js/views/group_member_list_view.js @@ -22,7 +22,7 @@ template: $('#group-member-list').html(), initialize: function() { this.render(); - this.member_list_view = new Whisper.ConversationListView({ + this.member_list_view = new Whisper.ContactListView({ collection: this.model.contactCollection, className: 'members' }); diff --git a/js/views/new_group_update_view.js b/js/views/new_group_update_view.js index fcc44ffe..2e7706d5 100644 --- a/js/views/new_group_update_view.js +++ b/js/views/new_group_update_view.js @@ -40,7 +40,7 @@ this.$('.avatar').addClass('default'); - this.member_list_view = new Whisper.ConversationListView({ + this.member_list_view = new Whisper.ContactListView({ collection: this.model.contactCollection, className: 'members' }); diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 337fd58d..dff42300 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -259,20 +259,20 @@ $avatar-size: 44px; float: right; background: url('/images/check.png') no-repeat center center; } - +.conversation-list-item { + cursor: pointer; + &:hover { + background: #f8f8f8; + } +} .contact { position: relative; padding: 12px; - cursor: pointer; white-space: nowrap; overflow: hidden; box-shadow: 0 0px 1px rgba(#aaa, 0.8); background: $grey_l; - &:hover { - background: #f8f8f8; - } - &.selected { background: $blue; color: #ffffff; @@ -296,7 +296,7 @@ $avatar-size: 44px; } } - .contact-name { + .name { margin: 0; font-size: 1em; font-weight: 400; diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index df9f497b..fdc1e991 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -127,7 +127,7 @@ input.search { } .new-contact { display: none; - .contact-name { display: none; } + .name { display: none; } .contact-details::before { content: 'Create new contact'; display: block; @@ -173,7 +173,7 @@ input.search { } .conversations .unread .contact-details { - .contact-name, + .name, .last-message, .last-timestamp { font-weight: bold; diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 9143b64f..013f3297 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -217,16 +217,18 @@ img.emoji { float: right; background: url("/images/check.png") no-repeat center center; } +.conversation-list-item { + cursor: pointer; } + .conversation-list-item:hover { + background: #f8f8f8; } + .contact { position: relative; padding: 12px; - cursor: pointer; white-space: nowrap; overflow: hidden; box-shadow: 0 0px 1px rgba(170, 170, 170, 0.8); background: #f3f3f3; } - .contact:hover { - background: #f8f8f8; } .contact.selected { background: #2090ea; color: #ffffff; } @@ -240,7 +242,7 @@ img.emoji { .contact .contact-details p { overflow-x: hidden; text-overflow: ellipsis; } - .contact .contact-name { + .contact .name { margin: 0; font-size: 1em; font-weight: 400; @@ -444,7 +446,7 @@ input.search { .new-contact { display: none; } - .new-contact .contact-name { + .new-contact .name { display: none; } .new-contact .contact-details::before { content: 'Create new contact'; @@ -477,7 +479,7 @@ input.search { .settings-open .settings { display: block; } -.conversations .unread .contact-details .contact-name, +.conversations .unread .contact-details .name, .conversations .unread .contact-details .last-message, .conversations .unread .contact-details .last-timestamp { font-weight: bold; }