Commit graph

279 commits

Author SHA1 Message Date
lilia
28c602ab85 Use button for file input / paperclip
// FREEBIE
2016-04-07 12:26:21 -07:00
lilia
e5748b974f Harmonize x/close buttons
// FREEBIE
2016-04-01 15:15:02 -07:00
lilia
6faed3d9d7 Remove unused style
// FREEBIE
2016-04-01 14:54:31 -07:00
lilia
6be7b765b2 Harmonize border radii
// FREEBIE
2016-04-01 14:24:47 -07:00
lilia
d4174b94f1 Tweak button sizes and menu style
Restore previous icon size to header buttons, add padding to accomodate
positioning.

Remove blue border from menus.

// FREEBIE
2016-04-01 14:24:41 -07:00
lilia
d8d34e7afc Icon upgrade
Also remove unused images.

// FREEBIE
2016-04-01 13:59:57 -07:00
lilia
6a9ec073c6 Decrease bubble radius
// FREEBIE
2016-04-01 12:36:50 -07:00
lilia
76652c2622 Update style and copy on key changes
// FREEBIE
2016-03-24 13:20:50 -07:00
lilia
1b6eda6a8d Tighten spacing between bubbles
// FREEBIE
2016-03-23 17:54:26 -07:00
lilia
6c35f2a010 Clean up timestamp/status alignment
// FREEBIE
2016-03-23 17:54:26 -07:00
lilia
512c5bf739 Incoming bubbles have sender's color background
// FREEBIE
2016-03-23 17:41:24 -07:00
lilia
4060221b9c Make panel scrollbar track persistent
The bar is effectively invisible, but having it present means that we
don't see a jarring change in width when the content expands into the
overflow zone and triggers the scrollbar to suddenly appear.

// FREEBIE
2016-03-23 15:28:31 -07:00
lilia
1e3e730d88 Consolidate panel container styling
Special case the main panel because it is super speshul.

// FREEBIE
2016-03-23 15:05:38 -07:00
lilia
6fe9c3f964 Nest key verification inside conflict dialogs
// FREEBIE
2016-03-23 15:04:42 -07:00
lilia
9f0bcf6ae7 Add top padding to panel containers
// FREEBIE
2016-03-23 12:59:59 -07:00
lilia
3901bcb8df Style resend button as an inline link
For messages that failed to send due to network errors, this change
allows retrying them directly from the main conversation view rather
than only from the message detail view.

// FREEBIE
2016-03-22 15:38:22 -07:00
lilia
c48484e04f Add padding to right of conversation input
// FREEBIE
2016-03-22 11:30:45 -07:00
lilia
d24eaa655a Tweak styles on key verification view
// FREEBIE
2016-03-21 18:42:05 -07:00
lilia
d3b035121d Clean up bottom bar styles
// FREEBIE
2016-03-21 17:17:39 -07:00
lilia
234f937bc7 Conversation subscreens share a header
// FREEBIE
2016-03-21 15:37:53 -07:00
lilia
3e103ffde2 Add x padding on message detail container
// FREEBIE
2016-03-21 11:08:15 -07:00
lilia
dd943163fe Increase message list padding
// FREEBIE
2016-03-21 00:25:06 -07:00
lilia
b094607e0d Highlight bottom bar when focused
// FREEBIE
2016-03-20 23:15:21 -07:00
lilia
7310afd1b4 Replace message list loading spinner with bar
// FREEBIE
2016-03-18 17:59:54 -07:00
lilia
c16356084d Align header buttons and touch up styles
// FREEBIE
2016-03-18 15:54:40 -07:00
lilia
18a5ce8e54 Restyle conversation panel
// FREEBIE
2016-03-18 13:09:45 -07:00
lilia
043a3f9609 New layout
Move the global header inside the left pane only, expand conversation
panels to full bleed, restyle conversation list items and selected state.

// FREEBIE
2016-03-18 11:30:27 -07:00
lilia
78603259c1 Center conversation tile in the main pane
Also fixes a visual bug with debug log and other overlays which wouldn't
cover the right edge of a very wide window.

