diff --git a/src/assets/app/static/animations.css b/src/assets/app/static/animations.css index 1afd6a6..3309934 100644 --- a/src/assets/app/static/animations.css +++ b/src/assets/app/static/animations.css @@ -2,7 +2,7 @@ * Make everything smooth */ #liquidwallet #container * { - transition: all 0.3s ease-in-out; + transition: all 0.2s ease-in-out; } #liquidwallet #container .text.loading { diff --git a/src/js/ui/stages/ReceiveStage.js b/src/js/ui/stages/ReceiveStage.js index 008699e..61e896e 100644 --- a/src/js/ui/stages/ReceiveStage.js +++ b/src/js/ui/stages/ReceiveStage.js @@ -35,14 +35,16 @@ export default class ReceiveStage extends UIStage { let SECONDARY_CURRENCY = secondaryCurrency; let SECONDARY_INFO = await lq.assets().getAssetInfo(secondaryCurrency); - const c0 = $vlist(stageCntEl).fill().makeScrollable(); - const c1 = $vlist(stageCntEl).grow(100).fill().makeScrollable(); + const c0 = $vlist(stageCntEl, []).fill().makeScrollable(); + const c1 = $vlist(stageCntEl, ["main"]).grow(100).fill().makeScrollable(); + + $title(c1).setValue("Asset"); + const assetSelector = $inputSelect(c1, "Select Asset"); - const assetSelector = $inputSelect(c0, "Select Asset"); - $vsep(c0); const invoiceQr = $hlist(c0); + $title(c1).setValue("Address"); - const invoiceTx = Html.$inputText(c0).setEditable(false); + const invoiceTx = Html.$inputText(c1).setEditable(false); $icon(invoiceTx) .setAction(() => { @@ -51,7 +53,7 @@ export default class ReceiveStage extends UIStage { }) .setValue("content_copy"); - $title(c1).setValue("Settings"); + $title(c1).setValue("Amount"); const amountPrimaryEl = $inputNumber(c1).grow(50).setPlaceHolder("0.00"); const tickerEl = $text(amountPrimaryEl).setValue(ASSET_INFO.ticker); diff --git a/src/js/ui/stages/SendStage.js b/src/js/ui/stages/SendStage.js index 964b154..8372049 100644 --- a/src/js/ui/stages/SendStage.js +++ b/src/js/ui/stages/SendStage.js @@ -45,9 +45,20 @@ export default class SendStage extends UIStage { let TO_ADDR = DUMMY_ADDR; let FEE = 0; - const c01El = $vlist(walletEl).makeScrollable().fill(); + const c00El = $vlist(walletEl).fill().makeScrollable(); + const c000El = $list(c00El, ["p$v", "l$h", "l$baselineAlign"]).fill(); + const c02El = $vlist(c000El, ["main"]).makeScrollable().fill(); + const c01El = $vlist(c000El, ["main"]).makeScrollable().fill(); + const c03El = $hlist(c00El, []).fill(); + + $title(c02El).setValue("Asset"); + + const assetInputEl = $inputSelect(c02El, "Select Asset"); + + $title(c01El).setValue("To"); + + const addrEl = $inputText(c01El).setPlaceHolder("Address"); - const assetInputEl = $inputSelect(c01El, "Select Asset"); $text(c01El, ["warning"]).setValue( ` @@ -57,8 +68,6 @@ export default class SendStage extends UIStage { true, ); - const addrEl = $inputText(c01El).setPlaceHolder("Address"); - $icon(addrEl) .setValue("qr_code_scanner") .setAction(async () => { @@ -133,42 +142,46 @@ export default class SendStage extends UIStage { addrEl.setValue(text); }); - $title(c01El).setValue("Amount"); + $title(c02El).setValue("Amount"); - const amountNativeEl = $inputNumber(c01El).setPlaceHolder("0.00"); + const amountNativeEl = $inputNumber(c02El).setPlaceHolder("0.00"); const ticker1El = $text(amountNativeEl); - const amountSecondaryEl = $inputNumber(c01El).setPlaceHolder("0.00"); + const amountSecondaryEl = $inputNumber(c02El).setPlaceHolder("0.00"); const ticker2El = $text(amountSecondaryEl); - const availableBalanceEl = $hlist(c01El, ["sub"]).fill(); + const availableBalanceDataEl = $vlist(c02El, ["sub"]).fill(); + const availableBalanceEl = $hlist(availableBalanceDataEl, ["sub"]).fill(); $hsep(availableBalanceEl).grow(100); const availableBalanceTextEl = $text(availableBalanceEl).setValue("Available balance: "); const availableBalanceValueEl = $text(availableBalanceEl); - const useAllEl = $button(availableBalanceEl, ["small"]).setValue("SEND ALL"); + const useAllRowEl = $hlist(availableBalanceDataEl, ["sub"]); + $hsep(useAllRowEl).grow(100); + const useAllEl = $button(useAllRowEl, ["small"]).setValue("SEND ALL"); $title(c01El).setValue("Fee"); const prioritySlideEl = $inputSlide(c01El); prioritySlideEl.setLabel(0, "Low (slow)"); prioritySlideEl.setLabel(0.5, "Medium"); prioritySlideEl.setLabel(1, "High (fast)"); + const feeDataEl = $vlist(c01El, []).fill(); - const feeRowEl = $hlist(c01El, ["sub"]); + const feeRowEl = $hlist(feeDataEl, ["sub"]); $hsep(feeRowEl).grow(100); $text(feeRowEl).setValue("Fee: "); const feeValueEl = $text(feeRowEl); $hsep(feeRowEl).setValue("/"); const feeValueSecondaryEl = $text(feeRowEl); - const timeRowEl = $hlist(c01El, ["sub"]); + const timeRowEl = $hlist(feeDataEl, ["sub"]); $hsep(timeRowEl).grow(100); $text(timeRowEl).setValue("Confirmation time: ~"); const timeValueEl = $text(timeRowEl).setValue("10"); $hsep(timeRowEl).setValue("minutes"); - const errorRowEl = $vlist(c01El, ["error"]); + const errorRowEl = $vlist(c03El, ["error"]); errorRowEl.hide(); - const confirmBtnEl = Html.$button(c01El).setValue("Confirm and sign"); + const confirmBtnEl = Html.$button(c03El).setValue("Confirm and sign"); const loading = (v) => { if (!v) { diff --git a/src/js/ui/stages/WalletStage.js b/src/js/ui/stages/WalletStage.js index 30d2e90..8119e27 100644 --- a/src/js/ui/stages/WalletStage.js +++ b/src/js/ui/stages/WalletStage.js @@ -30,7 +30,10 @@ export default class WalletPage extends UIStage { const primaryCurrency = (await store.get(`primaryCurrency${network}`)) || lq.getBaseAsset(); const secondaryCurrency = (await store.get(`secondaryCurrency${network}`)) || "USD"; - const assetsEl = $list(parentEl, ["main", "p$h", "l$v"], "assets").makeScrollable(true, true); + const assetsEl = $list(parentEl, ["main", "highlight", "p$h", "l$v"], "assets").makeScrollable( + true, + true, + ); assetsEl.setPriority(-10); assetsEl.initUpdate(); @@ -130,7 +133,9 @@ export default class WalletPage extends UIStage { async renderHistoryPanel(parentEl, lq, filter, ui, forceRefresh = false, limit = 100, page = 0) { filter = this.filter; - const historyEl = $vlist(parentEl, ["main"], "history").makeScrollable(true, true).fill(); + const historyEl = $vlist(parentEl, ["main", "highlight"], "history") + .makeScrollable(true, true) + .fill(); const history = await lq.getHistory(); //.slice(page * limit, page * limit + limit); TODO: pagination @@ -299,7 +304,9 @@ export default class WalletPage extends UIStage { } async renderSendReceive(parentEl, lq, filter, ui) { - const cntEl = $hlist(parentEl, ["buttons", "fillw", "main"], "sendReceive").setPriority(-15).fill(); + const cntEl = $hlist(parentEl, ["buttons", "fillw", "main", "highlight"], "sendReceive") + .setPriority(-15) + .fill(); $button(cntEl, []) .setValue("Receive") .setIconValue("arrow_downward") @@ -315,12 +322,15 @@ export default class WalletPage extends UIStage { } async renderSearchBar(walletEl, lq, render, ui) { - const searchInputEl = $inputText(walletEl).setPlaceHolder("Search"); + const searchBarParentEl = $hlist(walletEl, ["searchBar", "main", "highlight"]) + .setPriority(-10) + .fill(); + const searchInputEl = $inputText(searchBarParentEl).setPlaceHolder("Search"); searchInputEl.setAttribute("autocomplete", "off"); searchInputEl.setAttribute("autocorrect", "off"); searchInputEl.setAttribute("autocapitalize", "off"); searchInputEl.setAttribute("spellcheck", "false"); - searchInputEl.setPriority(-10); + // searchInputEl.setPriority(-10); let lastValue = ""; let scheduledTimeout = undefined; const searchIcon = $icon(searchInputEl, ["search"]).setValue("search"); diff --git a/src/less/stages/receive.less b/src/less/stages/receive.less index 2c4340d..b3090c9 100644 --- a/src/less/stages/receive.less +++ b/src/less/stages/receive.less @@ -8,16 +8,14 @@ } #liquidwallet #container.receive.stage .invoiceQr { - width: min(min(40vh, 100%), 300px); + width: min(min(40vh, 100%), 512px); max-width: 100%; margin: auto; - margin-bottom: 2rem; + margin-top: 2rem; + flex-shrink: 1; } #liquidwallet #container.receive { font-size: 110%; // max-width: 900px; } -#liquidwallet #container.send { - max-width: 900px; -} diff --git a/src/less/stages/send.less b/src/less/stages/send.less index cdbdf38..8b8a7ec 100644 --- a/src/less/stages/send.less +++ b/src/less/stages/send.less @@ -7,7 +7,4 @@ // max-width: 900px; } -#liquidwallet #container.send { - max-width: 900px; -} /** if screen at least 1000px wide **/ diff --git a/src/less/stages/wallet.less b/src/less/stages/wallet.less index cd7ffa3..0375165 100644 --- a/src/less/stages/wallet.less +++ b/src/less/stages/wallet.less @@ -92,3 +92,7 @@ #liquidwallet #container.wallet.stage #history .tx > *:last-child { margin-left: auto; } + +#liquidwallet #balanceSumCnt { + padding-top: 1.5rem; +} diff --git a/src/less/style.less b/src/less/style.less index 064a51a..ba92c8a 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -151,7 +151,8 @@ align-items: center; justify-content: space-between; width: 100%; - padding-bottom: 1rem; + padding: 0 !important; + padding-bottom: 1.2rem !important; .label { position: absolute; @@ -176,8 +177,7 @@ padding: 0; margin: 0; border-radius: 20px; - margin-left: 1rem; - margin-right: 1rem; + padding-left: 0.5rem; padding-right: 0.5rem; height: 2rem; @@ -394,16 +394,23 @@ // justify-content: center; @media (orientation: landscape) { flex-direction: row; - - & > :first-child { - width: min(40vw, 512px); - } & > :not(.popup) { flex-shrink: 1; width: 100%; } - } + .list.h.fill { + & > :not(.popup) { + flex-shrink: 1; + width: 100%; + } + } + } + .icon { + &.img { + width: 100%; + } + } .error { padding: 1.2rem; font-size: 0.8rem; @@ -512,6 +519,9 @@ font-size: 0.8rem; } } + button.selectBtn { + box-shadow: none; + } .iconCnt { display: flex; @@ -529,6 +539,7 @@ } .popupSelect { + padding: 0 !important; display: flex; justify-content: stretch; } @@ -610,12 +621,27 @@ &.outscroll > * { flex-shrink: 0; } - + column-gap: 0.2rem; + row-gap: 0.2rem; & > * { /* display: flex; */ align-items: stretch; /* padding:0; */ - margin: 0.2rem; + margin-top: 0.1rem; + margin-bottom: 0.1rem; + column-gap: 0.2rem; + row-gap: 0.2rem; + } + + &.highlight { + & > * { + border-radius: 14px; + box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3); + } + } + + &.baselineAlign { + align-items: baseline !important; } &.main { @@ -625,8 +651,8 @@ padding-right: 0.6rem; & > * { - border-radius: 14px; - box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3); + // border-radius: 14px; + // box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3); margin: 0.3rem; padding: 0.6rem; }