Commit graph

1573 commits

Author SHA1 Message Date
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
1696898112 Fix avatars in conversation view
// FREEBIE
2015-06-19 16:22:57 -07:00
lilia
e26b9bfbc7 Default avatar support
Fixes #264

Implement the equivalent of java's String.hashCode on the conversation model.
Change avatar template and attributes. Use css classes for colors.
2015-06-19 11:50:18 -07:00
adambar
ada8f77930 Improve behaviors around long messages display
On the conversations list, if the last message is too long, cut it with ellipsis (...) instead of going out of the screen.
On the single conversation view, if the message in the bubble contains a word that is longer than a bubble, break it anyway instead of going out of the screen.
2015-06-18 14:14:28 -07:00
lilia
72f16b94ff Polish group update ux
* Show the members list as static elements
* Style the search results as a drop down, mirroring android ux

Fixes #248 // FREEBIE
2015-06-09 16:12:21 -07:00
lilia
6bcfa84d45 Fix window border 2015-06-08 15:02:08 -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
3e39271220 Render messages light blue until finished sending // Fixes #219 2015-05-26 13:30:51 -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
7d481fdc21 Style tweaks for new window chrome 2015-05-21 18:19:09 -07:00
lilia
39d11d8eb3 Apply custom chrome to conversation windows 2015-05-21 14:35:44 -07:00
lilia
95f8e3921c Keep inbox window open, but allow it to be hidden
As a chrome packaged app, we have to keep at least one window open in
order to maintain our websocket connection in the background page.

This change replaces the system window frame with custom buttons in the
inbox header, such that the 'close' button merely hides the window
rather than unloading it.

Fixes #237
FREEBIE
2015-05-21 13:08:43 -07:00
lilia
f8db7c606a Include bootstrap via sass
One less file to load on the options/register page.
2015-05-07 16:22:57 -07:00
lilia
a76fbe165b Add css transition to smooth progress bar animation
Conflicts:
	js/options.js
2015-05-05 13:55:52 -07:00
lilia
0373252901 Update stylesheet 2015-03-27 16:45:44 -07:00
lilia
13ce354ab8 Registration UX improvements
Add some nice modal dialogs instead of confirmation alerts.
2015-03-26 15:20:17 -07:00
lilia
c3d875305d Restore delivery receipt checkmarks 2015-03-25 11:40:33 -07:00
lilia
a7079206f4 Nicer looking end-session and group control messages 2015-03-23 15:49:31 -07:00
lilia
f160d1b7ad Css source maps 2015-03-23 14:11:48 -07:00
lilia
20baa795ad Fixes #198 Squished avatars
Refactor all avatar views to use a shared partial, then change it to a
background image. Requires allowing unsafe-inline styles in the CSP.
2015-03-23 14:01:18 -07:00
lilia
5ffa265559 Revert "Popout inbox"
This reverts commit 31e7d285e3.

This seemed like a nice feature, but the popup bubble isn't very
conducive to nontrivial user inputs, e.g. file inputs.

Fixes #211
2015-03-23 12:19:32 -07:00
lilia
c526dbda5f Set up production build task
`grunt copy`

Closes #191
2015-03-19 18:34:56 -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
31e7d285e3 Popout inbox
Rather than opening the inbox in its own window, let it appear as a
browser action popup by default, but allow promotion to its own window
if requested.
2015-03-18 16:29:01 -07:00
lilia
45a053b3a8 Break long links in message bubbles / Fixes #204 2015-03-16 18:08:45 -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
7e3961891b Tweak menu styles 2015-03-13 17:29:28 -07:00
lilia
d20e23402d Refactor RecipientsInputView from NewConversationView
For reuse on group update screen.
2015-03-13 17:29:28 -07:00
lilia
8e54aa1401 Plumb contact avatars into conversations 2015-03-11 17:49:01 -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
254131488e Render emoji in conversation and inbox views. 2015-03-10 18:15:31 -07:00
lilia
c73f4d71a7 DRY up scrollable pattern
Switch to using gutter class instead of id since there is potentially
more than one usage on the page.
2015-03-09 16:05:06 -07:00
lilia
fd6e2954f7 Curtail over-zealous websocket reconnects
Closes #173

