(add) new network selector behaviours

6 years ago · 239b5ac6c4
parent c11d4ef0f0
commit 239b5ac6c4
6 changed files with 165 additions and 64 deletions
--- a/apps/block_scout_web/assets/css/components/_network-selector.scss
+++ b/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"] {
@ -280,4 +312,11 @@ $network-selector-item-icon-dimensions: 30px !default;
      fill: rgba(#ffb20d, 0.4);
    }
  }
+}
+
+.network-selector-tab-content-empty {
+  font-size: 16px;
+  font-weight: 600;
+  padding: 40px;
+  text-align: center;
 }
--- a/apps/block_scout_web/assets/js/app.js
+++ b/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'
--- a/apps/block_scout_web/assets/js/lib/network_selector.js
+++ b/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()
+})
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex
@ -1,51 +1,55 @@
-<div class="network-selector-overlay">
-    <div class="network-selector">
-        <div class="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>
-        </div>
-        <div class="network-selector-text-container">
-            <h1 class="network-selector-title"><%= gettext("Change Network") %></h1>
-            <p class="network-selector-text"><%= gettext("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.") %></p>
-        </div>
-        <form class="network-selector-search-container">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17">
-                <path fill-rule="evenodd" d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.285-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"/>
-            </svg>
-            <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>
-        <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 %>
-                    <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %>
-                <% end %>
+<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>
            </div>
-            <% main_nets = main_nets(other_networks()) %>
-            <div class="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] %>
-                <% end %>
+            <div class="network-selector-text-container">
+                <h1 class="network-selector-title"><%= gettext("Change Network") %></h1>
+                <p class="network-selector-text"><%= gettext("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.") %></p>
            </div>
-            <% test_nets = test_nets(other_networks()) %>
-            <div class="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] %>
-                <% end %>
+            <form class="network-selector-search-container">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17">
+                    <path fill-rule="evenodd" d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.285-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"/>
+                </svg>
+                <input class="network-selector-search-input" type="text" placeholder='<%= gettext("Search network") %>' />
+            </form>
+            <div class="network-selector-tabs-container">
+                <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-tab-content" network-selector-tab="favorites">
-                No content.
+            <div class="network-selector-networks-container">
+                <% 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>
+                <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: "Mainnet" %>
+                    <% end %>
+                </div>
+                <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: "Testnet" %>
+                    <% end %>
+                </div>
+                <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 class="network-selector-load-more-container">
-            <button class="btn-network-selector-load-more"><%= gettext("Show More Networks") %></button>
        </div>
    </div>
 </div>
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
+++ b/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>
--- 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
@ -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 -->