Merge pull request blockscout#3558 from poanetwork/vb-slash-search

Focus to search field with a forward slash key
ForwardProtocol · Jan 7, 2021 · 6ec4e27 · 6ec4e27
2 parents b456ab1 + 0d91b71
commit 6ec4e27
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#3558](https://github.com/poanetwork/blockscout/pull/3558) - Focus to search field with a forward slash key
 - [#3541](https://github.com/poanetwork/blockscout/pull/3541) - Staking dapp stats: total number of delegators, total staked amount 
 - [#3540](https://github.com/poanetwork/blockscout/pull/3540) - Apply DarkForest custom theme to NFT instances
 

diff --git a/apps/block_scout_web/assets/css/components/_custom_tooltips.scss b/apps/block_scout_web/assets/css/components/_custom_tooltips.scss
@@ -40,6 +40,38 @@ $tooltip-background-color: $btn-line-color !default;
 
 /* Inversed color Bootstrap Tooltip end*/
 
+/* Pale color Bootstrap Tooltip */
+
+.tooltip-pale-color {
+    .tooltip-inner {
+        background-color: rgba(#fff, 0.5) !important;
+        color: #333 !important;
+    }
+}
+
+.tooltip-pale-color.bs-tooltip-top .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+    border-top-color: rgba($primary, 0.5) !important;
+}
+
+.tooltip-pale-color.bs-tooltip-right .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+    border-right-color: rgba($primary, 0.5) !important;
+}
+
+.tooltip-pale-color.bs-tooltip-bottom .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+    border-bottom-color: rgba($primary, 0.5) !important;
+}
+
+
+.tooltip-pale-color.bs-tooltip-left .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+    border-left-color: rgba($primary, 0.5) !important;
+}
+
+/* Pale color Bootstrap Tooltip end*/
+
 .tooltip-market-cap {
     .tooltip-inner {
         @media (min-width: 576px) {

diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss
@@ -163,13 +163,28 @@ $navbar-logo-width: auto !default;
   }
   .input-group-append {
     height: 38px;
-    left: 0;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 38px;
     z-index: 5;
 
+    &.left {
+      left: 0px;
+    }
+
+    &.right {
+      right: 8px;
+      width: 25px;
+      height: 25px;
+    }
+
+    &.desktop-only {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+
     * {
       fill: $header-textfield-magnifier-color;
     }
@@ -183,6 +198,13 @@ $navbar-logo-width: auto !default;
     justify-content: center;
     padding: 0;
     width: 100%;
+
+    &.border {
+      border-color: $secondary !important;
+      border-radius: 5px;
+      color: $secondary;
+      background-color: $header-textfield-background-color;
+    }
   }
 }
 
@@ -291,3 +313,7 @@ $navbar-logo-width: auto !default;
 .visually-hidden {
   display: block;
 }
+
+.focused-field {
+  border: 1px solid $secondary !important;
+}
diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
@@ -38,6 +38,11 @@ $dark-stakes-banned-background: #3e314c;
 	// navbar
 	.navbar.navbar-primary {
 		background-color: $dark-light-bg;
+		.input-group-text {
+			&.border {
+				background-color: $dark-light-bg;
+			}
+		}
 	}
 	.navbar-brand .navbar-logo {
 		filter: brightness(0) invert(1);
@@ -391,6 +396,27 @@ $dark-stakes-banned-background: #3e314c;
 	}
 	.tooltip > .tooltip-inner {background-color: $dark-primary;}
 
+	.tooltip-pale-color.bs-tooltip-top .arrow::before,
+	.tooltip-pale-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+		border-top-color: rgba(#fff, 0.5) !important;
+	}
+
+	.tooltip-pale-color.bs-tooltip-right .arrow::before,
+	.tooltip-pale-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+		border-right-color: rgba(#fff, 0.5) !important;
+	}
+
+	.tooltip-pale-color.bs-tooltip-bottom .arrow::before,
+	.tooltip-pale-color.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+		border-bottom-color: rgba(#fff, 0.5) !important;
+	}
+
+
+	.tooltip-pale-color.bs-tooltip-left .arrow::before,
+	.tooltip-pale-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+		border-left-color: rgba(#fff, 0.5) !important;
+	}
+
 	//network select
 	.network-selector-overlay {
 		background-color: rgba($dark-bg, .9);

diff --git a/apps/block_scout_web/assets/js/pages/layout.js b/apps/block_scout_web/assets/js/pages/layout.js
@@ -7,3 +7,19 @@ $(document).click(function (event) {
     $('.navbar-toggler').click()
   }
 })
+
+$(document).on('keyup', function (event) {
+  if (event.key === '/') {
+    $('#q').trigger('focus')
+  }
+})
+
+$('#q').on('focus', function (_event) {
+  $('#slash-icon').hide()
+  $(this).addClass('focused-field')
+})
+
+$('#q').on('focusout', function (_event) {
+  $('#slash-icon').show()
+  $(this).removeClass('focused-field')
+})
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
@@ -232,11 +232,24 @@
                       }
                     }"
                     ]) %>
-                <div class="input-group-append">
+                <div class="input-group-append left">
                   <button class="input-group-text" id="search-icon">
                     <%= render BlockScoutWeb.IconsView, "_search_icon.html" %>
                   </button>
                 </div>
+                <div class="input-group-append right desktop-only">
+                  <div
+                    id="slash-icon"
+                    class="input-group-text border"
+                    data-placement="bottom"
+                    data-toggle="tooltip"
+                    title=""
+                    data-original-title='<%= gettext("Press / and focus will be moved to the search field") %>'
+                    data-template="<div class='tooltip tooltip-pale-color' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
+                  >
+                    /
+                  </div>
+                </div>
             </div>
             <button class="btn btn-outline-success my-2 my-sm-0 sr-only hidden" type="submit"><%= gettext "Search" %></button>
             <script>

diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot
@@ -1246,7 +1246,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/index.html.eex:14
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:210
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:241
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:254
 msgid "Search"
 msgstr ""
 
@@ -2659,3 +2659,8 @@ msgstr ""
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:155
 msgid "Staking"
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:247
+msgid "Press / and focus will be moved to the search field"
+msgstr ""
diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -1246,7 +1246,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/index.html.eex:14
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:210
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:241
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:254
 msgid "Search"
 msgstr ""
 
@@ -2659,3 +2659,8 @@ msgstr ""
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:155
 msgid "Staking"
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:247
+msgid "Press / and focus will be moved to the search field"
+msgstr ""