Commit graph

91 commits

Author SHA1 Message Date
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
1fe90ecdcb Add frontend for safety numbers approval setting
Adds the checkbox under settings.

// FREEBIE
2016-10-05 19:10:20 +09:00
lilia
1afe50b1db Make contact sync button quieter
// FREEBIE
2016-09-08 12:05:48 -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
41e4154d60 Make font sizes relative
So it's easier to adjust them globally.

// FREEBIE
2016-08-24 16:08:29 -07:00
lilia
61e7b685e6 Make welcome screen prettier
// FREEBIE
2016-07-14 11:09:08 -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
826d4c4301 Add magnifying glass to search field // Fixes #737
// FREEBIE
2016-04-14 11:57:56 -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
3488e86190 Remove background color from new contacts
// FREEBIE
2016-04-01 14:24:47 -07:00
lilia
6be7b765b2 Harmonize border radii
// FREEBIE
2016-04-01 14:24:47 -07:00
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
2016-04-01 14:24:41 -07:00
lilia
d8d34e7afc Icon upgrade
Also remove unused images.

// FREEBIE
2016-04-01 13:59:57 -07:00
lilia
01ca6b7c3a Vertically center contact names
For contacts/conversations without any messages, center their names
vertically in the conversation list element.

// FREEBIE
2016-04-01 11:37:25 -07:00
lilia
c3a7766dd4 Use normal font size in search bar
Also update placeholder copy to be consistent with Android.

// FREEBIE
2016-04-01 10:37:50 -07:00
lilia
d081b301d8 Clean up search outline
// FREEBIE
2016-03-27 15:30:10 -07:00
lilia
76652c2622 Update style and copy on key changes
// FREEBIE
2016-03-24 13:20:50 -07:00
lilia
3d34cdcc0c Fix border-color on inactive conversation header
// FREEBIE
2016-03-23 17:56:22 -07:00
lilia
512c5bf739 Incoming bubbles have sender's color background
// FREEBIE
2016-03-23 17:41:24 -07:00
lilia
1e3e730d88 Consolidate panel container styling
Special case the main panel because it is super speshul.

// FREEBIE
2016-03-23 15:05:38 -07:00
lilia
af1b7552f4 Fix oddly shaped disconnected icon
// FREEBIE
2016-03-22 15:38:22 -07:00
lilia
2c4d2b150e Fix welcome text centering
// FREEBIE
2016-03-22 10:34:54 -07:00
lilia
234f937bc7 Conversation subscreens share a header
// FREEBIE
2016-03-21 15:37:53 -07:00
lilia
f81d882213 Apply 0.5s transition on header colors
// FREEBIE
2016-03-20 23:46:31 -07:00
lilia
f72c1dff13 Adjust font colors
// FREEBIE
2016-03-20 23:36:45 -07:00
lilia
8bb8ed8151 Change left pane header color
// FREEBIE
2016-03-20 21:01:45 -07:00
lilia
928c19a476 Tighten up left pane layout style
// FREEBIE
2016-03-18 18:02:43 -07:00
lilia
647c2761e0 Move restart button into global menu
// FREEBIE
2016-03-18 16:21:55 -07:00
lilia
c16356084d Align header buttons and touch up styles
// FREEBIE
2016-03-18 15:54:40 -07:00
lilia
18a5ce8e54 Restyle conversation panel
// FREEBIE
2016-03-18 13:09:45 -07:00
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
2016-03-18 11:30:27 -07:00
lilia
34d50f94a9 Make window unscrollable // Fixes #692
// FREEBIE
2016-02-22 10:47:48 -08:00
lilia
636c0f2a60 Put debug log in a modal
Also dedupe close-button style

// FREEBIE
2016-02-19 17:34:59 -08:00
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
2016-02-19 17:34:59 -08:00
lilia
a3c6061480 Add Notification Settings
Fixes #471

// FREEBIE
2016-02-18 12:22:43 -08:00
Sam Lanning
85d6bc7533 Fix avatar floating over debug log
bug introduced in: 0569d4c

This z-index property was previously to ensure the avatar floated above message
bubbles, but the message bubbles always have enough left margin so this
property is not needed.

fixes #650

// FREEBIE
2016-01-29 14:49:11 +00:00
Sam Lanning
0569d4c889 Replace conversation panel js resizing with flex styling.
// FREEBIE
2016-01-25 14:37:03 -08:00
Sam Lanning
d091c6ddda Added more gray color variables (to compensate for inconsistent compiling)
// FREEBIE
2016-01-25 14:33:38 -08:00
lilia
61a57a753b Provide user feedback when number is invalid
While typing a number, the new contact element is faded out. When the
number becomes valid it is opaque. If the element is clicked while
invalid, it displays 'Invalid number' and waits for the input to change
again. A new conversation is only opened if the number is valid.

// FREEBIE
2015-12-09 18:58:52 -08:00
mad-de
97d8d11ae0 Set search-cancel-pointer to hand
Nicer looking and more intuitive

// FREEBIE
2015-12-07 15:18:57 -08:00
lilia
ae686b3984 Style search clear element
// FREEBIE
2015-12-06 20:46:05 -08:00
lilia
77623dde87 Tweak breakpoint width for conversation avatar
This is the threshold window size where we toggle between large and
small avatar display in the conversation header.

// FREEBIE
2015-11-29 18:42:04 -08:00
lilia
8d214b73d9 Render conversation placeholder hint in place
// FREEBIE
2015-11-28 14:42:25 -08:00
lilia
891a5e54ad Add hint for users with no groups or contacts
If you have no contacts or groups, display a hint about phone numbers.

// FREEBIE
2015-11-27 22:26:56 -08:00
lilia
152f59cc95 Restyle first run hint
// FREEBIE
2015-11-27 22:26:55 -08:00
lilia
d4e0c11ebc Show a hint on startup if the inbox is empty
Fixes #403

// FREEBIE
2015-11-27 11:36:46 -08:00
lilia
987c067355 Remove unused styles
// FREEBIE
2015-11-15 14:56:57 -08:00
lilia
d8318ba9bd Remove the gradient
// FREEBIE
2015-11-12 12:58:14 -08:00
lilia
a8e02a94be Tweak selected state
// FREEBIE
2015-11-12 12:10:54 -08:00