Commit graph

237 commits

Author SHA1 Message Date
Scott Nonnenberg
8f3e3b7aaf Update to new design for avatars: individual/group icons/colors
And two initials.
2018-10-01 18:18:37 -07:00
Scott Nonnenberg
fedfbed304 Copy quoted message contents into quote on receipt
Also:
  - visually distinguish any reference we couldn't verify on receipt
  - show toast on quote click if we can't scroll to message
  - toast visuals redesigned to match rest of app
2018-08-15 14:58:55 -07:00
Scott Nonnenberg
e80857562a Disappearing messages: show 'disabled' instead of 'set to off' 2018-07-27 09:15:57 -07:00
Scott Nonnenberg
3c69886320 Finish new Message component, integrate into application
Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
  to show in conversation
- New MessageDetail react component
- New ConversationHeader react component
2018-07-17 15:58:07 -07:00
Scott Nonnenberg
dc11db92f9 New React component: Message
Also: Use react to render contects on the 'show group members' screen
2018-07-17 15:53:33 -07:00
Scott Nonnenberg
cfe0bd0e79 Move to npm for several dependencies
mustache
jQuery
underscore
backbone
mocha
chai
intl-tel-input
2018-05-23 16:26:48 -07:00
Scott Nonnenberg
47adbe4358 Minify new svg files 2018-05-08 09:37:27 -07:00
Scott Nonnenberg
41be7f126b Visuals for embedded contacts as well as contact detail screen 2018-05-07 19:09:55 -07:00
Daniel Gasienica
f0895af6dc Add right arrow SVG 2018-04-25 15:24:51 -04: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
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
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
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
383e02edc4
New section in settings screen, full-screen 'are you sure?' 2018-03-14 14:42:13 -07: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
Martino Pilia
7034d8759d Add badge for unread messages to the tray icon (#1934)
This commit adds a badge to the tray icon that displays the number of
unread messages, if there is any. It is implemented by providing
alternative versions of the icon, that replace the default image when a
message is received.

The badge is rendered graphically as a red circle containing the number
of unread messages. Since a different icon file is needed for each
possible number of unread messages, but this number is clearly
unbounded, only the numbers from 1 to 9 are provided. If there are 10 or
more unread messages, a single badge (depicted as "9+") is used.

Resolves #1917
2018-01-17 15:27:58 -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
c420c597f9 Remove images/emoji directory (#1485)
FREEBIE
2017-09-18 15:31:00 -07:00
lilia
3239e9664c
Switch to iPhone image in installer
// FREEBIE
2017-09-14 16:53:43 -07:00
lilia
7d47b53dc3
Generate icons with electron-icon-maker
Either icon-gen or local scaling of images was producing a corrupted and
glitchy .icns file. With this module, we need only provide a 1024px
image and it handles the scaling and generation of all other icon
assets.

// FREEBIE
2017-09-14 16:53:40 -07:00
lilia
32be90c728
Fix missing icons on linux
Move these to where the build expects them to be.

In theory electron-builder should generate these from a build/icon.icns
but that doesn't seem to be working.

// FREEBIE
2017-09-14 16:53:36 -07:00
lilia
a99890d254
Generate ico and icns from png
`npm run icon-gen` builds icon files from png files in the images
directory, outputting to build/icon.{ico,icns} (the expected location
for electron-builder).

// FREEBIE
2017-09-14 16:53:35 -07:00
Scott Nonnenberg
d462108e83 Replace warning icon with a smaller file so it scales down better
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
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
lilia
ca7fdc91b7 Remove error.png, unused since 53407918
// FREEBIE
2017-07-02 18:05:20 -10:00
Scott Nonnenberg
4c7bfbe9ff Scroll down button: when scrolled up, or new non-visible message
FREEBIE
2017-05-23 11:08:23 -07:00
Ivan Markin
a5831ef9f8 Replace unclear floppy image with down arrow as Save-As button 2017-05-16 10:53:30 -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
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
Sam Vevang
ed4991974b set up a new view for displaying the network status
// FREEBIE
2017-04-08 00:10:56 -07:00
hniestl
37fa5f1376 Update logo
This commit updates the logo at the 2nd step. Fixes #1111
2017-04-07 19:35:25 -07: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
lilia
4cd2c03687 Add clock svg style 2016-09-28 17:20:03 -07:00
lilia
5f92ccd524 Render animated hourglass when messages are expiring 2016-09-28 17:20:02 -07:00
lilia
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
4f46a164ba Add voice notes
// FREEBIE
2016-08-23 16:16:31 -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
b6f785737c Restyle error icons, move them outside the bubble 2016-05-25 20:32:00 -07:00
lilia
c961c4d5ac Add missing search icon
// FREEBIE
2016-04-14 14:06:15 -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
82ea537557 Remove unused image
// FREEBIE
2016-04-01 15:18:21 -07:00
lilia
4f57dff1e6 Use svg for paperclip icon
// FREEBIE
2016-04-01 14:48:04 -07:00
lilia
d8d34e7afc Icon upgrade
Also remove unused images.

// FREEBIE
2016-04-01 13:59:57 -07:00
lilia
512c5bf739 Incoming bubbles have sender's color background
// FREEBIE
2016-03-23 17:41:24 -07:00
lilia
9dc2405f2f Add bg color on default group avatar
// FREEBIE
2016-03-22 10:31:44 -07:00
lilia
0338cf92dd Add missing images
// FREEBIE
2016-03-21 18:46:13 -07:00
lilia
7215afb6c7 Resize paperclip.png
// FREEBIE
2015-12-13 15:46:46 -08:00
Jake McGinty
bbde528c2f Spiffed out icon
// FREEBIE
2015-12-10 10:36:15 -08:00
Jake McGinty
d914f4affe change attachment icon
// FREEBIE
2015-12-09 18:53:04 -08:00
lilia
cb98970094 Add missing image file
// FREEBIE
2015-12-06 20:56:56 -08:00
lilia
0d5291acad Replace sinewave with ellipse
Also make sure status indicator matches timestamp color.

Fixes #393

// FREEBIE
2015-11-08 14:50:34 -08:00
lilia
20901e69fb Better anti-aliasing on red error mark
// FREEBIE
2015-11-08 14:50:00 -08:00
lilia
d607996cf8 Fixes #394
👬 // FREEBIE
2015-11-07 23:24:29 -08:00
lilia
14cb6b58a2 Create install flow
* Refactor options.js into a view
* Break up install flow into a series of screens
* Remove bootstrap
* Make installer window static size, mostly to facilitate positioning

// FREEBIE
2015-11-05 13:29:26 -08:00
lilia
2e575bfb49 Add missing images
// FREEBIE
2015-10-28 14:02:26 -07:00
lilia
960754ef04 Restyle compose button
Move it to a tool bar at the top of the conversation list. This is also
where a search bar will live someday.

Fixes #357

// FREEBIE
2015-09-18 13:08:52 -07:00
lilia
43aaf541c1 Compose flow style tweaks 2015-08-31 16:09:05 -07:00
lilia
272d098e85 Make checkmark black // Fixes #338 2015-08-31 14:02:11 -07:00
lilia
50939d1851 Restyle conversation menu button 2015-08-31 13:59:12 -07:00
lilia
fbb50e6621 Change colors and backgrounds 2015-08-27 17:53:50 -07:00
lilia
7b6cb27f7f Tweak error icon 2015-07-14 13:39:37 -07:00
lilia
e86c40d3a8 Add transparent padding to 128px icon // Fixes #251
Per guidelines:
https://developer.chrome.com/webstore/images#icons

// FREEBIE
2015-07-10 13:54:32 -07:00
McLoo
1b8071f0bb Tweak app icons a bit
//FREEBIE
2015-06-29 14:47:45 +02:00
lilia
29360fea5c Fixes #275 default group image 2015-06-26 11:30:54 -07:00
lilia
d064b16b04 Switch to signal icon
Fixes #228
2015-05-28 11:23:59 -07:00
lilia
905e0f2e60 Remove weirdly sized icons
The 19 and 38 px versions were used when we had a browser extension (not
packaged app) with a browser action button, but no more.

The big one was never used.
2015-05-28 11:01:53 -07:00
lilia
7d481fdc21 Style tweaks for new window chrome 2015-05-21 18:19:09 -07:00
lilia
8da062f75c Resize icon to various resolutions
You want icon sizes? I got all the size you need.
2015-05-07 17:30:29 -07:00
lilia
5ffa265559 Revert "Popout inbox"
This reverts commit 31e7d285e3.

This seemed like a nice feature, but the popup bubble isn't very
conducive to nontrivial user inputs, e.g. file inputs.

Fixes #211
2015-03-23 12:19:32 -07:00
lilia
c526dbda5f Set up production build task
`grunt copy`

Closes #191
2015-03-19 18:34:56 -07:00
lilia
66fb673e6a Add missing error.png 2015-03-19 18:34:11 -07:00
lilia
db3d97b576 Move icon.png to /images 2015-03-19 18:34:11 -07:00
lilia
31e7d285e3 Popout inbox
Rather than opening the inbox in its own window, let it appear as a
browser action popup by default, but allow promotion to its own window
if requested.
2015-03-18 16:29:01 -07:00
lilia
69d5a6a33c Improve group update ui/ux
Promote group update to its own screen. Add typeahead contact selector
from new conversation view. Restyle to match android (more or less).

Closes #186
2015-03-13 17:33:02 -07:00
lilia
d20e23402d Refactor RecipientsInputView from NewConversationView
For reuse on group update screen.
2015-03-13 17:29:28 -07:00
lilia
fd6e2954f7 Curtail over-zealous websocket reconnects
Closes #173

Previously, in the event of a failed websocket auth, we would attempt to
reconnect once a second ad infinitum. This changeset ensures that we
only reconnect automatically if the socket closed 'normally' as
indicated by the code on the socket's CloseEvent. Otherwise, show a
'Websocket closed' error on the inbox view.

Ideally we would show a more contextual error (ie, 'Unauthorized'), but
unfortunately the actual server response code is not available to our
code. It can be observed in the console output from the background page,
but programmatically, we only receive the WebSocket CloseEvent codes
listed here:
https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes

The websocket error message is displayed by a normally-hidden but ever
present socket status element. Clicking this element will immediately
refresh the background page, which will try again to open the websocket
connection.
2015-03-09 16:04:26 -07:00
lilia
8ee282b1aa Restyle registration page
When first intalling, users will no longer be presented with the option
to register as a standalone client.

For developer convenience, the standalone form can still be found at
chrome-extension://.../register.html

Closes #159
2015-03-06 15:27:49 -08:00
lilia
ce5f6e41a8 Add missing images 2015-03-02 23:23:11 -08:00
lilia
eaf3d46c1f Make 'New Message' view match new title bar style
Make text blue and light weight. Update back button colors to match.
2015-02-12 13:21:15 -08:00
lilia
bffdaf9ceb Restyle menu icon 2015-02-11 17:38:03 -08:00
lilia
6d81011f6a Add back button to compose view 2015-02-11 17:38:00 -08:00
lilia
fedfdcdd7e Style elements for compose flow 2015-02-11 17:37:59 -08:00
lilia
8498d7ad1f Fixup conversation page styles and functionality
Render the entire conversation from a template, because some parts of it
must be rendered conditionally if it is a group vs private conversation.

Also apply some style fixes and restore lost functionality:
  * Make conversation title bar fixed.
  * Widens message bubbles.
  * Unhide message list.
  * Restore attachment rendering.
  * Restore message sending and attachment file selection.
  * Style attachments file input as a paperclip.
  * Style send button like on Android and make it a submit input.
2015-02-11 17:37:57 -08:00
lilia
987744cd79 Default avatars
Someday you'll be able to edit your avatar. Until then, put a bird on
it.
2014-10-29 16:05:51 -07:00
lilia
518bdb2056 with love from tyler 2014-07-27 11:36:03 -10:00