Commit graph

212 commits

Author SHA1 Message Date
lilia
7310afd1b4 Replace message list loading spinner with bar
// FREEBIE
2016-03-18 17:59:54 -07:00
lilia
18a5ce8e54 Restyle conversation panel
// FREEBIE
2016-03-18 13:09:45 -07:00
lilia
173e037fa6 Fix minor style errors
And keep it that way, by making jscs config more opinionated.

// FREEBIE
2016-02-18 13:45:22 -08:00
Sam Lanning
0569d4c889 Replace conversation panel js resizing with flex styling.
// FREEBIE
2016-01-25 14:37:03 -08:00
lilia
cdd139b44c Refresh group contacts when rendering member list
Fix #581

// FREEBIE
2016-01-12 11:06:14 -08:00
lilia
02cc6623ea i18n ConversationView
// FREEBIE
2016-01-02 02:51:24 -08:00
lilia
68f2505996 Display phone number in conversation header
Fixes #436

// FREEBIE
2015-12-04 12:15:12 -08:00
OdysseasKr
83298b8979 Mark conversation as read if open and window focused
Messages that are received in the active conversation while the window
is focused, are automatically marked as read.

The conversation appears as unread for a split second as the incoming message
arrives but it gets marked as read as soon as the message is displayed.
2015-11-19 10:40:07 -08:00
ody
156c7c3b3d Add unread count in window title
The window title now shows the global number of unread messages as
"Signal (1)". This way the user can see the number of unread messages
in the task bar and when alt-tabbing.

Resolves: #384
2015-11-19 10:40:07 -08:00
lilia
765668b3d3 Clear message collections when the window is closed
We don't need to keep them in memory if we're done viewing them,
plus it avoids having to re-render a large collection when we re-open a
conversation. Now that we only load a sensible number of messages at a
time, caching them between usages is less valuable. Removing them from
the collection should free them for garbage collection.

// FREEBIE
2015-11-16 16:38:12 -08:00
lilia
2ee8cae8d4 Move some initial setup to the 'opened' event
Avoid inbox views digging too deep into conversation views.

// FREEBIE
2015-11-15 14:59:21 -08:00
lilia
2861fa26a7 Implement infinite scrolling message lists
Only load the most recent messages when initially rendering a
conversation. Scrolling to the top of a message list loads older
messages.

This required some slight refactoring of how we insert message elements
into the dom. If the message is added to the end of the collection,
append it at the end. Otherwise, assume it is an older message and
prepend it.

When adding elements to the top, reset the scrollPosition to its
previous distance from scrollHeight. This keeps the current set of
elements fixed in the viewport.

// FREEBIE
2015-11-15 14:56:58 -08:00
lilia
4418be19d4 Update conversation header avatar if it changes
// FREEBIE
2015-11-12 12:10:54 -08:00
lilia
f860278b89 Add avatars to conversation headers
So as not to look repetitive, hide the per-message avatars in one-on-one
conversations.

// FREEBIE
2015-11-09 11:48:14 -08:00
lilia
a569e34b33 Refactor new message notification and frontend updates
Create a cleaner seperation between generating notifications
and updating frontend conversation views. The former is now
handled by `conversation.notify` while the latter is achieved
by triggering an event on the conversation model, which will
only be acted on if there are any views listening for it.

Additionally, instead of re-fetching the entire message history,
which is overkill, just add or update the new/modified message.
This will help speed up the newmessage event handler and also
help avoid unnecessary re-rendering when resolving key conflicts.

// FREEBIE
2015-11-07 14:11:13 -08:00
lilia
ddd2e67eb5 Fix re-rendering when resolving conflicts with media
* Don't open message detail views from message detail views
* When message errors change, re-render the error state, but
  not the message markup and contents.
* Fix renderErrors bug not removing the error class correctly.

// FREEBIE
2015-11-05 20:11:28 -08:00
lilia
6717390e83 Catch cancelation of confirmation dialog
Avoid 'Uncaught (in promise)' error in the console.

// FREEBIE
2015-11-02 17:04:46 -08:00
lilia
0f023ac4bf Focus the message field when conversation opens
Fixes #317

// FREEBIE
2015-10-30 11:14:38 -07:00
lilia
287aa49252 After choosing a file, focus the message field
Allow the user to edit the message and/or hit enter to send the image
without having to click.

