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

(add) new contract verification UI js

Browse Source
pull/2071/head
Gabriel Rodriguez Alsina 6 years ago
parent c7731737ae
commit 4753fc8d26
5 changed files with 71 additions and 20 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. 1
      apps/block_scout_web/assets/css/app.scss
  2. 12
      apps/block_scout_web/assets/css/components/_btn_no_border.scss
  3. 16
      apps/block_scout_web/assets/css/components/_new_smart_contract.scss
  4. 22
      apps/block_scout_web/assets/js/lib/smart_contract/new_smart_contract_form.js
  5. 40
      apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex

1
apps/block_scout_web/assets/css/app.scss
Unescape View File

@ -124,6 +124,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "components/errors";
@import "components/new_smart_contract";
@import "components/radio_big";
@import "components/btn_no_border";
:export {
dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;

12
apps/block_scout_web/assets/css/components/_btn_no_border.scss
Unescape View File

@ -0,0 +1,12 @@
$btn-no-border-bg: #fff !default;
$btn-no-border-color: $secondary !default;
.btn-no-border {
@include btn-line($btn-no-border-bg, $btn-no-border-color);
border-color: $btn-no-border-bg;
&:hover {
border-color: $btn-no-border-color;
}
}

16
apps/block_scout_web/assets/css/components/_new_smart_contract.scss
Unescape View File

@ -121,10 +121,26 @@ $new-smart-contract-center-column-margin-right: 30px;
}
.smart-contract-form-buttons {
align-items: center;
border-top: 1px solid $base-border-color;
display: flex;
margin-right: $new-smart-contract-center-column-margin-right + $new-smart-contract-tooltips-width;
margin-top: -1px;
padding-top: 30px;
position: relative;
[class*="btn-"] {
position: relative;
z-index: 1;
}
.position-absolute {
&,
&:hover {
opacity: 1;
z-index: 12;
}
}
}
.smart-contract-libraries-wrapper {

22
apps/block_scout_web/assets/js/lib/smart_contract/new_smart_contract_form.js
Unescape View File

@ -3,6 +3,26 @@ import $ from 'jquery'
$(function () {
$('.js-btn-add-contract-libraries').on('click', function () {
$('.js-smart-contract-libraries-wrapper').show()
$(this).remove()
$(this).hide()
})
$('.js-smart-contract-form-reset').on('click', function () {
$('.js-contract-library-form-group').removeClass('active')
$('.js-contract-library-form-group').first().addClass('active')
$('.js-smart-contract-libraries-wrapper').hide()
$('.js-btn-add-contract-libraries').show()
$('.js-add-contract-library-wrapper').show()
})
$('.js-btn-add-contract-library').on('click', function () {
let nextContractLibrary = $('.js-contract-library-form-group.active').next('.js-contract-library-form-group')
if (nextContractLibrary) {
nextContractLibrary.addClass('active')
}
if ($('.js-contract-library-form-group.active').length === $('.js-contract-library-form-group').length) {
$('.js-add-contract-library-wrapper').hide()
}
})
})

40
apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex
Unescape View File

@ -111,7 +111,7 @@
<div class="smart-contract-libraries-wrapper js-smart-contract-libraries-wrapper">
<h2 class="smart-contract-title margin-bottom-md"><%= gettext "Contract Libraries" %></h2>
<div class="contract-library-form-group active">
<div class="contract-library-form-group js-contract-library-form-group active">
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library1, gettext("Library Name") %>
@ -133,10 +133,10 @@
</div>
</div>
<div class="contract-library-form-group">
<div class="contract-library-form-group js-contract-library-form-group">
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library2, gettext("2 Library Name") %>
<%= label :external_libraries, :library2, gettext("Library Name") %>
<div class="center-column">
<%= text_input :external_libraries, :library2_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -146,7 +146,7 @@
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library2, gettext("2 Library Address") %>
<%= label :external_libraries, :library2, gettext("Library Address") %>
<div class="center-column">
<%= text_input :external_libraries, :library2_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -155,10 +155,10 @@
</div>
</div>
<div class="contract-library-form-group">
<div class="contract-library-form-group js-contract-library-form-group">
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library3, gettext("3 Library Name") %>
<%= label :external_libraries, :library3, gettext("Library Name") %>
<div class="center-column">
<%= text_input :external_libraries, :library3_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -168,7 +168,7 @@
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library3, gettext("3 Library Address") %>
<%= label :external_libraries, :library3, gettext("Library Address") %>
<div class="center-column">
<%= text_input :external_libraries, :library3_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -177,10 +177,10 @@
</div>
</div>
<div class="contract-library-form-group">
<div class="contract-library-form-group js-contract-library-form-group">
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library4, gettext("4 Library Name") %>
<%= label :external_libraries, :library4, gettext("Library Name") %>
<div class="center-column">
<%= text_input :external_libraries, :library4_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -190,7 +190,7 @@
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library4, gettext("4 Library Address") %>
<%= label :external_libraries, :library4, gettext("Library Address") %>
<div class="center-column">
<%= text_input :external_libraries, :library4_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -199,10 +199,10 @@
</div>
</div>
<div class="contract-library-form-group">
<div class="contract-library-form-group js-contract-library-form-group">
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label :external_libraries, :library5, gettext("5 Library Name") %>
<%= label :external_libraries, :library5, gettext("Library Name") %>
<div class="center-column">
<%= text_input :external_libraries, :library5_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -212,7 +212,7 @@
<div class="smart-contract-form-group">
<div class="smart-contract-form-group-inner-wrapper">
<%= label f, :library5, gettext("5 Library Address") %>
<%= label f, :library5, gettext("Library Address") %>
<div class="center-column">
<%= text_input f, :library5_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
</div>
@ -220,14 +220,15 @@
</div>
</div>
</div>
<div class="add-contract-library-wrapper">
<div class="add-contract-library-wrapper js-add-contract-library-wrapper">
<span class="btn-line js-btn-add-contract-library">Add Library</span>
</div>
</div>
<div class="smart-contract-form-buttons">
<button
class="d-none px-4 position-absolute button button-primary button-sm mr-2"
class="position-absolute btn-full-primary d-none mr-2"
disabled="true"
id="loading"
name="button"
@ -239,13 +240,14 @@
</span>
<%= gettext("Loading....") %>
</button>
<%= submit gettext("Verify & publish"), class: "button button-primary button-sm mr-2", "data-loading": "animation" %>
<%= reset gettext("Reset"), class: "button button-secondary button-sm mr-2" %>
<%= submit gettext("Verify & publish"), class: "btn-full-primary mr-2", "data-loading": "animation" %>
<%= reset gettext("Reset"), class: "btn-line mr-2 js-smart-contract-form-reset" %>
<%=
link(
gettext("Cancel"),
to: address_contract_path(@conn, :index, @conn.params["address_id"]),
class: "button button-sm")
class: "btn-no-border",
to: address_contract_path(@conn, :index, @conn.params["address_id"])
)
%>
</div>
<% end %>

Write Preview
Loading…
Cancel
Save