Commit graph

392 commits

Author SHA1 Message Date
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
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
lilia
657fa2725f Adjust hourglass vertical alignment 2016-10-11 22:52:40 +09:00
lilia
d6f714defc Improve capitalization consistency in menus
Android uses sentence case. iOS uses title case.
2016-10-08 11:17:08 +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
1fe90ecdcb Add frontend for safety numbers approval setting
Adds the checkbox under settings.

// FREEBIE
2016-10-05 19:10:20 +09:00
lilia
2b2c6ab040 Frontend for timer updates and timer indicator 2016-09-29 16:17:01 -07:00
lilia
8f76548a53 Invert button styles
Make buttons dark by default, and let the android theme styles apply the
inversion.
2016-09-28 17:20:03 -07: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
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.
2016-09-28 17:20:02 -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
2fec5ee867 Fix text wrapping on long urls in ios theme
// FREEBIE
2016-09-15 15:40:05 -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
7ed6a1c4f8 Fix sender name color on android
// FREEBIE
2016-09-08 17:41:49 -07:00
lilia
1afe50b1db Make contact sync button quieter
// FREEBIE
2016-09-08 12:05:48 -07:00
lilia
d7b6e7c26b Make group updates and other control messages selectable
// FREEBIE
2016-09-07 13:04:45 -07:00
lilia
ab0083f341 Simplify invert-text-color mixin
// FREEBIE
2016-09-07 13:04:44 -07:00
lilia
43ccb90a92 Fix size of microphone icon
// FREEBIE
2016-09-03 14:38:22 -07:00
lilia
9f034fb698 Fix padding on key-conflicts
Error message contents need padding too.
Also make control messages and error message text selectable.

// FREEBIE
2016-09-01 17:41:41 -07:00
lilia
4652c2cff3 Fix selection style
// FREEBIE
2016-09-01 15:56:22 -07:00
lilia
f918142742 Fix bubble selection style and toast z-index
// FREEBIE
2016-09-01 15:13:27 -07:00
lilia
1c89142752 Customize emoji conversion
Use image tags with :emoji: in a title attribute for an optimal
copy/paste ux.

// FREEBIE
2016-09-01 12:55:23 -07:00
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
2016-09-01 11:51:53 -07:00
lilia
262f9d135f Add subtle border to ios attachments
// FREEBIE
2016-09-01 11:51:06 -07:00
lilia
6d0a535f4a iOS bubble tails
// FREEBIE
2016-09-01 11:51:06 -07:00
lilia
65cb7c0e9c Cleanup colors and focus/active input states
// FREEBIE
2016-08-31 15:04:02 -07:00
lilia
b5191e78c3 More themeing
Restyle message input and welcome screen
Cleanup search, headers

// FREEBIE
2016-08-30 18:31:03 -07:00
lilia
2e3db91b30 Theme-ify header colors and styles
Remove the Signal banner and restyle the search field for ios theme.

// FREEBIE
2016-08-30 18:31:02 -07:00
lilia
6e2ca331a3 Fix ios control messages
i.e., session reset messages.

// FREEBIE
2016-08-30 18:31: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
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
2016-08-24 16:47:39 -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
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
2016-07-14 11:13:00 -07:00
lilia
61e7b685e6 Make welcome screen prettier
// FREEBIE
2016-07-14 11:09:08 -07:00
lilia
9091233950 Open images in a lightbox
Adds file-write permission for saving to disk from lightbox.

Fixes #810

// FREEBIE
2016-06-20 11:55:23 -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
f131505d28 Display numbers in group member list
// FREEBIE
2016-06-17 15:30:41 -07:00
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
2016-06-16 16:43:07 -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
d5dfffd9da Darken the scrollbar on hover
// FREEBIE
2016-04-21 12:06:40 -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
lilia
826d4c4301 Add magnifying glass to search field // Fixes #737
// FREEBIE
2016-04-14 11:57:56 -07:00
lilia
531d1701ef Move debug log styles to their own file
// FREEBIE
2016-04-09 21:09:16 -07:00
lilia
f3de290f7c Make debug log link focusable/selectable
Add button to open in a new tab. Stye as input group.

// FREEBIE
2016-04-09 20:53:39 -07:00
lilia
a81ab2ca6b Apply paperclip hover state on focus
// FREEBIE
2016-04-07 13:26:02 -07:00
lilia
28c602ab85 Use button for file input / paperclip
// FREEBIE
2016-04-07 12:26:21 -07:00
lilia
4bd266521a Apply button hover effect on focus as well
// FREEBIE
2016-04-07 12:23:12 -07:00
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
2016-04-06 17:37:37 -07:00
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
2016-04-03 21:11:50 -07:00
lilia
e5748b974f Harmonize x/close buttons
// FREEBIE
2016-04-01 15:15:02 -07:00
lilia
6faed3d9d7 Remove unused style
// FREEBIE
2016-04-01 14:54:31 -07:00
lilia
4f57dff1e6 Use svg for paperclip icon
// FREEBIE
2016-04-01 14:48:04 -07:00
lilia
3488e86190 Remove background color from new contacts
// FREEBIE
2016-04-01 14:24:47 -07:00