// FREEBIE
2015-10-30 11:02:58 -07:00
lilia
78a2b74297 Restyle attachment previews
Closes #380

// FREEBIE
2015-10-29 18:19:51 -07:00
lilia
389b9a026d Initial restyle
Added background gradient and restyled conversation elements as floating
panels and cards.

// FREEBIE
2015-10-16 18:14:50 -07:00
lilia
bbb5b24d6b Fix disappearing conversation bug
Opening two message-detail views in two separate conversations would
disappear one of the conversations. Fixed by better encapsulating the
sub-views of a conversation.

// FREEBIE
2015-10-02 11:21:11 -07:00
lilia
73983118dc Render emoji in conversation title // Fixes #359
// FREEBIE
2015-09-16 16:40:11 -07:00
lilia
9809894fd2 Automatically mark the open conversation read
If a conversation view is visible, it will automatically mark the
conversation read.

// FREEBIE
2015-09-15 20:50:00 -07:00
lilia
d89e3ccdc4 Don't fetch messages from the background
Only fetch them from a frontend view. If the conversation is not open,
we don't need to load the messages, and if we do load them, they will
render before we've done the initial contact info loading (as
implemented in 74e96ce).

Fixes #344

// FREEBIE
2015-09-14 13:49:20 -07:00
lilia
f764445c86 Remove erroneous license file and headers
We only use GPLV3 around here.

// FREEBIE
2015-09-07 14:58:42 -07:00
lilia
24a18e91b3 Clean up shared compose/group update ui
Makes the groupupdate and recipient input fields stick to the top,
restyles the typeahead as a floating dropdown list of suggestions
rather than a full width component, fixes group avatar thumbnail
rendering.

// FREEBIE
2015-09-04 13:11:21 -07:00
lilia
239b87a1fa Fix conversation resize bug
Fix behavior where resizing a message detail screen would result in a
mis-sized conversation view when exiting the message detail.
2015-09-04 13:06:40 -07:00
lilia
cc92cdfa29 After destroying messages, remove the conversation view 2015-08-31 16:01:56 -07:00
lilia
50939d1851 Restyle conversation menu button 2015-08-31 13:59:12 -07:00
lilia
e0f84d9c8e Clear unread on focus iff convo is open 2015-08-27 15:04:43 -07:00
lilia
d6a4e6e496 Restore two column layout
Establishes basic functionality for viewing conversations in two column
mode, including message area and message list resizing, and maintaining
scroll position.

Various subviews need to be retooled but are more or less still
functional, i.e., new message, message detail, key verification, etc...
2015-08-25 17:01:22 -07:00
lilia
001a91466b Add group member list // Closes #279 2015-08-04 12:15:37 -07:00
adambar
1498d90b58 Maintain bottom-most scroll position when resizing conversation area, once again.
Related with #278. Redone to include keeping scroll at the bottom when resizing the window, as suggested in #305, and to better fit the current code structure.
2015-07-29 15:28:08 -07:00
adambar
476eb54db1 Maintain bottom-most scroll position when resizing conversation area.
Closes #278
2015-07-08 13:46:48 -07:00
adambar
fcc873ffca Trim the message before sending - disable sending whitespace characters only 2015-07-03 21:53:45 +02:00
adambar
c20c59add0 Include Ctrl+Enter as one the shortcuts that insert line break instead of submitting the message 2015-07-03 13:49:01 +02:00
adambar
86f7b7adf5 Allow line breaks in messages. Closes issue #291
Line breaks can now be insterted into message box using Shift+Enter or Alt+Enter. Messages with new lines are properly displayed in the conversation view (but only there, to keep inbox clean). The template was modified to allow HTML, but the message itself is sanitized before new line handling is run.
2015-07-02 23:02:27 +02:00
lilia
5e6145aa46 Mark conversation read on window focus event
Fixes #282

// FREEBIE
2015-06-26 11:53:00 -07:00
lilia
7d568b5092 Fixup auto-expand
* Fix a css bug preventing bottom bar from sticking to the bottom.
* Resize discussion container as a function of the overall window
  height. The previous difference-based method gives the wrong result
  when the window height changes but the bottom-bar height stays the
  same.

