From 1aa67cd3ef08e4b98340c0f6ab4601ef9bae9094 Mon Sep 17 00:00:00 2001 From: ajandera Date: Thu, 11 May 2017 14:46:45 +0200 Subject: [PATCH 1/8] New design part I. --- .../public/css/assets/icon_back_copy.svg | 96 ++++++++-- resources/public/css/style.css | 180 +++++++++++++----- src/cljs/token/wallet/page.cljs | 30 ++- src/cljs/token/wallets/page.cljs | 50 +++-- 4 files changed, 263 insertions(+), 93 deletions(-) diff --git a/resources/public/css/assets/icon_back_copy.svg b/resources/public/css/assets/icon_back_copy.svg index dbd5a94..571c2ee 100755 --- a/resources/public/css/assets/icon_back_copy.svg +++ b/resources/public/css/assets/icon_back_copy.svg @@ -1,17 +1,85 @@ - - - 3112D594-155C-47E1-89DA-2B9A18928723 - Created with sketchtool. - - - - - - - - - + + + + + image/svg+xml + + + + + + + 3112D594-155C-47E1-89DA-2B9A18928723 + Created with sketchtool. + + + + + + + + - \ No newline at end of file + + diff --git a/resources/public/css/style.css b/resources/public/css/style.css index d501b41..eac2142 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -15,7 +15,7 @@ body { font-size: 14px; font-family: 'Roboto', sans-serif; line-height: 1.6; - background-color: #eef2f5; + background-color: #fff; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -37,42 +37,65 @@ h2 { font-weight: 400; font-size: 32px; } - - +.slick-slider{ + margin-bottom: 0 !important; +} .top-nav { display: flex; align-items: center; - background-color: #eef2f5; vertical-align: middle; } .top-nav h2 { padding: 32px; flex: 1; - text-align: center; + text-align: left; + padding-left: 120px; + text-transform: uppercase; + color: #628fe3; + font-weight: 800; + letter-spacing: 4px; } .top-nav .nav-left { position: absolute; left: 32px; } - .top-nav .nav-left .nav-back { display: inline-block; width: 32px; height: 32px; padding: 16px; background: url(assets/icon_back_copy.svg) center center no-repeat; + background-color: #628fe3; + border-radius: 40px; +} +.top-nav .nav-left .nav-back-hp { + display: inline-block; + width: 32px; + height: 32px; + padding: 16px; + background-color: #628fe3; + border-radius: 40px; + text-align: center; + font-size: 30px; + font-weight: 800; + color: #fff; +} +.top-nav .nav-left .nav-back-hp span { + position: absolute; + top: 10px; + left: 19px; } - .top-nav .nav-right { position: absolute; right: 32px; } .top-nav .nav-right .nav-update { - display: inline-block; + /*display: inline-block;*/ + display: none; width: 32px; height: 32px; padding: 16px; @@ -84,23 +107,28 @@ h2 { /* Wallets */ .wallets { - background-color: #eef2f5; - text-align: center; - padding-top: 15vh; + margin-left: 25px; + margin-right: 25px; + margin-bottom: 20px; + position: relative; + background: #628fe3; + border-radius: 10px; } .wallets h2 { padding: 16px; } +.wallets a { + color: #fff; + text-decoration: none; +} + .wallets .wallet { - margin-top: 32px; - margin-bottom: 32px; - margin-left: 16px; - margin-right: 16px; + border-bottom: 2px solid #4669ad; + padding-bottom: 25px; position: relative; - background-color: #fff; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + margin-left: 20px; } @@ -113,14 +141,17 @@ h2 { } .wallet-container { - background-color: #eef2f5; - padding: 16px; + background-color: #fff; + padding: 25px; + padding-top: 0px; } .wallet-container .wallet { position: relative; - background-color: #fff; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + background-color: #628fe3; + border-radius: 15px; + padding: 10px; + color: #fff; } .wallet-image { @@ -134,13 +165,35 @@ h2 { } .wallet-name { - margin-left: 80px; - padding-top: 32px; - padding-left: 32px; + padding-top: 25px; text-align: left; - font-size: 32px; + font-size: 26px; +} +.manage-wallet{ + border-bottom: none !important; +} +.wallet-points { + position: absolute; + right: 20px; + top: 45px; +} +.wallet-points .point{ + background: #4669ad; + display: block; + width: 5px; + height: 5px; + border-radius: 5px; + float: left; + margin-right: 3px; +} +.btn-wallet { + margin-left: 0 !important; + border-top: 2px solid #4669ad !important; +} +.wallet-name span.cur { + margin-left: 10px; + color: #c0d2f3 !important; } - .wallet-hash { margin-left: 80px; padding-left: 32px; @@ -163,7 +216,6 @@ h2 { .wallet-address-container { background-color: #eef2f5; padding-top: 2px; - padding-bottom: 12px; } .wallet-address { @@ -195,8 +247,7 @@ h2 { } .wallet-transactions-container { - background-color: #eef2f5; - padding-top: 2px; + } .wallet-transactions { @@ -209,8 +260,8 @@ h2 { .wallet-transactions > span { display: block; - padding: 32px 0 0 32px; - font-weight: 500; + padding: 10px 0 0 20px; + font-weight: 400; margin-bottom: 12px; } @@ -220,10 +271,7 @@ h2 { } .wallet-currencies { - display: block; - margin-top: 60px; - width: 100%; - text-align: center; + text-align: right; } .wallet-btn:hover { @@ -242,14 +290,45 @@ h2 { .slick-slider .slick-dots li.slick-active button:before { opacity: 1; } - +.wallet-btn-left .wallet, +.wallet-btn-right .wallet { + border: none; +} +.wallet-btn-left, +.wallet-btn-right { + text-center; + width: 50%; + font-size: 25px; + background: #517bc9; +} +.wallet.btn-wallet { + border-bottom-right-radius: 10px; + background: #517bc9; + border-bottom-left-radius: 10px; +} +.cur{ + margin-left: 10px; +} +.wallet-btn-left{ + float: left; + border-right: 2px solid #4669ad; + position: relative; + z-index: 1111111; + border-bottom-left-radius: 10px; +} .currency-usd, .currency-rub { - display: inline-block; - width: 32%; - vertical-align: top; - font-size: 32px; + font-size: 25px; + position: absolute; + top: 25px; + right: 20px; +} +.wallet-href-name { + padding-top: 10px; + text-align: center; +} +.clearfix { + clear: both; } - span.currency { display: block; color: #838c93; @@ -327,10 +406,23 @@ span.currency { } .wallet-amount span { - float: right; - color: #939ba1; + padding-left: 10px; + color: #c0d2f3; + font-size: 20px; +} +.wallet-amount p.left-block { + flot:left +} +.wallet-amount span.pull-right { + text-align: right; + float:right; +} +.wallet-amount span.pull-right span { + color: #fff; +} +.wallet-amount p.right-block { + width:50%; } - .wallet-send { text-align: left; padding: 16px 16px 16px 16px; diff --git a/src/cljs/token/wallet/page.cljs b/src/cljs/token/wallet/page.cljs index 44fa0a9..e8421b9 100644 --- a/src/cljs/token/wallet/page.cljs +++ b/src/cljs/token/wallet/page.cljs @@ -11,7 +11,7 @@ (defn nav [wallet-id] [:div.top-nav - [:h2 "Main wallet"] + [:h2 "Wallet"] [:div.nav-left [:a.nav-back {:on-click @@ -45,17 +45,18 @@ #_(println (str "callback " (.stringify js/JSON params)))))) (defn wallet-info [wallet-id] - (let [balance (subscribe [:get-in (db/wallet-balance-path wallet-id)]) - send-amount (subscribe [:get :send-amount]) + (let [balance (subscribe [:get-in (db/wallet-balance-path wallet-id)]) + send-amount (subscribe [:get :send-amount]) request-amount (subscribe [:get :request-amount]) - text (subscribe [:get :text])] + text (subscribe [:get :text])] (fn [wallet-id] (let [balance-fmt (format-wei (unit->wei @balance "ether"))] [:div.wallet-container [:div.wallet [:div.wallet-amount - [:p (to-fixed (:amount balance-fmt) 6)] - [:span (:unit balance-fmt)]] + [:p.left-block "Main wallet"] + [:span (:unit balance-fmt)] + [:span.pull-right (to-fixed (:amount balance-fmt) 4) (:unit balance-fmt)]] [:div.wallet-send.row [:p.title "Send ETH"] [:div.amount-controls @@ -77,12 +78,6 @@ [:span {:on-click #(request-money @request-amount)} "RECEIVE"]]]]]])))) -(defn address [wallet-id] - [:div.wallet-address-container - [:div.wallet-address - [:span "Address"] - [:p wallet-id]]]) - (defn format-date [date-format date] (.format (goog.i18n.DateTimeFormat. date-format) (js/Date. date))) @@ -94,11 +89,11 @@ (let [{:keys [from to value timeStamp hash timestamp confirmations]} (js->clj tx :keywordize-keys true) {:keys [amount unit]} (format-wei value) - timestamp' (or timestamp (* 1000 timeStamp)) - incoming? (= to wallet-id) + timestamp' (or timestamp (* 1000 timeStamp)) + incoming? (= to wallet-id) action-class {:class (if incoming? "action-add" "action-remove")} amount-class {:class (if incoming? "green" "red")} - sign (if incoming? "+" "-")] + sign (if incoming? "+" "-")] ^{:key hash} [:div.transaction [:div.transaction-action [:div action-class]] @@ -112,11 +107,11 @@ (str sign amount " " unit)]]]])) (defn transactions [wallet-id] - (let [transactions (subscribe [:get-in (db/wallet-transactions-path wallet-id)]) + (let [transactions (subscribe [:get-in (db/wallet-transactions-path wallet-id)]) pending-transactions (subscribe [:pending-transactions wallet-id])] [:div.wallet-transactions-container [:div.wallet-transactions - [:span "Transactions"] + [:span "Transaction history"] (if (and (empty @pending-transactions) (empty? @transactions)) [:div.no-transactions "No transactions found"] (concat @@ -129,5 +124,4 @@ [:div.wallet-screen [nav wallet-id] [wallet-info wallet-id] - [address wallet-id] [transactions wallet-id]]) diff --git a/src/cljs/token/wallets/page.cljs b/src/cljs/token/wallets/page.cljs index 11ec6d1..06654ae 100644 --- a/src/cljs/token/wallets/page.cljs +++ b/src/cljs/token/wallets/page.cljs @@ -6,27 +6,30 @@ [re-frame.core :as re-frame] [token.db :as db])) -(defn wallet-uri [wallet-id] - [:a.wallet-btn {:href (str "#/wallet/" wallet-id)} "Open wallet"]) +(defn allTransactions [] + [:div.wallet-transactions-container + [:div.wallet-transactions + [:span "Transaction history"]]]) (defn wallet [wallet-id] - (let [balance (subscribe [:get-in (db/wallet-balance-path wallet-id)])] + (let [balance (subscribe [:get-in (db/wallet-balance-path wallet-id)])] (fn [wallet-id] (let [balance-fmt (format-wei (unit->wei @balance "ether"))] - [:div.wallet - [:div.wallet-image] - [:div.wallet-name "Main wallet"] - [:div.wallet-hash wallet-id] - [:div.wallet-currencies - [:div.currency-usd [:span.currency (:unit balance-fmt)] - (to-fixed (:amount balance-fmt) 6)]] - (wallet-uri wallet-id)])))) + [:a.wallet-btn {:href (str "#/wallet/" wallet-id)} + [:div.wallet + [:div.wallet-name "Main wallet" [:span.cur (:unit balance-fmt)]] + [:span.wallet-currencies + [:div.currency-usd + (to-fixed (:amount balance-fmt) 4) [:span.cur (:unit balance-fmt)]]] + ] [:div.clearfix]])))) (defn wallets [] (let [accounts (subscribe [:get-in db/wallet-accounts-path])] [:div [:div.top-nav - [:h2 {} "Wallets"] + [:h2 {} "Wallet"] + [:div.nav-left + [:a.nav-back-hp [:span "W"]]] [:div.nav-right [:a.nav-update {:on-click @@ -43,8 +46,21 @@ (doall (map (fn [id] ^{:key id} [:div [wallet id]]) - @accounts))]] - [:div.wallet-actions - [:a.trade-eth {:href "#"} "Trade ETH"] - [:a.create-wallet {:href "#"} - [:span.add-wallet] "Create a wallet"]]])) + @accounts))] + [:a.wallet-btn {:href (str "#/")} + [:div.wallet.manage-wallet + [:div.wallet-name "Manage wallets"] + [:span.wallet-points + [:div.point] [:div.point] [:div.point]] + ] [:div.clearfix]] + [:a.wallet-btn-left {:href (str "#/")} + [:div.wallet.btn-wallet + [:div.wallet-href-name "Recieve"] + ] [:div.clearfix]] + [:a.wallet-btn-right {:href (str "#/")} + [:div.wallet.btn-wallet + [:div.wallet-href-name "Send"] + ] [:div.clearfix]]] + [:div.wallet-transactions-container + [:div.wallet-transactions + [:span "Transaction History"]]]])) From 69b53f303e58f5b7aa8b88747bdedad7523f5d1e Mon Sep 17 00:00:00 2001 From: ajandera Date: Mon, 5 Jun 2017 19:54:37 +0200 Subject: [PATCH 2/8] Update New design part I after PR comments. --- resources/public/css/style.css | 65 ++++++++++++++++++--------------- src/cljs/token/wallet/page.cljs | 10 +++-- 2 files changed, 42 insertions(+), 33 deletions(-) diff --git a/resources/public/css/style.css b/resources/public/css/style.css index eac2142..70365c0 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -45,8 +45,8 @@ h2 { display: flex; align-items: center; vertical-align: middle; + margin-left: 25px; } - .top-nav h2 { padding: 32px; flex: 1; @@ -60,33 +60,33 @@ h2 { .top-nav .nav-left { position: absolute; - left: 32px; + left: 25px; } .top-nav .nav-left .nav-back { display: inline-block; width: 32px; height: 32px; - padding: 16px; + padding: 12px; background: url(assets/icon_back_copy.svg) center center no-repeat; background-color: #628fe3; border-radius: 40px; } .top-nav .nav-left .nav-back-hp { display: inline-block; - width: 32px; - height: 32px; - padding: 16px; + width: 12px; + height: 12px; + padding: 12px; background-color: #628fe3; - border-radius: 40px; + border-radius: 45px; text-align: center; - font-size: 30px; + font-size: 19px; font-weight: 800; color: #fff; } .top-nav .nav-left .nav-back-hp span { position: absolute; - top: 10px; - left: 19px; + top: 5px; + left: 10px; } .top-nav .nav-right { position: absolute; @@ -126,9 +126,9 @@ h2 { .wallets .wallet { border-bottom: 2px solid #4669ad; - padding-bottom: 25px; + padding-bottom: 20px; position: relative; - margin-left: 20px; + margin-left: 15px; } @@ -149,7 +149,7 @@ h2 { .wallet-container .wallet { position: relative; background-color: #628fe3; - border-radius: 15px; + border-radius: 10px; padding: 10px; color: #fff; } @@ -165,9 +165,8 @@ h2 { } .wallet-name { - padding-top: 25px; + padding-top: 20px; text-align: left; - font-size: 26px; } .manage-wallet{ border-bottom: none !important; @@ -175,7 +174,7 @@ h2 { .wallet-points { position: absolute; right: 20px; - top: 45px; + top: 31px; } .wallet-points .point{ background: #4669ad; @@ -305,6 +304,7 @@ h2 { border-bottom-right-radius: 10px; background: #517bc9; border-bottom-left-radius: 10px; + padding-bottom: 10px; } .cur{ margin-left: 10px; @@ -319,7 +319,7 @@ h2 { .currency-usd, .currency-rub { font-size: 25px; position: absolute; - top: 25px; + top: 20px; right: 20px; } .wallet-href-name { @@ -399,24 +399,31 @@ span.currency { .wallet-amount p { padding: 0px; margin: 0px; - display: inline-block; - font-size: 21px; + display: block; + font-size: 15px; -webkit-touch-callout: none; -webkit-user-select: auto; } .wallet-amount span { - padding-left: 10px; - color: #c0d2f3; + color: #fff; font-size: 20px; } -.wallet-amount p.left-block { - flot:left +.unitDetail { + margin-left: 5px; } .wallet-amount span.pull-right { text-align: right; float:right; } +.left-block span { + font-size: 12px; +} +.address-detail { + margin-top: 20px; + font-size: 12px; + color: #c0d2f3; +} .wallet-amount span.pull-right span { color: #fff; } @@ -813,7 +820,6 @@ input:focus{ .wallet-name { font-size: 16px; - margin-left: 20px; } .wallet-hash { @@ -874,8 +880,8 @@ input:focus{ } .wallet-amount { - font-size: 24px; - padding: 16px; + font-size: 12px; + padding: 10px; } .wallet-controls .button { @@ -944,13 +950,12 @@ input:focus{ .top-nav h2 { padding: 16px; + margin-left: 35px; } - .top-nav .nav-left { - left: 6px; - top: 6px; + .top-nav .nav-left{ + height: 40px; } - .top-nav .nav-left .nav-back { width: 12px; height: 12px; diff --git a/src/cljs/token/wallet/page.cljs b/src/cljs/token/wallet/page.cljs index e8421b9..e9bd295 100644 --- a/src/cljs/token/wallet/page.cljs +++ b/src/cljs/token/wallet/page.cljs @@ -54,9 +54,13 @@ [:div.wallet-container [:div.wallet [:div.wallet-amount - [:p.left-block "Main wallet"] - [:span (:unit balance-fmt)] - [:span.pull-right (to-fixed (:amount balance-fmt) 4) (:unit balance-fmt)]] + [:div.left-block "Main wallet" + [:span.wallet-points + [:span.point] [:span.point] [:span.point]] + ] + [:p (to-fixed (:amount balance-fmt) 2) [:span.unitDetail (:unit balance-fmt)]] + [:p.address-detail "Address"] + ] [:div.wallet-send.row [:p.title "Send ETH"] [:div.amount-controls From 6e1b035db123ee5b1107c7ef773f749f5b25626b Mon Sep 17 00:00:00 2001 From: ajandera Date: Mon, 5 Jun 2017 21:06:38 +0200 Subject: [PATCH 3/8] Update wallet detail page for PR. --- resources/public/css/style.css | 52 +++++++++++++++++++++++++------- src/cljs/token/wallet/page.cljs | 41 ++++++++++--------------- src/cljs/token/wallets/page.cljs | 5 ++- 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/resources/public/css/style.css b/resources/public/css/style.css index 70365c0..57647b4 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -38,7 +38,7 @@ h2 { font-size: 32px; } .slick-slider{ - margin-bottom: 0 !important; + margin-bottom: 0; } .top-nav { @@ -150,7 +150,7 @@ h2 { position: relative; background-color: #628fe3; border-radius: 10px; - padding: 10px; + padding: 0; color: #fff; } @@ -171,20 +171,21 @@ h2 { .manage-wallet{ border-bottom: none !important; } + .wallet-points { position: absolute; right: 20px; - top: 31px; + top: -16px; + color: #4669ad; + font-size: 3em; } -.wallet-points .point{ - background: #4669ad; - display: block; - width: 5px; - height: 5px; - border-radius: 5px; - float: left; - margin-right: 3px; + +.wallet-points.detail{ + top: -25px; + color: #4669ad; + font-size: 3em; } + .btn-wallet { margin-left: 0 !important; border-top: 2px solid #4669ad !important; @@ -409,27 +410,56 @@ span.currency { color: #fff; font-size: 20px; } + .unitDetail { margin-left: 5px; } + .wallet-amount span.pull-right { text-align: right; float:right; } + .left-block span { font-size: 12px; } + .address-detail { margin-top: 20px; font-size: 12px; color: #c0d2f3; } + +.wallets-detail a { + margin: 0; +} +.wallets-detail .wallet-btn-right { + position: absolute; + right: 0; + padding: 0; + border-bottom-right-radius: 10px; +} +.wallets-detail .wallet-btn-left { + padding: 0; +} +.wallets-detail .wallet.btn-wallet { + border: none; +} +.wallets-detail .wallet-href-name { + padding-bottom: 10px; + color: #fff; +} +.wallet-amount.detail { + border-bottom: none; +} .wallet-amount span.pull-right span { color: #fff; } + .wallet-amount p.right-block { width:50%; } + .wallet-send { text-align: left; padding: 16px 16px 16px 16px; diff --git a/src/cljs/token/wallet/page.cljs b/src/cljs/token/wallet/page.cljs index e9bd295..a1675f0 100644 --- a/src/cljs/token/wallet/page.cljs +++ b/src/cljs/token/wallet/page.cljs @@ -48,39 +48,30 @@ (let [balance (subscribe [:get-in (db/wallet-balance-path wallet-id)]) send-amount (subscribe [:get :send-amount]) request-amount (subscribe [:get :request-amount]) - text (subscribe [:get :text])] + text (subscribe [:get :text])] (fn [wallet-id] (let [balance-fmt (format-wei (unit->wei @balance "ether"))] [:div.wallet-container [:div.wallet - [:div.wallet-amount + [:div.wallet-amount.detail [:div.left-block "Main wallet" - [:span.wallet-points - [:span.point] [:span.point] [:span.point]] + [:span.wallet-points.detail "..."] ] [:p (to-fixed (:amount balance-fmt) 2) [:span.unitDetail (:unit balance-fmt)]] - [:p.address-detail "Address"] + [:div.address-detail "Address"] + [:p wallet-id] ] - [:div.wallet-send.row - [:p.title "Send ETH"] - [:div.amount-controls - [:input.amount {:placeholder "Enter amount" - :value @send-amount - :on-change #(dispatch [:set :send-amount (u/value %)]) - :type :number}] - [:div.column - [:span {:on-click (when (pos? (js/parseFloat @balance)) - #(send-money @send-amount))} "SEND"]]]] - [:div.wallet-request.row - [:p.title "Request ETH"] - [:div.amount-controls - [:input.amount {:placeholder "Enter amount" - :value @request-amount - :on-change #(dispatch [:set :request-amount (u/value %)]) - :type :number}] - [:div.column - [:span {:on-click #(request-money @request-amount)} - "RECEIVE"]]]]]])))) + [:div.wallets-detail + [:a.wallet-btn-left {:href (str "#/")} + [:div.btn-wallet + [:div.wallet-href-name "Copy Address"] + ] [:div.clearfix]] + [:a.wallet-btn-right {:href (str "#/")} + [:div.btn-wallet + [:div.wallet-href-name "Show CR"] + ] [:div.clearfix]] + [:div.clearfix] + ]]])))) (defn format-date [date-format date] (.format (goog.i18n.DateTimeFormat. date-format) diff --git a/src/cljs/token/wallets/page.cljs b/src/cljs/token/wallets/page.cljs index 06654ae..976421f 100644 --- a/src/cljs/token/wallets/page.cljs +++ b/src/cljs/token/wallets/page.cljs @@ -6,7 +6,7 @@ [re-frame.core :as re-frame] [token.db :as db])) -(defn allTransactions [] +(defn all-transactions [] [:div.wallet-transactions-container [:div.wallet-transactions [:span "Transaction history"]]]) @@ -50,8 +50,7 @@ [:a.wallet-btn {:href (str "#/")} [:div.wallet.manage-wallet [:div.wallet-name "Manage wallets"] - [:span.wallet-points - [:div.point] [:div.point] [:div.point]] + [:span.wallet-points "..."] ] [:div.clearfix]] [:a.wallet-btn-left {:href (str "#/")} [:div.wallet.btn-wallet From 57e078c1f664671a525bbfcedabfa3f2bdf2b8eb Mon Sep 17 00:00:00 2001 From: ajandera Date: Tue, 13 Jun 2017 16:05:42 +0200 Subject: [PATCH 4/8] Add to clipboard button. --- resources/public/css/style.css | 34 +++++++++++++++++++----- src/cljs/token/components/clipboard.cljs | 3 +-- src/cljs/token/wallet/page.cljs | 4 +-- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/resources/public/css/style.css b/resources/public/css/style.css index 57647b4..b3bfba2 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -37,6 +37,7 @@ h2 { font-weight: 400; font-size: 32px; } + .slick-slider{ margin-bottom: 0; } @@ -47,6 +48,7 @@ h2 { vertical-align: middle; margin-left: 25px; } + .top-nav h2 { padding: 32px; flex: 1; @@ -62,6 +64,7 @@ h2 { position: absolute; left: 25px; } + .top-nav .nav-left .nav-back { display: inline-block; width: 32px; @@ -71,6 +74,7 @@ h2 { background-color: #628fe3; border-radius: 40px; } + .top-nav .nav-left .nav-back-hp { display: inline-block; width: 12px; @@ -83,11 +87,13 @@ h2 { font-weight: 800; color: #fff; } + .top-nav .nav-left .nav-back-hp span { position: absolute; top: 5px; left: 10px; } + .top-nav .nav-right { position: absolute; right: 32px; @@ -103,7 +109,6 @@ h2 { background: url(assets/icon_update.svg) center center no-repeat; } - /* Wallets */ .wallets { @@ -131,7 +136,6 @@ h2 { margin-left: 15px; } - /* Wallet screen */ .wallet-screen { @@ -168,6 +172,7 @@ h2 { padding-top: 20px; text-align: left; } + .manage-wallet{ border-bottom: none !important; } @@ -190,10 +195,12 @@ h2 { margin-left: 0 !important; border-top: 2px solid #4669ad !important; } + .wallet-name span.cur { margin-left: 10px; color: #c0d2f3 !important; } + .wallet-hash { margin-left: 80px; padding-left: 32px; @@ -290,10 +297,12 @@ h2 { .slick-slider .slick-dots li.slick-active button:before { opacity: 1; } + .wallet-btn-left .wallet, .wallet-btn-right .wallet { border: none; } + .wallet-btn-left, .wallet-btn-right { text-center; @@ -301,15 +310,18 @@ h2 { font-size: 25px; background: #517bc9; } + .wallet.btn-wallet { border-bottom-right-radius: 10px; background: #517bc9; border-bottom-left-radius: 10px; padding-bottom: 10px; } + .cur{ margin-left: 10px; } + .wallet-btn-left{ float: left; border-right: 2px solid #4669ad; @@ -317,19 +329,22 @@ h2 { z-index: 1111111; border-bottom-left-radius: 10px; } + .currency-usd, .currency-rub { font-size: 25px; position: absolute; top: 20px; right: 20px; } -.wallet-href-name { - padding-top: 10px; - text-align: center; + +.button-clipboard { + padding-bottom: 1px; } + .clearfix { clear: both; } + span.currency { display: block; color: #838c93; @@ -433,25 +448,32 @@ span.currency { .wallets-detail a { margin: 0; } + .wallets-detail .wallet-btn-right { position: absolute; right: 0; padding: 0; border-bottom-right-radius: 10px; } + .wallets-detail .wallet-btn-left { padding: 0; } + .wallets-detail .wallet.btn-wallet { border: none; } + .wallets-detail .wallet-href-name { padding-bottom: 10px; color: #fff; + padding-top: 10px; } + .wallet-amount.detail { border-bottom: none; } + .wallet-amount span.pull-right span { color: #fff; } @@ -513,8 +535,6 @@ input.amount { border: 0px; } - - .button-copy { display: inline-block; margin-right: 10px; diff --git a/src/cljs/token/components/clipboard.cljs b/src/cljs/token/components/clipboard.cljs index 6bfe093..0f6cd8d 100644 --- a/src/cljs/token/components/clipboard.cljs +++ b/src/cljs/token/components/clipboard.cljs @@ -16,5 +16,4 @@ (reset! clipboard-atom nil)) :reagent-render (fn [] - [:div.button {:data-clipboard-text text} - [:span.button-copy] label])}))) + [:div.button.button-clipboard {:data-clipboard-text text} label])}))) \ No newline at end of file diff --git a/src/cljs/token/wallet/page.cljs b/src/cljs/token/wallet/page.cljs index a1675f0..c401255 100644 --- a/src/cljs/token/wallet/page.cljs +++ b/src/cljs/token/wallet/page.cljs @@ -62,9 +62,9 @@ [:p wallet-id] ] [:div.wallets-detail - [:a.wallet-btn-left {:href (str "#/")} + [:div.wallet-btn-left [:div.btn-wallet - [:div.wallet-href-name "Copy Address"] + [:div.wallet-href-name [clipboard-button "Copy Address" wallet-id]] ] [:div.clearfix]] [:a.wallet-btn-right {:href (str "#/")} [:div.btn-wallet From a45a553f02a80ccc3442e28203f57eada5757b46 Mon Sep 17 00:00:00 2001 From: ajandera Date: Tue, 13 Jun 2017 17:33:17 +0200 Subject: [PATCH 5/8] Fix buttons align. --- resources/public/css/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/resources/public/css/style.css b/resources/public/css/style.css index b3bfba2..493e11b 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -315,7 +315,7 @@ h2 { border-bottom-right-radius: 10px; background: #517bc9; border-bottom-left-radius: 10px; - padding-bottom: 10px; + padding-bottom: 0px; } .cur{ @@ -464,10 +464,11 @@ span.currency { border: none; } -.wallets-detail .wallet-href-name { +.wallet-href-name { padding-bottom: 10px; color: #fff; padding-top: 10px; + text-align: center; } .wallet-amount.detail { From a2e8ca8914541e54ab0105095ff87e903ca7b550 Mon Sep 17 00:00:00 2001 From: ajandera Date: Tue, 13 Jun 2017 19:21:51 +0200 Subject: [PATCH 6/8] Add wallets manage page. --- resources/public/css/style.css | 49 ++++++++++++++++++++++++ src/cljs/token/manage-wallets/page.cljs | 51 +++++++++++++++++++++++++ src/cljs/token/routes.cljs | 4 ++ src/cljs/token/views.cljs | 2 + src/cljs/token/wallets/page.cljs | 6 +-- 5 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 src/cljs/token/manage-wallets/page.cljs diff --git a/resources/public/css/style.css b/resources/public/css/style.css index 493e11b..c60bfee 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -1065,3 +1065,52 @@ input:focus{ margin-right: 16px; } } +.wallets.manage-wallets { + background: #fff; + color: #000; +} +.wallets.manage-wallets { + .wallet { + border: none; + } +} +.wallet-name.manage-wallet{ + color: #000; +} +.manage-wallet-cur { + color: silver; + padding-left: 5px; +} +.currency-usd.manage-wallets { + color: #000; + right: 60px; +} + +.wallet-points.manage-wallets { + position: absolute; + right: 15px; + top: -10px; + color: silver; + font-size: 2.5em; +} + +.manage-wallets-item { + border-bottom: 2px solid silver; + padding-bottom: 20px; + position: relative; +} + +.manage-wallet-btn { + background: #628fe3; + margin-left: 25px; + margin-right: 25px; + margin-bottom: 20px; + text-align: center; + color: #fff; + text-decoration: none; + width: 89%; + display: block; + padding-top: 5px; + padding-bottom: 5px; + border-radius: 6px; +} \ No newline at end of file diff --git a/src/cljs/token/manage-wallets/page.cljs b/src/cljs/token/manage-wallets/page.cljs new file mode 100644 index 0000000..16e04e2 --- /dev/null +++ b/src/cljs/token/manage-wallets/page.cljs @@ -0,0 +1,51 @@ +(ns token.manage-wallets.page + (:require [re-frame.core :refer [subscribe dispatch]] + [token.ethereum :refer [to-fixed unit->wei format-wei]] + [reagent.core :as r] + [token.components.slick :as s] + [re-frame.core :as re-frame] + [token.db :as db])) + +(defn wallet [wallet-id] + (let [balance (subscribe [:get-in (db/wallet-balance-path wallet-id)])] + (fn [wallet-id] + (let [balance-fmt (format-wei (unit->wei @balance "ether"))] + [:a.wallet-btn {:href (str "#/wallet/" wallet-id)} + [:div.manage-wallets-item + [:div.wallet-name.manage-wallet "Main wallet" [:span.manage-wallet-cur (:unit balance-fmt)]] + [:span.wallet-currencies + [:div.currency-usd.manage-wallets + (to-fixed (:amount balance-fmt) 4) [:span.manage-wallet-cur (:unit balance-fmt)]]] + [:span.wallet-points.manage-wallets "..."] + ] [:div.clearfix]])))) + +(defn manage-wallets [] + (let [accounts (subscribe [:get-in db/wallet-accounts-path])] + [:div + [:div.top-nav + [:h2 {} "Wallet"] + [:div.nav-left + [:a.nav-back + {:on-click + (fn [_] + (.back js/history))}]] + [:div.nav-right + [:a.nav-update + {:on-click + (fn [_] + (re-frame/dispatch [:refresh-accounts]))}]]] + [:div.wallets.manage-wallets + [s/slick {:dots true + :infinite false + :slidesToShow 1 + :slidesToScroll 1 + :arrows false + :adaptiveHeight false + :centerMode true} + (doall (map (fn [id] + ^{:key id} + [:div [wallet id]]) + @accounts))]] + [:a.manage-wallet-btn {:href (str "#/")} + [:span "Add wallets"] + [:div.clearfix]]])) \ No newline at end of file diff --git a/src/cljs/token/routes.cljs b/src/cljs/token/routes.cljs index d1ebf51..0bd62db 100644 --- a/src/cljs/token/routes.cljs +++ b/src/cljs/token/routes.cljs @@ -33,4 +33,8 @@ (defroute "/transaction" [] (dispatch [:set-active-panel :transaction-panel])) + (defroute "/manage-wallets" [] + (dispatch [:set :current-wallet nil]) + (dispatch [:set-active-panel :manage-wallets-panel])) + (hook-browser-navigation!)) diff --git a/src/cljs/token/views.cljs b/src/cljs/token/views.cljs index ae04f96..c3c2d9f 100644 --- a/src/cljs/token/views.cljs +++ b/src/cljs/token/views.cljs @@ -1,6 +1,7 @@ (ns token.views (:require [re-frame.core :as re-frame] [token.wallets.page :refer [wallets]] + [token.manage-wallets.page :refer [manage-wallets]] [token.wallet.page :refer [wallet]] [token.transaction.page :refer [transaction]])) @@ -9,6 +10,7 @@ (defmethod panels :wallet-panel [_ wallet-id] [wallet wallet-id]) (defmethod panels :transaction-panel [] [transaction]) (defmethod panels :default [] [:div]) +(defmethod panels :manage-wallets-panel [] [manage-wallets]) (defn show-panel [[panel-name params]] diff --git a/src/cljs/token/wallets/page.cljs b/src/cljs/token/wallets/page.cljs index 976421f..a14719e 100644 --- a/src/cljs/token/wallets/page.cljs +++ b/src/cljs/token/wallets/page.cljs @@ -47,7 +47,7 @@ ^{:key id} [:div [wallet id]]) @accounts))] - [:a.wallet-btn {:href (str "#/")} + [:a.wallet-btn {:href (str "#/manage-wallets")} [:div.wallet.manage-wallet [:div.wallet-name "Manage wallets"] [:span.wallet-points "..."] @@ -60,6 +60,4 @@ [:div.wallet.btn-wallet [:div.wallet-href-name "Send"] ] [:div.clearfix]]] - [:div.wallet-transactions-container - [:div.wallet-transactions - [:span "Transaction History"]]]])) + [all-transactions]])) From 0b05ce4da6d45ad996876a3ccce370ca48409410 Mon Sep 17 00:00:00 2001 From: ajandera Date: Mon, 26 Jun 2017 17:51:47 +0200 Subject: [PATCH 7/8] Fix visual bugs. change transaction history. --- resources/public/css/assets/dots.png | Bin 0 -> 523 bytes resources/public/css/slick.css | 1 - resources/public/css/style.css | 62 ++++++++++++++++----------- src/cljs/token/wallet/page.cljs | 18 ++++---- src/cljs/token/wallets/page.cljs | 2 +- 5 files changed, 46 insertions(+), 37 deletions(-) create mode 100755 resources/public/css/assets/dots.png diff --git a/resources/public/css/assets/dots.png b/resources/public/css/assets/dots.png new file mode 100755 index 0000000000000000000000000000000000000000..1ee9c5c8ad372af69dea1047d21267eb2f0f826d GIT binary patch literal 523 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@ZgvM!jKx9jP7LeL$-D%zk9xW|hEy=V zy}r@Q*-+%zM;X}~HurS)`wKZrb=T#+TBKmt)$O;`edc z_RQCcmNTqb|L(psd(PzZKRy@DwmQzw#G%l@K$vjY%XFzU`(E`;OF6lU=ig`doQ*u^ zGAG7%4!@r3k^gGDx5?~%?&t9L^6t|As@Ko`oX3}Q+-REVesinae?6|>zIm%Cs5;iu zH>&udect1itNX;OobvTnZ<}++F1)z)&Y#QAuO%`UOj@mfHvi6@{rmRY-ruKl_H2Ik z>6!UHcc<7pzO{Bgx}<&c_ux$#SHCc=zP@VelNa|a^w_e*j)@nY*|08bedy(xKtlWE z#l4pc#TTSph@bn0$wc$OhN`u*{)xh63L;seeGR6JNW-^OQA*#U6iKFyk<1?ZU9&b4l;*-*?Sl vu*1fN@&CisZhxwGDiITqz_7le@qxEu@;9q{qFeKTvCH7;>gTe~DWM4fC+y-5 literal 0 HcmV?d00001 diff --git a/resources/public/css/slick.css b/resources/public/css/slick.css index 6fb760a..32b73b1 100644 --- a/resources/public/css/slick.css +++ b/resources/public/css/slick.css @@ -44,7 +44,6 @@ [dir="rtl"] .slick-next:before { content: "←"; } /* Dots */ -.slick-slider { margin-bottom: 30px; } .slick-dots { position: relative; top: -30px; list-style: none; display: block; text-align: center; padding: 0; width: 98%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } diff --git a/resources/public/css/style.css b/resources/public/css/style.css index 493e11b..ef4ce06 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -57,7 +57,7 @@ h2 { text-transform: uppercase; color: #628fe3; font-weight: 800; - letter-spacing: 4px; + letter-spacing: 2px; } .top-nav .nav-left { @@ -130,7 +130,7 @@ h2 { } .wallets .wallet { - border-bottom: 2px solid #4669ad; + border-bottom: 1px solid rgba(31, 37, 63, 0.2); padding-bottom: 20px; position: relative; margin-left: 15px; @@ -169,7 +169,7 @@ h2 { } .wallet-name { - padding-top: 20px; + padding-top: 25px; text-align: left; } @@ -180,24 +180,23 @@ h2 { .wallet-points { position: absolute; right: 20px; - top: -16px; - color: #4669ad; - font-size: 3em; + top: 19px; + background: url('assets/dots.png') no-repeat; + width: 35px; + height: 35px; + background-size: 35px; } - -.wallet-points.detail{ - top: -25px; - color: #4669ad; - font-size: 3em; +.wallet-points.detail { + top: 5px; } .btn-wallet { margin-left: 0 !important; - border-top: 2px solid #4669ad !important; + border-top: 1px solid rgba(31, 37, 63, 0.2) !important; } .wallet-name span.cur { - margin-left: 10px; + margin-left: 3px; color: #c0d2f3 !important; } @@ -319,12 +318,12 @@ h2 { } .cur{ - margin-left: 10px; + margin-left: 3px; } .wallet-btn-left{ float: left; - border-right: 2px solid #4669ad; + border-right: 1px solid rgba(31, 37, 63, 0.2); position: relative; z-index: 1111111; border-bottom-left-radius: 10px; @@ -333,7 +332,7 @@ h2 { .currency-usd, .currency-rub { font-size: 25px; position: absolute; - top: 20px; + top: 25px; right: 20px; } @@ -356,7 +355,6 @@ span.currency { display: block; margin-top: 20px; padding: 32px; - border-top: 1px solid rgba(0, 0, 0, 0.1); color: #838c93; text-decoration: none; font-size: 32px; @@ -420,6 +418,9 @@ span.currency { -webkit-touch-callout: none; -webkit-user-select: auto; } +.wallet-amount p.walletAddress { + font-size: 11px; +} .wallet-amount span { color: #fff; @@ -437,6 +438,7 @@ span.currency { .left-block span { font-size: 12px; + font-weight: 800; } .address-detail { @@ -604,12 +606,10 @@ input.amount { font-size: 32px; } -.transaction-amount .red { - color: #c95656; -} - -.transaction-amount .green { - color: #5fc48d; +.transaction-amount .amount { + font-weight: 800; + margin-right: 3px; + color: #000; } .button-full { @@ -982,23 +982,35 @@ input:focus{ margin-left: 24px; width: 80%; padding-bottom: 16px; + height: 30px; } .transaction-name { font-size: 14px; + position: absolute; + bottom: 0; } .transaction-date { font-size: 12px; + right: 0; + bottom: 0; + position: absolute; } .transaction-amount { font-size: 16px; - top: 8px; - right: 0; + top: 0; + left: 0; margin-right: 16px; } + .transaction-type { + margin-right: 3px; + color: #838c93; + font-size: 11px; + } + .top-nav h2 { padding: 16px; margin-left: 35px; diff --git a/src/cljs/token/wallet/page.cljs b/src/cljs/token/wallet/page.cljs index c401255..a676fcb 100644 --- a/src/cljs/token/wallet/page.cljs +++ b/src/cljs/token/wallet/page.cljs @@ -55,11 +55,11 @@ [:div.wallet [:div.wallet-amount.detail [:div.left-block "Main wallet" - [:span.wallet-points.detail "..."] + [:span.wallet-points.detail ""] ] [:p (to-fixed (:amount balance-fmt) 2) [:span.unitDetail (:unit balance-fmt)]] [:div.address-detail "Address"] - [:p wallet-id] + [:p.walletAddress wallet-id] ] [:div.wallets-detail [:div.wallet-btn-left @@ -86,20 +86,18 @@ {:keys [amount unit]} (format-wei value) timestamp' (or timestamp (* 1000 timeStamp)) incoming? (= to wallet-id) - action-class {:class (if incoming? "action-add" "action-remove")} - amount-class {:class (if incoming? "green" "red")} - sign (if incoming? "+" "-")] + action-class {:class (if incoming? "action-add" "action-remove")}] ^{:key hash} [:div.transaction [:div.transaction-action [:div action-class]] [:div.transaction-details - [:div.transaction-name (account-name (if incoming? from to))] - [:div.transaction-date (str (format-date "d MMM 'at' hh:mm" timestamp') + [:div.transaction-amount + [:span [:span.amount amount] unit]] + [:div.transaction-name [:span.transaction-type (if incoming? "from" "to")] (account-name (if incoming? from to))] + [:div.transaction-date (str (format-date "d MMM hh:mm" timestamp') " " (when-not confirmations "(pending...)"))] - [:div.transaction-amount - [:span amount-class - (str sign amount " " unit)]]]])) +]])) (defn transactions [wallet-id] (let [transactions (subscribe [:get-in (db/wallet-transactions-path wallet-id)]) diff --git a/src/cljs/token/wallets/page.cljs b/src/cljs/token/wallets/page.cljs index 976421f..2466d1f 100644 --- a/src/cljs/token/wallets/page.cljs +++ b/src/cljs/token/wallets/page.cljs @@ -50,7 +50,7 @@ [:a.wallet-btn {:href (str "#/")} [:div.wallet.manage-wallet [:div.wallet-name "Manage wallets"] - [:span.wallet-points "..."] + [:span.wallet-points ""] ] [:div.clearfix]] [:a.wallet-btn-left {:href (str "#/")} [:div.wallet.btn-wallet From 24a23c092032d59261edda8bdbb4f53d8a44c303 Mon Sep 17 00:00:00 2001 From: ajandera Date: Sat, 1 Jul 2017 21:10:26 +0200 Subject: [PATCH 8/8] Update manage page layout. --- resources/public/css/style.css | 9 +++++---- src/cljs/token/manage-wallets/page.cljs | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/resources/public/css/style.css b/resources/public/css/style.css index 009125b..fa8b8c1 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -1100,10 +1100,11 @@ input:focus{ .wallet-points.manage-wallets { position: absolute; - right: 15px; - top: -10px; - color: silver; - font-size: 2.5em; + right: 10px; + top: 20px; + filter: gray; /* IE6-9 */ + -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ + filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ } .manage-wallets-item { diff --git a/src/cljs/token/manage-wallets/page.cljs b/src/cljs/token/manage-wallets/page.cljs index 16e04e2..a6d1c6d 100644 --- a/src/cljs/token/manage-wallets/page.cljs +++ b/src/cljs/token/manage-wallets/page.cljs @@ -16,7 +16,7 @@ [:span.wallet-currencies [:div.currency-usd.manage-wallets (to-fixed (:amount balance-fmt) 4) [:span.manage-wallet-cur (:unit balance-fmt)]]] - [:span.wallet-points.manage-wallets "..."] + [:span.wallet-points.manage-wallets ""] ] [:div.clearfix]])))) (defn manage-wallets []