Merge pull request #2197 from maxgrapps/feature/#2038-new-network-selector

Search network input functionality, add to favorites functionality, removed 'Show More Networks' button

CHANGELOG.md

@@ -17,6 +17,7 @@
 - [#1928](https://github.com/poanetwork/blockscout/pull/1928) - pagination styles were updated
 - [#1940](https://github.com/poanetwork/blockscout/pull/1940) - qr modal button and background issue
 - [#1907](https://github.com/poanetwork/blockscout/pull/1907) - dropdown color bug fix (lukso theme) and tooltip color bug fix
+- [#2197](https://github.com/poanetwork/blockscout/pull/2197) - search network input functionality, add to favorites functionality, removed 'Show More Networks' button
 - [#1859](https://github.com/poanetwork/blockscout/pull/1859) - feat: show raw transaction traces
 - [#1941](https://github.com/poanetwork/blockscout/pull/1941) - feat: add on demand fetching and stale attr to rpc
 - [#1957](https://github.com/poanetwork/blockscout/pull/1957) - Calculate stakes ratio before insert pools

apps/block_scout_web/assets/css/components/_network-selector.scss

@@ -41,7 +41,7 @@ $network-selector-item-icon-dimensions: 30px !default;
   margin-left: auto;
   max-width: 398px;
   min-width: 0;
-  padding: 28px 0 35px;
+  padding-top: 28px;
   position: relative;
   transition: right 0.25s ease-out;
 }
@@ -266,7 +266,6 @@ $network-selector-item-icon-dimensions: 30px !default;
 .network-selector-networks-container {
   flex-grow: 1;
   flex-shrink: 1;
-  margin: 0 0 30px;
   min-height: 100px;
   overflow: auto;
   padding: 0 $network-selector-horizontal-padding;

apps/block_scout_web/assets/js/app.js

@@ -31,6 +31,8 @@ import './pages/chain'
 import './pages/pending_transactions'
 import './pages/transaction'
 import './pages/transactions'
+import './pages/favorites'
+import './pages/network-search'
 
 import './pages/admin/tasks.js'
 

apps/block_scout_web/assets/js/pages/favorites.js

@@ -0,0 +1,56 @@
+import $ from 'jquery'
+
+var favoritesContainer = $('.js-favorites-tab')
+var favoritesNetworksUrls = []
+
+if (localStorage.getItem('favoritesNetworksUrls') === null) {
+  localStorage.setItem('favoritesNetworksUrls', JSON.stringify(favoritesNetworksUrls))
+} else {
+  favoritesNetworksUrls = JSON.parse(localStorage.getItem('favoritesNetworksUrls'))
+}
+
+$(document).on('change', ".network-selector-item-favorite input[type='checkbox']", function () {
+  var networkUrl = $(this).attr('data-url')
+  var thisStatus = $(this).is(':checked')
+  var parent = $(".network-selector-item[data-url='" + networkUrl + "'").clone()
+  var workWith = $(".network-selector-item[data-url='" + networkUrl + "'")
+
+  // Add new checkbox status to same network in another tabs
+  $(".network-selector-item-favorite input[data-url='" + networkUrl + "']").prop('checked', thisStatus)
+
+  // Push or remove favorite networks to array
+  var found = $.inArray(networkUrl, favoritesNetworksUrls)
+  if (found < 0 && thisStatus === true) {
+    favoritesNetworksUrls.push(networkUrl)
+  } else {
+    var index = favoritesNetworksUrls.indexOf(networkUrl)
+    if (index !== -1) {
+      favoritesNetworksUrls.splice(index, 1)
+    }
+  }
+
+  // Append or remove item from 'favorites' tab
+  if (thisStatus === true) {
+    favoritesContainer.append(parent[0])
+    $('.js-favorites-tab .network-selector-tab-content-empty').hide()
+  } else {
+    var willRemoved = favoritesContainer.find(workWith)
+    willRemoved.remove()
+    if (favoritesNetworksUrls.length === 0) {
+      $('.js-favorites-tab .network-selector-tab-content-empty').show()
+    }
+  }
+
+  // Push to localstorage
+  var willBePushed = JSON.stringify(favoritesNetworksUrls)
+  localStorage.setItem('favoritesNetworksUrls', willBePushed)
+})
+
+if (favoritesNetworksUrls.length > 0) {
+  $('.js-favorites-tab .network-selector-tab-content-empty').hide()
+  for (var i = 0; i < favoritesNetworksUrls.length + 1; i++) {
+    $(".network-selector-item[data-url='" + favoritesNetworksUrls[i] + "'").find('input').prop('checked', true)
+    var parent = $(".network-selector-item[data-url='" + favoritesNetworksUrls[i] + "'").clone()
+    favoritesContainer.append(parent[0])
+  }
+}

apps/block_scout_web/assets/js/pages/network-search.js

@@ -0,0 +1,21 @@
+import $ from 'jquery'
+
+var networkSearchInput = $('.network-selector-search-input')
+var networkSearchInputVal = ''
+
+$(networkSearchInput).on('input', function () {
+  networkSearchInputVal = $(this).val()
+
+  $.expr[':'].Contains = $.expr.createPseudo(function (arg) {
+    return function (elem) {
+      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0
+    }
+  })
+
+  if (networkSearchInputVal === '') {
+    $('.network-selector-item').show()
+  } else {
+    $('.network-selector-item').hide()
+    $(".network-selector-item:Contains('" + networkSearchInputVal + "')").show()
+  }
+})

apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex

@@ -43,13 +43,10 @@
                         <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %>
                     <% end %>
                 </div>
-                <div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="favorites">
+                <div class="network-selector-tab-content js-network-selector-tab-content js-favorites-tab" network-selector-tab="favorites">
                     <div class="network-selector-tab-content-empty">No content.</div>
                 </div>
             </div>
-            <div class="network-selector-load-more-container">
-                <button class="btn-network-selector-load-more"><%= gettext("Show More Networks") %></button>
-            </div>
         </div>
     </div>
 </div>

apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex

@@ -1,11 +1,11 @@
-<div class="network-selector-item">
+<div class="network-selector-item" data-url="<%= @url %>" data-name="<%= @title %>">
     <label class="network-selector-item-url js-network-selector-item-url" network-selector-item-url="<%= @url %>">
         <span class="radio">
             <input type="radio" name="networkSelectorItem" />
             <span class="radio-icon"></span>
         </span>
         <span class="network-selector-item-content">
-            <span class='network-selector-item-icon network-selector-item-icon-<%= String.downcase(String.replace(@title, " ", "-")) %>' style="background-image: url('images/network-selector-icons/<%= String.downcase(String.replace(@title, " ", "-")) %>.png');"></span>
+            <span class='network-selector-item-icon network-selector-item-icon-<%= String.downcase(String.replace(@title, " ", "-")) %>' style="background-image: url('/images/network-selector-icons/<%= String.downcase(String.replace(@title, " ", "-")) %>.png');"></span>
             <span class="network-selector-item-title">
                 <%= @title %>
             </span>
@@ -17,7 +17,7 @@
         </span>
     </label>
     <label class="network-selector-item-favorite">
-        <input type="checkbox" />
+        <input type="checkbox" data-url="<%= @url %>" />
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15">
             <path fill="#E2E5EC" fill-rule="evenodd" d="M15.647 6.795c.315-.3.426-.741.29-1.151a1.135 1.135 0 0 0-.926-.764l-3.871-.551a.501.501 0 0 1-.381-.271L9.028.624A1.143 1.143 0 0 0 8-.001c-.44 0-.834.24-1.028.625L5.24 4.059a.506.506 0 0 1-.381.271l-3.871.55c-.435.062-.79.355-.926.765-.136.409-.025.85.29 1.15l2.801 2.673a.492.492 0 0 1 .146.439l-.661 3.774c-.058.333.031.656.25.911.342.397.937.518 1.414.272l3.462-1.782a.53.53 0 0 1 .471 0l3.463 1.782a1.16 1.16 0 0 0 1.413-.272c.22-.255.309-.579.25-.911L12.7 9.907a.489.489 0 0 1 .146-.439l2.801-2.673z"/>
         </svg>

apps/block_scout_web/priv/gettext/default.pot

@@ -1721,11 +1721,6 @@ msgstr ""
 msgid "Search network"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_network_selector.html.eex:51
-msgid "Show More Networks"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/layout/_network_selector.html.eex:22
 msgid "Testnet"