// FREEBIE
2015-06-24 12:10:53 -07:00
adambar
b80706089c Fix for potential memory leaks 2015-06-23 22:46:27 +02:00
adambar
9c563cf080 Fix for message box auto-sizing behavior on resize; menu z-index fix 2015-06-23 22:46:27 +02:00
adambar
da1abd75bf Remove message textarea resize handle; fix resizing after submit 2015-06-23 22:46:06 +02:00
adambar
07ac0ae9cc 239 Auto-expand message area when typing 2015-06-23 22:45:41 +02:00
lilia
cdb7fcfbad Pass windows around to let file inputs work 2015-06-04 13:39:52 -07:00
lilia
3d1df790a5 Update the window title when a group title or contact name changes 2015-06-03 17:23:55 -07:00
lilia
d26c13b155 Add openInbox link to conversation menu. Fixes #246 2015-06-02 14:57:22 -07:00
lilia
9d688cb761 List views persist sroll offset by percentage
Fixes #188
2015-05-28 11:50:58 -07:00
lilia
3e73282a64 Fix key verification screen 2015-05-26 17:08:14 -07:00
lilia
e2eff893d4 Fix 'Delete messages'
Replaces window.confirm with generic promise-based confirmation dialog
functionality available to all views.

// FREEBIE
2015-05-26 16:56:05 -07:00
lilia
7bf1d41184 Render conversation titles 2015-05-22 16:54:59 -07:00
lilia
5d3a2a4cc8 Fix file inputs
As a chrome app we are obligated to use the fileSystem api, and must do
so via the window in which we want to open the dialog.
2015-05-21 18:19:10 -07:00
lilia
39d11d8eb3 Apply custom chrome to conversation windows 2015-05-21 14:35:44 -07:00
lilia
20ebc3f890 Move identity key storage functions to axolotl store 2015-05-05 17:44:58 -07:00
lilia
5d4298697c Use view.$ shorthand for scoped jquery searches
Wish I'd noticed that one earlier. http://backbonejs.org/#View-dollar
2015-03-29 16:29:05 -07:00
Matt Corallo
454b4726bd Replace load/decode/index around our own number with helpers 2015-03-25 11:54:55 -07:00
lilia
897d391817 Improve identity key conflict ux
Clicking on a key conflict message opens the message detail view,
which displays the contact(s) in this conversation. If the message
contains a key conflict with any of these contacts, a button is
displayed which attempts to resolve that conflict and any other
conflicts in the conversation that are related to that contact.
2015-03-18 16:29:02 -07:00
lilia
f86d6d51e3 Only init emoji map once.
`emoji.init_colons` creates and populates `emoji.map.colons`, a global
map from common names to emoji code points. It's safe to call
repeatedly, but unecessary.
2015-03-16 17:44:49 -07:00
lilia
69d5a6a33c Improve group update ui/ux
Promote group update to its own screen. Add typeahead contact selector
from new conversation view. Restyle to match android (more or less).

Closes #186
2015-03-13 17:33:02 -07:00
lilia
36319d6458 Fix crash when sending :invalid_emoji: 2015-03-12 11:03:11 -07:00
lilia
019a9d1fbc Unread counts
Update unreadCounts per-conversation on incoming messages. Render unread
conversations with font-weigh: bold in the inbox view.

To ensure that the inbox and conversation views remain in sync, the
background page now ensures that the same models objects are used for
both views.
2015-03-11 15:13:36 -07:00
lilia
ed707db4ba Support :emoji_name: syntax for emoji text input 2015-03-10 18:54:07 -07:00
lilia
1321a90667 Rename Whisper.View#attributes
Avoid colliding with Backbone.View attributes, which is a list of attrs
to set on the html element for a view.
2015-03-06 17:05:36 -08:00
lilia
b65190e101 Break a long line 2015-03-05 16:30:59 -08:00
lilia
1bb480f6ea DRY up a common view pattern
Define a Whisper.View base class that automatically parses and renders
templates and attributes defined by the subclass. This saves us a good
number of lines of code as well as some marginal memory overhead, since
we are no longer saving per-instance copies of template strings.
2015-03-05 15:36:35 -08:00
lilia
9d94bce92a After clearing messages, leave conversation open
Fixes #178
2015-03-03 10:39:10 -08:00
lilia
dcc1588219 Add key verification screen
Accessible from the menu on private conversations.
2015-02-26 22:26:46 -08:00
lilia
fd30dc6f1a Add message detail view 2015-02-23 14:03:35 -08:00
lilia
55c46d1bb6 Close conversation menu when clicking outside it 2015-02-19 11:55:31 -08:00
lilia
e853c21c98 Remove unused code
There is no .settings-btn or .go-back in this view.
2015-02-19 11:00:29 -08:00
lilia
ec43a0b633 jshint all the things
Small style fixes here and there. Removed one unused file.
2015-02-19 00:22:23 -08:00
lilia
3292177a96 Remove resize logic in favor of pure css 2015-02-18 23:09:34 -08:00
lilia
07e44ccf21 Revisit resize and scroll logic once more
Wait a little longer on initial scroll down. Previous timeout sometimes
triggered before all text is finished rendering.

