Update amount Editor for modal on mobile and desktop view

JustinBeBoy · Dec 25, 2023 · 6699271 · 6699271
1 parent df94be2
commit 6699271
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/ui/page/send/layout.go b/ui/page/send/layout.go
@@ -171,6 +171,9 @@ func (pg *Page) advanceOptionsLayout(gtx C) D {
 	if pg.modalLayout != nil {
 		margin_32 = values.MarginPaddingMinus32
 	}
+	if pg.IsMobileView() {
+		margin_32 = values.MarginPaddingMinus16
+	}
 	return layout.Inset{Top: margin_32}.Layout(gtx, func(gtx C) D {
 		return pg.sectionWrapper(gtx, func(gtx C) D {
 			collapsibleHeader := func(gtx C) D {

diff --git a/ui/page/send/page.go b/ui/page/send/page.go
@@ -53,9 +53,6 @@ type Page struct {
 	// retryExchange cryptomaterial.Button // TODO not included in design
 	nextButton cryptomaterial.Button
 
-	// shadowBox *cryptomaterial.Shadow
-	// backdrop  *widget.Clickable
-
 	isFetchingExchangeRate bool
 
 	exchangeRate   float64
@@ -105,9 +102,7 @@ func NewSendPage(l *load.Load, wallet sharedW.Asset) *Page {
 		Load: l,
 
 		authoredTxData: &authoredTxData{},
-		// shadowBox:      l.Theme.Shadow(),
-		// backdrop:       new(widget.Clickable),
-		exchangeRate: -1,
+		exchangeRate:   -1,
 	}
 
 	if wallet == nil {

diff --git a/ui/page/send/recipient.go b/ui/page/send/recipient.go
@@ -269,23 +269,35 @@ func (rp *recipient) addressAndAmountlayout(gtx C) D {
 	widget := func(gtx C) D { return rp.amount.amountEditor.Layout(gtx) }
 	if rp.pageParam().exchangeRate != -1 && rp.pageParam().usdExchangeSet {
 		widget = func(gtx C) D {
-			return layout.Flex{
-				Axis:      layout.Horizontal,
-				Alignment: layout.Middle,
-			}.Layout(gtx,
-				layout.Flexed(0.45, func(gtx C) D {
-					return rp.amount.amountEditor.Layout(gtx)
-				}),
+			icon := cryptomaterial.NewIcon(rp.Theme.Icons.ActionSwapHoriz)
+			axis := layout.Horizontal
+			var flexChilds []layout.FlexChild
+			flexChilds = []layout.FlexChild{
+				layout.Flexed(0.45, rp.amount.amountEditor.Layout),
 				layout.Flexed(0.1, func(gtx C) D {
 					return layout.Center.Layout(gtx, func(gtx C) D {
-						icon := rp.Theme.Icons.CurrencySwapIcon
-						return icon.Layout12dp(gtx)
+						return icon.Layout(gtx, values.MarginPadding16)
 					})
 				}),
-				layout.Flexed(0.45, func(gtx C) D {
-					return rp.amount.usdAmountEditor.Layout(gtx)
-				}),
-			)
+				layout.Flexed(0.45, rp.amount.usdAmountEditor.Layout),
+			}
+			if rp.IsMobileView() {
+				axis = layout.Vertical
+				icon = cryptomaterial.NewIcon(rp.Theme.Icons.ActionSwapVertical)
+				flexChilds = []layout.FlexChild{
+					layout.Rigid(rp.amount.amountEditor.Layout),
+					layout.Rigid(layout.Spacer{Height: values.MarginPadding10}.Layout),
+					layout.Rigid(func(gtx C) D {
+						return icon.Layout(gtx, values.MarginPadding16)
+					}),
+					layout.Rigid(layout.Spacer{Height: values.MarginPadding10}.Layout),
+					layout.Rigid(rp.amount.usdAmountEditor.Layout),
+				}
+			}
+			return layout.Flex{
+				Axis:      axis,
+				Alignment: layout.Middle,
+			}.Layout(gtx, flexChilds...)
 		}
 
 	}

diff --git a/ui/values/dimensions.go b/ui/values/dimensions.go
@@ -30,6 +30,7 @@ var (
 	MarginPadding15       = unit.Dp(15)
 	MarginPaddingMinus15  = unit.Dp(-15)
 	MarginPadding16       = unit.Dp(16)
+	MarginPaddingMinus16  = unit.Dp(-16)
 	MarginPadding17       = unit.Dp(17)
 	MarginPadding18       = unit.Dp(18)
 	MarginPadding18p5     = unit.Dp(18.5)