Commit Graph

222 Commits (d8e1e3da71906221c81a7016028f2408677f3b0b)

Author SHA1 Message Date
Scott Nonnenberg c0cd733139 Full export, migration banner, and full migration workflow - behind flag (#1342)
* Add support for backup and restore

This first pass works for all stores except messages, pending some scaling
improvements.

// FREEBIE

* Import of messages and attachments

Properly sanitize filenames. Logging information that will help with
debugging but won't threaten privacy (no contact or group names),
where the on-disk directories have this information to make things
human-readable

FREEBIE

* First fully operational single-action export and import!

FREEBIE

* Add migration export flow

A banner alert leads to a blocking ui for the migration. We close the socket and
wait for incoming messages to drain before starting the export.

FREEBIE

* A number of updates for the export flow

1. We don't immediately pop the directory selection dialog box, instead
  showing an explicit 'choose directory' button after explaining what is
  about to happen
2. We show a 'submit debug log' button on most steps of the process
3. We handle export errors and encourage the user to double-check their
  filesystem then submit their log
4. We are resilient to restarts during the process
5. We handle the user cancelling out of the directory selection dialog
  differently from other errors.
6. The export process is now serialized: non-messages, then messages.
7. After successful export, show where the data is on disk

FREEBUE

* Put migration behind a flag

FREEBIE

* Shut down websocket before proceeding with export

FREEBIE

* Add MigrationView to test/index.html to fix test

FREEBIE

* Remove 'Submit Debug Log' button when the export process is complete

FREEBIE

* Create a 'Signal Export' directory below user-chosen dir

This cleans things up a bit so we don't litter the user's target
directory with lots of stuff.

FREEBIE

* Clarify MessageReceiver.drain() method comments

FREEBIE

* A couple updates for clarity - event names, else handling

Also the removal of wait(), which wasn't used anywhere.

FREEBIE

* A number of wording updates for the export flow

FREEBIE

* Export complete: put dir on its own line, make text selectable

FREEBIE
8 years ago
Scott Nonnenberg 305bd6b3b8 App loading screen: show messages processed so far
Also, show the same loading screen on index.js before we've bootstrapped
the app.

FREEBIE
8 years ago
Scott Nonnenberg 53f2bfbb57 Animated loading screens on startup and first conversation load
FREEBIE
8 years ago
Scott Nonnenberg 12d7fb3b74 Left-align confirmation dialog text, explain more on 'send anyway'
FREEBIE
8 years ago
Scott Nonnenberg c714fb6dbf Shadow/icon/blue for banner, better verify advisories in dark theme
FREEBIE
8 years ago
Scott Nonnenberg 47c5142a83 Replace unicode check with new svg icon
A good bit of CSS was required to keep the text color changing along
with the text it is nestled within.

Also: took this opportunity to increase the contrast of the number and
verified section right under the contact name in the group members view.

FREEBIE
8 years ago
Scott Nonnenberg caa92c9312 Reintroduce outline around confirmation dialog buttons
It was very hard to tell which button was selected without the standard
outline.

FREEBIE
8 years ago
Scott Nonnenberg 9204188aa3 A bit of cleanup after some early code review
FREEBIE
8 years ago
Scott Nonnenberg 243cbd8123 Confirmaton on send, banner when 'unverified'
Not yet using the new APIs, but ready to. Still to do:
- Send sync messages on trust decisions
- Respond to received trust decision sync messages
- Show trust decisions in the conversation history
- In that rare situation where a sent message ends up with a key error
  make it easy to retry the send.

FREEBIE
8 years ago
Scott Nonnenberg bedf10056b Support for group-member verifications via second-level panel
Also:
- All the necessary wire-up to update things in real time. If you have
a safety number page up via a group member view as well as via a 1:1
conversation with that contact, they'll both be updated as the
underlying model changes. Similarly, the overall group will update
in real-time as members change.
- A bit of special-casing for yourself in a group conversation - you're
shown as 'me' and are not clickable, where normally that would take you
to the Safety Number screen for that contact. You are also not included
in the trust calculations for a given group.

FREEBIE
8 years ago
Scott Nonnenberg 0e96d086c5 Move to overlay scroll bars for the conversation list
Note that we're removing position: relative for the contact class, and
there might be some unexpected layout impacts. Thus far I haven't seen
any.

FREEBIE
8 years ago
Scott Nonnenberg 0d722a3186 Last seen indicator visual refresh
- Last seen indicator now spans the full conversation, with subtle
shadow highlights above and below
- Scrollbars now overlap the content of the conversation, allowing last
seen indicator to touch the right edge of the window.
- The iOS and Android conversation background is now #eee instead of
white, which meant that the outgoing messages (Android) and incoming
messages (iOS) had to be updated for contrast. They now have white
backgrounds.
- Similarly, the scroll down button needed more contrast, and its
background is now white in light themes.

FREEBIE
8 years ago
lilia 7a7739a3f6 Add text-security css class
Adding the class `.text-security` to the body element will (should) turn
all names, phone numbers, and message bodies into unreadable squares.
Nice to have when you want to screenshot without leaking too much info.
Note that emojis and images are not obscured.

This isn't fully baked or exposed as a feature. You have manually
inspect and tweak the DOM to enable it, but I leave it here for the
benefit of devs and other "frequent flyers" of our issue tracker.

// FREEBIE
8 years ago
Ikarulus 59c684db8a Removes orange borders glitch (visible in dark design)
FREEBIE
8 years ago
lilia 1fe90ecdcb Add frontend for safety numbers approval setting
Adds the checkbox under settings.

// FREEBIE
9 years ago
lilia 2b2c6ab040 Frontend for timer updates and timer indicator 9 years ago
lilia 8f76548a53 Invert button styles
Make buttons dark by default, and let the android theme styles apply the
inversion.
9 years ago
lilia 4cd2c03687 Add clock svg style 9 years ago
lilia 1afe50b1db Make contact sync button quieter
// FREEBIE
9 years ago
lilia 1c89142752 Customize emoji conversion
Use image tags with :emoji: in a title attribute for an optimal
copy/paste ux.

// FREEBIE
9 years ago
lilia 65cb7c0e9c Cleanup colors and focus/active input states
// FREEBIE
9 years ago
lilia b5191e78c3 More themeing
Restyle message input and welcome screen
Cleanup search, headers

// FREEBIE
9 years ago
lilia 2e3db91b30 Theme-ify header colors and styles
Remove the Signal banner and restyle the search field for ios theme.

// FREEBIE
9 years ago
lilia 3aa72d2244 Address large font size edge cases
Fix some visual bugs occuring at large font size:
  * Contact names break onto the next line after their avatars in
    message detail screen
  * Settings menu font-size failed to scale
  * Handle Content overflow in modals.

// FREEBIE
9 years ago
lilia 41e4154d60 Make font sizes relative
So it's easier to adjust them globally.

// FREEBIE
9 years ago
bitim 1a0d2595da Committing corresponding changes to the scss files 9 years ago
lilia f131505d28 Display numbers in group member list
// FREEBIE
9 years ago
lilia b6f785737c Restyle error icons, move them outside the bubble 9 years ago
lilia d5dfffd9da Darken the scrollbar on hover
// FREEBIE
9 years ago
lilia 531d1701ef Move debug log styles to their own file
// FREEBIE
9 years ago
lilia f3de290f7c Make debug log link focusable/selectable
Add button to open in a new tab. Stye as input group.

// FREEBIE
9 years ago
lilia a81ab2ca6b Apply paperclip hover state on focus
// FREEBIE
9 years ago
lilia 9aa429e18a Add frontend support for expiring releases
When a release expires, it gets a persistent banner notification to
upgrade, and an ephemeral toast warning when trying to send a message.

// FREEBIE
9 years ago
lilia e5748b974f Harmonize x/close buttons
// FREEBIE
9 years ago
lilia 4f57dff1e6 Use svg for paperclip icon
// FREEBIE
9 years ago
lilia 6be7b765b2 Harmonize border radii
// FREEBIE
9 years ago
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
9 years ago
lilia d8d34e7afc Icon upgrade
Also remove unused images.

// FREEBIE
9 years ago
lilia 367a62111b Tweak conversation list active state
// FREEBIE
9 years ago
lilia 01ca6b7c3a Vertically center contact names
For contacts/conversations without any messages, center their names
vertically in the conversation list element.

// FREEBIE
9 years ago
lilia 1aa975e199 Differentiate active vs selected conversation states
// FREEBIE
9 years ago
lilia ab62900e48 Simplify menu markup, tweak styles
// FREEBIE
9 years ago
lilia 76652c2622 Update style and copy on key changes
// FREEBIE
9 years ago
lilia 2e7c7ce0cc Move back button to the left
// FREEBIE
9 years ago
lilia d3b035121d Clean up bottom bar styles
// FREEBIE
9 years ago
lilia 234f937bc7 Conversation subscreens share a header
// FREEBIE
9 years ago
lilia 4358bdfac7 Use url xor color on avatar, never both
Combining them often leaves a crufty colored ring on the outer edge of
the avatar image.

// FREEBIE
9 years ago
lilia d391f07c1e Change right header color
// FREEBIE
9 years ago
lilia f81d882213 Apply 0.5s transition on header colors
// FREEBIE
9 years ago
lilia f72c1dff13 Adjust font colors
// FREEBIE
9 years ago
lilia 8bb8ed8151 Change left pane header color
// FREEBIE
9 years ago
lilia 85fa71b940 Make avatar letters bigger
// FREEBIE
9 years ago
lilia 928c19a476 Tighten up left pane layout style
// FREEBIE
9 years ago
lilia c16356084d Align header buttons and touch up styles
// FREEBIE
9 years ago
lilia 18a5ce8e54 Restyle conversation panel
// FREEBIE
9 years ago
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
9 years ago
lilia 83b25c0bfa Capitalize menu items in English
Because capitalization plays differently in other languages.

// FREEBIE
9 years ago
lilia a962d97bfb Fix debug log submission loading UX
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
9 years ago
lilia 7f8c76faca Make debug log as big as possible
Tweak style to make the modal reasonably wide/tall, and use flexbox
to automatically expand the textarea.

// FREEBIE
9 years ago
lilia de745c3ba0 Fix menu overlap issue
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
9 years ago
lilia f4387cc231 Remove obsolete style rules
// FREEBIE
9 years ago
lilia bc9436f90d Capitalize menu items
// FREEBIE
9 years ago
lilia 636c0f2a60 Put debug log in a modal
Also dedupe close-button style

// FREEBIE
9 years ago
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 a3c6061480 Add Notification Settings
Fixes #471

// FREEBIE
9 years ago
José Pedro Arvela b2948e541e Remove border around window
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.
9 years ago
lilia 7215afb6c7 Resize paperclip.png
// FREEBIE
9 years ago
Jake McGinty d914f4affe change attachment icon
// FREEBIE
9 years ago
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.
9 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 987c067355 Remove unused styles
// FREEBIE
10 years ago
lilia d8318ba9bd Remove the gradient
// FREEBIE
10 years ago
lilia 393e3e1e2b Fix unread badge for longer numbers
For 2 or more digit numbers, allow the badge to expand to fit.

// FREEBIE
10 years ago
lilia a8e02a94be Tweak selected state
// 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 16dc7abe69 Display unreadCount badges in conversation list
// FREEBIE
10 years ago
lilia 78a2b74297 Restyle attachment previews
Closes #380

// FREEBIE
10 years ago
lilia 4970cbeaed Fix overlapping name and timestamp
In the conversation list, fix long conversation names overlapping with
the right-floated timestamps.

// FREEBIE
10 years ago
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
10 years ago
lilia b65adc14dc Restyle debug log
Fixup for new layout and add a close button.

// FREEBIE
10 years ago
lilia f7452d2825 Conversation list style tweaks
List items are translucent normally, opaque grey/white when selected.

// 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 2f8d973366 Restore native window chrome
// FREEBIE
10 years ago
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
10 years ago
lilia 90e9216e19 Add UI for submitting debug logs
Fixes #343

// FREEBIE
10 years ago
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
10 years ago
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
10 years ago
lilia 43aaf541c1 Compose flow style tweaks 10 years ago
lilia fbb50e6621 Change colors and backgrounds 10 years ago
lilia fbc73c0369 Add spinner for long-loading message lists 10 years ago
lilia d07357ce9a Retool various sub-screens to fit two-column layout 10 years ago
lilia 877b34579a Fix heade text style 10 years ago
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...
10 years ago
lilia 001a91466b Add group member list // Closes #279 10 years ago
lilia d808d255eb Fix bug with 0th contact color
Contact color css class wasn't being rendered because 0 is falsey.

// FREEBIE
10 years ago
lilia 2f12275cb9 Update contact colors
Make default contact color assignments consistent with
WhisperSystems/Textsecure@99d3a76b
10 years ago
lilia feb5e5b068 Display gray # instead of colored + for no-name contacts
For consistency with android.
10 years ago
adambar 9c563cf080 Fix for message box auto-sizing behavior on resize; menu z-index fix 10 years ago
adambar 07ac0ae9cc 239 Auto-expand message area when typing 10 years ago
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.
10 years ago
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.
10 years ago
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
10 years ago
lilia 6bcfa84d45 Fix window border 10 years ago
lilia 7bf1d41184 Render conversation titles 10 years ago
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.
10 years ago
lilia 7d481fdc21 Style tweaks for new window chrome 10 years ago
lilia 39d11d8eb3 Apply custom chrome to conversation windows 10 years ago
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
10 years ago
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.
10 years ago
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.
10 years ago
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
10 years ago
lilia 7e3961891b Tweak menu styles 10 years ago
lilia d20e23402d Refactor RecipientsInputView from NewConversationView
For reuse on group update screen.
10 years ago
lilia 254131488e Render emoji in conversation and inbox views. 10 years ago
lilia 368cd2f79a Refactor back button style
Make it easier to reuse these styles.
10 years ago
lilia d0392a3e04 Refactor title bar text style 10 years ago
lilia 3292177a96 Remove resize logic in favor of pure css 10 years ago
lilia 746e6530b9 WIP pill view for selected recipients 10 years ago
lilia bffdaf9ceb Restyle menu icon 10 years ago
lilia db5e7fd6b6 Fix list view scrolling
Resize handlers are ugly. But not as ugly as scroll handlers. :p
Normalized some whitespace along the way.
10 years ago
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.
10 years ago