Previously, in the event of a failed websocket auth, we would attempt to
reconnect once a second ad infinitum. This changeset ensures that we
only reconnect automatically if the socket closed 'normally' as
indicated by the code on the socket's CloseEvent. Otherwise, show a
'Websocket closed' error on the inbox view.

Ideally we would show a more contextual error (ie, 'Unauthorized'), but
unfortunately the actual server response code is not available to our
code. It can be observed in the console output from the background page,
but programmatically, we only receive the WebSocket CloseEvent codes
listed here:
https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes

The websocket error message is displayed by a normally-hidden but ever
present socket status element. Clicking this element will immediately
refresh the background page, which will try again to open the websocket
connection.
2015-03-09 16:04:26 -07:00
lilia
8ee282b1aa Restyle registration page
When first intalling, users will no longer be presented with the option
to register as a standalone client.

For developer convenience, the standalone form can still be found at
chrome-extension://.../register.html

Closes #159
2015-03-06 15:27:49 -08:00
lilia
7a03c26849 Adjust message bubble tail position
It should align with the center of the avatar.
2015-03-05 17:47:32 -08:00
lilia
e2bd55c171 Tweak delivery receipt and timestamp display
Checkmark is no longer underlined when hovering over the timestamp.
2015-03-05 16:29:12 -08:00
lilia
441167ab35 Tighten up send btn icon size 2015-03-05 15:49:00 -08:00
lilia
567a48e82b Adjust widths of bubbles and chat window
With these changes, message bubbles in the default-sized chat popup are
just wide enough to display the full complement of html5 media player
controls.
2015-03-04 15:59:28 -08:00
lilia
1311f7c9ae Fix attachment previews for audio/video files 2015-03-02 18:27:14 -08:00
lilia
c8274d7bc7 Give video elements black backgrounds 2015-03-02 17:53:44 -08:00
lilia
db7dee9a8a Fixup file size warning
Add contentType-specific limits, switch to lazy-init iff we encounter an
oversized file, and restyle as a toast, factoring out a generic
ToastView along the way.
2015-03-02 17:50:03 -08:00
lilia
ddc0ed1b9a Add audio and video players
Basic implementation using html5 audio/video tags and data URIs.
2015-03-02 15:49:14 -08:00
lilia
dcc1588219 Add key verification screen
Accessible from the menu on private conversations.
2015-02-26 22:26:46 -08:00
lilia
33b9a11e65 Always overflow: auto 2015-02-26 22:19:06 -08:00
lilia
fd30dc6f1a Add message detail view 2015-02-23 14:03:35 -08:00
lilia
368cd2f79a Refactor back button style
Make it easier to reuse these styles.
2015-02-23 12:52:15 -08:00
lilia
d0392a3e04 Refactor title bar text style 2015-02-23 12:07:06 -08:00
lilia
4945180c12 Constrain .end-session style to the .message-list
It was incorrectly being applied to the End Session menu item.
2015-02-19 11:53:33 -08:00
lilia
3292177a96 Remove resize logic in favor of pure css 2015-02-18 23:09:34 -08:00
lilia
7231bcd5ce Flesh out font faces 2015-02-18 16:25:39 -08:00
lilia
4716754209 Refactor content message class names 2015-02-18 00:11:35 -08:00
lilia
367421d40a Style end session messages
Also add a missing call to render()
2015-02-13 16:21:39 -08:00
lilia
eddf4164fa Hide sender names in private conversations 2015-02-13 11:05:31 -08:00
lilia
96af6b56ef Handle incoming sync messages
Assign them to the correct conversation and mark them outgoing with the
correct timestamp.