// FREEBIE
2016-02-19 17:34:59 -08:00
lilia
33fde3d4e7 Dedupe modal styles
// FREEBIE
2016-02-19 17:34:59 -08:00
lilia
4ab2e25df6 Refactor Contact and Conflict views
Untangle these two views into their component parts, consolidating all
the key conflict logic in the key conflict view. Contact view now simply
renders basic contact info and miscellaneous errors but not conflicts or
message errors.

// FREEBIE
2016-02-18 12:22:43 -08:00
lilia
f221921127 Tweak conflict style
// FREEBIE
2016-02-18 12:22:42 -08:00
lilia
28c763992a Move error indicators on message bubbles
// FREEBIE
2016-02-18 12:22:42 -08:00
lilia
5340791868 Display key conflict dialog inline
One less modal.

// FREEBIE
2016-02-18 12:22:42 -08:00
lilia
ad66da9fb5 Move identity conflicts to top of message detail
Also restyle them as with network errors

// FREEBIE
2016-02-18 12:22:42 -08:00
lilia
b5058e3981 Make network errors & resend button more prominent
// FREEBIE
2016-02-18 12:22:41 -08:00
lilia
f5436a5123 Clicking on message status icon opens detail view
Additionally, hovering over it will apply cursor: pointer. Previously
only the timestamp exhibited this behavior.

// FREEBIE
2016-02-18 12:22:41 -08:00
lilia
5100cd392d Remove empty css rule
// FREEBIE
2016-02-12 17:25:18 -08:00
lilia
f1335d65f5 Fix confirmation dialog z-index
The large avatar icon on conversations was being rendered on top of the
confirmation dialog.

// FREEBIE
2016-01-26 18:23:57 -08:00
lilia
2f03768abb Reduce conversation bottom padding
Revert inadvertent visual change introduced with vertical flex styling
in 0569d4c.

// FREEBIE
2016-01-25 14:59:35 -08:00
Sam Lanning
1360349156 Consolidate .message-list styling
There was some lone .message-list styling that i've brought up to the logical
place in the stylesheet.

// FREEBIE
2016-01-25 14:37:04 -08:00
Sam Lanning
0569d4c889 Replace conversation panel js resizing with flex styling.
// FREEBIE
2016-01-25 14:37:03 -08:00
Sam Lanning
496604a448 Tidied up_conversation.scss a little for the conversation view.
// FREEBIE
2016-01-25 14:37:03 -08:00
Sam Lanning
d091c6ddda Added more gray color variables (to compensate for inconsistent compiling)
// FREEBIE
2016-01-25 14:33:38 -08:00
Sam Lanning
c4a9ac94b4 Improve Confirmation Dialog
Some basic modifications to the Confirmation Dialog:
* Always attached to <body> regardless of view that called it.
* Always centered horizontally on screen.
* A black semi-transparent overlay is now displayed over everything, and under
  the dialog.
* Various other style changes.

fixes #389

// FREEBIE
2016-01-25 14:33:38 -08:00
lilia
da8472b638 Use inherited font-family on the message input
Chrome's UA stylesheet defaults font-family to monospace on textareas.

The only other textarea at the moment is the debug log, where monospace
is actually nice to have since it's more scannable.

// FREEBIE
2016-01-19 20:17:27 -08:00
lilia
05681ce35b Don't render placeholder markup unless necessary
Rather than always rendering divs for the key and placeholder, render
the placeholder only if the key is missing.

// FREEBIE
2016-01-19 19:49:27 -08:00
jakob
6c7f2cf0fc Show help text for unknown contact identity
Adds a new message string "theirIdentityUnknown".

Fixes #576

// FREEBIE
2016-01-19 18:56:33 -08:00
lilia
881aa1685d Fix up unsupported attachment rendering
Rather than simply displaying an inactionable error, render a link that
allows the user to save the unsupported attachment.

// FREEBIE
2015-12-21 17:57:35 -08:00
lilia
0009a50d4d Clean up css style
Use a variable and remove a space.

// FREEBIE
2015-12-11 13:05:38 -08:00
Wasseranomalie
2618c8095e Let container-div fit in key-verification-window
// FREEBIE
2015-12-11 21:31:06 +01:00
lilia
adf919e0fe Make fingerprints selectable
Fixes #500
Closes #501

// FREEBIE
2015-12-11 11:13:01 -08:00
mad-de
4e416c6cbf Set textarea size to 100 % - button 2015-12-07 15:26:22 -08:00
lilia
88ec5970d5 Normalize message input font size
Fixes #465

