Commit graph

279 commits

Author SHA1 Message Date
Daniel Gasienica
557693e14c Prettier: Format all stylesheets 2018-05-04 16:32:08 -04:00
Daniel Gasienica
4d01264c09 Fix layout of media gallery 2018-04-27 16:31:43 -04:00
Scott Nonnenberg
1bc8452337 Remove the outline for the scroll down button
In the future we'll re-enable this for keyboard navigation. For now,
it's really distracting.
2018-04-26 12:04:34 -07:00
Scott Nonnenberg
27a30b3267 Respond to PR feedback
- makeThumbnail -> makeImageThumbnail
- duplicate 'display: flex'
- remove no-longer-applicable comment
2018-04-26 09:50:13 -07:00
Scott Nonnenberg
ac0b50d20f
Generate thumbnails for new video attachments, video quotes 2018-04-25 18:32:46 -07:00
Scott Nonnenberg
c02860af5c
Responding to pull request review feedback
- messages.getQuoteObjectUrl: early return
- backup.js: explaining variables for long if statement
- types/messages.js: Log if thumbnail has neither data nor path
- sendmessage.js:
  - remove extraneous logging
  - fix indentation
  - upload attachments and thumbnails in parallel
- preload: don't load fs for tests, just fse
- _conversation.scss: split two selectors into two lines, 0px -> 0
- backup_test.js: use fse.existsSync and comment twoSlashes regex
- network_tests_view_test.js: Comment duplicate assignment to window.getSocketStatus
2018-04-23 15:36:47 -07:00
Scott Nonnenberg
770410ee88
Remove borders that didn't render well
Android: The gray border around the quote didn't interact well with the
image, which needed to overlap the border. For now we'll just remove the
border.

Also made the thumbnail image 2px bigger because I noticed that in some
cases there was a partial-pixel space below the image (where the rest of
the quote was making the container bigger).

iOS: The gray border around outgoing quotes was fading into the
background gray color, making the quote look a tiny bit more narrow than
the main message. Removed the border.
2018-04-20 15:24:02 -07:00
Scott Nonnenberg
37cac717cb
Use fit: cover for non-square thumbnails, better movie icon
Also: Match Android's X button in the quote composition area
2018-04-20 15:23:55 -07:00
Scott Nonnenberg
12257e1560
MessageView: Show menu w/ 'reply to message' on triple-dot click 2018-04-20 15:23:55 -07:00
Scott Nonnenberg
f4d9ab8ba0
Put quote preview in text box for Android, above it in iOS 2018-04-20 15:23:54 -07:00
Scott Nonnenberg
c71dcf0139
Show current quoted message above composition field
Note that substantial changes will be required for the updated Android
mockups, putting the quotation into the text box next to the attachment
preview.
2018-04-20 15:23:51 -07:00
Scott Nonnenberg
d29162f3b6
CSS Refactor: Pull quote CSS out from parent classes
This is to prepare for it to be shown in the message composition area.
2018-04-20 15:23:50 -07:00
Scott Nonnenberg
26e4e97592
Tighten up CSS
- Remove extra padding at top of Android bubbles, via sibling selector
- Don't include .attachments, .quote-wrapper, .content in bubble unless
  we actually need them. This allows for sibling selectors.
- This is a different technique for adding the ReactWrapperView for
  quotes - it is now appended to the DOM instead of attaching to
  something already in the DOM. This allows us to use .remove(), so it's
  a bit cleaner.
- Users of ReactWrapperView can now specify tagName and className
2018-04-20 15:23:47 -07:00
Scott Nonnenberg
30957341e4
Show three dot icon next to message on hover
But only if it doesn't have an error.

