From ef4b4da2a35c805172891152cefd8d73cb05e116 Mon Sep 17 00:00:00 2001 From: alecglassford Date: Thu, 30 Mar 2017 12:00:43 -0700 Subject: [PATCH] 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. --- js/views/inbox_view.js | 6 ++++++ stylesheets/_index.scss | 17 ++++++++++++++--- stylesheets/_ios.scss | 5 ++++- stylesheets/_variables.scss | 4 ++++ stylesheets/android-dark.scss | 3 +++ stylesheets/manifest.css | 13 ++++++++++++- 6 files changed, 43 insertions(+), 5 deletions(-) diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 9247b0cff172..a27bf4f8d187 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -197,6 +197,12 @@ var input = this.$('input.search'); if (input.val().length > 0) { input.addClass('active'); + var textDir = window.getComputedStyle(input[0]).direction; + if (textDir === 'ltr') { + input.removeClass('rtl').addClass('ltr'); + } else if (textDir === 'rtl') { + input.removeClass('ltr').addClass('rtl'); + } } else { input.removeClass('active'); } diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 5fefe13d60c9..ee4515c9888f 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -104,7 +104,7 @@ input.search { border: none; - padding: 0 10px 0 65px; + padding: 0 $search-padding-right 0 $search-padding-left; margin: 0; outline: 0; height: $search-height; @@ -117,13 +117,24 @@ input.search { &.active { outline: solid 1px $blue; + background-image: url('/images/x.svg'); + background-repeat: no-repeat; + background-size: $search-x-size; + + &.ltr { + background-position : right $search-padding-right center; + } + + &.rtl { + background-position : left $search-padding-left center; + } } &::-webkit-search-cancel-button { -webkit-appearance: none; display: block; - width: 16px; - height: 16px; + width: $search-x-size; + height: $search-x-size; background: url('/images/x.svg') no-repeat center; background-size: cover; } diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss index 6967fc9d1896..a6b84e4c2625 100644 --- a/stylesheets/_ios.scss +++ b/stylesheets/_ios.scss @@ -49,9 +49,12 @@ $ios-border-color: rgba(0,0,0,0.1); border-radius: 5px; width: 220px; height: 34px; - padding-left: 30px; + padding-left: $search-padding-left-ios; line-height: 34px; background-color: #dddddd; + &.active.rtl { + background-position : left $search-padding-left-ios center; + } } .conversation-header { background-color: $grey_l; diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index 2c7afa0404a9..195ea8af4985 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -36,6 +36,10 @@ $button-height: 24px; $header-color: $blue; $search-height: 36px; +$search-padding-right: 10px; +$search-padding-left: 65px; +$search-padding-left-ios: 30px; +$search-x-size: 16px; $unread-badge-size: 21px; $loading-height: 16px; diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss index a8a8d7856e21..407e2689846d 100644 --- a/stylesheets/android-dark.scss +++ b/stylesheets/android-dark.scss @@ -110,6 +110,9 @@ $text-dark: #CCCCCC; background: url('/images/x_white.svg') no-repeat center; background-size: cover; } + &.active.ltr, &.active.rtl { + background-image: url('/images/x_white.svg'); + } } .bubble { padding: 9px 12px; diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 625082f2f69d..23a1186ba1f6 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -818,7 +818,14 @@ input.search { font-size: inherit; position: relative; } input.search.active { - outline: solid 1px #2090ea; } + outline: solid 1px #2090ea; + background-image: url("/images/x.svg"); + background-repeat: no-repeat; + background-size: 16px; } + input.search.active.ltr { + background-position: right 10px center; } + input.search.active.rtl { + background-position: left 65px center; } input.search::-webkit-search-cancel-button { -webkit-appearance: none; display: block; @@ -1455,6 +1462,8 @@ li.entry .error-icon-container { padding-left: 30px; line-height: 34px; background-color: #dddddd; } + .ios input.search.active.rtl { + background-position: left 30px center; } .ios .conversation-header { background-color: #f3f3f3; color: #454545; @@ -1834,6 +1843,8 @@ li.entry .error-icon-container { .android-dark .search::-webkit-search-cancel-button { background: url("/images/x_white.svg") no-repeat center; background-size: cover; } + .android-dark .search.active.ltr, .android-dark .search.active.rtl { + background-image: url("/images/x_white.svg"); } .android-dark .bubble { padding: 9px 12px; border-radius: 5px;