Remove redundant resize calls.
2015-02-18 16:54:43 -08:00
lilia
488f25635d Wire up end session and leave group
Closes #136
Closes #137
2015-02-13 14:25:16 -08:00
lilia
9fe99adf0c Get scrolling right on conversation load 2015-02-12 13:21:18 -08:00
lilia
0463e385e8 Remove uneeded render
This is an artifact of a time when conversation elements would pop in
and out of the dom at a moment's notice, and thus needed to rebind their
event listeners regularly.
2015-02-12 13:21:18 -08:00
lilia
5e064db28f Render the message list view. 2015-02-12 13:21:17 -08:00
lilia
5ad5464dd1 Fetch messages in the background 2015-02-12 13:21:17 -08:00
lilia
a5bc261365 Clear selected files after each sent message 2015-02-12 13:21:17 -08:00
lilia
aca3db97da New messages auto-update the inbox & conversation
When a new message arrives, if its conversation is not already opened,
the background page opens it. If it is alrady open the window is
focused. Finally, the 'message' event is triggered, resulting in
   1. the inbox refetches conversations
   2. all conversations fetch new messages

TODO: only send this event to the target window
2015-02-11 17:38:03 -08:00
lilia
db5e7fd6b6 Fix list view scrolling
Resize handlers are ugly. But not as ugly as scroll handlers. :p
Normalized some whitespace along the way.
2015-02-11 17:38:03 -08:00
lilia
b13e36a11c Style conversation menu 2015-02-11 17:38:00 -08:00
lilia
17deb69a91 Make conversation panel work with a new contact
Prevent view from fetching messages without an id, as this causes a
crash.
2015-02-11 17:37:59 -08:00
lilia
8498d7ad1f Fixup conversation page styles and functionality
Render the entire conversation from a template, because some parts of it
must be rendered conditionally if it is a group vs private conversation.

Also apply some style fixes and restore lost functionality:
  * Make conversation title bar fixed.
  * Widens message bubbles.
  * Unhide message list.
  * Restore attachment rendering.
  * Restore message sending and attachment file selection.
  * Style attachments file input as a paperclip.
  * Style send button like on Android and make it a submit input.
2015-02-11 17:37:57 -08:00
Riley Shaw
94ce4d4b91 Simplify panel state management and message passing 2015-02-11 17:37:56 -08:00
Riley Shaw
9071d98395 Update styles to material design to match Android client (first pass) 2015-02-11 17:37:56 -08:00
Riley Shaw
2cbcb28ee3 Start on panels 2015-02-11 17:37:56 -08:00
lilia
d470b0eb53 Less jquery, more templating in conversation view
`if (foo) then jquery-dom-insert...` is a poor pattern to follow.
Instead, let mustache do the work.
2015-01-15 22:34:52 -10:00
lilia
44007ca58f Add rudimentary ui for sending a group update 2015-01-15 09:23:13 -10:00
lilia
8c93101989 Don't store conversationType on messages
This was used to conditionally render messages in the group style, but
it's actually unnecessary. We can render the same markup in both cases
and change the appearance with css.
2014-12-18 19:45:53 -08:00
lilia
8257fa7478 Add support for deleting a conversation
Note that the conversation record is not actually destroyed,
merely marked inactive, preserving the contact name, photo,
etc...
2014-12-03 01:37:06 -08:00
lilia
ccbe837ca2 Rebind events when opening a previously opened conversation 2014-11-25 13:54:44 -08:00
lilia
d1c5b6da7a Get rid of Layout global
Instead, trigger and listen for events on the conversation collection
object.
2014-11-24 19:25:03 -08:00
lilia
a835887459 Fix scroll when re-opening a conversation 2014-11-24 19:25:03 -08:00
lilia
c0681beca7 Consolidate message callbacks
Register the runtime callback at the top level view rather than having
each conversation view register independently.
Also refactors Layout into InboxView.
2014-11-24 19:25:03 -08:00
lilia
470346c9c4 Save incoming messages and pass to frontend asynchronously
After a message is saved asynchronsly, fire an event and pass the
message attributes to frontend listeners via the chrome-runtime API.

