Commit Graph

179 Commits

Author SHA1 Message Date
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