Move the global header inside the left pane only, expand conversation
panels to full bleed, restyle conversation list items and selected state.
// FREEBIE
This flow broke a bit with transition to modal debug log.
Restructure such that the loading class can be applied to an appropriate
element inside the modal. Ensure that the input elements are hidden when
submit is clicked, the result elements are shown when the log upload is
completed.
// FREEBIE
The button for the conversation menu was rendering on top of the global
menu since the global menu was part of a position-fixed element and thus
except from the normal document flow.
// FREEBIE
Remove the 1px gray border around the window. This allows to the window to integrate seamlessly with custom window managers which use the background color for the titlebar.
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.
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
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
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
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
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
Used by member list view. Refactored some templates for shared markup.
Fixes strange behavior where members in the list were hoverable and
selectable.
// FREEBIE
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...
Fixes#264
Implement the equivalent of java's String.hashCode on the conversation model.
Change avatar template and attributes. Use css classes for colors.
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.
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
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.
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.
