CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

(add) new network selector behaviours

Browse Source
pull/2263/head
Gabriel Rodriguez Alsina 6 years ago
parent c11d4ef0f0
commit 239b5ac6c4
6 changed files with 165 additions and 64 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 47
      apps/block_scout_web/assets/css/components/_network-selector.scss
  2. 1
      apps/block_scout_web/assets/js/app.js
  3. 71
      apps/block_scout_web/assets/js/lib/network_selector.js
  4. 40
      apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex
  5. 2
      apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
  6. 16
      apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

47
apps/block_scout_web/assets/css/components/_network-selector.scss
Unescape View File

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

1
apps/block_scout_web/assets/js/app.js
Unescape View File

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

71
apps/block_scout_web/assets/js/lib/network_selector.js
Unescape View File

@ -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()
})

40
apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex
Unescape View File

@ -1,6 +1,7 @@
<div class="network-selector-overlay"> <div class="network-selector-overlay js-network-selector-overlay">
<div class="network-selector"> <div class="network-selector-wrapper">
<div class="network-selector-close"> <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"> <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"/> <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> </svg>
@ -16,36 +17,39 @@
<input class="network-selector-search-input" type="text" placeholder='<%= gettext("Search network") %>' /> <input class="network-selector-search-input" type="text" placeholder='<%= gettext("Search network") %>' />
</form> </form>
<div class="network-selector-tabs-container"> <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 js-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 js-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 js-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" network-selector-tab-filter="favorites"><%= gettext("Favorites") %></div>
</div> </div>
<div class="network-selector-networks-container"> <div class="network-selector-networks-container">
<div class="network-selector-tab-content active" network-selector-tab="all"> <% main_nets = main_nets(other_networks()) %>
<%= for %{url: url, title: title} <- other_networks() do %> <% 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" %> <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %>
<% end %> <% 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>
<% main_nets = main_nets(other_networks()) %> <div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="mainnet">
<div class="network-selector-tab-content" network-selector-tab="mainnet">
<%= for %{url: url, title: title} <- main_nets do %> <%= 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 %> <% end %>
</div> </div>
<% test_nets = test_nets(other_networks()) %> <div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="testnet">
<div class="network-selector-tab-content" network-selector-tab="testnet">
<%= for %{url: url, title: title} <- test_nets do %> <%= 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 %> <% end %>
</div> </div>
<div class="network-selector-tab-content" network-selector-tab="favorites"> <div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="favorites">
No content. <div class="network-selector-tab-content-empty">No content.</div>
</div> </div>
</div> </div>
<div class="network-selector-load-more-container"> <div class="network-selector-load-more-container">
<button class="btn-network-selector-load-more"><%= gettext("Show More Networks") %></button> <button class="btn-network-selector-load-more"><%= gettext("Show More Networks") %></button>
</div> </div>
</div> </div>
</div> </div>
</div>

2
apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
Unescape View File

@ -1,5 +1,5 @@
<div class="network-selector-item"> <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"> <span class="radio">
<input type="radio" name="networkSelectorItem" /> <input type="radio" name="networkSelectorItem" />
<span class="radio-icon"></span> <span class="radio-icon"></span>

16
apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
Unescape View File

@ -77,26 +77,12 @@
</div> </div>
</li> </li>
<li class="nav-item dropdown nav-item-networks"> <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"> <span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_active_icon.html" %> <%= render BlockScoutWeb.IconsView, "_active_icon.html" %>
</span> </span>
<%= subnetwork_title() %> <%= subnetwork_title() %>
</a> </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> </li>
</ul> </ul>
<!-- Search navbar --> <!-- Search navbar -->

Write Preview
Loading…
Cancel
Save