diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index c1dcdae286..04fceaa6d5 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -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; diff --git a/apps/block_scout_web/assets/css/components/_btn_no_border.scss b/apps/block_scout_web/assets/css/components/_btn_no_border.scss new file mode 100644 index 0000000000..28960a9d82 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_no_border.scss @@ -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; + } +} diff --git a/apps/block_scout_web/assets/css/components/_new_smart_contract.scss b/apps/block_scout_web/assets/css/components/_new_smart_contract.scss index cce02c7a5e..478496b952 100644 --- a/apps/block_scout_web/assets/css/components/_new_smart_contract.scss +++ b/apps/block_scout_web/assets/css/components/_new_smart_contract.scss @@ -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 { diff --git a/apps/block_scout_web/assets/js/lib/smart_contract/new_smart_contract_form.js b/apps/block_scout_web/assets/js/lib/smart_contract/new_smart_contract_form.js index a41030debc..43419aeb9b 100644 --- a/apps/block_scout_web/assets/js/lib/smart_contract/new_smart_contract_form.js +++ b/apps/block_scout_web/assets/js/lib/smart_contract/new_smart_contract_form.js @@ -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() + } }) }) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex index 5fafc9838a..212264d445 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex @@ -111,7 +111,7 @@

<%= gettext "Contract Libraries" %>

-
+
<%= label :external_libraries, :library1, gettext("Library Name") %> @@ -133,10 +133,10 @@
-
+
- <%= label :external_libraries, :library2, gettext("2 Library Name") %> + <%= label :external_libraries, :library2, gettext("Library Name") %>
<%= text_input :external_libraries, :library2_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -146,7 +146,7 @@
- <%= label :external_libraries, :library2, gettext("2 Library Address") %> + <%= label :external_libraries, :library2, gettext("Library Address") %>
<%= text_input :external_libraries, :library2_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -155,10 +155,10 @@
-
+
- <%= label :external_libraries, :library3, gettext("3 Library Name") %> + <%= label :external_libraries, :library3, gettext("Library Name") %>
<%= text_input :external_libraries, :library3_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -168,7 +168,7 @@
- <%= label :external_libraries, :library3, gettext("3 Library Address") %> + <%= label :external_libraries, :library3, gettext("Library Address") %>
<%= text_input :external_libraries, :library3_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -177,10 +177,10 @@
-
+
- <%= label :external_libraries, :library4, gettext("4 Library Name") %> + <%= label :external_libraries, :library4, gettext("Library Name") %>
<%= text_input :external_libraries, :library4_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -190,7 +190,7 @@
- <%= label :external_libraries, :library4, gettext("4 Library Address") %> + <%= label :external_libraries, :library4, gettext("Library Address") %>
<%= text_input :external_libraries, :library4_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -199,10 +199,10 @@
-
+
- <%= label :external_libraries, :library5, gettext("5 Library Name") %> + <%= label :external_libraries, :library5, gettext("Library Name") %>
<%= text_input :external_libraries, :library5_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -212,7 +212,7 @@
- <%= label f, :library5, gettext("5 Library Address") %> + <%= label f, :library5, gettext("Library Address") %>
<%= text_input f, :library5_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
@@ -220,14 +220,15 @@
-
+ +
Add Library
- <%= 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"]) + ) %>
<% end %>