Also: reformatted message template in legacy_templates.js to match what
is in background.html for easier diffing.
2018-04-20 15:23:47 -07:00
Scott Nonnenberg
d8d803d36d
Center and limit the size of non-square thumbnails in quotes 2018-04-13 18:10:52 -07:00
Scott Nonnenberg
3bbbf65a6b
Fix iOS: tail, blue partial border, extra attachment space
Turns out that display: inline on the img tag resulted in a mysterious
3px of space added below it.
2018-04-13 18:10:52 -07:00
Scott Nonnenberg
c283ba1a12
Remove pointer cursor when clicking on quote won't do anything 2018-04-13 18:10:51 -07:00
Scott Nonnenberg
087dd0f758
Support for iOS theme 2018-04-13 18:10:49 -07:00
Scott Nonnenberg
644bc9e6fb
Fix problem of squished quote icons and images 2018-04-13 18:10:49 -07:00
Scott Nonnenberg
1cc0633786
Full support for quotations in Android theme 2018-04-13 18:10:48 -07:00
Scott Nonnenberg
21bf02c94d
Fixed examples in Quote.md, rough Android visuals 2018-04-13 18:05:44 -07:00
Scott Nonnenberg
ae043bf239
In iOS theme, join attachment bubble with caption bubble 2018-04-13 18:05:42 -07:00
Lilia
fb931b4733 Emoji picker (#1608)
* Add emoji button and popup panel

This integrates a simple third party emoji panel with a few css overrides to
correct some relative paths and colors.

The trickiest thing about this is ensuring we don't break the layout, which is
acheived through precise control over the panel's height, and prodigious calls
to updateMessageFieldSize.

// FREEBIE

* Don't close emoji panel on click, do close on send

To better facilitate multiple emoji entry.

// FREEBIE

* Make panel emojis bigger and higher resolution

// FREEBIE

* Move paperclip button to the right of the microphone

This makes our bottom-bar button arrangement more comfortable and consistent
with Android.

// FREEBIE

* Move emoji picker padding to inner container

* Insert emojis at cursor position

Don't just append to the end like a n00b! Also handle selected text correctly.
https://stackoverflow.com/questions/11076975

// FREEBIE

* A few visual tweaks to reduce visual complexity of emoji panel

- No gray buffer on the right side of the emoji panel
- No gray buffer between message compose text box and emoji window
- The scroll bar for the emojis is the same as our normal scrollbars
2017-10-30 13:54:55 -07:00
Scott Nonnenberg
c2fa61d0b4 Make .status CSS rules more specific to fix onboarding text (#1547)
FREEBIE
2017-10-06 17:04:39 -07:00
Lilia
52cc8355a6 Feature: Blue check marks for read messages if opted in (#1489)
* Refactor delivery receipt event handler

* Rename the delivery receipt event

For less ambiguity with read receipts.

* Rename synced read event

For less ambiguity with read receipts from other Signal users.

* Add support for incoming receipt messages

Handle ReceiptMessages, which may include encrypted delivery receipts or read
receipts from recipients of our sent messages.

// FREEBIE

* Rename ReadReceipts to ReadSyncs

* Render read messages with blue double checks

* Send read receipts to senders of incoming messages

// FREEBIE

* Move ReadSyncs to their own file

// FREEBIE

* Fixup old comments on read receipts (now read syncs)

And some variable renaming for extra clarity.

// FREEBIE

* Add global setting for read receipts

Don't send read receipt messages unless the setting is enabled.
Don't process read receipts if the setting is disabled.

// FREEBIE

* Sync read receipt setting from mobile

Toggling this setting on your mobile device should sync it to Desktop. When
linking, use the setting in the provisioning message.

// FREEBIE

* Send receipt messages silently

Avoid generating phantom messages on ios

// FREEBIE

* Save recipients on the outgoing message models

For accurate tracking and display of sent/delivered/read state, even if group
membership changes later.

// FREEBIE

* Fix conversation type in profile key update handling

// FREEBIE

* Set recipients on synced sent messages

* Render saved recipients in message detail if available

For older messages, where we did not save the intended set of recipients at the
time of sending, fall back to the current group membership.

// FREEBIE

* Record who has been successfully sent to

// FREEBIE

* Record who a message has been delivered to

* Invert the not-clickable class

* Fix readReceipt setting sync when linking

* Render per recipient sent/delivered/read status

In the message detail view for outgoing messages, render each recipient's
individual sent/delivered/read status with respect to this message, as long as
there are no errors associated with the recipient (ie, safety number changes,
user not registered, etc...) since the error icon is displayed in that case.

*Messages sent before this change may not have per-recipient status lists
and will simply show no status icon.

// FREEBIE

* Add configuration sync request

Send these requests in a one-off fashion when:
  1. We have just setup from a chrome app import
  2. We have just upgraded to read-receipt support

// FREEBIE

* Expose sendRequestConfigurationSyncMessage

// FREEBIE

* Fix handling of incoming delivery receipts - union with array

FREEBIE
2017-10-04 15:28:43 -07:00
Scott Nonnenberg
c1dd858922
Fix warning icon in message detail page - use relative path
FREEBIE
2017-09-14 16:53:51 -07:00
Scott Nonnenberg
649248a537
Fix paths for all newly-added icons
FREEBIE
2017-09-14 16:53:49 -07:00
lilia
4bb9c5ae32
Fix scroll to bottom arrow icon 2017-09-14 16:53:49 -07:00
lilia
2ae48ad9cd
Use relative path for file.svg 2017-09-14 16:53:39 -07:00
lilia
859d49b3f4
Use relative paths
// FREEBIE
2017-09-14 16:53:34 -07:00
Lilia
71036e31ab Fix horizontal scrolling in convo/message lists (#1448)
This removes some errant horizontal scrollability from the conversation list and
the message list.

// FREEBIE
2017-09-07 09:57:47 -07:00
Lilia
5d8e8459b3 Fix bouncy bubble widths (#1447)
Max-width on a message bubble should be about 30em for the good readability.
However, when the window isn't wide enough, bubbles must be further limited.

The transition should happen around the point that these two rules intersect,
but it was kicking in a little late, which caused the bubbles to jump from wider
to shorter as you widened the window past a certain point. This change adjusts
the threshold for smoother and more consistent bubble resizing.

The variable name $big-avatar-min-width is an artifact of a past design and was
previously used in multiple places, but it no longer makes sense in this context
so it has been discarded.

// FREEBIE
2017-09-07 09:57:33 -07:00
Scott Nonnenberg
53f2bfbb57 Animated loading screens on startup and first conversation load
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
14765599f3 Delete individual message
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
4124d5cb9b Show 'Message not sent' only if 'Some recipients failed' not showing
Also switch up the visual style for 'Some recipients failed' text to
match the more-visible 'Message not sent' text and the 'Resend' link.

FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
ff4fde651c Make it clear in conversation just some recipients failed
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
12914307f1 Improve experience when discovering identity key error on send
New experience in the Message Detail view when outgoing identity key
errors happen, matching the Android View.

'View' button is only shown on outgoing key errors right now.

When a contact with an outgoing identity key error is clicked, they are
taken to a view like the popup that comes up on Android: an explanation
of what happened and three options: 'Show Safety Number', 'Send Anyway',
and 'Cancel'

Contacts are now sorted alphabetically, with the set of contacts with
errors coming before the rest.

FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
b6cca41a0c Update verification-related strings to better match mobile app
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
293be5d9f6 Truncate long filenames in attachments
The :before technique for adding the icon was removed, because it
resulted in some rendering issues when the layout pressure in the
message bubble got too high - you would see a partial icon. This
solution shrinks the icon a bit when the filename wants to expand to
take its space.

The iOS bubble width also needed special care to ensure it didn't expand
to accommodate the very wide filenames. Beyond that, overflow: hidden
needed to be applied at several levels to make everything behave as
expected.

FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
12d7fb3b74 Left-align confirmation dialog text, explain more on 'send anyway'
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
31bf05e14a Add verified state summary to top of safety number screen
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
11372b4e00 Add icons for keychange and expiration timer in-conversation items
The shield matches the Android app's key change notification, and the
clock icon was easy to do and makes it easier to visually distinguish
those items in the conversation history.

FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
c714fb6dbf Shadow/icon/blue for banner, better verify advisories in dark theme
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
1cf9289b1a Add items to conversation history when user verifies/unverifies
FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
a827334c3e Allow re-send of messages in msg detail view on OutgoingKeyError
We also show more errors than we used to in the MessageDetail screen
to help make it clear what is happening, and why the user would need to
re-send.

FREEBIE
2017-08-04 12:03:25 -07:00
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
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
caa92c9312 Reintroduce outline around confirmation dialog buttons
It was very hard to tell which button was selected without the standard
outline.

FREEBIE
2017-08-04 12:03:25 -07:00
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
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
ee0b0f5ffb Remove all concept of 'key conflict' from the app 2017-08-04 12:03:25 -07:00
Scott Nonnenberg
3b19d8f0e2 Light themes: Add gray background color to message detail screen
Outgoing messages were hard to see, white on white.

FREEBIE
2017-06-16 11:21:11 -07:00
Scott Nonnenberg
b238242ead Add padding at the top of the conversation
Keeps no-scroll-bar conversations from sticking directly to the top of
the window.

FREEBIE
2017-06-12 14:55:47 -07:00
Scott Nonnenberg
9ead5c76ce Remove helvetica font in favor of Roboto
FREEBIE
2017-06-12 14:55:47 -07:00
Scott Nonnenberg
13fb40fdcc Make spacing at top/bottom of last seen indicator consistent
Sadly, that spacing now needs to be bigger because scrollIntoView
doesn't honor margins which overlap each other to eliminate this kind of
'too much spacing' kind of problem.

FREEBIE
2017-06-08 17:04:07 -07:00
Scott Nonnenberg
bb1aa14a60 Refine Last Indicator Visuals
FREEBIE
2017-06-08 17:04:07 -07:00
Ikarulus
ec3278ca3a add message length warning for android clients 2017-06-07 15:53:14 -07:00
Unknown
d79ed69c21 Forgot & 2017-06-07 15:26:51 -07:00
Unknown
235ac03775 Hover-effect for new messages 2017-06-07 15:26:51 -07:00
Unknown
416359d4ad Add scroll-down-button hover-effect
Normal Android & iOS Theme
2017-06-07 15:26:51 -07:00
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
2017-06-01 15:19:25 -07:00
Scott Nonnenberg
d294cc96a5 A few tweaks to safety number-related UI
* Show a pointer cursor on safety number change notification
* Add 'click to verify' to the text shown there
* Add ':' to the text shown on the safety number screen
* Limit the width of the safety number box, to force 3x4 layout
* Center the safety number box

FREEBIE
2017-05-23 15:50:22 -07:00
Scott Nonnenberg
1839efd535 Move margin-top back to inner last seen indicator element
FREEBIE
2017-05-23 11:08:23 -07:00
lilia
681418cf6b Restyle last seen indicator
Add horizontal line behind text.

// FREEBIE
2017-05-23 11:08:23 -07:00
lilia
4921ef1b9d Tweak scroll to bottom bottom color
And add drop shadow

// FREEBIE
2017-05-23 11:08:23 -07:00
Scott Nonnenberg
4c7bfbe9ff Scroll down button: when scrolled up, or new non-visible message
FREEBIE
2017-05-23 11:08:23 -07:00
Scott Nonnenberg
fed26c36ca Add new Last Seen Indicator with unread count, scroll to it
This is to ensure that when there are a lot of unread messages, the user
is given the chance to see all of them by being scrolled to the oldest
new message.

When a new message comes in, the indicator will be incremented.

When the user sends a message or switches away from the conversation,
the last seen indicator will be removed.

FREEBIE
2017-05-23 11:08:23 -07:00
lilia
3ea5c0435b Update attachment style
Add names and sizes for all attachments except images, and (as with
arbitrary attachments), clicking on the text will open a save dialog.
In the absence of a filename, choose something that makes sense.

Display different icons for different media types, including distinct icons
for voice notes and audio files.

In iOS theme, audio, video, voice, and files are all encapsulated in bubbles.

Closes #804
Closes #842
Closes #836

// FREEBIE
2017-05-12 15:27:45 -07:00
Scott Nonnenberg
42195acfb1 Reduce empty space to the left of the larger file icon
FREEBIE
2017-05-09 15:14:20 -07:00
Scott Nonnenberg
ae6e6da44b Change iOS file attachment bubbles to be on-theme
FREEBIE
2017-05-09 15:14:20 -07:00
Scott Nonnenberg
ee00ad0e15 File attachments: show file size, bold filename, make icon bigger
FREEBIE
2017-05-09 15:14:20 -07:00
lilia
a27ea20f3e Improve unsupported file type handling
Make arbitrary files look nicer and display the filename.

If an audio or video element fails to load for any reason, timeout after
a few seconds and render it as an arbitrary file. Also short circuit to
this treatment for common audio and video file types that we know are
going to fail, e.g., proprietary formats from apple.

// FREEBIE
2017-04-18 16:27:50 -07:00
lilia
030c5a403f Fix key change advisory style in dark theme
Override the light font color which is the default in dark mode.
For regular android theme this should cause no change.
2017-01-25 20:40:24 -08:00
lilia
9c00a27081 Bump video min-width to include all controls
Fixes #960
2016-10-28 15:05:48 +09:00
lilia
d5431a942f Simplify and correct message metadata alignment
Match left/right adjustment on Android.
Incoming to the left, outgoing to the right.
2016-10-12 10:52:34 +09:00
lilia
657fa2725f Adjust hourglass vertical alignment 2016-10-11 22:52:40 +09:00
lilia
83d285e4ab Fix style for qr code 2016-10-05 19:11:39 +09:00
lilia
790407d42e Add qr codes 2016-10-05 19:11:39 +09:00
lilia
7fe708d195 Insert keychange advisories
On click, these open a verification panel for the relevant contact,
within this conversation.

// FREEBIE
2016-10-05 19:11:39 +09:00
lilia
4cd2c03687 Add clock svg style 2016-09-28 17:20:03 -07:00
lilia
e809a0cf8b Breakout timer rendering into its own view
Make width and height constant.
2016-09-28 17:20:03 -07:00
lilia
5f92ccd524 Render animated hourglass when messages are expiring 2016-09-28 17:20:02 -07:00
lilia
96fd017890 Support for incoming expiring messages
When initialized, or when expiration-related attributes change, expiring
messages will set timers to self-destruct. On self-destruct they trigger
'expired' events so that frontend listeners can clean up any collections
and views referencing them.

At startup, load all messages pending expiration so they can start their
timers even if they haven't been loaded in the frontend yet.

Todo: Remove expired conversation snippets from the left pane.
2016-09-28 17:20:02 -07:00
lilia
6a4b720b89 Make timestamp text selectable
Previously we only declared the message body as selectable, but Chrome's
implementation of user-select is a little quirky in that it allows
unselectable text to be copied if you select elements around it. Oddly
enough, styling the entire bubble contents as selectable, including the
timestamp, actually prevents chrome from copying the timestamp text when
it's not supposed to, i.e., when triple-clicking the message body.

Fixes #887

// FREEBIE
2016-09-10 15:02:20 -07:00
lilia
d7b6e7c26b Make group updates and other control messages selectable
// FREEBIE
2016-09-07 13:04:45 -07:00
lilia
f918142742 Fix bubble selection style and toast z-index
// FREEBIE
2016-09-01 15:13:27 -07:00
lilia
65cb7c0e9c Cleanup colors and focus/active input states
// FREEBIE
2016-08-31 15:04:02 -07:00
lilia
6c05a71424 Tune up ios bubble style
// FREEBIE
2016-08-30 18:31:02 -07:00
lilia
7b9894d688 Refactor css to support theming
Move away from inline style attributes for setting contact colors.
Apply colors by name via css classes instead. Also lays groundwork
for syncing contact colors.

// FREEBIE
2016-08-30 18:31:02 -07:00
lilia
41e4154d60 Make font sizes relative
So it's easier to adjust them globally.

// FREEBIE
2016-08-24 16:08:29 -07:00
lilia
9fa7e7f462 Remove unused view
// FREEBIE
2016-08-24 16:08:29 -07:00
lilia
4f46a164ba Add voice notes
// FREEBIE
2016-08-23 16:16:31 -07:00
bitim
1a0d2595da Committing corresponding changes to the scss files 2016-07-14 11:13:00 -07:00
lilia
f34f6eedef Add min-width on video elements
Such that all the player controls are visible.

Fixes #782

// FREEBIE
2016-06-20 11:55:00 -07:00
lilia
dea8983235 Error icons only use pointer-cursor when clickable
// FREEBIE
2016-05-26 11:00:24 -07:00
lilia
58c3fe047e Make error messages clickable
// FREEBIE
2016-05-25 20:39:43 -07:00
lilia
0d47a04815 Remove unused style
// FREEBIE
2016-05-25 20:35:56 -07:00
lilia
3217f2c0b6 Hide unregistered user errors in groups
// FREEBIE
2016-05-25 20:33:40 -07:00
lilia
b6f785737c Restyle error icons, move them outside the bubble 2016-05-25 20:32:00 -07:00
lilia
b5ddd41a5e Fix error icon
// FREEBIE
2016-04-21 18:36:07 -07:00
lilia
8200780fc2 Don't let timestamps wrap
// FREEBIE
2016-04-18 19:15:35 -07:00
lilia
ba22151a31 Unpad message-container on message detail screen
// FREEBIE
2016-04-18 19:15:35 -07:00