Commit graph

606 commits

Author SHA1 Message Date
Scott Nonnenberg 43ed2c67e1
Add border-radius to iOS quoted-message to fix MacOS render bug 2018-04-24 14:08:42 -07:00
Scott Nonnenberg 6599535cbb
Clear border-radius at bottom of quote in iOS theme 2018-04-23 16:37:28 -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 bd17c298a2
Android Dark theme: refactor, increase contrast in outgoing 2018-04-20 17:08:20 -07:00
Scott Nonnenberg bd88407b78
iOS theme: Permanant background to attachment part of bubble
(this is to handle a quote making bubble wider, but a narrow image)
2018-04-20 16:02:33 -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 6a4acc813c
iOS: Center images in bubble, shrink bubble down to image size 2018-04-20 15:23:46 -07:00
Scott Nonnenberg bb9859ca61
Make iOS quote theming apply in the message detail screen 2018-04-16 12:30:28 -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 6413e75f82
iOS: Handle portrait image that doesn't fill message box
It would have rounded corners inside of the bubble, which is not what
we want. This makes the bubble itself have the rounded corners, and then
it cuts off anything that would extend past its edges.
2018-04-13 18:10:51 -07:00
Scott Nonnenberg f255cbcbe3
Move to white background for ios replies, hairline bottom border 2018-04-13 18:10:50 -07:00
Scott Nonnenberg 557ea55531
Quotes/iOS: Fix bug where large quote content would smoosh icon 2018-04-13 18:10:50 -07:00
Scott Nonnenberg b458c7d449
android-dark: Constrain light play icon to with peer image 2018-04-13 18:10:49 -07:00
Scott Nonnenberg bdaebc24ae
A few tweaks for the android-dark theme 2018-04-13 18:10:49 -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 127a90c4f6
Removed unused aspect ratio mixin 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
Daniel Gasienica 696b23a3e0 Ensure first message is not cut off in iOS theme
Without this, the user couldn’t scroll all the way up and  the first message was
cut off as panel extended below header.
2018-03-20 14:31:43 -04:00
Daniel Gasienica 685f05a99d Ensure conversation panel fills screen vertically
Required addition to the following change:
ef041b29d0
2018-03-19 18:10:07 -04:00
Scott Nonnenberg ef041b29d0
Remove scrollbar when placeholder is showning when in iOS theme 2018-03-14 14:42:15 -07:00
Scott Nonnenberg a824e2b42d
Start moving towards semantic CSS class names 2018-03-14 14:42:14 -07:00
Scott Nonnenberg 2ffabdcdd9
Delete data screen: Remove scrollbar when no convo selected
Turns out that the welcome screen had a min-height which caused weird
things when you take the window down to minimum height. It looked
particularly bad with the new full-screen delete data confirmation
screen.
2018-03-14 14:42:13 -07:00
Scott Nonnenberg 383e02edc4
New section in settings screen, full-screen 'are you sure?' 2018-03-14 14:42:13 -07:00
Daniel Gasienica acf48595f3 Show log in a monospaced font
Makes it easier for users to edit it as timestamps, etc., better align.
2018-03-08 16:21:27 -05:00
Scott Nonnenberg 59bee6690d
Choose device name screen: Finish by pressing enter (#2085) 2018-03-02 15:34:51 -08:00
Scott Nonnenberg c87a035f1a
Show View -> Debug on OSX, ensure Debug Log is visible (#2089)
* Ensure debug log is visible during registration/import

* Restore the proper View menu on MacOSX
2018-03-01 12:04:13 -08:00
Scott Nonnenberg 426dab85a2
New design for import/install, 'light' import (#2053)
- A new design for the import flow. It features:
  - Icons at the top of every screen
  - Gray background, blue buttons, thinner text
  - Simpler copy
- A new design for the install flow. It features:
  - Immediate entry into the QR code screen
  - Animated dots to show that we're loading the QR code from the server
  - Fewer screens: 1) QR 2) device name 3) sync-in-progress