This behavior is similar to the 'storage' event fired by localStorage.
2014-11-24 19:25:03 -08:00
lilia
ced295a630 Move message and conversation storage to IndexedDB
Getting up and running with IndexedDB was pretty easy, thanks to
backbone. The tricky part was making reads and writes asynchronous.
In that process I did some refactoring on Whisper.Threads, which
has been renamed Conversations for consistency with the view names.

This change also adds the unlimitedStorage permission.
2014-11-24 19:25:03 -08:00
lilia
b9859ad9d4 Add some license headers 2014-11-13 15:53:57 -08:00
lilia
0956d328da Fixes #71 Autoscroll
Conversation view autoscroll triggers on dom change, not storage change,
ensuring that we don't scroll before the new element is inserted.
2014-11-10 23:19:03 -08:00
lilia
229007040c Basic frontend support for image attachments 2014-10-24 18:53:55 -07:00
lilia
d362d0d978 Autoscroll conversation views
Scroll to the bottom (most recent) message in the conversation when it
is opened, when we send a message, and when we receive a message.
2014-10-24 14:49:42 -07:00
lilia
0f4b53c176 Update records list in BBLocalStorage on fetch
Previously, would only update the known messages.
2014-10-09 20:08:28 -07:00
lilia
db86abdf70 Add list view tests
Also,
 * moved fetch out of the list view
 * removed unused #last() function
 * put test setup lines in their own tiny file.
 * added data-cover to view script tags for code coveage reports.
2014-09-04 00:18:15 -07:00
lilia
9af18ce6ae Encapsulate page layout js
The layout class is the only class that should have knowledge of
page-level constant markup, such as #gutter and #contacts, and
should be pretty much the only place we find elements by id (with
the exception of template elements).

This change removes references to #gutter from views. Rather than
hardcoding assumptions about page layout, view elements should
ask the layout to insert themselves into the main content area by
calling Whisper.Layout.setContent.
2014-08-31 17:46:01 -07:00
lilia
2f0b0f7a1b Get overflow scrolls working
Had to resort to a resize event handler.
A bit slow at times, but it works.
2014-08-25 19:01:13 -07:00
lilia
546cdf82cb Fix some markup issues
* Remove spurious search div
* Fix nested uls
* Use class name selected, not closed (the inverse)
* Restor nacl div
2014-08-25 18:59:22 -07:00
lilia
c034ac8267 Refactor components for the main content section
Each conversation views now manages its own separate elements
rather than all binding to a shared #conversation element, and
similarly for message composition ui.

Also includes the beginnings of group creation UI (not working yet),
featuring bootstrap-tagsinput field for entering group recipients
2014-08-25 18:54:55 -07:00
lilia
44f272a181 Get messages sending with new ui
Also convert index.html to 4-space indentation.
2014-07-27 15:04:12 -10:00
lilia
850a91c77d Fix message sending 2014-07-27 11:35:49 -10:00
lilia
0741c74618 Don't recreate views unnecessarily
Let ConversationListItemView save a reference to its corresponding
ConversationView. This lets it render or delegate/undelegate events
when opening and closing a conversation.

Similarly for ConversationView itself, which contains a MessageListView.
2014-07-27 11:35:49 -10:00
lilia
9d0be46a53 Close an open conversation before opening another 2014-07-27 11:35:49 -10:00
lilia
511b121a2f Refactor conversation view into two classes
One that resides in the left hand column as a list item, and another
which displays in the main column and handles ui events therein.
2014-07-27 11:35:49 -10:00