Commit Graph

102 Commits (b77d5df4f24bbfc7e672b89ccfbb301fea68c095)

Author SHA1 Message Date
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
9 years ago
lilia 33fde3d4e7 Dedupe modal styles
// FREEBIE
9 years ago
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
9 years ago
lilia f221921127 Tweak conflict style
// FREEBIE
9 years ago
lilia 28c763992a Move error indicators on message bubbles
// FREEBIE
9 years ago
lilia 5340791868 Display key conflict dialog inline
One less modal.

// FREEBIE
9 years ago
lilia ad66da9fb5 Move identity conflicts to top of message detail
Also restyle them as with network errors

// FREEBIE
9 years ago
lilia b5058e3981 Make network errors & resend button more prominent
// FREEBIE
9 years ago
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
9 years ago
lilia 5100cd392d Remove empty css rule
// FREEBIE
9 years ago
lilia f1335d65f5 Fix confirmation dialog z-index
The large avatar icon on conversations was being rendered on top of the
confirmation dialog.

// FREEBIE
9 years ago
lilia 2f03768abb Reduce conversation bottom padding
Revert inadvertent visual change introduced with vertical flex styling
in 0569d4c.

// FREEBIE
9 years ago
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
9 years ago
Sam Lanning 0569d4c889 Replace conversation panel js resizing with flex styling.
// FREEBIE
9 years ago
Sam Lanning 496604a448 Tidied up_conversation.scss a little for the conversation view.
// FREEBIE
9 years ago
Sam Lanning d091c6ddda Added more gray color variables (to compensate for inconsistent compiling)
// FREEBIE
9 years ago
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
9 years ago
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
9 years ago
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
9 years ago
jakob 6c7f2cf0fc Show help text for unknown contact identity
Adds a new message string "theirIdentityUnknown".

Fixes #576

// FREEBIE
9 years ago
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
9 years ago
lilia 0009a50d4d Clean up css style
Use a variable and remove a space.

// FREEBIE
10 years ago
Wasseranomalie 2618c8095e Let container-div fit in key-verification-window
// FREEBIE
10 years ago
lilia adf919e0fe Make fingerprints selectable
Fixes #500
Closes #501

// FREEBIE
10 years ago
mad-de 4e416c6cbf Set textarea size to 100 % - button 10 years ago
lilia 88ec5970d5 Normalize message input font size
Fixes #465

// FREEBIE
10 years ago
lilia 68f2505996 Display phone number in conversation header
Fixes #436

// FREEBIE
10 years ago
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
10 years ago
lilia 1892eeafe0 Simplify meta/timestamp styles
// FREEBIE
10 years ago
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
10 years ago
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
10 years ago
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
10 years ago
lilia f860278b89 Add avatars to conversation headers
So as not to look repetitive, hide the per-message avatars in one-on-one
conversations.

// FREEBIE
10 years ago
lilia 0d5291acad Replace sinewave with ellipse
Also make sure status indicator matches timestamp color.

Fixes #393

// FREEBIE
10 years ago
lilia 334e26af13 Fix invisible message detail scrollbar
// FREEBIE
10 years ago
lilia 8a73706512 Fix container height in message detail screen
// FREEBIE
10 years ago
lilia 78a2b74297 Restyle attachment previews
Closes #380

// FREEBIE
10 years ago
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
10 years ago
lilia c77391b3f2 Sinewave animation for pending requests
Tryin it on for size.

// FREEBIE
10 years ago
lilia c9e01390a7 Use check/double check for sent/delivered
// FREEBIE
10 years ago
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
10 years ago
lilia 4a9fcc38df Use cursor: pointer on image attachments
Because clicking on an image now opens it in a new browser window.

// FREEBIE
10 years ago
lilia bf81686c6e Remove gray background from message detail
// FREEBIE
10 years ago
lilia 389b9a026d Initial restyle
Added background gradient and restyled conversation elements as floating
panels and cards.

// FREEBIE
10 years ago
lilia a93b8cea72 Collapse multiple retry buttons
If you're going to retry one, you might as well retry everyone.

// FREEBIE
10 years ago
lilia a32f3ff1f6 More work on replayable errors
Expose a button that does that retries outgoing messages if possible.

// FREEBIE
10 years ago
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
10 years ago
lilia 299bd45cea Add background color on key verification screen
// FREEBIE
10 years ago
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.
10 years ago
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.
10 years ago