// FREEBIE
2015-12-06 23:45:59 -08:00
lilia
68f2505996 Display phone number in conversation header
Fixes #436

// FREEBIE
2015-12-04 12:15:12 -08:00
lilia
77623dde87 Tweak breakpoint width for conversation avatar
This is the threshold window size where we toggle between large and
small avatar display in the conversation header.

// FREEBIE
2015-11-29 18:42:04 -08:00
lilia
1892eeafe0 Simplify meta/timestamp styles
// FREEBIE
2015-11-20 13:21:13 -08:00
lilia
2fc78ddd7d Fix scroll position jumping when images load
Messages with images or media were causing the scroll position to jump
around when they loaded, because rendering them changed the height of their
elements from 0 to full-height sometime after they were inserted into
the DOM.

Now when rendering attachments, we wait for them to load so they can
render at full height immediately, then warn our parent message list
before and after a potential height change, so the scroll position can
be saved and reset.

// FREEBIE
2015-11-15 15:32:35 -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
832f7ab643 Limit max widths of various elements
Bubbles are limited to 30em to facilitate comfortable reading length.
The width of the message list is limited to aid visual threading
of the conversation. The overall layout is restricted to 1300px and
centered if the window is much wider.

The header avatar resizes responsively to save room when the window
gets narrow

// FREEBIE
2015-11-12 11:05:22 -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
0d5291acad Replace sinewave with ellipse
Also make sure status indicator matches timestamp color.

Fixes #393

// FREEBIE
2015-11-08 14:50:34 -08:00
lilia
334e26af13 Fix invisible message detail scrollbar
// FREEBIE
2015-11-07 23:24:28 -08:00
lilia
8a73706512 Fix container height in message detail screen
// FREEBIE
2015-11-05 14:33:01 -08:00
lilia
78a2b74297 Restyle attachment previews
Closes #380

// FREEBIE
2015-10-29 18:19:51 -07:00
lilia
cbc82a95f7 Refactor pending/sent/delivered state markup & css
No need for separate elements since we only ever display one of these
states at a time.

// FREEBIE
2015-10-28 14:13:15 -07:00
lilia
c77391b3f2 Sinewave animation for pending requests
Tryin it on for size.

// FREEBIE
2015-10-28 13:57:32 -07:00
lilia
c9e01390a7 Use check/double check for sent/delivered
// FREEBIE
2015-10-28 13:01:36 -07:00
lilia
47befdbf61 Messages bubbles with errors are clickable
For messages with errors, clicking anywhere inside the bubble takes you
to the message detail view.

// FREEBIE
2015-10-23 17:43:51 -07:00
lilia
4a9fcc38df Use cursor: pointer on image attachments
Because clicking on an image now opens it in a new browser window.

// FREEBIE
2015-10-21 10:27:17 -07:00
lilia
bf81686c6e Remove gray background from message detail
// FREEBIE
2015-10-17 12:23:12 -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
a93b8cea72 Collapse multiple retry buttons
If you're going to retry one, you might as well retry everyone.

// FREEBIE
2015-10-10 16:59:52 -07:00
lilia
a32f3ff1f6 More work on replayable errors
Expose a button that does that retries outgoing messages if possible.

// FREEBIE
2015-10-02 18:31:07 -07:00
lilia
929c16090b Move error messages to message detail view
Change how message errors are rendered. Errors associated with a number
will be shown under that number in the detail view rather than piling up
in the message bubble.

// FREEBIE
2015-09-30 14:27:18 -07:00
lilia
299bd45cea Add background color on key verification screen
// FREEBIE
2015-09-15 11:01:48 -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
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
fbb50e6621 Change colors and backgrounds 2015-08-27 17:53:50 -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
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
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
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
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
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
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
7d481fdc21 Style tweaks for new window chrome 2015-05-21 18:19:09 -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
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
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
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
8e54aa1401 Plumb contact avatars into conversations 2015-03-11 17:49:01 -07:00
lilia
254131488e Render emoji in conversation and inbox views. 2015-03-10 18:15:31 -07: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
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
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
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
Renamed from stylesheets/view/_conversation.scss (Browse further)