Multi: Create DEX main page (#208)

* create DEX main page Signed-off-by: Philemon Ukane <[email protected]> * reviews, refactor andd improved UI changes Signed-off-by: Philemon Ukane <[email protected]> --------- Signed-off-by: Philemon Ukane <[email protected]>
crypto-power · Dec 5, 2023 · ab695e8 · ab695e8
1 parent 9570868
commit ab695e8
Show file tree

Hide file tree

Showing 18 changed files with 1,426 additions and 328 deletions.
diff --git a/ui/cryptomaterial/dropdown.go b/ui/cryptomaterial/dropdown.go
diff --git a/ui/cryptomaterial/segmented_control.go b/ui/cryptomaterial/segmented_control.go
@@ -16,6 +16,8 @@ type SegmentedControl struct {
 	leftNavBtn,
 	rightNavBtn *Clickable
 
+	Padding layout.Inset
+
 	selectedIndex int
 	segmentTitles []string
 
@@ -33,6 +35,7 @@ func (t *Theme) SegmentedControl(segmentTitles []string) *SegmentedControl {
 		segmentTitles: segmentTitles,
 		leftNavBtn:    t.NewClickable(false),
 		rightNavBtn:   t.NewClickable(false),
+		Padding:       layout.UniformInset(values.MarginPadding8),
 	}
 }
 
@@ -57,14 +60,17 @@ func (sc *SegmentedControl) Layout(gtx C) D {
 						txt.Color = sc.theme.Color.Text
 						border = Border{Radius: Radius(8)}
 					}
-					return LinearLayout{
+
+					ll := LinearLayout{
 						Width:      WrapContent,
 						Height:     WrapContent,
-						Padding:    layout.UniformInset(values.MarginPadding8),
 						Background: bg,
 						Margin:     layout.UniformInset(values.MarginPadding5),
 						Border:     border,
-					}.Layout2(gtx, txt.Layout)
+						Padding:    sc.Padding,
+					}
+
+					return ll.Layout2(gtx, txt.Layout)
 				})
 			})
 		}),

diff --git a/ui/cryptomaterial/theme.go b/ui/cryptomaterial/theme.go
@@ -216,17 +216,17 @@ func mulAlpha(c color.NRGBA, alpha uint8) color.NRGBA {
 func (t *Theme) closeAllDropdownMenus(group uint) {
 	for _, dropDown := range t.dropDownMenus {
 		if dropDown.group == group {
-			dropDown.isOpen = false
+			dropDown.expanded = false
 		}
 	}
 }
 
-// isOpenDropdownGroup iterate over Dropdowns registered as a member
+// isDropdownGroupCollapsed iterate over Dropdowns registered as a member
 // of {group}, returns true if any of the drop down state is open.
-func (t *Theme) isOpenDropdownGroup(group uint) bool {
+func (t *Theme) isDropdownGroupCollapsed(group uint) bool {
 	for _, dropDown := range t.dropDownMenus {
 		if dropDown.group == group {
-			if dropDown.isOpen {
+			if dropDown.expanded {
 				return true
 			}
 		}

diff --git a/ui/modal/info_modal.go b/ui/modal/info_modal.go
@@ -231,7 +231,7 @@ func (in *InfoModal) NegativeButtonStyle(background, text color.NRGBA) *InfoModa
 	return in
 }
 
-// for backwards compatibility
+// for backwards compatibility.
 func (in *InfoModal) SetupWithTemplate(template string) *InfoModal {
 	title := in.dialogTitle
 	subtitle := in.subtitle

diff --git a/ui/page/components/components.go b/ui/page/components/components.go
@@ -855,7 +855,7 @@ func BrowserURLWidget(gtx C, l *load.Load, url string, copyRedirect *cryptomater
 				})
 			})
 		}),
