New layout for trade page

ui/page/dcrdex/dcrdex_page.go

@@ -7,7 +7,6 @@ import (
 	"github.com/crypto-power/cryptopower/app"
 	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
 	"github.com/crypto-power/cryptopower/ui/load"
-	"github.com/crypto-power/cryptopower/ui/values"
 )
 
 const DCRDEXID = "DCRDEXID"
@@ -71,33 +70,12 @@ func (pg *DEXPage) Layout(gtx C) D {
 				Height:      cryptomaterial.MatchParent,
 				Orientation: layout.Vertical,
 			}.Layout(gtx,
-				layout.Rigid(pg.topBar),
 				layout.Flexed(1, pg.CurrentPage().Layout),
 			)
 		}),
 	)
 }
 
-func (pg *DEXPage) topBar(gtx C) D {
-	return cryptomaterial.LinearLayout{
-		Width:       cryptomaterial.MatchParent,
-		Height:      cryptomaterial.WrapContent,
-		Orientation: layout.Horizontal,
-		Alignment:   layout.Middle,
-		Clickable:   pg.openTradeMainPage,
-		Padding:     layout.UniformInset(values.MarginPadding12),
-	}.Layout(gtx,
-		layout.Rigid(func(gtx C) D {
-			return pg.Theme.Icons.ChevronLeft.LayoutSize(gtx, values.MarginPadding24)
-		}),
-		layout.Rigid(func(gtx C) D {
-			txt := pg.Theme.Label(values.TextSize16, values.String(values.StrDcrDex))
-			txt.Color = pg.Theme.Color.Gray1
-			return txt.Layout(gtx)
-		}),
-	)
-}
-
 // HandleUserInteractions is called just before Layout() to determine if any
 // user interaction recently occurred on the page and may be used to update the
 // page's UI components shortly before they are displayed.

ui/page/exchange/create_order_page.go

@@ -69,8 +69,6 @@ type CreateOrderPage struct {
 	fromAmountEditor components.SelectAssetEditor
 	toAmountEditor   components.SelectAssetEditor
 
-	backButton cryptomaterial.IconButton
-
 	createOrderBtn         cryptomaterial.Button
 	swapButton             cryptomaterial.IconButton
 	refreshExchangeRateBtn cryptomaterial.IconButton
@@ -130,8 +128,6 @@ func NewCreateOrderPage(l *load.Load) *CreateOrderPage {
 		refreshIcon:      l.Theme.Icons.Restore,
 	}
 
-	pg.backButton, _ = components.SubpageHeaderButtons(l)
-
 	// pageSize defines the number of orders that can be fetched at ago.
 	pageSize := int32(5)
 	pg.scroll = components.NewScroll(l, pageSize, pg.fetchOrders)
@@ -624,27 +620,6 @@ func (pg *CreateOrderPage) Layout(gtx C) D {
 
 	pg.scroll.OnScrollChangeListener(pg.ParentWindow())
 
-	sp := components.SubPage{
-		Load:       pg.Load,
-		Title:      values.String(values.StrCreateOrder),
-		BackButton: pg.backButton,
-		Back: func() {
-			pg.ParentNavigator().CloseCurrentPage()
-		},
-		Body: func(gtx C) D {
-			overlay := layout.Stacked(func(gtx C) D { return D{} })
-			if overlaySet {
-				gtxCopy := gtx
-				overlay = layout.Stacked(func(gtx C) D {
-					return components.DisablePageWithOverlay(pg.Load, nil, gtxCopy, msg, navBtn)
-				})
-				// Disable main page from receiving events.
-				gtx = gtx.Disabled()
-			}
-			return layout.Stack{}.Layout(gtx, layout.Expanded(pg.layout), overlay)
-		},
-	}
-
 	return cryptomaterial.LinearLayout{
 		Width:     cryptomaterial.MatchParent,
 		Height:    cryptomaterial.MatchParent,
@@ -656,7 +631,16 @@ func (pg *CreateOrderPage) Layout(gtx C) D {
 			Alignment: layout.Middle,
 			Padding:   layout.Inset{Top: values.MarginPadding20},
 		}.Layout2(gtx, func(gtx C) D {
-			return sp.Layout(pg.ParentWindow(), gtx)
+			overlay := layout.Stacked(func(gtx C) D { return D{} })
+			if overlaySet {
+				gtxCopy := gtx
+				overlay = layout.Stacked(func(gtx C) D {
+					return components.DisablePageWithOverlay(pg.Load, nil, gtxCopy, msg, navBtn)
+				})
+				// Disable main page from receiving events.
+				gtx = gtx.Disabled()
+			}
+			return layout.Stack{}.Layout(gtx, layout.Expanded(pg.layout), overlay)
 		})
 	})
 }