Closes #150
2015-02-12 18:17:08 -08:00
lilia
746e6530b9 WIP pill view for selected recipients 2015-02-12 13:21:16 -08:00
lilia
eaf3d46c1f Make 'New Message' view match new title bar style
Make text blue and light weight. Update back button colors to match.
2015-02-12 13:21:15 -08:00
lilia
bebe47eacd Hide our own avatar for consistency with Android 2015-02-12 13:21:15 -08:00
lilia
29bf70b76f Shrink more styles
Shrink font and image size
Shrink converation avatars
Shrink fab
2015-02-12 13:21:08 -08:00
lilia
bffdaf9ceb Restyle menu icon 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
ec01d33b50 Reorganize stylesheets and global styles
Simplifies the grunt watch task for sass. Renames sass partials with
leading underscores. Flattens stylesheet directory. The only remaining
raw css file is options.css.

Move globally-relevant styles to _global. Shrink overall font size.
2015-02-11 17:38:03 -08:00
lilia
33c0f5b274 Change title bar color 2015-02-11 17:38:03 -08:00
lilia
374fa044af Shrink some styles
Group update font and sender names should be smaller.
2015-02-11 17:38:03 -08:00
lilia
1334032a89 Add hidden group update form to new conversation view 2015-02-11 17:38:01 -08:00
lilia
d7436aaebe Adjust conversation menu styles 2015-02-11 17:38:00 -08:00
lilia
b1ad04298f Add title bar label to new conversation view 2015-02-11 17:38:00 -08:00
lilia
b13e36a11c Style conversation menu 2015-02-11 17:38:00 -08:00
lilia
eacca80a7d Don't let contact details wrap in skinny windows 2015-02-11 17:38:00 -08:00
lilia
6d81011f6a Add back button to compose view 2015-02-11 17:38:00 -08:00
lilia
fedfdcdd7e Style elements for compose flow 2015-02-11 17:37:59 -08:00
lilia
e52c7a3e2c Remove stubborn width calculation
It's making my typeahead contact details wrap onto the next line and
doesn't seem to be adding much value.
2015-02-11 17:37:59 -08:00
lilia
19ee28209d Restore delivery receipt checkmark 2015-02-11 17:37:59 -08:00
lilia
00e9e3b757 Setup loading gif on conversation list
TODO: get actual gif asset in there.
2015-02-11 17:37:59 -08:00
lilia
ee34e446e6 Label new-contact block 2015-02-11 17:37:59 -08:00
lilia
f504087603 Move index styles to their own file 2015-02-11 17:37:59 -08:00
lilia
613dc3bedd Start on support for messaging a brand new contact 2015-02-11 17:37:59 -08:00
lilia
c6a19afd29 Tweak contact style in typeahead
Remove message snippets and dates.
Add checkboxes.
2015-02-11 17:37:58 -08:00
lilia
79b4c89ce4 Fixup attachment preview 2015-02-11 17:37:58 -08:00
lilia
a2f5f734b3 Set up index.scss
This file is for index page styles. Start by offsetting the gutter so
the title bar doesn't obscure the first entry.
2015-02-11 17:37:58 -08:00
lilia
58e7f3c7e1 Fix file input click zone
Previously, the ugly file input was hidden with opacity, and styled as a
square paperclip icon, but its drop and click zones were not constrained
to the visible square. They remained active across the whole 'Choose
File' button, which overlapped with the textarea. Instead, hide the file
input complete (display: none) and transmit click events from the
paperclip to the input programmatically.

