mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2025-12-24 12:19:41 +00:00
ef4b4da2a3
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.