ui/page/root/trade_page.go

@@ -1,8 +1,6 @@
 package root
 
 import (
-	"context"
-
 	"gioui.org/layout"
 	"gioui.org/widget"
 
@@ -19,24 +17,28 @@ const (
 	TradePageID = "Trade"
 )
 
+var tabTitles = []string{
+	values.String(values.StrDcrDex),
+	values.String(values.StrCentralizedExchange),
+}
+
 type TradePage struct {
-	*app.GenericPageModal
 	*load.Load
-
-	ctx       context.Context
-	ctxCancel context.CancelFunc
+	*app.MasterPage
 
 	scrollContainer *widget.List
 
+	tab *cryptomaterial.SegmentedControl
+
 	shadowBox   *cryptomaterial.Shadow
 	exchangeBtn *cryptomaterial.Clickable
 	dcrdexBtn   *cryptomaterial.Clickable
 }
 
 func NewTradePage(l *load.Load) *TradePage {
 	pg := &TradePage{
-		Load:             l,
-		GenericPageModal: app.NewGenericPageModal(TradePageID),
+		Load:       l,
+		MasterPage: app.NewMasterPage(TradePageID),
 
 		shadowBox: l.Theme.Shadow(),
 		scrollContainer: &widget.List{
@@ -47,6 +49,8 @@ func NewTradePage(l *load.Load) *TradePage {
 		},
 	}
 
+	pg.tab = l.Theme.SegmentedControl(tabTitles)
+
 	rad := cryptomaterial.Radius(14)
 	pg.exchangeBtn = l.Theme.NewClickable(false)
 	pg.exchangeBtn.Radius = rad
@@ -69,7 +73,11 @@ func (pg *TradePage) ID() string {
 // the page is displayed.
 // Part of the load.Page interface.
 func (pg *TradePage) OnNavigatedTo() {
-	pg.ctx, pg.ctxCancel = context.WithCancel(context.TODO())
+	if activeTab := pg.CurrentPage(); activeTab != nil {
+		activeTab.OnNavigatedTo()
+	} else {
+		pg.Display(dcrdex.NewDEXPage(pg.Load))
+	}
 }
 
 // HandleUserInteractions is called just before Layout() to determine
@@ -78,11 +86,15 @@ func (pg *TradePage) OnNavigatedTo() {
 // displayed.
 // Part of the load.Page interface.
 func (pg *TradePage) HandleUserInteractions() {
-	if pg.exchangeBtn.Clicked() {
-		pg.ParentNavigator().Display(exchange.NewCreateOrderPage(pg.Load))
+	if activeTab := pg.CurrentPage(); activeTab != nil {
+		activeTab.HandleUserInteractions()
+	}
+
+	if pg.tab.SelectedIndex() == 0 {
+		pg.Display(dcrdex.NewDEXPage(pg.Load))
 	}
-	if pg.dcrdexBtn.Clicked() {
-		pg.ParentNavigator().Display(dcrdex.NewDEXPage(pg.Load))
+	if pg.tab.SelectedIndex() == 1 {
+		pg.Display(exchange.NewCreateOrderPage(pg.Load))
 	}
 }
 
@@ -94,90 +106,53 @@ func (pg *TradePage) HandleUserInteractions() {
 // components unless they'll be recreated in the OnNavigatedTo() method.
 // Part of the load.Page interface.
 func (pg *TradePage) OnNavigatedFrom() {
-	pg.ctxCancel()
+	if activeTab := pg.CurrentPage(); activeTab != nil {
+		activeTab.OnNavigatedFrom()
+	}
 }
 
 // Layout draws the page UI components into the provided layout context
 // to be eventually drawn on screen.
 // Part of the load.Page interface.
 func (pg *TradePage) Layout(gtx C) D {
-	pg.Load.SetCurrentAppWidth(gtx.Constraints.Max.X)
 	if pg.Load.GetCurrentAppWidth() <= gtx.Dp(values.StartMobileView) {
 		return pg.layoutMobile(gtx)
 	}
 	return pg.layoutDesktop(gtx)
 }
 
 func (pg *TradePage) layoutDesktop(gtx C) D {
-	return layout.UniformInset(values.MarginPadding20).Layout(gtx, pg.pageContentLayout)
+	return components.UniformPadding(gtx, func(gtx C) D {
+		return layout.Flex{
+			Axis:      layout.Vertical,
+			Alignment: layout.Middle,
+		}.Layout(gtx,
+			layout.Rigid(pg.sectionNavTab),
+			layout.Flexed(1, func(gtx C) D {
+				return layout.Inset{Top: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
+					return pg.CurrentPage().Layout(gtx)
+				})
+			}),
+		)
+	})
 }
 
 func (pg *TradePage) layoutMobile(gtx C) D {
-	return components.UniformMobile(gtx, false, false, pg.pageContentLayout)
-}
-
-func (pg *TradePage) pageContentLayout(gtx C) D {
-	pg.dcrdexBtn.SetEnabled(true, &gtx)
-
-	pageContent := []func(gtx C) D{
-		pg.sectionTitle(values.String(values.StrExchangeIntro)),
-		pg.layoutAddMoreRowSection(pg.exchangeBtn, values.String(values.StrExchange), pg.Theme.Icons.AddExchange.Layout16dp),
-		pg.layoutAddMoreRowSection(pg.dcrdexBtn, values.String(values.StrDcrDex), pg.Theme.Icons.DcrDex.Layout16dp),
-	}
-
-	return cryptomaterial.LinearLayout{
-		Width:     cryptomaterial.MatchParent,
-		Height:    cryptomaterial.MatchParent,
-		Direction: layout.Center,
-	}.Layout2(gtx, func(gtx C) D {
-		return cryptomaterial.LinearLayout{
-			Width:  gtx.Dp(values.MarginPadding550),
-			Height: cryptomaterial.MatchParent,
-			Margin: layout.Inset{
-				Bottom: values.MarginPadding30,
-			},
-		}.Layout2(gtx, func(gtx C) D {
-			return pg.Theme.List(pg.scrollContainer).Layout(gtx, len(pageContent), func(gtx C, i int) D {
-				return layout.Inset{
-					Right:  values.MarginPadding48,
-					Bottom: values.MarginPadding4,
-				}.Layout(gtx, pageContent[i])
-			})
-		})
+	return components.UniformMobile(gtx, false, true, func(gtx C) D {
+		return layout.Flex{
+			Axis:      layout.Vertical,
+			Alignment: layout.Middle,
+		}.Layout(gtx,
+			layout.Rigid(pg.sectionNavTab),
+			layout.Flexed(1, func(gtx C) D {
+				return layout.Inset{Top: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
+					return pg.CurrentPage().Layout(gtx)
+				})
+			}),
+		)
 	})
 }
 
-func (pg *TradePage) sectionTitle(title string) layout.Widget {
-	return func(gtx C) D {
-		return layout.Inset{Bottom: values.MarginPadding16}.Layout(gtx, pg.Theme.Label(values.TextSize20, title).Layout)
-	}
-}
-
-func (pg *TradePage) layoutAddMoreRowSection(clk *cryptomaterial.Clickable, buttonText string, ic func(gtx C) D) layout.Widget {
-	return func(gtx C) D {
-		return layout.Inset{
-			Left: values.MarginPadding5,
-			Top:  values.MarginPadding10,
-		}.Layout(gtx, func(gtx C) D {
-			pg.shadowBox.SetShadowRadius(14)
-			return cryptomaterial.LinearLayout{
-				Width:      cryptomaterial.WrapContent,
-				Height:     cryptomaterial.WrapContent,
-				Padding:    layout.UniformInset(values.MarginPadding12),
-				Background: pg.Theme.Color.Surface,
-				Clickable:  clk,
-				Shadow:     pg.shadowBox,
-				Border:     cryptomaterial.Border{Radius: clk.Radius},
-				Alignment:  layout.Middle,
-			}.Layout(gtx,
-				layout.Rigid(ic),
-				layout.Rigid(func(gtx C) D {
-					return layout.Inset{
-						Left: values.MarginPadding4,
-						Top:  values.MarginPadding2,
-					}.Layout(gtx, pg.Theme.Body2(buttonText).Layout)
-				}),
-			)
-		})
-	}
+func (pg *TradePage) sectionNavTab(gtx C) D {
+	return pg.tab.Layout(gtx)
 }

ui/values/localizable/en.go

@@ -78,6 +78,7 @@ const EN = `
 "cancel" = "Cancel"
 "canceling" = "Cancelling..."
 "cancelMixer" = "Cancel mixer?"
+"centralizedExchange" = "Centralized Exchange"
 "changeAccount" = "Change account"
 "changeSpecificPeer" = "Change specific peer"
 "changeSpendingPass" = "Change spending passphrase"

ui/values/strings.go

@@ -188,6 +188,7 @@ const (
 	StrCancel                          = "cancel"
 	StrCanceling                       = "canceling"
 	StrCancelMixer                     = "cancelMixer"
+	StrCentralizedExchange             = "centralizedExchange"
 	StrChangeAccount                   = "changeAccount"
 	StrChangeSpecificPeer              = "changeSpecificPeer"
 	StrChangeSpendingPass              = "changeSpendingPass"