- When not set up, the app opens directly into the install screen, which has been streamlined. The `--import` command-line argument will cause the app to open directly into the import flow.
- Support for two different flavors of builds - the normal build will open into the standard registration flow, and the import flavor will be exactly the same except during setup it will open directly into the import flow.
- A new design for the (dev-only) standalone registration view
- When these install sequences are active, the OS File menu has entries to allow you to switch the method of setup you'd like to use. These go away as soon as the first step is taken in any of these flows.
- The device name (chosen on initial setup) is now shown in the settings panel
- At the end of a light import, we hand off to the normal device link screen, starting at the QR code. On a full import, we remove the sensitive encryption information in the export to prevent conflicts on multiple imports.
- `Whisper.Backup.exportToDirectory()` takes an options object so you can tell it to do a light export.
- `Whisper.Backup.importFromDirectory()` takes an options object so you can force it to load only the light components found on disk. It also returns an object so you can tell whether a given import was a full import or light import.
- On start of import, we build a list of all the ids present in the messages, conversations, and groups stores in IndexedDB. This can take some time if a lot of data is in the database already, but it makes the subsequent deduplicated import very fast.
- Disappearing messages are now excluded when exporting
- Remove some TODOs in the tests
2018-02-22 10:40:32 -08:00
Scott Nonnenberg d503d1ace3
Remove built assets from repo, updates to docs + GH templates (#1955)
* Revamp issue and pull request templates, other docs tweaks

`yarn test` now runs all of our tests.

* Remove generated files from the repository

* Update to new Signal support URL

* Prevent the 'Test failed 2 == 1' from test-release in CI

* Another attempt to fix grunt test-release on Appveyor

* grunt test-release: Fail build if test fails

* Lint fix, and move jshint earlier in CI process
2018-01-09 15:31:23 -08:00
Scott Nonnenberg 72971a365f
manifest.css catch-up 2017-12-19 17:19:21 -08:00
Scott Nonnenberg 2430ee00d4
Emoji: Eliminate unused images, make sure panel clicks add emoji (#1849)
* Emoji: Ensure that all clicks work by using emoji data directly

* Eliminate a number of unused emoji images from final build

* Re-add the generic sheets directory, which we partially filter
2017-12-04 10:19:35 -08:00
Lilia 9c7ba87d6a Add support for Emoji 5 (#1797)
* Add support for Emoji 5

Update to latest emoji-datasource and emoji-js and switch to an up-to-date fork
of emoji-panel.

// FREEBIE

* Dark theme support for emoji-panel

Fixes #1763

// FREEBIE
2017-11-27 15:54:59 -08: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
Lilia 4449a5f110 Upgrade emoji support (#1482)
* Upgrade emoji deps and move to node_modules

Add support for Emoji 3.0 and switch from bower to yarn for managing emoji
dependencies.

// FREEBIE

* Delete old emoji deps

// FREEBIE

* Don't copy emoji on windows

It is no longer necessary since the symlinked image dir is gone.

// FREEBIE

* Update emoji test

// FREEBIE

* Fix emoji tests; remove all overrides of emoji-js functions

FREEBIE
2017-09-15 13:22:11 -07:00
Scott Nonnenberg 48f625c392
Move app theming from index to app view (#1479)
Apply theming one level higher so it applies to the debug log.

// FREEBIE
2017-09-14 17:48:15 -07:00
Lilia f698d0bc51
Better install view error handling (#1472)
If linking fails because an http request didn't connect, show a message and
allow the user to start over.

// FREEBIE
2017-09-14 17:04:03 -07:00
Lilia ae190fed44
Profiles (#1453)
* Add AES-GCM encryption for profiles

With tests.

* Add profileKey to DataMessage protobuf

// FREEBIE

* Decrypt and save profile names

// FREEBIE

* Save incoming profile keys

* Move pad/unpad to crypto module

// FREEBIE

* Support fetching avatars from the cdn

// FREEBIE

* Translate failed authentication errors

When AES-GCM authentication fails, webcrypto returns a very generic error. The
same error is thrown for invalid length inputs, but our earlier checks in
decryptProfile should rule out those failure modes and leave us safe to assume
that we either had bad ciphertext or the wrong key.

// FREEBIE

* Handle profile avatars (wip) and log decrypt errors

// FREEBIE

* Display profile avatars

Synced contact avatars will still override profile avatars.

* Display profile names in convo list

Only if we don't have a synced contact name.

// FREEBIE

* Make cdn url an environment config

Use different ones for staging and production

// FREEBIE

* Display profile name in conversation header

* Display profile name in group messages

* Update conversation header if profile avatar changes

// FREEBIE

* Style profile names small with ~

* Save profileKeys from contact sync messages

// FREEBIE

* Save profile keys from provisioning messages

For standalone accounts, generate a random profile key.

// FREEBIE

* Special case for one-time sync of our profile key

Android will use a contact sync message to sync a profile key from Android
clients who have just upgraded and generated their profile key. Normally we
should receive this data in a provisioning message.

// FREEBIE

* Infer profile sharing from synced data messages

* Populate profile keys on outgoing messages

Requires that `profileSharing` be set on the conversation.

// FREEBIE

* Support for the profile key update flag

When receiving a message with this flag, don't init a message record, just
process the profile key and move on.

// FREEBIE

* Display profile names in group member list

* Refresh contact's profile on profile key changes

// FREEBIE

* Catch errors on profile save

// FREEBIE

* Save our own synced contact info

Don't return early if we get a contact sync for our own number

// FREEBIE
2017-09-14 17:04:00 -07:00
Scott Nonnenberg ba347744ff
Import: choice on first startup, workflow, ported to Node.js fs API
FREEBIE
2017-09-14 17:02:43 -07:00
Scott Nonnenberg eaf31705cc
A number of fixes for loading screen, recent rebase
FREEBIE
2017-09-14 16:53:52 -07:00
Scott Nonnenberg 5526958c52
manifest.css catch-up
FREEBIE
2017-09-14 16:53:51 -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 333ed3bc17
Fix file icons on android theme
In android (non dark) theme incoming file attachments were all rendering the
generic file icon instead of media-type-specific icons.

// FREEBIE
2017-09-14 16:53:48 -07:00
lilia a2b2bd4bf3
Fix relative paths
// FREEBIE
2017-09-14 16:53:46 -07:00
lilia 81d8b78d05
Switch to grunt-sass + node-sass-import-once
These modules together allow us to import css files from third party
components without maintaining symlinks that essentially rename them as
sass partials, which doesn't work on windows.

// FREEBIE
2017-09-14 16:53:44 -07:00
lilia 2ae48ad9cd
Use relative path for file.svg 2017-09-14 16:53:39 -07:00
lilia 0839a358d3
Fix scroll overflow in installer layout
Make it slightly more responsive at smaller window sizes.

// FREEBIE
2017-09-14 16:53:37 -07:00
lilia 45bf7330ac
Scope install styles to install element 2017-09-14 16:53:35 -07:00
lilia 285b5ce062
Get install flow working in main window
// FREEBIE
2017-09-14 16:53:35 -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 52a595b372 Export/Dark Theme: Increase banner text contrast for legibility (#1415)
FREEBIE
2017-08-30 14:39:45 -07:00
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
2017-08-28 13:06:10 -07:00
Scott Nonnenberg 352b5f408b Making the application loading screen dark in the dark theme
FREEBIE
2017-08-07 16:14:49 -07:00
Scott Nonnenberg b4f6721846 Fix manfest.css, libtextsecure.js catch-up
FREEBIE
2017-08-04 12:03:25 -07:00
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
2017-08-04 12:03:25 -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 9204188aa3 A bit of cleanup after some early code review
FREEBIE
2017-08-04 12:03:25 -07:00
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
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 6b62daa62b Make Jumbomoji normal size when in the conversation preview
FREEBIE
2017-06-28 09:14:31 -10:00
armata ce20e4f471 fix dark theme button hover color 2017-06-26 16:37:15 -10:00
Sebastian Malek 2781ff798a align country list text to left 2017-06-21 09:48:58 -07:00
Sebastian Malek 6b4970de21 fix #1241: registration page readability issue 2017-06-21 09:48:58 -07:00
Scott Nonnenberg 2b010cf73a
Capture missing manifest.css change
FREEBIE
2017-06-16 11:23:01 -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 0a07c8ad2c Fix attachment styles in iOS theme
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 ed56d8cd70 Fix indentation in android-dark.scss
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 42608849bd Update CSS 2017-06-07 15:26:51 -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 6f0de2cd72 Effect for Android-dark theme 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
Ikarulus 752ebde7ff add hover event 2017-06-01 16:45:17 -07:00
Ikarulus fcbf569317 changes due to feedback 2017-06-01 16:45:17 -07:00
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
2017-06-01 15:19:25 -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
Ivan Markin 931441a057 Fix duplicate x icon (cancel) on active search field.
Fixes #1136.
// FREEBIE
2017-05-23 15:46:28 -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 f6c62e4822 Android: Make last seen indicator margin consistent top/bottom
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
lilia 56d1ce75ac Enable voice notes
And fix recorder background color in dark theme

// FREEBIE
2017-05-12 09:55:15 -07:00
Scott Nonnenberg 423a0fef67 Jumbomoji support matching Android support
FREEBIE
2017-05-10 15:51:39 -07:00
Scott Nonnenberg e7f41be464 Change android/android-dark file attachments to be on-theme
FREEBIE
2017-05-09 15:14:20 -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 cd1569e57a Android themes: Add space between file attachment, message text
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 935941e31e Brighten dark theme microphone icon 2017-04-19 13:58:06 -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 d3492960a6 Display info in network status when unlinked
When we can't connect due to being unlinked, network status indicator
will show an appropriate informational message and a button to open the
installer window to relink.

// FREEBIE
2017-04-12 20:43:16 -07:00
lilia 5d1e770307 Tweak network status styles
Remove inline styles
Use flexbox in the left pane

// FREEBIE
2017-04-12 13:02:31 -07:00
Sam Vevang ed4991974b set up a new view for displaying the network status
// FREEBIE
2017-04-08 00:10:56 -07:00
alecglassford ef4b4da2a3 Make search clear button ("x") persist w/o hover
This makes the "x" in the search bar always visible when there is
text in the search box, even if the mouse is not hovering, hopefully
making for a clearer UI around search and resolving issue #741

The implementation adds the "x.svg" as a background image to the search
box when it is classed with .active, in addition to the
-webkit-search-cancel-button, which is still there for the actual
functionality but only appears on mouse hover (one tiny snag is that
coloring appears slightly different on hover, at least on my screen -
don't know if this is a problem).

I accounted for both ltr and rtl text-direction by using
getComputedStyle(...).direction to detect from the input's dir="auto"
- if there's a more elegant way to do this, please suggest. An ideal
solution would use the :dir pseudo-class but it's not implemented
in Chrome yet - https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

For now, I added the direction-checking to inbox_view.js. I see that
input.search is also used in new_group_update_view.js and
recipient_input_view.js but neither of these views seem to be in use (?)
and they don't set the .active class anyway, so I ignored them.

Update: Amended version a few hours later - fixed and manually tested
color and spacing for iOS and Android Dark themes. Also made some new
SASS variables to make things DRYer and fixed my tab size.
2017-04-08 00:06:48 -07:00
Jon Long d0d3f80291 Improve Responsiveness on Install Screen
Handles the edge case where images in the Install steps can obscure the text below them at certain window dimensions.

In most cases, it's not possible to replicate this behavior due to minimum dimension settings in `chromium.js`. However, some window managers (such as i3) can ignore those settings, producing this bug.

This fix introduces a flexible, responsive layout to the Install steps, with the goal of keeping the action buttons in a consistent position while adapting the rest of the content to the remaining available space. The result is a clean, usable screen at any window size.

In the rare instance that a window's dimensions are less than that of the minimums set in `chromium.js`, scrollbars will appear to keep the smallest acceptable layout intact.

Potential side effects:

- Each `.step` element contains an`.inner` flexbox wrapper, which arranges its children in a column. The layout works best when each `flex-item` is an element that wraps the content inside of it. I think I accounted for all the possibilities on the Install screen, but any future `.step` items might want to keep that pattern in mind.

Resolves #1059
FREEBIE
2017-04-07 19:35:25 -07:00
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
2017-03-14 15:56:47 -07:00
Ikarulus c9939c8da8 Moving the error badge to the right corner in ios theme
// FREEBIE
2017-02-06 18:42:30 -08: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
Ikarulus 59c684db8a Removes orange borders glitch (visible in dark design)
FREEBIE
2017-01-25 20:40:24 -08:00
Ikarulus bb5ebf39bd Changed debug log color in dark theme
Fixes #990
2017-01-25 20:40:24 -08:00
lilia 33dc9ca3a3 Make dark theme links lighter and less saturated
10% lighter and 10% lower saturation than traditional signal blue
2016-12-03 20:25:59 +01:00
lilia 46254e3c23 Use shades of gray for left pane focus effect
Also remove extraneous rule. It is repeated further down the stylesheet,
and overruled by !important.
2016-12-03 20:20:34 +01:00
lilia 09b582bb2b Darken material colors in dark theme
Dark theme uses material colors with value 700 from
https://material.google.com/style/color.html
2016-12-02 11:51:18 +01:00
lilia ee334d3fcb Dark theme tweaks
* Fixes hourglasses
* Fix delivered status icon
* Other changes aiming for more consistency of visual structure
  between light and dark themes.
* Restores left pane header focus/transition effect.
2016-12-02 11:42:56 +01:00
Ikarulus 53cd3af78b Added a dark theme
I added a dark theme in order to solve #328.
This may fix #328 at least partially.
2016-12-02 00:41:42 +01:00
lilia 35270dbbb4 Use timeout-based animation for hourglasses
CSS animations are convenient but costly if you have hundreds of them.

Fixes #945
2016-10-30 16:53:17 +09:00
lilia 9c00a27081 Bump video min-width to include all controls
Fixes #960
2016-10-28 15:05:48 +09:00
lilia 7256fe9b6f Reduce CPU load from css animations
On osx this cuts the load in half. We can probably do better with
js-based animations but let this be a quick fix for now.
2016-10-16 16:32:01 +09:00
lilia e47868129e Remove unneeded rule
No longer needed thanks to previous commit.
2016-10-12 11:02:59 +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