From 4f4d3ba0c78ddb9a886f9103d367ed4e29e9d727 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Mon, 20 Nov 2023 15:16:31 +0100 Subject: [PATCH] review changes Signed-off-by: Philemon Ukane --- ui/cryptomaterial/dropdown.go | 153 +++++--------- ui/page/dcrdex/dex_onboarding_page.go | 20 +- ui/page/dcrdex/market.go | 286 ++++++++++---------------- ui/values/dimensions.go | 2 + 4 files changed, 164 insertions(+), 297 deletions(-) diff --git a/ui/cryptomaterial/dropdown.go b/ui/cryptomaterial/dropdown.go index d949cdc30..41762f0fb 100644 --- a/ui/cryptomaterial/dropdown.go +++ b/ui/cryptomaterial/dropdown.go @@ -203,19 +203,7 @@ func (d *DropDown) layoutActiveIcon(gtx C, index int) D { return icon.Layout(gtx, values.MarginPadding20) } -func (d *DropDown) layoutCollapsedItem(gtx C, itemIndex int) D { - if len(d.items) == 0 { - if d.extraDisplay != nil { - return d.extraDisplay(gtx) - } - return D{} - } - - item := d.items[itemIndex] - radius := Radius(8) - clickable := d.clickable - clickable.Hoverable = d.MakeSelectedItemHoverableAfterCollapse - +func (d *DropDown) itemLayout(gtx C, index int, clickable *Clickable, item *DropDownItem, radius int, bodyLayout *LinearLayout) D { padding := values.MarginPadding10 if item.Icon != nil { padding = values.MarginPadding8 @@ -226,7 +214,7 @@ func (d *DropDown) layoutCollapsedItem(gtx C, itemIndex int) D { Height: WrapContent, Clickable: clickable, Padding: layout.UniformInset(padding), - Border: Border{Radius: radius}, + Border: Border{Radius: Radius(radius)}, }.Layout(gtx, layout.Rigid(func(gtx C) D { if item.Icon == nil { @@ -240,14 +228,7 @@ func (d *DropDown) layoutCollapsedItem(gtx C, itemIndex int) D { return item.DisplayFn(gtx) } - ll := LinearLayout{ - Width: MatchParent, - Height: WrapContent, - Padding: layout.Inset{Right: values.MarginPadding5}, - Direction: d.SelectedItemDirectionAfterCollapse, - } - - return ll.Layout2(gtx, func(gtx C) D { + return bodyLayout.Layout2(gtx, func(gtx C) D { lbl := d.theme.Body2(item.Text) if !d.expanded && len(item.Text) > maxDropdownItemTextLen { lbl.Text = item.Text[:maxDropdownItemTextLen-3 /* subtract space for the ellipsis */] + "..." @@ -257,60 +238,42 @@ func (d *DropDown) layoutCollapsedItem(gtx C, itemIndex int) D { }) }), layout.Rigid(func(gtx C) D { - return d.layoutActiveIcon(gtx, itemIndex) + return d.layoutActiveIcon(gtx, index) }), ) } -func (d *DropDown) layoutExpandedItem(gtx C, itemIndex int) D { - item := d.items[itemIndex] - radius := Radius(0) - clickable := item.clickable - - padding := values.MarginPadding10 - if item.Icon != nil { - padding = values.MarginPadding8 +func (d *DropDown) selectedItemLayout(gtx C) D { + if len(d.items) == 0 { + if d.extraDisplay != nil { + return d.extraDisplay(gtx) + } + return D{} } - return LinearLayout{ + item := d.items[d.selectedIndex] + clickable := d.clickable + clickable.Hoverable = d.MakeSelectedItemHoverableAfterCollapse + bodyLayout := LinearLayout{ Width: MatchParent, Height: WrapContent, - Clickable: clickable, - Padding: layout.UniformInset(padding), - Border: Border{Radius: radius}, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - if item.Icon == nil { - return D{} - } + Padding: layout.Inset{Right: values.MarginPadding5}, + Direction: d.SelectedItemDirectionAfterCollapse, + } - return item.Icon.Layout24dp(gtx) - }), - layout.Flexed(1, func(gtx C) D { - if item.DisplayFn != nil { - return item.DisplayFn(gtx) - } + return d.itemLayout(gtx, d.selectedIndex, clickable, &item, 8, &bodyLayout) +} - ll := LinearLayout{ - Width: MatchParent, - Height: WrapContent, - Padding: layout.Inset{Right: values.MarginPadding5}, - Direction: layout.W, - } +func (d *DropDown) layoutExpandedItem(gtx C, itemIndex int) D { + item := d.items[itemIndex] + body := LinearLayout{ + Width: MatchParent, + Height: WrapContent, + Padding: layout.Inset{Right: values.MarginPadding5}, + Direction: layout.W, + } - return ll.Layout2(gtx, func(gtx C) D { - lbl := d.theme.Body2(item.Text) - if !d.expanded && len(item.Text) > maxDropdownItemTextLen { - lbl.Text = item.Text[:maxDropdownItemTextLen-3 /* subtract space for the ellipsis */] + "..." - } - lbl.Font.Weight = d.FontWeight - return lbl.Layout(gtx) - }) - }), - layout.Rigid(func(gtx C) D { - return d.layoutActiveIcon(gtx, itemIndex) - }), - ) + return d.itemLayout(gtx, itemIndex, item.clickable, &item, 8, &body) } // defaultDropdownWidth returns the default width for a dropdown depending on @@ -330,19 +293,16 @@ func (d *DropDown) Layout(gtx C) D { d.handleEvents() if d.StackBelowCollapsedLayout { - expanded := d.expanded - return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, - layout.Expanded(func(gtx C) D { - d.expanded = false // enforce a collapsed layout display before creating the layout Dimensions and undo later. - display := d.collapsedLayout(gtx) - d.expanded = expanded - return display - }), - layout.Stacked(func(gtx C) D { - if !d.expanded { - return D{} - } + layoutContents := []layout.StackChild{layout.Expanded(func(gtx C) D { + expanded := d.expanded + d.expanded = false // enforce a collapsed layout display before creating the layout Dimensions and undo later. + display := d.collapsedLayout(gtx) + d.expanded = expanded + return display + })} + if d.expanded { + layoutContents = append(layoutContents, layout.Expanded(func(gtx layout.Context) layout.Dimensions { // Adding d.ExpandedLayoutInset.Top accounts for the the extra // shift in vertical space set by d.ExpandedLayoutInset.Top to // ensure the expanded view has enough space for its elements. @@ -353,8 +313,10 @@ func (d *DropDown) Layout(gtx C) D { gtx.Constraints.Max.Y = gtx.Dp(maxY) return d.expandedLayout(gtx) - }), - ) + })) + } + + return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, layoutContents...) } if d.GroupPosition == DropdownBasePos && d.isDropdownGroupCollapsed(d.group) { @@ -366,35 +328,18 @@ func (d *DropDown) Layout(gtx C) D { gtx.Constraints.Max.Y = gtx.Dp(maxY) if d.expanded { return d.backdrop.Layout(gtx, func(gtx C) D { - return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, - layout.Stacked(func(gtx C) D { - return d.expandedLayout(gtx) - }), - ) + return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, layout.Stacked(d.expandedLayout)) }) } return d.backdrop.Layout(gtx, func(gtx C) D { - return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, - layout.Stacked(func(gtx C) D { - return d.collapsedLayout(gtx) - }), - ) + return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, layout.Stacked(d.collapsedLayout)) }) - } else if d.expanded { - return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, - layout.Stacked(func(gtx C) D { - return d.expandedLayout(gtx) - }), - ) + return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, layout.Stacked(d.expandedLayout)) } - return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, - layout.Stacked(func(gtx C) D { - return d.collapsedLayout(gtx) - }), - ) + return layout.Stack{Alignment: d.expandedViewAlignment}.Layout(gtx, layout.Stacked(d.collapsedLayout)) } // expandedLayout computes dropdown layout when dropdown is opened. @@ -424,13 +369,7 @@ func (d *DropDown) expandedLayout(gtx C) D { // collapsedLayout computes dropdown layout when dropdown is closed. func (d *DropDown) collapsedLayout(gtx C) D { return d.collapsedLayoutInset.Layout(gtx, func(gtx C) D { - return d.drawLayout(gtx, func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, - layout.Rigid(func(gtx C) D { - return d.layoutCollapsedItem(gtx, d.selectedIndex) - }), - ) - }) + return d.drawLayout(gtx, d.selectedItemLayout) }) } diff --git a/ui/page/dcrdex/dex_onboarding_page.go b/ui/page/dcrdex/dex_onboarding_page.go index 0c7a7be9b..7a95b93d8 100644 --- a/ui/page/dcrdex/dex_onboarding_page.go +++ b/ui/page/dcrdex/dex_onboarding_page.go @@ -312,9 +312,7 @@ func (pg *DEXOnboarding) onBoardingStep(gtx C, step onboardingStep, stepDesc str layout.Rigid(func(gtx C) D { inset := layout.Inset{Top: u10, Bottom: u10} if !activeStep { - return inset.Layout(gtx, func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, stepDesc) - }) + return inset.Layout(gtx, semiBoldLabelGrey3(pg.Theme, stepDesc).Layout) } lb := pg.semiBoldLabel(stepDesc) @@ -711,9 +709,7 @@ func (pg *DEXOnboarding) stepWaitForBondConfirmation(gtx C) D { layout.Flexed(0.33, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { - return layout.Inset{Bottom: 5}.Layout(gtx, func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.StrNewTier)) - }) + return layout.Inset{Bottom: 5}.Layout(gtx, semiBoldLabelGrey3(pg.Theme, values.String(values.StrNewTier)).Layout) }), layout.Rigid(func(gtx C) D { return pg.Theme.Body1(fmt.Sprintf("%d", pg.newTier)).Layout(gtx) @@ -723,9 +719,7 @@ func (pg *DEXOnboarding) stepWaitForBondConfirmation(gtx C) D { layout.Flexed(0.33, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { - return layout.Inset{Bottom: 5}.Layout(gtx, func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.StrBondStrength)) - }) + return layout.Inset{Bottom: 5}.Layout(gtx, semiBoldLabelGrey3(pg.Theme, values.String(values.StrBondStrength)).Layout) }), layout.Rigid(func(gtx C) D { return pg.Theme.Body1(fmt.Sprintf("%d", pg.newTier /* TODO: Use real value */)).Layout(gtx) @@ -735,9 +729,7 @@ func (pg *DEXOnboarding) stepWaitForBondConfirmation(gtx C) D { layout.Flexed(0.33, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { - return layout.Inset{Bottom: 5}.Layout(gtx, func(gtx C) D { - return semiBoldLabelGrey3(pg.Theme, gtx, values.String(values.StrTotalCost)) - }) + return layout.Inset{Bottom: 5}.Layout(gtx, semiBoldLabelGrey3(pg.Theme, values.String(values.StrTotalCost)).Layout) }), layout.Rigid(func(gtx C) D { return pg.bondAmountInfoDisplay(gtx) @@ -943,11 +935,11 @@ func (pg *DEXOnboarding) validateBondStrength() bool { return ok } -func semiBoldLabelGrey3(th *cryptomaterial.Theme, gtx C, text string) D { +func semiBoldLabelGrey3(th *cryptomaterial.Theme, text string) cryptomaterial.Label { lb := th.Label(values.TextSize16, text) lb.Color = th.Color.GrayText3 lb.Font.Weight = font.SemiBold - return lb.Layout(gtx) + return lb } func (pg *DEXOnboarding) passwordsMatch(editors ...*widget.Editor) bool { diff --git a/ui/page/dcrdex/market.go b/ui/page/dcrdex/market.go index 73ec32647..e75f968e5 100644 --- a/ui/page/dcrdex/market.go +++ b/ui/page/dcrdex/market.go @@ -30,12 +30,12 @@ const ( var ( u5 = values.MarginPadding5 u8 = values.MarginPadding8 - u300 = unit.Dp(300) + u300 = values.MarginPadding300 orderFormAndOrderBookWidth = (values.AppWidth / 2) - 40 // Minus 40 px to allow for margin between the order form and order book. // orderFormAndOrderBookHeight is a constant height for the order form and // orderbook. Use this to ensure they have the same height as they are // displayed sided by side. - orderFormAndOrderBookHeight = unit.Dp(515) + orderFormAndOrderBookHeight = values.MarginPadding515 limitOrderIndex = 0 orderTypes = []cryptomaterial.DropDownItem{ @@ -302,30 +302,22 @@ func (pg *DEXMarketPage) serverAndCurrencySelection(gtx C) D { }.Layout(gtx, layout.Flexed(0.5, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(pg.semiBoldLabelText(gtx, values.String(values.StrServer)).Layout), layout.Rigid(func(gtx C) D { - return pg.semiBoldLabelText(gtx, values.String(values.StrServer)) - }), - layout.Rigid(func(gtx C) D { - return layout.Inset{Top: u2}.Layout(gtx, func(gtx C) D { - pg.serverSelector.Background = &pg.Theme.Color.Surface - pg.serverSelector.BorderColor = &pg.Theme.Color.Gray5 - return pg.serverSelector.Layout(gtx) - }) + pg.serverSelector.Background = &pg.Theme.Color.Surface + pg.serverSelector.BorderColor = &pg.Theme.Color.Gray5 + return layout.Inset{Top: u2}.Layout(gtx, pg.serverSelector.Layout) }), ) }), layout.Flexed(0.5, 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(pg.semiBoldLabelText(gtx, values.String(values.StrCurrencyPair)).Layout), layout.Rigid(func(gtx C) D { - 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 { - pg.marketSelector.Background = &pg.Theme.Color.Surface - pg.marketSelector.BorderColor = &pg.Theme.Color.Gray5 - return pg.marketSelector.Layout(gtx) - }) + pg.marketSelector.Background = &pg.Theme.Color.Surface + pg.marketSelector.BorderColor = &pg.Theme.Color.Gray5 + return layout.Inset{Top: u2}.Layout(gtx, pg.marketSelector.Layout) }), ) }) @@ -334,6 +326,16 @@ func (pg *DEXMarketPage) serverAndCurrencySelection(gtx C) D { } func (pg *DEXMarketPage) priceAndVolumeDetail(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 rateStr string + if rate == 0 { + rateStr = pg.Printer.Sprintf("%f", tradeRate) + } else { + rateStr = pg.Printer.Sprintf("%f (~ %s)", tradeRate, utils.FormatAsUSDString(pg.Printer, tradeRate*rate)) + } + return cryptomaterial.LinearLayout{ Width: cryptomaterial.MatchParent, Height: cryptomaterial.WrapContent, @@ -345,123 +347,71 @@ func (pg *DEXMarketPage) priceAndVolumeDetail(gtx C) D { }, }.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) - }), - ) - }), + return pg.priceAndVolumeColume(gtx, + values.String(values.StrPrice), + pg.semiBoldLabelSize14(rateStr).Layout, + values.String(values.Str24hLow), + pg.Printer.Sprintf("%f", 0.0034353 /* TODO: use DEX server value */), ) }), 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) - }), - ) - }), + return pg.priceAndVolumeColume(gtx, + values.String(values.Str24hChange), + func(gtx C) D { + // TODO: Use real values. + priceChange := 0.0010353 + priceChangePercent := 0.18 + lb := pg.semiBoldLabelSize14(pg.Printer.Sprintf(`%f (%.2f`, priceChange, priceChangePercent) + "%)") + if priceChangePercent < 0 { + lb.Color = pg.Theme.Color.OrangeRipple + } else if priceChangePercent > 0 { + lb.Color = pg.Theme.Color.GreenText + } + return lb.Layout(gtx) + }, + values.StringF(values.Str24hVolume, "DCR" /* TODO: use market base asset symbol */), + pg.Printer.Sprintf("%f", 4400.0477380 /* TODO: use DEX server value */), ) }), layout.Flexed(0.33, func(gtx C) D { + return pg.priceAndVolumeColume(gtx, + values.String(values.Str24hHigh), + pg.semiBoldLabelSize14(pg.Printer.Sprintf("%f", 0.0034353 /* TODO: USe DEX server price */)).Layout, + values.StringF(values.Str24hVolume, "BTC" /* TODO: use market quote asset*/), + pg.Printer.Sprintf("%f", 2.3445532 /* TODO: use DEX server value */), + ) + }), + ) +} + +func (pg *DEXMarketPage) priceAndVolumeColume(gtx C, title1 string, body1 func(gtx C) D, title2, body2 string) 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(semiBoldLabelGrey3(pg.Theme, title1).Layout), + layout.Rigid(body1), + ) + }), + layout.Rigid(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) - }), - ) - }), + layout.Rigid(semiBoldLabelGrey3(pg.Theme, title2).Layout), + layout.Rigid(pg.semiBoldLabelSize14(body2).Layout), ) }), ) } +func (pg *DEXMarketPage) semiBoldLabelSize14(txt string) cryptomaterial.Label { + lb := pg.Theme.Label(values.TextSize14, txt) + lb.Font.Weight = font.SemiBold + return lb +} + func (pg *DEXMarketPage) orderFormAndOrderBook(gtx C) D { return cryptomaterial.LinearLayout{ Width: cryptomaterial.MatchParent, @@ -505,9 +455,7 @@ func (pg *DEXMarketPage) orderForm(gtx C) D { 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(pg.semiBoldLabelText(gtx, values.String(values.StrPrice)).Layout), layout.Rigid(pg.priceEditor.Layout), ) }), @@ -520,16 +468,14 @@ func (pg *DEXMarketPage) orderForm(gtx C) D { }.Layout(gtx, layout.Rigid(func(gtx C) D { return layout.Inset{Bottom: u5}.Layout(gtx, func(gtx C) D { + var labelText string + if pg.switchLotsOrAmount.IsChecked() { + labelText = values.String(values.StrAmount) + } else { + labelText = values.String(values.StrLots) + } 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.Rigid(pg.semiBoldLabelText(gtx, labelText).Layout), layout.Flexed(1, func(gtx C) D { return layout.E.Layout(gtx, pg.switchLotsOrAmount.Layout) }), @@ -538,21 +484,21 @@ func (pg *DEXMarketPage) orderForm(gtx C) D { }), layout.Rigid(pg.lotsAmountEditor.Layout), layout.Rigid(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.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) - } + layout.Flexed(1, func(gtx layout.Context) layout.Dimensions { return layout.E.Layout(gtx, pg.Theme.Label(values.TextSize12, maxStr).Layout) }), ) @@ -567,21 +513,15 @@ func (pg *DEXMarketPage) orderForm(gtx C) D { 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)) - }) + return layout.Inset{Bottom: u5}.Layout(gtx, pg.semiBoldLabelText(gtx, values.String(values.StrTotal)).Layout) }), layout.Rigid(pg.totalEditor.Layout), ) }), 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(semiBoldLabelGrey3(pg.Theme, values.String(values.StrEstimatedFee)).Layout), + layout.Rigid(pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s", 0.0023434, "DCR" /* TODO: use real value */)).Layout), ) }), layout.Rigid(func(gtx C) D { @@ -613,10 +553,8 @@ func (pg *DEXMarketPage) orderForm(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) - }) + pg.orderTypesDropdown.Background = &pg.Theme.Color.Surface + return layout.Inset{Bottom: u5, Top: u5}.Layout(gtx, pg.orderTypesDropdown.Layout) }), ) }), @@ -659,9 +597,7 @@ func (pg *DEXMarketPage) orderbook(gtx C) D { }.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.Rigid(pg.semiBoldLabelText(gtx, values.String(values.StrOrderBooks)).Layout), layout.Flexed(1, func(gtx C) D { return layout.E.Layout(gtx, pg.seeFullOrderBookBtn.Layout) }), @@ -682,9 +618,7 @@ func (pg *DEXMarketPage) orderbook(gtx C) D { 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.Stacked(pg.Theme.Separator().Layout), layout.Expanded(func(gtx C) D { return cryptomaterial.LinearLayout{ Width: cryptomaterial.WrapContent, @@ -715,6 +649,13 @@ func (pg *DEXMarketPage) orderbook(gtx C) D { ) } +func (pg *DEXMarketPage) semiBoldLabelText(gtx C, title string) cryptomaterial.Label { + lb := pg.Theme.Label(values.TextSize16, title) + lb.Font.Weight = font.SemiBold + lb.Color = pg.Theme.Color.Text + return lb +} + func (pg *DEXMarketPage) orderBookRow(gtx C, priceColumn, amountColumn, epochColumn cryptomaterial.Label) D { return cryptomaterial.LinearLayout{ Width: cryptomaterial.MatchParent, @@ -788,7 +729,7 @@ func (pg *DEXMarketPage) openOrdersAndHistory(gtx C) D { return cryptomaterial.LinearLayout{ Width: cryptomaterial.MatchParent, - Height: gtx.Dp(400), // TODO... + Height: gtx.Dp(400), Background: pg.Theme.Color.Surface, Margin: layout.Inset{Top: u5, Bottom: 30}, Padding: layout.UniformInset(u10), @@ -1009,10 +950,3 @@ func (pg *DEXMarketPage) HandleUserInteractions() { log.Infof("Order form has been submitted.. %v", pg.buyOrder) } } - -func (pg *DEXMarketPage) semiBoldLabelText(gtx C, title string) D { - lb := pg.Theme.Label(values.TextSize16, title) - lb.Font.Weight = font.SemiBold - lb.Color = pg.Theme.Color.Text - return lb.Layout(gtx) -} diff --git a/ui/values/dimensions.go b/ui/values/dimensions.go index 277a372d5..f4c345320 100644 --- a/ui/values/dimensions.go +++ b/ui/values/dimensions.go @@ -83,6 +83,7 @@ var ( MarginPadding250 = unit.Dp(250) MarginPaddingMinus230 = unit.Dp(-230) MarginPadding280 = unit.Dp(280) + MarginPadding300 = unit.Dp(300) MarginPadding350 = unit.Dp(350) MarginPadding368 = unit.Dp(368) MarginPadding372 = unit.Dp(372) @@ -90,6 +91,7 @@ var ( MarginPadding390 = unit.Dp(390) MarginPadding450 = unit.Dp(450) MarginPadding500 = unit.Dp(500) + MarginPadding515 = unit.Dp(515) MarginPadding550 = unit.Dp(550) MarginPadding600 = unit.Dp(600)