-		layout.Stacked(func(gtx layout.Context) layout.Dimensions {
+		layout.Stacked(func(gtx C) D {
 			return layout.Inset{
 				Top:  values.MarginPaddingMinus10,
 				Left: values.MarginPadding10,
@@ -946,3 +946,31 @@ func FlexLayout(gtx C, options FlexOptions, widgets []func(gtx C) D) D {
 		Alignment: options.Alignment,
 	}.Layout(gtx, flexChildren...)
 }
+
+// IconButton creates the display for an icon button. The default icon and text
+// color is Theme.Color.Primary.
+func IconButton(icon *widget.Icon, txt string, inset layout.Inset, th *cryptomaterial.Theme, clickable *cryptomaterial.Clickable) func(gtx C) D {
+	return func(gtx C) D {
+		return inset.Layout(gtx, func(gtx C) D {
+			color := th.Color.Primary
+			return cryptomaterial.LinearLayout{
+				Width:       cryptomaterial.MatchParent,
+				Height:      cryptomaterial.WrapContent,
+				Orientation: layout.Horizontal,
+				Alignment:   layout.Start,
+				Clickable:   clickable,
+			}.Layout(gtx,
+				layout.Rigid(func(gtx C) D {
+					return icon.Layout(gtx, color)
+				}),
+				layout.Rigid(layout.Spacer{Width: values.MarginPadding5}.Layout),
+				layout.Rigid(func(gtx C) D {
+					label := th.Label(values.TextSize16, txt)
+					label.Color = color
+					label.Font.Weight = font.SemiBold
+					return label.Layout(gtx)
+				}),
+			)
+		})
+	}
+}
diff --git a/ui/page/components/order_list.go b/ui/page/components/order_list.go
@@ -124,16 +124,20 @@ func statusIcon(l *load.Load, status api.Status) func(gtx C) layout.Dimensions {
 }
 
 func LayoutNoOrderHistory(gtx C, l *load.Load, syncing bool) D {
+	return LayoutNoOrderHistoryWithMsg(gtx, l, syncing, values.String(values.StrNoOrders))
+}
+
+func LayoutNoOrderHistoryWithMsg(gtx C, l *load.Load, syncing bool, msg string) D {
 	gtx.Constraints.Min.X = gtx.Constraints.Max.X
-	text := l.Theme.Body1(values.String(values.StrNoOrders))
+	text := l.Theme.Body1(msg)
 	text.Color = l.Theme.Color.GrayText3
 	if syncing {
 		text = l.Theme.Body1(values.String(values.StrFetchingOrders))
 	}
 	return layout.Center.Layout(gtx, func(gtx C) D {
 		return layout.Inset{
-			Top:    values.MarginPadding10,
-			Bottom: values.MarginPadding10,
+			Top:    values.MarginPadding30,
+			Bottom: values.MarginPadding30,
 		}.Layout(gtx, text.Layout)
 	})
 }

diff --git a/ui/page/dcrdex/dcrdex_page.go b/ui/page/dcrdex/dcrdex_page.go
@@ -32,6 +32,7 @@ type DEXPage struct {
 	splashPageContainer   *widget.List
 	finalizeOnboardingBtn cryptomaterial.Button
 	isDexFirstVisit       bool
+	inited                bool
 }
 
 func NewDEXPage(l *load.Load) *DEXPage {
@@ -49,6 +50,7 @@ func NewDEXPage(l *load.Load) *DEXPage {
 
 	// Init splash page more info widget.
 	_, dp.splashPageInfoButton = components.SubpageHeaderButtons(l)
+	dp.inited = true // TODO: Set value
 	return dp
 }
 
@@ -65,12 +67,13 @@ func (pg *DEXPage) ID() string {
 // Part of the load.Page interface.
 func (pg *DEXPage) OnNavigatedTo() {
 	pg.ctx, pg.ctxCancel = context.WithCancel(context.TODO())
-	if pg.CurrentPage() == nil {
-		// TODO: Handle pg.inited
+	if pg.CurrentPage() != nil {
+		pg.CurrentPage().OnNavigatedTo()
+	} else if pg.inited {
+		pg.Display(NewDEXMarketPage(pg.Load))
+	} else {
 		pg.Display(NewDEXOnboarding(pg.Load))
 	}
-
-	pg.CurrentPage().OnNavigatedTo()
 }
 
 // Layout draws the page UI components into the provided layout context to be
@@ -82,17 +85,7 @@ func (pg *DEXPage) Layout(gtx C) D {
 			return pg.splashPage(gtx)
 		})
 	}
-	return layout.Stack{}.Layout(gtx,
-		layout.Expanded(func(gtx C) D {
-			return cryptomaterial.LinearLayout{
-				Width:       cryptomaterial.MatchParent,
-				Height:      cryptomaterial.MatchParent,
-				Orientation: layout.Vertical,
-			}.Layout(gtx,
-				layout.Flexed(1, pg.CurrentPage().Layout),
-			)
-		}),
-	)
+	return pg.CurrentPage().Layout(gtx)
 }
 
 // HandleUserInteractions is called just before Layout() to determine if any