Eventually, we'll need to address drag and drop events, but I want to do
that at the window level. Otherwise dropping a file outside the file
input drop zone causes the browser to navigate to the file://... url.
2015-02-11 17:37:57 -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
lilia
7827c4c591 Restore default avatars on the index 2015-02-11 17:37:57 -08:00
lilia
5821e0ddee Add fonts so we don't have to hit googlefonts 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
ed06161ee7 Quick fix for phone input style 2015-01-17 22:32:47 -10:00
Emily Chao
bb2b53035e Restyled message attachments
Added a size limit, added functionality to delete the attachments before sending in a more user-friendly way
2015-01-16 13:06:49 -10:00
Emily Chao
e74cba8a92 Restyled country dropdown
Added jquery plugin that allows for flags and country codes to be
displayed in a user-friendly way, on top of the existing phone view
2015-01-15 15:24:36 -10:00
Emily Chao
5d3020b9ed Refactor phone number input view
Moves validation logic to its own view to be shared on index and options
pages.
2015-01-15 11:51:32 -10:00
Matt Corallo
e7f3e52b6c Remove NaCL! 2015-01-14 11:39:36 -10:00
lilia
3d6c251fd1 Group avatars 2015-01-11 01:27:22 -10:00
Matt Corallo
b070c6ccb0 s/\t/ /g in stylesheets/options.css 2015-01-06 14:49:04 -08:00
Dave Sescleifer
2462aba24b Fixed timestamps and added last message to the gutter 2014-12-22 23:38:26 -08:00
Dave Sescleifer
1c47fb7ed8 Contact name now overflows into ellipsis 2014-12-22 23:38:26 -08:00
Dave Sescleifer
893fffdad8 Added ✓ to delivered messages
Closes #100
Closes #101
2014-12-22 16:39:35 -08: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
99a2685f93 Store attachments as binary blobs
Move base64 encoding of attachments to an AttachmentView. This makes
image rendering an asynchronous task so we fire an update event to
indicate to the parent MessageListView that its content has changed
height and it is time to scroll down.
2014-11-25 12:42:44 -08:00
lilia
28290477f4 Nicer timestamps with momentjs
This dependency may be a little heavy for our current use case, but we can
roll with it for now and find something slimmer if it turns out yagni.

Closes #77
Closes #40
2014-11-12 11:45:58 -08:00
lilia
4119c13ba2 Registration ux tweaks 2014-11-10 16:24:00 -08:00
lilia
054f027786 Remove unused stylesheets
Move the remaining to /stylesheets
2014-11-07 00:34:28 -08:00
lilia
cd888f66ef Build unminified manifest.css from sources 2014-11-07 00:32:58 -08:00
lilia
349e7e18f6 Add sass stylesheets 2014-11-07 00:17:27 -08:00
lilia
0cc0b8cc72 Switch tagsinput to bower 2014-10-31 00:40:00 -07:00
lilia
c8ad65efe0 Switch to bower dependencies
Checks in only the files we actually need from bower_components.
2014-10-29 20:50:51 -07:00
lilia
987744cd79 Default avatars
Someday you'll be able to edit your avatar. Until then, put a bird on
it.
2014-10-29 16:05:51 -07:00
lilia
3334504eff render attachments 2014-10-26 00:30:20 -07:00
lilia
229007040c Basic frontend support for image attachments 2014-10-24 18:53:55 -07:00
lilia
c6aae62151 Small message form tweaks 2014-10-22 18:28:40 -07:00
lilia
d67b723f4f Highlight the selected thread 2014-10-22 17:26:37 -07:00
lilia
19dac1f3df Decorate incoming group messages
with numbers and image placeholders, so you know who's saying what.
2014-10-22 16:30:27 -07:00
lilia
e8399f98df Quickfix for wonky tagsinput 2014-10-17 16:39:35 -07:00
lilia
2bd77693e1 Refactor options page and style using bootstrap 2014-10-14 13:59:43 -07:00
lilia
40c3bc8640 Fix nacl not loading
HEADDESK HEADDESK HEADDESK
2014-09-13 22:46:38 -04:00
lilia
806693ac1c use new index page for popup 2014-08-25 19:01:18 -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
c2beda8e40 Get single recipient message composition working again 2014-08-25 18:55:51 -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
28e16aaae8 bootstrap tags input 2014-08-25 18:48:12 -07:00
lilia
518bdb2056 with love from tyler 2014-07-27 11:36:03 -10:00