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.
Handles the edge case where images in the Install steps can obscure the text below them at certain window dimensions.
In most cases, it's not possible to replicate this behavior due to minimum dimension settings in `chromium.js`. However, some window managers (such as i3) can ignore those settings, producing this bug.
This fix introduces a flexible, responsive layout to the Install steps, with the goal of keeping the action buttons in a consistent position while adapting the rest of the content to the remaining available space. The result is a clean, usable screen at any window size.
In the rare instance that a window's dimensions are less than that of the minimums set in `chromium.js`, scrollbars will appear to keep the smallest acceptable layout intact.
Potential side effects:
- Each `.step` element contains an`.inner` flexbox wrapper, which arranges its children in a column. The layout works best when each `flex-item` is an element that wraps the content inside of it. I think I accounted for all the possibilities on the Install screen, but any future `.step` items might want to keep that pattern in mind.
Resolves#1059
FREEBIE
Adding the class `.text-security` to the body element will (should) turn
all names, phone numbers, and message bodies into unreadable squares.
Nice to have when you want to screenshot without leaking too much info.
Note that emojis and images are not obscured.
This isn't fully baked or exposed as a feature. You have manually
inspect and tweak the DOM to enable it, but I leave it here for the
benefit of devs and other "frequent flyers" of our issue tracker.
// FREEBIE
* 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.
This breaks the css-purity of our mixin but is necessary in order to
apply the initial offset of the hourglass animation dynamically, since
jquery can't manipulate arbitrary css on psuedo elements.
When initialized, or when expiration-related attributes change, expiring
messages will set timers to self-destruct. On self-destruct they trigger
'expired' events so that frontend listeners can clean up any collections
and views referencing them.
At startup, load all messages pending expiration so they can start their
timers even if they haven't been loaded in the frontend yet.
Todo: Remove expired conversation snippets from the left pane.
Previously we only declared the message body as selectable, but Chrome's
implementation of user-select is a little quirky in that it allows
unselectable text to be copied if you select elements around it. Oddly
enough, styling the entire bubble contents as selectable, including the
timestamp, actually prevents chrome from copying the timestamp text when
it's not supposed to, i.e., when triple-clicking the message body.
Fixes#887
// FREEBIE
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
