Commit graph

307 commits

Author SHA1 Message Date
lilia
960754ef04 Restyle compose button
Move it to a tool bar at the top of the conversation list. This is also
where a search bar will live someday.

Fixes #357

// FREEBIE
2015-09-18 13:08:52 -07:00
lilia
93a5d01127 Delete old code
We don't have any more 'default' css classes. Default avatar data is
simply provided by a model for rendering in a view.

// FREEBIE
2015-09-16 22:19:04 -07:00
lilia
90e9216e19 Add UI for submitting debug logs
Fixes #343

// FREEBIE
2015-09-16 11:28:37 -07:00
lilia
299bd45cea Add background color on key verification screen
// FREEBIE
2015-09-15 11:01:48 -07:00
lilia
712cad352c Restyle new-contact element
Bring it into line with the style of the other contacts.

// FREEBIE
2015-09-14 15:32:47 -07:00
codedust
5378cd8602 Fix multiple spaces not beeing displayed in message bubbles
Multiple spaces ("     ") are displayed by browsers as a single
whitespace character if 'white-space: pre-wrap;' is not set.
2015-09-07 16:35:24 -07:00
codedust
ec4ef9062c Fix text color and text selection color of outgoing links
This will change the text color of outgoing links from blue
to gray to increase the contrast to the background color of the
outgoing message bubble. Also, the text selection color of these
links will be the same as for normal text.
2015-09-07 16:28:15 -07:00
codedust
01b0f96b9a Fix text selection color of outgiong message bubble contents
This will change the text color and the background color of selected
text in outgoing messages to make the selection more noticeable.

::selection and ::-moz-selection have to be seperated into two
selectors because browsers will ignore selectors with partially
unknown syntax.
2015-09-07 16:28:15 -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
7d9490e503 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
2015-09-03 14:31:05 -07:00
lilia
9566f10ca4 Add bottom border to conversation header
// FREEBIE
2015-09-02 19:00:39 -07:00
lilia
43aaf541c1 Compose flow style tweaks 2015-08-31 16:09:05 -07:00
lilia
50939d1851 Restyle conversation menu button 2015-08-31 13:59:12 -07:00
lilia
fbb50e6621 Change colors and backgrounds 2015-08-27 17:53:50 -07:00
lilia
3569050cb6 Make conversation list fill gutter 2015-08-26 17:48:18 -07:00
lilia
fbc73c0369 Add spinner for long-loading message lists 2015-08-26 17:30:20 -07:00
lilia
992dfa5b20 Bug fixes for group create flow
Fallout from layout change.

// FREEBIE
2015-08-26 17:11:01 -07:00
lilia
d07357ce9a Retool various sub-screens to fit two-column layout 2015-08-26 15:15:14 -07:00
lilia
c780713a26 Fix up socket status display 2015-08-26 10:31:16 -07:00
lilia
877b34579a Fix heade text style 2015-08-26 10:11:40 -07:00
lilia
00ef30b283 Remove css maps from git 2015-08-25 17:06:00 -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
lilia
d808d255eb Fix bug with 0th contact color
Contact color css class wasn't being rendered because 0 is falsey.

// FREEBIE
2015-07-31 17:01:03 -07:00
lilia
2f12275cb9 Update contact colors
Make default contact color assignments consistent with
WhisperSystems/Textsecure@99d3a76b
2015-07-31 11:07:42 -07:00
lilia
815b79dc64 Cleanup 'Too many devices' dialog
Closes #263
2015-07-14 13:39:37 -07:00
lilia
a95b6165f4 Ellipsize long conversation window titles
Fixes #304
2015-07-08 14:28:09 -07:00
lilia
fa4022a4e3 Invert pending/sent model 2015-07-07 23:03:56 -07:00
lilia
90fe82a0c0 Fixes #286 Allow selection of message text
// FREEBIE
2015-06-26 16:16:13 -07:00
lilia
feb5e5b068 Display gray # instead of colored + for no-name contacts
For consistency with android.
2015-06-25 13:47:46 -07:00
lilia
3dd8056487 Add error dialog for too many devices 2015-06-25 13:24:31 -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
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
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