From afcf48168dbf0f277dfbe1e34de76e7282d7af12 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Thu, 4 Apr 2019 12:20:20 -0300 Subject: [PATCH] (add) stakes progress modal --- apps/block_scout_web/assets/css/_mixins.scss | 24 ++++++ apps/block_scout_web/assets/css/app.scss | 5 +- .../assets/css/components/_btn_add_full.scss | 6 -- .../assets/css/components/_btn_add_line.scss | 6 -- .../assets/css/components/_btn_full.scss | 6 ++ .../assets/css/components/_btn_line.scss | 6 ++ .../assets/css/components/_form.scss | 6 +- .../assets/css/components/_modal.scss | 24 +++++- .../assets/css/components/_stakes.scss | 1 + .../css/components/_stakes_progress.scss | 74 +++++++++++++++++++ apps/block_scout_web/assets/js/lib/modals.js | 40 ++++++++++ .../common_components/_btn_add_full.html.eex | 9 ++- .../common_components/_btn_add_line.html.eex | 9 ++- .../stakes/_stakes_btn_stake_more.html.eex | 9 +++ .../stakes/_stakes_control_move.html.eex | 2 +- .../stakes/_stakes_control_stake.html.eex | 2 +- .../stakes/_stakes_control_withdraw.html.eex | 2 +- .../_stakes_modal_become_candidate.html.eex | 34 ++++----- .../stakes/_stakes_modal_stake.html.eex | 52 +++++++++++++ .../_stakes_modal_validator_info.html.eex | 10 +-- .../stakes/_stakes_progress.html.eex | 32 ++++++++ .../_stakes_stats_item_account.html.eex | 4 +- .../templates/stakes/_stakes_table.html.eex | 13 ++-- .../templates/stakes/_stakes_title.html.eex | 2 +- 24 files changed, 319 insertions(+), 59 deletions(-) delete mode 100644 apps/block_scout_web/assets/css/components/_btn_add_full.scss delete mode 100644 apps/block_scout_web/assets/css/components/_btn_add_line.scss create mode 100644 apps/block_scout_web/assets/css/components/_btn_full.scss create mode 100644 apps/block_scout_web/assets/css/components/_btn_line.scss create mode 100644 apps/block_scout_web/assets/css/components/_stakes_progress.scss create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_stake_more.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_stake.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_progress.html.eex diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss index c1926ecd90..7a5b871477 100644 --- a/apps/block_scout_web/assets/css/_mixins.scss +++ b/apps/block_scout_web/assets/css/_mixins.scss @@ -72,16 +72,19 @@ align-items: center; background-color: $bg-color; border-radius: 2px; + border: 1px solid $bg-color; cursor: pointer; display: flex; height: 36px; justify-content: center; + outline: none; padding: 0 15px; transition: all 0.25s; width: fit-content; &:hover { background-color: darken($bg-color, 10%); + border-color: darken($bg-color, 10%); } &-text { @@ -99,6 +102,16 @@ &.full-width { width: 100%; } + + &[disabled] { + &, + &:hover { + background-color: $bg-color; + border-color: $bg-color; + cursor: default; + opacity: 0.5; + } + } } @mixin btn-line($bg-color: #fff, $text-color: $secondary) { @@ -110,6 +123,7 @@ display: flex; height: 36px; justify-content: center; + outline: none; padding: 0 15px; transition: all 0.25s; width: fit-content; @@ -133,4 +147,14 @@ &.full-width { width: 100%; } + + &[disabled] { + &, + &:hover { + background-color: $bg-color; + border-color: $text-color; + cursor: default; + opacity: 0.5; + } + } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index 832f8ff8f4..135485bd8b 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -90,8 +90,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/coin-balance-tile"; @import "components/highlight"; @import "components/copy_icon"; -@import "components/btn_add_full"; -@import "components/btn_add_line"; +@import "components/btn_full"; +@import "components/btn_line"; @import "components/stakes"; @import "components/check"; @import "components/stakes_table"; @@ -104,6 +104,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/modal"; @import "components/modal_validator_info"; @import "components/form"; +@import "components/stakes_progress"; :export { primary: $primary; diff --git a/apps/block_scout_web/assets/css/components/_btn_add_full.scss b/apps/block_scout_web/assets/css/components/_btn_add_full.scss deleted file mode 100644 index 9f3da65f52..0000000000 --- a/apps/block_scout_web/assets/css/components/_btn_add_full.scss +++ /dev/null @@ -1,6 +0,0 @@ -$btn-add-full-bg: $primary !default; -$btn-add-full-color: #fff !default; - -.btn-add-full { - @include btn-full($btn-add-full-bg, $btn-add-full-color); -} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_btn_add_line.scss b/apps/block_scout_web/assets/css/components/_btn_add_line.scss deleted file mode 100644 index 609564478c..0000000000 --- a/apps/block_scout_web/assets/css/components/_btn_add_line.scss +++ /dev/null @@ -1,6 +0,0 @@ -$btn-add-line-bg: #fff !default; -$btn-add-line-color: $secondary !default; - -.btn-add-line { - @include btn-line($btn-add-line-bg, $btn-add-line-color); -} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_btn_full.scss b/apps/block_scout_web/assets/css/components/_btn_full.scss new file mode 100644 index 0000000000..af443d3d85 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_full.scss @@ -0,0 +1,6 @@ +$btn-full-primary-bg: $primary !default; +$btn-full-primary-color: #fff !default; + +.btn-full-primary { + @include btn-full($btn-full-primary-bg, $btn-full-primary-color); +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_btn_line.scss b/apps/block_scout_web/assets/css/components/_btn_line.scss new file mode 100644 index 0000000000..2ab4e4d9da --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_line.scss @@ -0,0 +1,6 @@ +$btn-line-bg: #fff !default; +$btn-line-color: $secondary !default; + +.btn-line { + @include btn-line($btn-line-bg, $btn-line-color); +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_form.scss b/apps/block_scout_web/assets/css/components/_form.scss index f5fa84eab5..ec7c392807 100644 --- a/apps/block_scout_web/assets/css/components/_form.scss +++ b/apps/block_scout_web/assets/css/components/_form.scss @@ -14,11 +14,15 @@ $form-control-border-color: #e2e5ec !default; color: #a3a9b5; font-size: 12px; font-weight: normal; - line-height: 1.5; + line-height: 1.8; .text-dark { color: #333; } + + &.m-b-0 { + margin-bottom: 0; + } } .input-group-prepend.last { diff --git a/apps/block_scout_web/assets/css/components/_modal.scss b/apps/block_scout_web/assets/css/components/_modal.scss index edab72a79e..4ea25f7753 100644 --- a/apps/block_scout_web/assets/css/components/_modal.scss +++ b/apps/block_scout_web/assets/css/components/_modal.scss @@ -15,11 +15,14 @@ $modal-gray-background: #f6f7f9 !default; .modal-header { border-bottom: none; padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding }; +} - .close.close-modal { - margin: -70px -70px 0 0; - opacity: 1; - } +.close.close-modal { + left: auto; + opacity: 1; + position: absolute; + right: -35px; + top: -35px; } .modal-body { @@ -35,6 +38,7 @@ $modal-gray-background: #f6f7f9 !default; .modal-content { border-radius: $modal-border-radius; + position: relative; } .modal-bottom-disclaimer { @@ -49,6 +53,10 @@ $modal-gray-background: #f6f7f9 !default; padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding }; text-align: left; + &.b-b-r-0 { + border-bottom-right-radius: 0; + } + .modal-bottom-disclaimer-graphic { flex-shrink: 0; padding-right: 15px; @@ -61,4 +69,12 @@ $modal-gray-background: #f6f7f9 !default; .modal-become-candidate { width: 280px; +} + +.modal-stake { + width: 460px; +} + +.modal-stake-two-cols { + display: flex; } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_stakes.scss b/apps/block_scout_web/assets/css/components/_stakes.scss index d0179bf6eb..d19f578a0a 100644 --- a/apps/block_scout_web/assets/css/components/_stakes.scss +++ b/apps/block_scout_web/assets/css/components/_stakes.scss @@ -67,6 +67,7 @@ $stakes-banned-background: #fff3f7!default; .stakes-top-stats-login { color: $primary; + cursor: pointer; margin-right: 8px; } diff --git a/apps/block_scout_web/assets/css/components/_stakes_progress.scss b/apps/block_scout_web/assets/css/components/_stakes_progress.scss new file mode 100644 index 0000000000..ea0d4bdb88 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes_progress.scss @@ -0,0 +1,74 @@ +.stakes-progress { + .modal-stake-right & { + border-left: 1px solid $base-border-color; + flex-shrink: 0; + height: 100%; + padding: $modal-vertical-padding $modal-horizontal-padding; + width: 190px; + } +} + +.stakes-progress-info { + margin-bottom: 25px; + + &:last-child { + margin-bottom: 0; + } +} + +.stakes-progress-info-title { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + margin: 0 0 12px; + text-align: left; +} + +.stakes-progress-info-value { + color: #333; + font-size: 14px; + font-weight: normal; + line-height: 1.2; + margin: 0; + text-align: left; + + &.link-color { + color: $primary; + } +} + +.stakes-progress-graph { + margin: 0 0 20px; + position: relative; +} + +.stakes-progress-graph-canvas { + position: relative; + z-index: 1; +} + +.stakes-progress-data { + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 12; +} + +.stakes-progress-data-total { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + text-align: center; +} + +.stakes-progress-data-progress { + color: #333; + font-size: 24px; + font-weight: bold; + line-height: 1.2; + margin: 0 0 8px; + text-align: center; +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/js/lib/modals.js b/apps/block_scout_web/assets/js/lib/modals.js index 97bca88929..563fff4a15 100644 --- a/apps/block_scout_web/assets/js/lib/modals.js +++ b/apps/block_scout_web/assets/js/lib/modals.js @@ -1,4 +1,5 @@ import $ from 'jquery' +import Chart from 'chart.js' $(function () { $('.js-become-candidate').on('click', function () { @@ -8,4 +9,43 @@ $(function () { $('.js-validator-info-modal').on('click', function () { $('#validatorInfoModal').modal() }) + + $('.js-stake-stake').on('click', function () { + $('#stakeModal').modal() + const progress = parseInt($('.js-stakes-progress-data-progress').text()) + const total = parseInt($('.js-stakes-progress-data-total').text()) + + setupStakesProgress(progress, total) + }) + + function setupStakesProgress (progress, total) { + const stakeProgress = $('#stakeProgress') + const primaryColor = $('.btn-full-primary').css('background-color') + const backgroundColors = [ + primaryColor, + 'rgba(202, 199, 226, 0.5)' + ] + const progressBackground = total - progress + + let myChart = new Chart(stakeProgress, { + type: 'doughnut', + data: { + datasets: [{ + data: [progress, progressBackground], + backgroundColor: backgroundColors, + hoverBackgroundColor: backgroundColors, + borderWidth: 0 + }] + }, + options: { + cutoutPercentage: 80, + legend: { + display: false + }, + tooltips: { + enabled: false + } + } + }) + } }) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex index 2d733b0c42..deae2f8bec 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex @@ -1,6 +1,9 @@ - + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex index f07795a0ce..586d5daf29 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex @@ -1,6 +1,9 @@ - + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_stake_more.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_stake_more.html.eex new file mode 100644 index 0000000000..3e5cf11cd2 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_stake_more.html.eex @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_move.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_move.html.eex index 70862f8eee..82936a2f42 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_move.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_move.html.eex @@ -1,4 +1,4 @@ - + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_stake.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_stake.html.eex index c621398995..dd661a0ea3 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_stake.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_stake.html.eex @@ -1,4 +1,4 @@ - + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_withdraw.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_withdraw.html.eex index c334ad6136..4407fbf679 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_withdraw.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_control_withdraw.html.eex @@ -1,4 +1,4 @@ - + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex index 66c0f6f944..7389f80d20 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex @@ -3,26 +3,26 @@
<%= gettext("Become Candidate") %>
-
+
-
-
- -
-
POA20
-
-
-
- + +
+ +
+
POA20
-

Minimum possible stake: 100 POA20

-
<%= render BlockScoutWeb.CommonComponentsView, "_btn_add_full.html", text: gettext("Become Candidate"), extra_class: "full-width" %>
- +
+
+ +
+

Minimum possible stake: 100 POA20

+
<%= render BlockScoutWeb.CommonComponentsView, "_btn_add_full.html", text: gettext("Become Candidate"), extra_class: "full-width" %>
+
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_stake.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_stake.html.eex new file mode 100644 index 0000000000..de15bcc5fc --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_stake.html.eex @@ -0,0 +1,52 @@ + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex index 94450a9e67..0e7359077c 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex @@ -3,12 +3,12 @@
0x18Bea833D503341C529a788c82909337e552a44e
-
+
<%= render BlockScoutWeb.StakesView, diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_progress.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_progress.html.eex new file mode 100644 index 0000000000..aa6391e5b9 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_progress.html.eex @@ -0,0 +1,32 @@ +
+
+ +
+
<%= if assigns[:progress] do @progress end %>
+
<%= if assigns[:total] do @total end %>
+
+
+
+

<%= gettext("Pool") %>

+

+ <%= if assigns[:pool] do @pool end %> +

+
+
+

<%= gettext("Stakes Ratio") %>

+

+ <%= if assigns[:stakes_ratio] do @stakes_ratio end %> +

+
+
+

<%= gettext("Delegators") %>

+

+ <%= if assigns[:delegators] do @delegators end %> +

+
+
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex index 96a39d1024..bf689bdb38 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex @@ -7,9 +7,9 @@
- <%= else %> + <% else %> with MetaMask - <%= end %> + <% end %> <%= gettext "Balance" %>: diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex index fe84eae270..7046643f05 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex @@ -17,7 +17,7 @@ <%= render BlockScoutWeb.StakesView, "_stakes_empty_content.html" %> - <%= end %> + <% end %> <%= if not @empty_content do %>
1
@@ -68,18 +68,19 @@ 1455
- <%= render BlockScoutWeb.StakesView, "_stakes_control_move.html" %> - <%= render BlockScoutWeb.StakesView, "_stakes_control_withdraw.html" %> - <%= render BlockScoutWeb.StakesView, "_stakes_control_stake.html" %> + <%= render BlockScoutWeb.StakesView, "_stakes_control_move.html", extra_class: "js-move-stake" %> + <%= render BlockScoutWeb.StakesView, "_stakes_control_withdraw.html", extra_class: "js-withdraw-stake" %> + <%= render BlockScoutWeb.StakesView, "_stakes_control_stake.html", extra_class: "js-stake-stake" %>
- <%= end %> - <%= end %> + <% end %> + <% end %>
<%= render BlockScoutWeb.StakesView, "_stakes_modal_validator_info.html" %> +<%= render BlockScoutWeb.StakesView, "_stakes_modal_stake.html" %> <%= render BlockScoutWeb.CommonComponentsView, "_pagination.html" diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex index df122f57e1..a230bde3a6 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex @@ -7,7 +7,7 @@
Show banned only
- <%= end %> + <% end %>