Commit graph

52 commits

Author SHA1 Message Date
Scott Nonnenberg
8c4d90df07 Send long text as an attachment instead of inline
Remove Android length warning

Handle incoming long message attachments

Show long download pending status in message bubble

Fix the width of the smallest spinner

Remove Android length warning from HTML templates
2019-03-14 17:30:46 -07:00
Scott Nonnenberg
f5af063191 Improve spinner colors on top of medium-brightness backgrounds 2019-02-20 16:40:35 -08:00
Scott Nonnenberg
1d2c3ae23c Download attachments in separate queue from message processing 2019-02-12 16:34:21 -08:00
Scott Nonnenberg
cba47668cd Increase contrast of typing indicator in iOS theme 2019-01-14 17:40:31 -08:00
Scott Nonnenberg
7d9711ba65 Restore iOS-specific theme; colors on left in android theme 2018-10-11 11:42:18 -07:00
Scott Nonnenberg
10c53bddb0 Move to new colors, switch incoming/outgoing colors 2018-10-01 18:18:37 -07:00
Scott Nonnenberg
bae4cecd22 iOS theme: higher visibility for embedded contact text 2018-09-06 13:36:32 -07:00
Scott Nonnenberg
006700f9a2 Properly style countdown icon in iOS light/dark themes 2018-08-16 16:55:55 -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
a247ffe5cf When iOS device has been linked, use iOS color scheme 2018-08-15 11:22:45 -07:00
Scott Nonnenberg
fc5c52fbdf Remove iOS theme in favor of plain light/dark themes 2018-07-17 15:45:40 -07:00
Scott Nonnenberg
7cebeb20f5
iOS theme: Links in quotes now blue (not white) for visibility (#2435) 2018-06-14 15:18:08 -07:00
Scott Nonnenberg
202f5d5b7a Update contact bubbles for ios theme 2018-05-07 19:30:50 -07:00
Daniel Gasienica
557693e14c Prettier: Format all stylesheets 2018-05-04 16:32:08 -04:00
Daniel Gasienica
55569adfb0 Fix media gallery layout in iOS theme 2018-04-27 16:31:43 -04:00
Scott Nonnenberg
7038202a1a
Fix rendering issue with iOS quote preview (in composition mode) 2018-04-25 11:51:30 -07:00
Scott Nonnenberg
43ed2c67e1
Add border-radius to iOS quoted-message to fix MacOS render bug 2018-04-24 14:08:42 -07:00
Scott Nonnenberg
6599535cbb
Clear border-radius at bottom of quote in iOS theme 2018-04-23 16:37:28 -07:00
Scott Nonnenberg
bd88407b78
iOS theme: Permanant background to attachment part of bubble
(this is to handle a quote making bubble wider, but a narrow image)
2018-04-20 16:02:33 -07:00
Scott Nonnenberg
770410ee88
Remove borders that didn't render well
Android: The gray border around the quote didn't interact well with the
image, which needed to overlap the border. For now we'll just remove the
border.

Also made the thumbnail image 2px bigger because I noticed that in some
cases there was a partial-pixel space below the image (where the rest of
the quote was making the container bigger).

iOS: The gray border around outgoing quotes was fading into the
background gray color, making the quote look a tiny bit more narrow than
the main message. Removed the border.
2018-04-20 15:24:02 -07:00
Scott Nonnenberg
37cac717cb
Use fit: cover for non-square thumbnails, better movie icon
Also: Match Android's X button in the quote composition area
2018-04-20 15:23:55 -07:00
Scott Nonnenberg
c71dcf0139
Show current quoted message above composition field
Note that substantial changes will be required for the updated Android
mockups, putting the quotation into the text box next to the attachment
preview.
2018-04-20 15:23:51 -07:00
Scott Nonnenberg
d29162f3b6
CSS Refactor: Pull quote CSS out from parent classes
This is to prepare for it to be shown in the message composition area.
2018-04-20 15:23:50 -07:00
Scott Nonnenberg
26e4e97592
Tighten up CSS
- Remove extra padding at top of Android bubbles, via sibling selector
- Don't include .attachments, .quote-wrapper, .content in bubble unless
  we actually need them. This allows for sibling selectors.
- This is a different technique for adding the ReactWrapperView for
  quotes - it is now appended to the DOM instead of attaching to
  something already in the DOM. This allows us to use .remove(), so it's
  a bit cleaner.
- Users of ReactWrapperView can now specify tagName and className
2018-04-20 15:23:47 -07:00
Scott Nonnenberg
6a4acc813c
iOS: Center images in bubble, shrink bubble down to image size 2018-04-20 15:23:46 -07:00
Scott Nonnenberg
bb9859ca61
Make iOS quote theming apply in the message detail screen 2018-04-16 12:30:28 -07:00
Scott Nonnenberg
d8d803d36d
Center and limit the size of non-square thumbnails in quotes 2018-04-13 18:10:52 -07:00
Scott Nonnenberg
3bbbf65a6b
Fix iOS: tail, blue partial border, extra attachment space
Turns out that display: inline on the img tag resulted in a mysterious
3px of space added below it.
2018-04-13 18:10:52 -07:00
Scott Nonnenberg
6413e75f82
iOS: Handle portrait image that doesn't fill message box
It would have rounded corners inside of the bubble, which is not what
we want. This makes the bubble itself have the rounded corners, and then
it cuts off anything that would extend past its edges.
2018-04-13 18:10:51 -07:00
Scott Nonnenberg
f255cbcbe3
Move to white background for ios replies, hairline bottom border 2018-04-13 18:10:50 -07:00
Scott Nonnenberg
557ea55531
Quotes/iOS: Fix bug where large quote content would smoosh icon 2018-04-13 18:10:50 -07:00
Scott Nonnenberg
087dd0f758
Support for iOS theme 2018-04-13 18:10:49 -07:00
Scott Nonnenberg
ae043bf239
In iOS theme, join attachment bubble with caption bubble 2018-04-13 18:05:42 -07:00
Daniel Gasienica
696b23a3e0 Ensure first message is not cut off in iOS theme
Without this, the user couldn’t scroll all the way up and  the first message was
cut off as panel extended below header.
2018-03-20 14:31:43 -04:00
Daniel Gasienica
685f05a99d Ensure conversation panel fills screen vertically
Required addition to the following change:
ef041b29d0
2018-03-19 18:10:07 -04:00
Scott Nonnenberg
ef041b29d0
Remove scrollbar when placeholder is showning when in iOS theme 2018-03-14 14:42:15 -07:00
Scott Nonnenberg
649248a537
Fix paths for all newly-added icons
FREEBIE
2017-09-14 16:53:49 -07:00
lilia
a2b2bd4bf3
Fix relative paths
// FREEBIE
2017-09-14 16:53:46 -07:00
Scott Nonnenberg
293be5d9f6 Truncate long filenames in attachments
The :before technique for adding the icon was removed, because it
resulted in some rendering issues when the layout pressure in the
message bubble got too high - you would see a partial icon. This
solution shrinks the icon a bit when the filename wants to expand to
take its space.

The iOS bubble width also needed special care to ensure it didn't expand
to accommodate the very wide filenames. Beyond that, overflow: hidden
needed to be applied at several levels to make everything behave as
expected.

FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
47c5142a83 Replace unicode check with new svg icon
A good bit of CSS was required to keep the text color changing along
with the text it is nestled within.

Also: took this opportunity to increase the contrast of the number and
verified section right under the contact name in the group members view.

FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
243cbd8123 Confirmaton on send, banner when 'unverified'
Not yet using the new APIs, but ready to. Still to do:
- Send sync messages on trust decisions
- Respond to received trust decision sync messages
- Show trust decisions in the conversation history
- In that rare situation where a sent message ends up with a key error
  make it easy to retry the send.

FREEBIE
2017-08-04 12:03:25 -07:00
Scott Nonnenberg
0a07c8ad2c Fix attachment styles in iOS theme
FREEBIE
2017-06-16 11:21:11 -07:00
Scott Nonnenberg
0d722a3186 Last seen indicator visual refresh
- Last seen indicator now spans the full conversation, with subtle
shadow highlights above and below
- Scrollbars now overlap the content of the conversation, allowing last
seen indicator to touch the right edge of the window.
- The iOS and Android conversation background is now #eee instead of
white, which meant that the outgoing messages (Android) and incoming
messages (iOS) had to be updated for contrast. They now have white
backgrounds.
- Similarly, the scroll down button needed more contrast, and its
background is now white in light themes.

FREEBIE
2017-06-01 15:19:25 -07:00
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
Scott Nonnenberg
ae6e6da44b Change iOS file attachment bubbles to be on-theme
FREEBIE
2017-05-09 15:14:20 -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
Ikarulus
c9939c8da8 Moving the error badge to the right corner in ios theme
// FREEBIE
2017-02-06 18:42:30 -08: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