From aed41bcb39850e37198328673e11915578cadc6b Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Fri, 3 Nov 2023 12:34:09 +0100 Subject: [PATCH] review changes Signed-off-by: Philemon Ukane --- ui/cryptomaterial/dropdown.go | 19 +- ui/modal/info_modal.go | 10 +- ui/page/dcrdex/market.go | 640 +++++++++++++++++----------------- 3 files changed, 324 insertions(+), 345 deletions(-) diff --git a/ui/cryptomaterial/dropdown.go b/ui/cryptomaterial/dropdown.go index e0d059c72..f2f5a657d 100644 --- a/ui/cryptomaterial/dropdown.go +++ b/ui/cryptomaterial/dropdown.go @@ -11,7 +11,8 @@ import ( ) const ( - DropdownBasePos uint = 0 + DropdownBasePos uint = 0 + maxDropdownItemChar = 20 ) var MaxWidth = unit.Dp(800) @@ -219,8 +220,8 @@ func (d *DropDown) layoutOption(gtx C, itemIndex int) D { } lbl := d.theme.Body2(item.Text) - if !d.isOpen && len(item.Text) > 20 { - lbl.Text = item.Text[:20-3] + "..." + if !d.isOpen && len(item.Text) > maxDropdownItemChar { + lbl.Text = item.Text[:maxDropdownItemChar-3 /* subtract space for the ellipsis */] + "..." } lbl.Font.Weight = d.FontWeight return lbl.Layout(gtx) @@ -264,13 +265,13 @@ func (d *DropDown) Layout(gtx C, dropPos int, reversePos bool) D { if d.Stack { isOpen := d.isOpen return layout.Stack{Alignment: alig}.Layout(gtx, - layout.Expanded(func(gtx layout.Context) layout.Dimensions { - d.isOpen = false + layout.Expanded(func(gtx C) D { + d.isOpen = false // enforce a closed layout display before creating the layout Dimensions and undo later. display := d.closedLayout(gtx, iLeft, iRight) d.isOpen = isOpen return display }), - layout.Stacked(func(gtx layout.Context) layout.Dimensions { + layout.Stacked(func(gtx C) D { maxY := unit.Dp(len(d.items))*values.MarginPadding50 + d.OpenedLayoutInset.Top if d.extraDisplay != nil { maxY += values.MarginPadding50 @@ -362,12 +363,10 @@ func (d *DropDown) dropDownItemMenu(gtx C) D { return list.Layout(gtx, listItems, func(gtx C, index int) D { if (index == listItems-1 || listItems == 0) && d.extraDisplay != nil { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, - layout.Rigid(func(gtx layout.Context) layout.Dimensions { + layout.Rigid(func(gtx C) D { return d.layoutOption(gtx, index) }), - layout.Rigid(func(gtx layout.Context) layout.Dimensions { - return d.extraDisplay(gtx) - }), + layout.Rigid(d.extraDisplay), ) } else if listItems != 0 { return d.layoutOption(gtx, index) diff --git a/ui/modal/info_modal.go b/ui/modal/info_modal.go index d2f11bd02..e93929680 100644 --- a/ui/modal/info_modal.go +++ b/ui/modal/info_modal.go @@ -231,8 +231,7 @@ func (in *InfoModal) NegativeButtonStyle(background, text color.NRGBA) *InfoModa return in } -// for backwards compatibilty. template can be a translated string or an -// existing template. +// for backwards compatibility. func (in *InfoModal) SetupWithTemplate(template string) *InfoModal { title := in.dialogTitle subtitle := in.subtitle @@ -260,13 +259,6 @@ func (in *InfoModal) SetupWithTemplate(template string) *InfoModal { customTemplate = totalValueInfo(in.Theme) case BondStrengthInfoTemplate: customTemplate = bondStrengthInfo(in.Theme) - default: - prepTemplate := func(th *cryptomaterial.Theme) func(gtx C) D { - return func(gtx layout.Context) layout.Dimensions { - return th.Body2(template).Layout(gtx) - } - } - customTemplate = append(customTemplate, prepTemplate(in.Theme)) } in.dialogTitle = title diff --git a/ui/page/dcrdex/market.go b/ui/page/dcrdex/market.go index 9b934b69c..79332d844 100644 --- a/ui/page/dcrdex/market.go +++ b/ui/page/dcrdex/market.go @@ -253,21 +253,8 @@ func (pg *DEXMarketPage) Layout(gtx C) D { func (pg *DEXMarketPage) pageContentLayout(gtx C) D { pageContent := []func(gtx C) D{ - pg.priceAndVolumeDetail(), - func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Orientation: layout.Horizontal, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return layout.W.Layout(gtx, pg.orderForm()) - }), - layout.Flexed(1, func(gtx C) D { - return layout.E.Layout(gtx, pg.orderbook()) - }), - ) - }, + pg.priceAndVolumeDetail, + pg.orderFormAndOrderBook, pg.openOrdersAndHistory, } @@ -365,7 +352,7 @@ func (pg *DEXMarketPage) serverAndCurrencySelection() func(gtx C) D { return layout.Inset{Left: values.MarginPadding60}.Layout(gtx, func(gtx C) D { return layout.Flex{Axis: layout.Vertical, Alignment: layout.End}.Layout(gtx, layout.Rigid(func(gtx C) D { - return pg.semiBoldLabelText(gtx, values.String(values.StrMarket)) + return pg.semiBoldLabelText(gtx, values.String(values.StrCurrencyPair)) }), layout.Rigid(func(gtx C) D { return layout.Inset{Top: u2}.Layout(gtx, func(gtx C) D { @@ -381,297 +368,298 @@ func (pg *DEXMarketPage) serverAndCurrencySelection() func(gtx C) D { } } -func (pg *DEXMarketPage) priceAndVolumeDetail() func(gtx C) D { - return func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Padding: layout.UniformInset(16), - Margin: layout.Inset{Top: u5, Bottom: u5}, - Background: pg.Theme.Color.Surface, - Border: cryptomaterial.Border{ - Radius: cryptomaterial.Radius(8), - }, - }.Layout(gtx, - layout.Flexed(0.33, func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, +func (pg *DEXMarketPage) priceAndVolumeDetail(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.MatchParent, + Height: cryptomaterial.WrapContent, + Padding: layout.UniformInset(16), + Margin: layout.Inset{Top: u5, Bottom: u5}, + Background: pg.Theme.Color.Surface, + Border: cryptomaterial.Border{ + Radius: cryptomaterial.Radius(8), + }, + }.Layout(gtx, + layout.Flexed(0.33, func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.WrapContent, + Height: cryptomaterial.WrapContent, + Margin: layout.Inset{Bottom: u20}, + Orientation: layout.Vertical, + }.Layout(gtx, + layout.Rigid(func(gtx C) D { + return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.StrPrice)) + }), + layout.Rigid(func(gtx C) D { + // TODO: Fetch rate for the base asset from DEX server and exchange rate from rate source! + rate := 200.0 + tradeRate := 0.0034353 + var lb cryptomaterial.Label + if rate == 0 { + lb = pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", tradeRate)) + } else { + lb = pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f (~ %s)", tradeRate, utils.FormatAsUSDString(pg.Printer, tradeRate*rate))) + } + lb.Font.Weight = font.SemiBold + return lb.Layout(gtx) + }), + ) + }), + layout.Rigid(func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.Str24hLow)) + }), + layout.Rigid(func(gtx C) D { + lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 0.0034353 /* TODO: use DEX server value */)) + lb.Font.Weight = font.SemiBold + return lb.Layout(gtx) + }), + ) + }), + ) + }), + layout.Flexed(0.33, func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.WrapContent, + Height: cryptomaterial.WrapContent, + Margin: layout.Inset{Bottom: u20}, + Orientation: layout.Vertical, + }.Layout(gtx, + layout.Rigid(func(gtx C) D { + return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.Str24hChange)) + }), + layout.Rigid(func(gtx C) D { + // TODO: Use real values. + priceChange := 0.0010353 + priceChangePercent := 0.18 + lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf(`%f (%.2f`, priceChange, priceChangePercent)+"%)") + lb.Font.Weight = font.SemiBold + if priceChangePercent < 0 { + lb.Color = pg.Theme.Color.OrangeRipple + } else if priceChangePercent > 0 { + lb.Color = pg.Theme.Color.GreenText + } + return lb.Layout(gtx) + }), + ) + }), + layout.Rigid(func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return semiBoldLabelGrey3(pg.Theme, gtx, values.StringF(values.Str24hVolume, "DCR" /* TODO: use market base asset symbol */)) + }), + layout.Rigid(func(gtx C) D { + lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 4400.0477380 /* TODO: use DEX server value */)) + lb.Font.Weight = font.SemiBold + return lb.Layout(gtx) + }), + ) + }), + ) + }), + layout.Flexed(0.33, func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.WrapContent, + Height: cryptomaterial.WrapContent, + Margin: layout.Inset{Bottom: u20}, + Orientation: layout.Vertical, + }.Layout(gtx, + layout.Rigid(func(gtx C) D { + return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.Str24hHigh)) + }), + layout.Rigid(func(gtx C) D { + lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 0.0034353 /* TODO: USe DEX server price */)) + lb.Font.Weight = font.SemiBold + return lb.Layout(gtx) + }), + ) + }), + layout.Rigid(func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return semiBoldLabelGrey3(pg.Theme, gtx, values.StringF(values.Str24hVolume, "BTC" /* TODO: use market quote asset*/)) + }), + layout.Rigid(func(gtx C) D { + lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 2.3445532 /* TODO: use DEX server value */)) + lb.Font.Weight = font.SemiBold + return lb.Layout(gtx) + }), + ) + }), + ) + }), + ) +} + +func (pg *DEXMarketPage) orderFormAndOrderBook(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.MatchParent, + Height: cryptomaterial.WrapContent, + Orientation: layout.Horizontal, + }.Layout(gtx, + layout.Rigid(func(gtx C) D { + return layout.W.Layout(gtx, pg.orderForm) + }), + layout.Flexed(1, func(gtx C) D { + return layout.E.Layout(gtx, pg.orderbook) + }), + ) +} + +func (pg *DEXMarketPage) orderForm(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: gtx.Dp(orderFormAndOrderBookWidth), + Height: gtx.Dp(orderFormAndOrderBookHeight), + Background: pg.Theme.Color.Surface, + Margin: layout.Inset{Top: u5, Bottom: u5}, + Padding: layout.UniformInset(u16), + Direction: layout.E, + Border: cryptomaterial.Border{ + Radius: cryptomaterial.Radius(8), + }, + Orientation: layout.Vertical, + }.Layout2(gtx, func(gtx C) D { + return layout.Stack{Alignment: layout.NW}.Layout(gtx, + layout.Expanded(func(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.MatchParent, + Height: cryptomaterial.WrapContent, + Margin: layout.Inset{Top: 70}, + Orientation: layout.Vertical, + }.Layout(gtx, layout.Rigid(func(gtx C) D { return cryptomaterial.LinearLayout{ - Width: cryptomaterial.WrapContent, + Width: cryptomaterial.MatchParent, Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Bottom: u20}, + Margin: layout.Inset{Bottom: u10, Top: u10}, Orientation: layout.Vertical, }.Layout(gtx, layout.Rigid(func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.StrPrice)) - }), - layout.Rigid(func(gtx C) D { - // TODO: Fetch rate for the base asset from DEX server and exchange rate from rate source! - rate := 200.0 - tradeRate := 0.0034353 - var lb cryptomaterial.Label - if rate == 0 { - lb = pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", tradeRate)) - } else { - lb = pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f (~ %s)", tradeRate, utils.FormatAsUSDString(pg.Printer, tradeRate*rate))) - } - lb.Font.Weight = font.SemiBold - return lb.Layout(gtx) + return pg.semiBoldLabelText(gtx, values.String(values.StrPrice)) }), + layout.Rigid(pg.priceEditor.Layout), ) }), layout.Rigid(func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.MatchParent, + Height: cryptomaterial.WrapContent, + Margin: layout.Inset{Bottom: u10, Top: u10}, + Orientation: layout.Vertical, + }.Layout(gtx, layout.Rigid(func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.Str24hLow)) + return layout.Inset{Bottom: u5}.Layout(gtx, func(gtx C) D { + return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, + layout.Rigid(func(gtx C) D { + var labelText string + if pg.switchLotsOrAmount.IsChecked() { + labelText = values.String(values.StrAmount) + } else { + labelText = values.String(values.StrLots) + } + return pg.semiBoldLabelText(gtx, labelText) + }), + layout.Flexed(1, func(gtx C) D { + return layout.E.Layout(gtx, pg.switchLotsOrAmount.Layout) + }), + ) + }) }), + layout.Rigid(pg.lotsAmountEditor.Layout), layout.Rigid(func(gtx C) D { - lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 0.0034353 /* TODO: use DEX server value */)) - lb.Font.Weight = font.SemiBold - return lb.Layout(gtx) + return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, + layout.Flexed(1, func(gtx C) D { + // TODO: Calculate max buy or max lot + // depending on user balance of buy or sell + // asset and use real values below. + var maxStr string + if pg.switchLotsOrAmount.IsChecked() { // Amount + if pg.buyOrder { + maxStr = values.StringF(values.StrMaxBuy, 10.089382, "DCR") + } else { + maxStr = values.StringF(values.StrMaxSell, 10.008245, "DCR") + } + } else { + maxStr = values.StringF(values.StrMaxLots, 10) + } + return layout.E.Layout(gtx, pg.Theme.Label(values.TextSize12, maxStr).Layout) + }), + ) }), ) }), - ) - }), - layout.Flexed(0.33, func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { return cryptomaterial.LinearLayout{ - Width: cryptomaterial.WrapContent, + Width: cryptomaterial.MatchParent, Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Bottom: u20}, + Margin: layout.Inset{Bottom: u10, Top: u10}, Orientation: layout.Vertical, }.Layout(gtx, layout.Rigid(func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.Str24hChange)) - }), - layout.Rigid(func(gtx C) D { - // TODO: Use real values. - priceChange := 0.0010353 - priceChangePercent := 0.18 - lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf(`%f (%.2f`, priceChange, priceChangePercent)+"%)") - lb.Font.Weight = font.SemiBold - if priceChangePercent < 0 { - lb.Color = pg.Theme.Color.OrangeRipple - } else if priceChangePercent > 0 { - lb.Color = pg.Theme.Color.GreenText - } - return lb.Layout(gtx) + return layout.Inset{Bottom: u5}.Layout(gtx, func(gtx C) D { + return pg.semiBoldLabelText(gtx, values.String(values.StrTotal)) + }) }), + layout.Rigid(pg.totalEditor.Layout), ) }), layout.Rigid(func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, layout.Rigid(func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.StringF(values.Str24hVolume, "DCR" /* TODO: use market base asset symbol */)) + return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.StrEstimatedFee)) }), layout.Rigid(func(gtx C) D { - lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 4400.0477380 /* TODO: use DEX server value */)) - lb.Font.Weight = font.SemiBold - return lb.Layout(gtx) + return pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s", 0.0023434, "DCR" /* TODO: use real value */)).Layout(gtx) }), ) }), - ) - }), - layout.Flexed(0.33, func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { return cryptomaterial.LinearLayout{ - Width: cryptomaterial.WrapContent, + Width: cryptomaterial.MatchParent, Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Bottom: u20}, - Orientation: layout.Vertical, + Margin: layout.Inset{Bottom: u10, Top: u10}, + Orientation: layout.Horizontal, }.Layout(gtx, + layout.Rigid(pg.immediateOrder.Layout), layout.Rigid(func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.Str24hHigh)) - }), - layout.Rigid(func(gtx C) D { - lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 0.0034353 /* TODO: USe DEX server price */)) - lb.Font.Weight = font.SemiBold - return lb.Layout(gtx) + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.WrapContent, + Height: cryptomaterial.WrapContent, + Clickable: pg.immediateMoreInfo, + Padding: layout.Inset{Top: u10, Left: u2}, + }.Layout2(gtx, pg.Theme.Icons.InfoAction.Layout16dp) }), ) }), layout.Rigid(func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, - layout.Rigid(func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.StringF(values.Str24hVolume, "BTC" /* TODO: use market quote asset*/)) - }), - layout.Rigid(func(gtx C) D { - lb := pg.Theme.Label(values.TextSize14, pg.Printer.Sprintf("%f", 2.3445532 /* TODO: use DEX server value */)) - lb.Font.Weight = font.SemiBold - return lb.Layout(gtx) - }), + return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx, + layout.Flexed(1, pg.createOrderBtn.Layout), ) }), ) }), + layout.Stacked(func(gtx C) D { + return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, + layout.Rigid(pg.toggleBuyAndSellBtn.Layout), + layout.Flexed(1, func(gtx C) D { + return layout.Inset{Bottom: u5, Top: u5}.Layout(gtx, func(gtx C) D { + pg.orderTypesDropdown.Background = &pg.Theme.Color.Surface + return pg.orderTypesDropdown.Layout(gtx, 0, true) + }) + }), + ) + }), ) - } -} - -func (pg *DEXMarketPage) orderForm() func(gtx C) D { - return func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: gtx.Dp(orderFormAndOrderBookWidth), - Height: gtx.Dp(orderFormAndOrderBookHeight), - Background: pg.Theme.Color.Surface, - Margin: layout.Inset{Top: u5, Bottom: u5}, - Padding: layout.UniformInset(u16), - Direction: layout.E, - Border: cryptomaterial.Border{ - Radius: cryptomaterial.Radius(8), - }, - Orientation: layout.Vertical, - }.Layout2(gtx, func(gtx C) D { - return layout.Stack{Alignment: layout.NW}.Layout(gtx, - layout.Expanded(func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Top: 70}, - Orientation: layout.Vertical, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Bottom: u10, Top: u10}, - Orientation: layout.Vertical, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return pg.semiBoldLabelText(gtx, values.String(values.StrPrice)) - }), - layout.Rigid(func(gtx C) D { - return pg.priceEditor.Layout(gtx) - }), - ) - }), - layout.Rigid(func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Bottom: u10, Top: u10}, - Orientation: layout.Vertical, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return layout.Inset{Bottom: u5}.Layout(gtx, func(gtx C) D { - return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, - layout.Rigid(func(gtx C) D { - var labelText string - if pg.switchLotsOrAmount.IsChecked() { - labelText = values.String(values.StrAmount) - } else { - labelText = values.String(values.StrLots) - } - return pg.semiBoldLabelText(gtx, labelText) - }), - layout.Flexed(1, func(gtx C) D { - return layout.E.Layout(gtx, pg.switchLotsOrAmount.Layout) - }), - ) - }) - }), - layout.Rigid(func(gtx C) D { - return pg.lotsAmountEditor.Layout(gtx) - }), - layout.Rigid(func(gtx C) D { - return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, - layout.Flexed(1, func(gtx C) D { - // TODO: Calculate max buy or max lot - // depending on user balance of buy or sell - // asset and use real values below. - var maxStr string - if pg.switchLotsOrAmount.IsChecked() { // Amount - if pg.buyOrder { - maxStr = values.StringF(values.StrMaxBuy, 10.089382, "DCR") - } else { - maxStr = values.StringF(values.StrMaxSell, 10.008245, "DCR") - } - } else { - maxStr = values.StringF(values.StrMaxLots, 10) - } - return layout.E.Layout(gtx, pg.Theme.Label(values.TextSize12, maxStr).Layout) - }), - ) - }), - ) - }), - layout.Rigid(func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Bottom: u10, Top: u10}, - Orientation: layout.Vertical, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return layout.Inset{Bottom: u5}.Layout(gtx, func(gtx C) D { - return pg.semiBoldLabelText(gtx, values.String(values.StrTotal)) - }) - }), - layout.Rigid(func(gtx C) D { - return pg.totalEditor.Layout(gtx) - }), - ) - }), - layout.Rigid(func(gtx C) D { - return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, - layout.Rigid(func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.StrEstimatedFee)) - }), - layout.Rigid(func(gtx C) D { - return pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s", 0.0023434, "DCR" /* TODO: use real value */)).Layout(gtx) - }), - ) - }), - layout.Rigid(func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Bottom: u10, Top: u10}, - Orientation: layout.Horizontal, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return pg.immediateOrder.Layout(gtx) - }), - layout.Rigid(func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.WrapContent, - Height: cryptomaterial.WrapContent, - Clickable: pg.immediateMoreInfo, - Padding: layout.Inset{Top: u10, Left: u2}, - }.Layout2(gtx, pg.Theme.Icons.InfoAction.Layout16dp) - }), - ) - }), - layout.Rigid(func(gtx C) D { - return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx, - layout.Flexed(1, pg.createOrderBtn.Layout), - ) - }), - ) - }), - layout.Stacked(func(gtx C) D { - return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, - layout.Rigid(func(gtx C) D { - return pg.toggleBuyAndSellBtn.Layout(gtx) - }), - layout.Flexed(1, func(gtx C) D { - return layout.Inset{Bottom: u5, Top: u5}.Layout(gtx, func(gtx C) D { - pg.orderTypesDropdown.Background = &pg.Theme.Color.Surface - return pg.orderTypesDropdown.Layout(gtx, 0, true) - }) - }), - ) - }), - ) - }) - } + }) } -func (pg *DEXMarketPage) orderbook() func(gtx C) D { +func (pg *DEXMarketPage) orderbook(gtx C) D { // TODO: Use real values makeOrderBookBuyOrSell := func(sell bool) []layout.FlexChild { var mockOrderBook []layout.FlexChild @@ -692,72 +680,70 @@ func (pg *DEXMarketPage) orderbook() func(gtx C) D { return mockOrderBook } - return func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: gtx.Dp(orderFormAndOrderBookWidth), - Height: gtx.Dp(orderFormAndOrderBookHeight), - Background: pg.Theme.Color.Surface, - Margin: layout.Inset{Top: u5, Bottom: u5}, - Padding: layout.UniformInset(u16), - Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8)}, - Orientation: layout.Vertical, - Direction: layout.Center, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, - layout.Rigid(func(gtx C) D { - return pg.semiBoldLabelText(gtx, values.String(values.StrOrderBooks)) + return cryptomaterial.LinearLayout{ + Width: gtx.Dp(orderFormAndOrderBookWidth), + Height: gtx.Dp(orderFormAndOrderBookHeight), + Background: pg.Theme.Color.Surface, + Margin: layout.Inset{Top: u5, Bottom: u5}, + Padding: layout.UniformInset(u16), + Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8)}, + Orientation: layout.Vertical, + Direction: layout.Center, + }.Layout(gtx, + layout.Rigid(func(gtx C) D { + return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return pg.semiBoldLabelText(gtx, values.String(values.StrOrderBooks)) + }), + layout.Flexed(1, func(gtx C) D { + return layout.E.Layout(gtx, pg.seeFullOrderBookBtn.Layout) + }), + ) + }), + layout.Rigid(func(gtx C) D { + return layout.Inset{Top: u10}.Layout(gtx, pg.orderBookRow( + semiBoldGray3Size14(pg.Theme, values.StringF(values.StrAssetPrice, "BTC")), + semiBoldGray3Size14(pg.Theme, values.StringF(values.StrAssetAmount, "DCR")), + semiBoldGray3Size14(pg.Theme, values.String(values.StrEpoch)), + )) + }), + layout.Flexed(0.5, func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, makeOrderBookBuyOrSell(true)...) + }), + layout.Rigid(func(gtx C) D { + return layout.Inset{Top: u5, Bottom: u10}.Layout(gtx, func(gtx C) D { + return layout.Stack{Alignment: layout.Center}.Layout(gtx, + layout.Stacked(func(gtx C) D { + return pg.Theme.Separator().Layout(gtx) }), - layout.Flexed(1, func(gtx C) D { - return layout.E.Layout(gtx, pg.seeFullOrderBookBtn.Layout) + layout.Expanded(func(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.WrapContent, + Height: cryptomaterial.WrapContent, + Background: pg.Theme.Color.Gray3, + Padding: layout.Inset{Top: u5, Bottom: u5, Right: u16, Left: u16}, + Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(16)}, + Direction: layout.Center, + Orientation: layout.Horizontal, + }.Layout2(gtx, func(gtx C) D { + // TODO: Fetch rate for the base asset from DEX server and exchange rate from rate source! + fiatRate := 34000.00 + price := 0.0222445 + lb := pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s", price, "DCR")) + if fiatRate > 0 { + lb = pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s (~ %s)", price, "BTC", utils.FormatAsUSDString(pg.Printer, fiatRate*price))) + } + lb.Font.Weight = font.SemiBold + return lb.Layout(gtx) + }) }), ) - }), - layout.Rigid(func(gtx C) D { - return layout.Inset{Top: u10}.Layout(gtx, pg.orderBookRow( - semiBoldGray3Size14(pg.Theme, values.StringF(values.StrAssetPrice, "BTC")), - semiBoldGray3Size14(pg.Theme, values.StringF(values.StrAssetAmount, "DCR")), - semiBoldGray3Size14(pg.Theme, values.String(values.StrEpoch)), - )) - }), - layout.Flexed(0.5, func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, makeOrderBookBuyOrSell(true)...) - }), - layout.Rigid(func(gtx C) D { - return layout.Inset{Top: u5, Bottom: u10}.Layout(gtx, func(gtx C) D { - return layout.Stack{Alignment: layout.Center}.Layout(gtx, - layout.Stacked(func(gtx C) D { - return pg.Theme.Separator().Layout(gtx) - }), - layout.Expanded(func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.WrapContent, - Height: cryptomaterial.WrapContent, - Background: pg.Theme.Color.Gray3, - Padding: layout.Inset{Top: u5, Bottom: u5, Right: u16, Left: u16}, - Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(16)}, - Direction: layout.Center, - Orientation: layout.Horizontal, - }.Layout2(gtx, func(gtx C) D { - // TODO: Fetch rate for the base asset from DEX server and exchange rate from rate source! - fiatRate := 34000.00 - price := 0.0222445 - lb := pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s", price, "DCR")) - if fiatRate > 0 { - lb = pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s (~ %s)", price, "BTC", utils.FormatAsUSDString(pg.Printer, fiatRate*price))) - } - lb.Font.Weight = font.SemiBold - return lb.Layout(gtx) - }) - }), - ) - }) - }), - layout.Flexed(0.5, func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, makeOrderBookBuyOrSell(false)...) - }), - ) - } + }) + }), + layout.Flexed(0.5, func(gtx C) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, makeOrderBookBuyOrSell(false)...) + }), + ) } func (pg *DEXMarketPage) orderBookRow(priceColumn, amountColumn, epochColumn cryptomaterial.Label) func(gtx C) D { @@ -859,14 +845,14 @@ func (pg *DEXMarketPage) openOrdersAndHistory(gtx C) D { pg.orderHistoryBtn.Color = pg.Theme.Color.GrayText1 } return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, - layout.Rigid(func(gtx layout.Context) layout.Dimensions { + layout.Rigid(func(gtx C) D { return layout.Inset{Left: u5, Right: u10}.Layout(gtx, pg.openOrdersBtn.Layout) }), layout.Rigid(pg.orderHistoryBtn.Layout), ) }), - layout.Rigid(func(gtx layout.Context) layout.Dimensions { - return pg.Theme.List(pg.ordersTableHorizontalScroll).Layout(gtx, 1, func(gtx layout.Context, index int) layout.Dimensions { + layout.Rigid(func(gtx C) D { + return pg.Theme.List(pg.ordersTableHorizontalScroll).Layout(gtx, 1, func(gtx C, index int) D { gtx.Constraints.Max.X = gtx.Dp(sectionWidth) gtx.Constraints.Min.X = gtx.Constraints.Max.X return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx, @@ -1011,7 +997,9 @@ func (pg *DEXMarketPage) HandleUserInteractions() { for pg.immediateMoreInfo.Clicked() { infoModal := modal.NewCustomModal(pg.Load). Title(values.String(values.StrImmediateOrder)). - SetupWithTemplate(values.String(values.StrImmediateExplanation)). + UseCustomWidget(func(gtx layout.Context) layout.Dimensions { + return pg.Theme.Body2(values.String(values.StrImmediateExplanation)).Layout(gtx) + }). SetCancelable(true). SetContentAlignment(layout.W, layout.W, layout.Center). SetPositiveButtonText(values.String(values.StrOk))