(add) new network selector behaviours

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

@@ -7,10 +7,14 @@ $network-selector-search-input-color: #a3a9b5 !default;
 $network-selector-tab-active-border-color: $primary !default;
 $network-selector-item-icon-dimensions: 30px !default;
 
+.network-selector-visible {
+  position: fixed;
+}
+
 .network-selector-overlay {
   background-color: rgba($network-selector-overlay-background, 0.9);
   bottom: 0;
-  display: flex;
+  display: none;
   left: 0;
   position: fixed;
   right: 0;
@@ -18,6 +22,12 @@ $network-selector-item-icon-dimensions: 30px !default;
   z-index: 123;
 }
 
+.network-selector-wrapper {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
 .network-selector {
   background-color: #fff;
   display: flex;
@@ -26,7 +36,10 @@ $network-selector-item-icon-dimensions: 30px !default;
   flex-shrink: 1;
   margin-left: auto;
   max-width: 398px;
+  min-width: 0;
   padding: 28px 0 35px;
+  position: relative;
+  transition: right 0.25s ease-out;
 }
 
 .network-selector-close {
@@ -123,12 +136,16 @@ $network-selector-item-icon-dimensions: 30px !default;
 .network-selector-tab {
   color: #a3a9b5;
   cursor: pointer;
+  flex-shrink: 1;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.2;
-  padding: 20px 20px 15px;
+  min-width: 0;
+  padding: 20px 18px 15px;
   position: relative;
   text-align: center;
+  user-select: none;
+  white-space: nowrap;
 
   &:hover {
     color: #333;
@@ -136,6 +153,7 @@ $network-selector-item-icon-dimensions: 30px !default;
 
   &.active {
     color: #333;
+    cursor: default;
 
     &::after {
       background-color: $network-selector-tab-active-border-color;
@@ -165,7 +183,12 @@ $network-selector-item-icon-dimensions: 30px !default;
   position: relative;
 
   .radio {
+    cursor: pointer;
     margin: 0 15px 0 0;
+
+    input[type="radio"] {
+      cursor: pointer;
+    }
   }
 
   .radio-icon {
@@ -183,7 +206,13 @@ $network-selector-item-icon-dimensions: 30px !default;
   display: flex;
   flex-grow: 1;
   margin: 0;
-  padding: 20px 20px 20px 0;
+  padding: 20px 0;
+
+  &:hover {
+    .network-selector-item-type {
+      color: #333;
+    }
+  }
 }
 
 .network-selector-item-icon {
@@ -208,6 +237,7 @@ $network-selector-item-icon-dimensions: 30px !default;
   overflow: hidden;
   text-align: left;
   text-overflow: ellipsis;
+  user-select: none;
   white-space: nowrap;
 }
 
@@ -219,6 +249,7 @@ $network-selector-item-icon-dimensions: 30px !default;
   line-height: 1.2;
   padding-left: 10px;
   text-align: right;
+  user-select: none;
   white-space: nowrap;
 }
 
@@ -254,7 +285,8 @@ $network-selector-item-icon-dimensions: 30px !default;
   flex-grow: 1;
   flex-shrink: 0;
   margin: 0;
-  max-width: 16px;
+  max-width: 36px;
+  padding-left: 20px;
   position: relative;
 
   input[type="checkbox"] {
@@ -281,3 +313,10 @@ $network-selector-item-icon-dimensions: 30px !default;
     }
   }
 }
+
+.network-selector-tab-content-empty {
+  font-size: 16px;
+  font-weight: 600;
+  padding: 40px;
+  text-align: center;
+}

apps/block_scout_web/assets/js/app.js

@@ -54,3 +54,4 @@ import './lib/tooltip'
 import './lib/modals'
 import './lib/try_api'
 import './lib/card_tabs'
+import './lib/network_selector'

apps/block_scout_web/assets/js/lib/network_selector.js

@@ -0,0 +1,71 @@
+import $ from 'jquery'
+
+$(function () {
+  const mainBody = $('body')
+  const showNetworkSelector = $('.js-show-network-selector')
+  const hideNetworkSelector = $('.js-network-selector-close')
+  const networkSelector = $('.js-network-selector')
+  const networkSelectorOverlay = $('.js-network-selector-overlay')
+  const networkSelectorTab = $('.js-network-selector-tab')
+  const networkSelectorTabContent = $('.js-network-selector-tab-content')
+  const networkSelectorItemURL = $('.js-network-selector-item-url')
+  const FADE_IN_DELAY = 250
+
+  showNetworkSelector.on('click', (e) => {
+    e.preventDefault()
+    openNetworkSelector()
+  })
+
+  hideNetworkSelector.on('click', (e) => {
+    e.preventDefault()
+    closeNetworkSelector()
+  })
+
+  networkSelectorTab.on('click', function (e) {
+    e.preventDefault()
+    setNetworkTab($(this))
+  })
+
+  networkSelectorItemURL.on('click', function (e) {
+    window.location = $(this).attr('network-selector-item-url')
+  })
+
+  let setNetworkTab = (currentTab) => {
+    if (currentTab.hasClass('active')) return
+
+    networkSelectorTab.removeClass('active')
+    currentTab.addClass('active')
+    networkSelectorTabContent.removeClass('active')
+    $(`[network-selector-tab="${currentTab.attr('network-selector-tab-filter')}"]`).addClass('active')
+  }
+
+  let openNetworkSelector = () => {
+    mainBody.addClass('network-selector-visible')
+    networkSelectorOverlay.fadeIn(FADE_IN_DELAY)
+    setNetworkSelectorVisiblePosition()
+  }
+
+  let closeNetworkSelector = () => {
+    mainBody.removeClass('network-selector-visible')
+    networkSelectorOverlay.fadeOut(FADE_IN_DELAY)
+    setNetworkSelectorHiddenPosition()
+  }
+
+  let getNetworkSelectorWidth = () => {
+    return parseInt(networkSelector.css('width')) || parseInt(networkSelector.css('max-width'))
+  }
+
+  let setNetworkSelectorHiddenPosition = () => {
+    return networkSelector.css({ 'right': `-${getNetworkSelectorWidth()}px` })
+  }
+
+  let setNetworkSelectorVisiblePosition = () => {
+    return networkSelector.css({ 'right': '0' })
+  }
+
+  let init = () => {
+    setNetworkSelectorHiddenPosition()
+  }
+
+  init()
+})

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

@@ -1,6 +1,7 @@
-<div class="network-selector-overlay">
-    <div class="network-selector">
-        <div class="network-selector-close">
+<div class="network-selector-overlay js-network-selector-overlay">
+    <div class="network-selector-wrapper">
+        <div class="network-selector js-network-selector">
+            <div class="network-selector-close js-network-selector-close">
                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13">
                     <path fill-rule="evenodd" d="M7.881 6.5l4.834 4.834a.977.977 0 0 1-1.381 1.381L6.5 7.881l-4.834 4.834a.977.977 0 0 1-1.381-1.381L5.119 6.5.285 1.666A.977.977 0 0 1 1.666.285L6.5 5.119 11.334.285a.977.977 0 0 1 1.381 1.381L7.881 6.5z"/>
                 </svg>
@@ -16,36 +17,39 @@
                 <input class="network-selector-search-input" type="text" placeholder='<%= gettext("Search network") %>' />
             </form>
             <div class="network-selector-tabs-container">
-            <div class="network-selector-tab active" network-selector-tab-filter="all"><%= gettext("All") %></div>
-            <div class="network-selector-tab" network-selector-tab-filter="mainnet"><%= gettext("Mainnet") %></div>
-            <div class="network-selector-tab" network-selector-tab-filter="testnet"><%= gettext("Testnet") %></div>
-            <div class="network-selector-tab" network-selector-tab-filter="favorites"><%= gettext("Favorites") %></div>
+                <div class="network-selector-tab js-network-selector-tab active" network-selector-tab-filter="all"><%= gettext("All") %></div>
+                <div class="network-selector-tab js-network-selector-tab" network-selector-tab-filter="mainnet"><%= gettext("Mainnet") %></div>
+                <div class="network-selector-tab js-network-selector-tab" network-selector-tab-filter="testnet"><%= gettext("Testnet") %></div>
+                <div class="network-selector-tab js-network-selector-tab" network-selector-tab-filter="favorites"><%= gettext("Favorites") %></div>
             </div>
             <div class="network-selector-networks-container">
-            <div class="network-selector-tab-content active" network-selector-tab="all">
-                <%= for %{url: url, title: title} <- other_networks() do %>
+                <% main_nets = main_nets(other_networks()) %>
+                <% test_nets = test_nets(other_networks()) %>
+                <div class="network-selector-tab-content js-network-selector-tab-content active" network-selector-tab="all">
+                    <%= for %{url: url, title: title} <- main_nets do %>
                         <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %>
                     <% end %>
+                    <%= for %{url: url, title: title} <- test_nets do %>
+                        <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %>
+                    <% end %>
                 </div>
-            <% main_nets = main_nets(other_networks()) %>
-            <div class="network-selector-tab-content" network-selector-tab="mainnet">
+                <div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="mainnet">
                     <%= for %{url: url, title: title} <- main_nets do %>
-                    <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: assigns[:tab_type] %>
+                        <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %>
                     <% end %>
                 </div>
-            <% test_nets = test_nets(other_networks()) %>
-            <div class="network-selector-tab-content" network-selector-tab="testnet">
+                <div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="testnet">
                     <%= for %{url: url, title: title} <- test_nets do %>
-                    <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: assigns[:tab_type] %>
+                        <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %>
                     <% end %>
                 </div>
-            <div class="network-selector-tab-content" network-selector-tab="favorites">
-                No content.
+                <div class="network-selector-tab-content js-network-selector-tab-content" 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,5 +1,5 @@
 <div class="network-selector-item">
-    <label class="network-selector-item-url" network-selector-item-url="<%= @url %>">
+    <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>

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

@@ -77,26 +77,12 @@
           </div>
         </li>
         <li class="nav-item dropdown nav-item-networks">
-          <a class="nav-link topnav-nav-link dropdown-toggle active-icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <a class="nav-link topnav-nav-link dropdown-toggle active-icon js-show-network-selector" href="#">
             <span class="nav-link-icon">
               <%= render BlockScoutWeb.IconsView, "_active_icon.html" %>
             </span>
             <%= subnetwork_title() %>
           </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item header division">Mainnets</a>
-            <%= for %{url: url, title: title} <- dropdown_head_main_nets() do %>
-              <a class="dropdown-item" href="<%= url%>"><%= title %></a>
-            <% end %>
-            <a class="dropdown-item header division">Testnets</a>
-            <%= for %{url: url, title: title} <- test_nets(dropdown_nets()) do %>
-              <a class="dropdown-item" href="<%= url%>"><%= title %></a>
-            <% end %>
-            <a class="dropdown-item header division">Other networks</a>
-            <%= for %{url: url, title: title} <- dropdown_other_nets() do %>
-              <a class="dropdown-item" href="<%= url%>"><%= title %></a>
-            <% end %>
-          </div>
         </li>
       </ul>
       <!-- Search navbar -->