Commit Graph

680 Commits (468a92f861e2e7b7bfc3cff8df27bd47bda996d3)

Author SHA1 Message Date
Scott Nonnenberg 1cc0633786
Full support for quotations in Android theme 7 years ago
Scott Nonnenberg 21bf02c94d
Fixed examples in Quote.md, rough Android visuals 7 years ago
Scott Nonnenberg ae043bf239
In iOS theme, join attachment bubble with caption bubble 7 years ago
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.
7 years ago
Daniel Gasienica 685f05a99d Ensure conversation panel fills screen vertically
Required addition to the following change:
ef041b29d0
7 years ago
Scott Nonnenberg ef041b29d0
Remove scrollbar when placeholder is showning when in iOS theme 7 years ago
Scott Nonnenberg a824e2b42d
Start moving towards semantic CSS class names 7 years ago
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.
7 years ago
Scott Nonnenberg 383e02edc4
New section in settings screen, full-screen 'are you sure?' 7 years ago
Daniel Gasienica acf48595f3 Show log in a monospaced font
Makes it easier for users to edit it as timestamps, etc., better align.
7 years ago
Scott Nonnenberg 59bee6690d
Choose device name screen: Finish by pressing enter (#2085) 7 years ago
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
7 years ago
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
7 years ago
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
7 years ago
Scott Nonnenberg 72971a365f
manifest.css catch-up 7 years ago
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
7 years ago
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
7 years ago
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
8 years ago
Scott Nonnenberg c2fa61d0b4 Make .status CSS rules more specific to fix onboarding text (#1547)
FREEBIE
8 years ago
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
8 years ago
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
8 years ago
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
8 years ago
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
8 years ago
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
8 years ago
Scott Nonnenberg ba347744ff
Import: choice on first startup, workflow, ported to Node.js fs API
FREEBIE
8 years ago
Scott Nonnenberg eaf31705cc
A number of fixes for loading screen, recent rebase
FREEBIE
8 years ago
Scott Nonnenberg 5526958c52
manifest.css catch-up
FREEBIE
8 years ago
Scott Nonnenberg c1dd858922
Fix warning icon in message detail page - use relative path
FREEBIE
8 years ago
Scott Nonnenberg 649248a537
Fix paths for all newly-added icons
FREEBIE
8 years ago
lilia 4bb9c5ae32
Fix scroll to bottom arrow icon 8 years ago
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
8 years ago
lilia a2b2bd4bf3
Fix relative paths
// FREEBIE
8 years ago
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
8 years ago
lilia 2ae48ad9cd
Use relative path for file.svg 8 years ago
lilia 0839a358d3
Fix scroll overflow in installer layout
Make it slightly more responsive at smaller window sizes.

// FREEBIE
8 years ago
lilia 45bf7330ac
Scope install styles to install element 8 years ago
lilia 285b5ce062
Get install flow working in main window
// FREEBIE
8 years ago
lilia 859d49b3f4
Use relative paths
// FREEBIE
8 years ago
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
8 years ago
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
8 years ago
Scott Nonnenberg 52a595b372 Export/Dark Theme: Increase banner text contrast for legibility (#1415)
FREEBIE
8 years ago
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 352b5f408b Making the application loading screen dark in the dark theme
FREEBIE
8 years ago
Scott Nonnenberg b4f6721846 Fix manfest.css, libtextsecure.js catch-up
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 14765599f3 Delete individual message
FREEBIE
8 years ago
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
8 years ago
Scott Nonnenberg ff4fde651c Make it clear in conversation just some recipients failed
FREEBIE
8 years ago
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
8 years ago
Scott Nonnenberg b6cca41a0c Update verification-related strings to better match mobile app
FREEBIE
8 years ago
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
8 years ago
Scott Nonnenberg 12d7fb3b74 Left-align confirmation dialog text, explain more on 'send anyway'
FREEBIE
8 years ago
Scott Nonnenberg 31bf05e14a Add verified state summary to top of safety number screen
FREEBIE
8 years ago
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
8 years ago
Scott Nonnenberg c714fb6dbf Shadow/icon/blue for banner, better verify advisories in dark theme
FREEBIE
8 years ago
Scott Nonnenberg 1cf9289b1a Add items to conversation history when user verifies/unverifies
FREEBIE
8 years ago
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
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 ee0b0f5ffb Remove all concept of 'key conflict' from the app 8 years ago
Scott Nonnenberg 6b62daa62b Make Jumbomoji normal size when in the conversation preview
FREEBIE
8 years ago
armata ce20e4f471 fix dark theme button hover color 8 years ago
Sebastian Malek 2781ff798a align country list text to left 8 years ago
Sebastian Malek 6b4970de21 fix #1241: registration page readability issue 8 years ago
Scott Nonnenberg 2b010cf73a
Capture missing manifest.css change
FREEBIE
8 years ago
Scott Nonnenberg 3b19d8f0e2 Light themes: Add gray background color to message detail screen
Outgoing messages were hard to see, white on white.

FREEBIE
8 years ago
Scott Nonnenberg 0a07c8ad2c Fix attachment styles in iOS theme
FREEBIE
8 years ago
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
8 years ago
Scott Nonnenberg 9ead5c76ce Remove helvetica font in favor of Roboto
FREEBIE
8 years ago
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
8 years ago
Scott Nonnenberg ed56d8cd70 Fix indentation in android-dark.scss
FREEBIE
8 years ago
Scott Nonnenberg bb1aa14a60 Refine Last Indicator Visuals
FREEBIE
8 years ago
Ikarulus ec3278ca3a add message length warning for android clients 8 years ago
Unknown 42608849bd Update CSS 8 years ago
Unknown d79ed69c21 Forgot & 8 years ago
Unknown 235ac03775 Hover-effect for new messages 8 years ago
Unknown 6f0de2cd72 Effect for Android-dark theme 8 years ago
Unknown 416359d4ad Add scroll-down-button hover-effect
Normal Android & iOS Theme
8 years ago
Ikarulus 752ebde7ff add hover event 8 years ago
Ikarulus fcbf569317 changes due to feedback 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
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
8 years ago
Ivan Markin 931441a057 Fix duplicate x icon (cancel) on active search field.
Fixes #1136.
// FREEBIE
8 years ago
Scott Nonnenberg 1839efd535 Move margin-top back to inner last seen indicator element
FREEBIE
8 years ago
lilia 681418cf6b Restyle last seen indicator
Add horizontal line behind text.

// FREEBIE
8 years ago
lilia 4921ef1b9d Tweak scroll to bottom bottom color
And add drop shadow

// FREEBIE
8 years ago
Scott Nonnenberg 4c7bfbe9ff Scroll down button: when scrolled up, or new non-visible message
FREEBIE
8 years ago
Scott Nonnenberg f6c62e4822 Android: Make last seen indicator margin consistent top/bottom
FREEBIE
8 years ago
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
8 years ago
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
8 years ago
lilia 56d1ce75ac Enable voice notes
And fix recorder background color in dark theme

// FREEBIE
8 years ago
Scott Nonnenberg 423a0fef67 Jumbomoji support matching Android support
FREEBIE
8 years ago
Scott Nonnenberg e7f41be464 Change android/android-dark file attachments to be on-theme
FREEBIE
8 years ago
Scott Nonnenberg 42195acfb1 Reduce empty space to the left of the larger file icon
FREEBIE
8 years ago
Scott Nonnenberg ae6e6da44b Change iOS file attachment bubbles to be on-theme
FREEBIE
8 years ago
Scott Nonnenberg cd1569e57a Android themes: Add space between file attachment, message text
FREEBIE
8 years ago
Scott Nonnenberg ee00ad0e15 File attachments: show file size, bold filename, make icon bigger
FREEBIE
8 years ago
lilia 935941e31e Brighten dark theme microphone icon 8 years ago
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
8 years ago
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
8 years ago
lilia 5d1e770307 Tweak network status styles
Remove inline styles
Use flexbox in the left pane

// FREEBIE
8 years ago
Sam Vevang ed4991974b set up a new view for displaying the network status
// FREEBIE
8 years ago
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.
8 years ago
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
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 c9939c8da8 Moving the error badge to the right corner in ios theme
// FREEBIE
8 years ago
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.
8 years ago
Ikarulus 59c684db8a Removes orange borders glitch (visible in dark design)
FREEBIE
8 years ago
Ikarulus bb5ebf39bd Changed debug log color in dark theme
Fixes #990
8 years ago
lilia 33dc9ca3a3 Make dark theme links lighter and less saturated
10% lighter and 10% lower saturation than traditional signal blue
8 years ago
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.
8 years ago
lilia 09b582bb2b Darken material colors in dark theme
Dark theme uses material colors with value 700 from
https://material.google.com/style/color.html
8 years ago
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.
8 years ago
Ikarulus 53cd3af78b Added a dark theme
I added a dark theme in order to solve #328.
This may fix #328 at least partially.
8 years ago
lilia 35270dbbb4 Use timeout-based animation for hourglasses
CSS animations are convenient but costly if you have hundreds of them.

Fixes #945
9 years ago
lilia 9c00a27081 Bump video min-width to include all controls
Fixes #960
9 years ago
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.
9 years ago
lilia e47868129e Remove unneeded rule
No longer needed thanks to previous commit.
9 years ago
lilia d5431a942f Simplify and correct message metadata alignment
Match left/right adjustment on Android.
Incoming to the left, outgoing to the right.
9 years ago
lilia 657fa2725f Adjust hourglass vertical alignment 9 years ago
lilia d6f714defc Improve capitalization consistency in menus
Android uses sentence case. iOS uses title case.
9 years ago
lilia dddeed8e8f Split up themes into separate files 9 years ago
lilia 83d285e4ab Fix style for qr code 9 years ago
lilia 790407d42e Add qr codes 9 years ago
lilia 7fe708d195 Insert keychange advisories
On click, these open a verification panel for the relevant contact,
within this conversation.

// FREEBIE
9 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 e809a0cf8b Breakout timer rendering into its own view
Make width and height constant.
9 years ago
lilia bd713352e3 Hourglass can start at any percentage
This breaks the css-purity of our mixin but is necessary in order to
apply the initial offset of the hourglass animation dynamically, since
jquery can't manipulate arbitrary css on psuedo elements.
9 years ago
lilia 5f92ccd524 Render animated hourglass when messages are expiring 9 years ago
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.
9 years ago
lilia 2fec5ee867 Fix text wrapping on long urls in ios theme
// FREEBIE
9 years ago
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
9 years ago
lilia 7ed6a1c4f8 Fix sender name color on android
// FREEBIE
9 years ago
lilia 1afe50b1db Make contact sync button quieter
// FREEBIE
9 years ago
lilia d7b6e7c26b Make group updates and other control messages selectable
// FREEBIE
9 years ago
lilia ab0083f341 Simplify invert-text-color mixin
// FREEBIE
9 years ago
lilia 43ccb90a92 Fix size of microphone icon
// FREEBIE
9 years ago
lilia 9f034fb698 Fix padding on key-conflicts
Error message contents need padding too.
Also make control messages and error message text selectable.

// FREEBIE
9 years ago
lilia 4652c2cff3 Fix selection style
// FREEBIE
9 years ago
lilia f918142742 Fix bubble selection style and toast z-index
// 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 f042378a37 Upgrade emoji support and switch to apple emoji
Use emojijs for replacing unicode with image tags for display. We were
already using it to replace colons with unicode. Additionally it has
a companion data repo that is kept up to date with images from all
the common image sets.

// FREEBIE
9 years ago
lilia 262f9d135f Add subtle border to ios attachments
// FREEBIE
9 years ago
lilia 6d0a535f4a iOS bubble tails
// 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 6e2ca331a3 Fix ios control messages
i.e., session reset messages.

// FREEBIE
9 years ago
lilia 6c05a71424 Tune up ios bubble style
// FREEBIE
9 years ago
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
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
lilia 9fa7e7f462 Remove unused view
// FREEBIE
9 years ago
lilia 4f46a164ba Add voice notes
// FREEBIE
9 years ago
bitim 1a0d2595da Committing corresponding changes to the scss files 9 years ago
bitim a1eccc2c49 Better RTL languages support:
- Fixed text alignment in RTL messages.
- Added support for search box.
- Added support for conversation name.
- Added support for contact name.
- Added support for last message timestamp and last message preview.

//FREEBIE
9 years ago
lilia 61e7b685e6 Make welcome screen prettier
// FREEBIE
9 years ago
lilia c1b8ff9e54 Fix _lightbox.scss
// FREEBIE
9 years ago
lilia 9091233950 Open images in a lightbox
Adds file-write permission for saving to disk from lightbox.

Fixes #810

// FREEBIE
9 years ago
lilia f34f6eedef Add min-width on video elements
Such that all the player controls are visible.

Fixes #782

// FREEBIE
9 years ago
lilia f131505d28 Display numbers in group member list
// FREEBIE
9 years ago
lilia 8e1d884a10 Add button for re-importing contacts from phone
Add a section under settings for performing a contact sync from your
mobile device. This just re-runs the same import operation that occurs
at install/link time.

// FREEBIE
9 years ago
lilia dea8983235 Error icons only use pointer-cursor when clickable
// FREEBIE
9 years ago
lilia 58c3fe047e Make error messages clickable
// FREEBIE
9 years ago
lilia 0d47a04815 Remove unused style
// FREEBIE
9 years ago
lilia 3217f2c0b6 Hide unregistered user errors in groups
// FREEBIE
9 years ago
lilia b6f785737c Restyle error icons, move them outside the bubble 9 years ago
lilia b5ddd41a5e Fix error icon
// FREEBIE
9 years ago
lilia d5dfffd9da Darken the scrollbar on hover
// FREEBIE
9 years ago
lilia 8200780fc2 Don't let timestamps wrap
// FREEBIE
9 years ago
lilia ba22151a31 Unpad message-container on message detail screen
// FREEBIE
9 years ago
lilia 826d4c4301 Add magnifying glass to search field // Fixes #737
// 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 544a346b10 Remove unused file, stale comments
// FREEBIE
9 years ago
lilia fe62d86d37 Move mixins to a separate file
// FREEBIE
9 years ago
lilia 1a06ac6ead Update install copy
// FREEBIE
9 years ago
lilia a81ab2ca6b Apply paperclip hover state on focus
// FREEBIE
9 years ago
lilia 28c602ab85 Use button for file input / paperclip
// FREEBIE
9 years ago
lilia 4bd266521a Apply button hover effect on focus as well
// FREEBIE
9 years ago
lilia b5a399dc55 Fix up contact list height off by 4px
Add some variables so we can actually compute this height instead of
hard coding it.

// 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 6faed3d9d7 Remove unused style
// FREEBIE
9 years ago
lilia 4f57dff1e6 Use svg for paperclip icon
// FREEBIE
9 years ago
lilia 3488e86190 Remove background color from new contacts
// 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 6a9ec073c6 Decrease bubble radius
// 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 c3a7766dd4 Use normal font size in search bar
Also update placeholder copy to be consistent with Android.

// FREEBIE
9 years ago
lilia d081b301d8 Clean up search outline
// 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 3d34cdcc0c Fix border-color on inactive conversation header
// FREEBIE
9 years ago
lilia 1b6eda6a8d Tighten spacing between bubbles
// FREEBIE
9 years ago
lilia 6c35f2a010 Clean up timestamp/status alignment
// FREEBIE
9 years ago
lilia 512c5bf739 Incoming bubbles have sender's color background
// FREEBIE
9 years ago
lilia 4060221b9c Make panel scrollbar track persistent
The bar is effectively invisible, but having it present means that we
don't see a jarring change in width when the content expands into the
overflow zone and triggers the scrollbar to suddenly appear.

// FREEBIE
9 years ago
lilia 1e3e730d88 Consolidate panel container styling
Special case the main panel because it is super speshul.

// FREEBIE
9 years ago
lilia 6fe9c3f964 Nest key verification inside conflict dialogs
// FREEBIE
9 years ago
lilia 9f0bcf6ae7 Add top padding to panel containers
// FREEBIE
9 years ago
lilia af1b7552f4 Fix oddly shaped disconnected icon
// FREEBIE
9 years ago
lilia 3901bcb8df Style resend button as an inline link
For messages that failed to send due to network errors, this change
allows retrying them directly from the main conversation view rather
than only from the message detail view.

// FREEBIE
9 years ago
lilia c48484e04f Add padding to right of conversation input
// FREEBIE
9 years ago
lilia 2e7c7ce0cc Move back button to the left
// FREEBIE
9 years ago
lilia 2c4d2b150e Fix welcome text centering
// FREEBIE
9 years ago
lilia d24eaa655a Tweak styles on key verification view
// 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 3e103ffde2 Add x padding on message detail container
// 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 dd943163fe Increase message list padding
// 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 b094607e0d Highlight bottom bar when focused
// 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 7310afd1b4 Replace message list loading spinner with bar
// FREEBIE
9 years ago
lilia 647c2761e0 Move restart button into global menu
// 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 34d50f94a9 Make window unscrollable // Fixes #692
// 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 33fde3d4e7 Dedupe modal styles
// FREEBIE
9 years ago
lilia a3c6061480 Add Notification Settings
Fixes #471

// FREEBIE
9 years ago
lilia 4ab2e25df6 Refactor Contact and Conflict views
Untangle these two views into their component parts, consolidating all
the key conflict logic in the key conflict view. Contact view now simply
renders basic contact info and miscellaneous errors but not conflicts or
message errors.

// FREEBIE
9 years ago
lilia f221921127 Tweak conflict style
// FREEBIE
9 years ago
lilia 28c763992a Move error indicators on message bubbles
// FREEBIE
9 years ago