Commit graph

54 commits

Author SHA1 Message Date
OdysseasKr
c1300fc014 Add styling for the file input area
The file input area has a transparent border. When a file is dragged
above that area, the border turns blue. This helps the user understand
that this is the correct drop-off area.
2015-12-07 15:34:31 -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
987c067355 Remove unused styles
// FREEBIE
2015-11-15 14:56:57 -08:00
lilia
d8318ba9bd Remove the gradient
// FREEBIE
2015-11-12 12:58:14 -08:00
lilia
393e3e1e2b Fix unread badge for longer numbers
For 2 or more digit numbers, allow the badge to expand to fit.

// FREEBIE
2015-11-12 12:54:08 -08:00
lilia
a8e02a94be Tweak selected state
// FREEBIE
2015-11-12 12:10:54 -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
16dc7abe69 Display unreadCount badges in conversation list
// FREEBIE
2015-11-09 16:59:52 -08:00
lilia
78a2b74297 Restyle attachment previews
Closes #380

// FREEBIE
2015-10-29 18:19:51 -07:00
lilia
4970cbeaed Fix overlapping name and timestamp
In the conversation list, fix long conversation names overlapping with
the right-floated timestamps.

// FREEBIE
2015-10-23 15:47:32 -07:00
Odysseas
cafbc0f5df Tweak conversation list style
Styled the conversation list items so that:
 - Timestamp is on the same line as the name
 - The message text on an unread conversation is ligher than the rest of
   the text

Resolves: #379
2015-10-24 00:43:51 +03:00
lilia
b65adc14dc Restyle debug log
Fixup for new layout and add a close button.

// FREEBIE
2015-10-20 14:24:11 -07:00
lilia
f7452d2825 Conversation list style tweaks
List items are translucent normally, opaque grey/white when selected.

// FREEBIE
2015-10-17 12:07:53 -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
2f8d973366 Restore native window chrome
// FREEBIE
2015-10-16 12:52:10 -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
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
43aaf541c1 Compose flow style tweaks 2015-08-31 16:09:05 -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
d07357ce9a Retool various sub-screens to fit two-column layout 2015-08-26 15:15:14 -07:00
lilia
877b34579a Fix heade text style 2015-08-26 10:11:40 -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
feb5e5b068 Display gray # instead of colored + for no-name contacts
For consistency with android.
2015-06-25 13:47:46 -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
07ac0ae9cc 239 Auto-expand message area when typing 2015-06-23 22:45:41 +02: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
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
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
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
254131488e Render emoji in conversation and inbox views. 2015-03-10 18:15:31 -07: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
3292177a96 Remove resize logic in favor of pure css 2015-02-18 23:09:34 -08:00