Commit graph

78 commits

Author SHA1 Message Date
Scott Nonnenberg
f255cbcbe3
Move to white background for ios replies, hairline bottom border 2018-04-13 18:10:50 -07:00
Scott Nonnenberg
21bf02c94d
Fixed examples in Quote.md, rough Android visuals 2018-04-13 18:05:44 -07:00
lilia
859d49b3f4
Use relative paths
// FREEBIE
2017-09-14 16:53:34 -07:00
Lilia
5d8e8459b3 Fix bouncy bubble widths (#1447)
Max-width on a message bubble should be about 30em for the good readability.
However, when the window isn't wide enough, bubbles must be further limited.

The transition should happen around the point that these two rules intersect,
but it was kicking in a little late, which caused the bubbles to jump from wider
to shorter as you widened the window past a certain point. This change adjusts
the threshold for smoother and more consistent bubble resizing.

The variable name $big-avatar-min-width is an artifact of a past design and was
previously used in multiple places, but it no longer makes sense in this context
so it has been discarded.

// FREEBIE
2017-09-07 09:57:33 -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
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
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
41e4154d60 Make font sizes relative
So it's easier to adjust them globally.

// FREEBIE
2016-08-24 16:08:29 -07:00
lilia
4f46a164ba Add voice notes
// FREEBIE
2016-08-23 16:16:31 -07:00
lilia
b6f785737c Restyle error icons, move them outside the bubble 2016-05-25 20:32:00 -07:00
lilia
fe62d86d37 Move mixins to a separate file
// FREEBIE
2016-04-09 00:17:08 -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
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
234f937bc7 Conversation subscreens share a header
// FREEBIE
2016-03-21 15:37:53 -07: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
2fc78ddd7d Fix scroll position jumping when images load
Messages with images or media were causing the scroll position to jump
around when they loaded, because rendering them changed the height of their
elements from 0 to full-height sometime after they were inserted into
the DOM.

Now when rendering attachments, we wait for them to load so they can
render at full height immediately, then warn our parent message list
before and after a potential height change, so the scroll position can
be saved and reset.

// FREEBIE
2015-11-15 15:32:35 -08:00
lilia
16dc7abe69 Display unreadCount badges in conversation list
// FREEBIE
2015-11-09 16:59:52 -08:00
lilia
389b9a026d Initial restyle
Added background gradient and restyled conversation elements as floating
panels and cards.

// FREEBIE
2015-10-16 18:14:50 -07:00
lilia
7d481fdc21 Style tweaks for new window chrome 2015-05-21 18:19:09 -07:00
lilia
13ce354ab8 Registration UX improvements
Add some nice modal dialogs instead of confirmation alerts.
2015-03-26 15:20:17 -07:00
lilia
7231bcd5ce Flesh out font faces 2015-02-18 16:25:39 -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
ec01d33b50 Reorganize stylesheets and global styles
Simplifies the grunt watch task for sass. Renames sass partials with
leading underscores. Flattens stylesheet directory. The only remaining
raw css file is options.css.

Move globally-relevant styles to _global. Shrink overall font size.
2015-02-11 17:38:03 -08:00
Riley Shaw
9071d98395 Update styles to material design to match Android client (first pass) 2015-02-11 17:37:56 -08:00