Update staking layout (#244)

* update staking info section

* Add new layout for Statistics section and Update tikets section

* fix lint

* fix image size, coinformat and progressbar

* optimize some function, update layout on staking section

* update layout on staking overview

* update layout staking and fix crash

* add divider to staking info section

* update layout for staking page

ui/cryptomaterial/progressbar.go

@@ -38,13 +38,13 @@ type ProgressBarItem struct {
 type MultiLayerProgressBar struct {
 	t *Theme
 
-	items            []ProgressBarItem
-	Radius           CornerRadius
-	Height           unit.Dp
-	Width            unit.Dp
-	total            float64
-	ShowLedger       bool
-	ShowOverLayValue bool
+	items                []ProgressBarItem
+	Radius               CornerRadius
+	Height               unit.Dp
+	Width                unit.Dp
+	total                float64
+	ShowOverLayValue     bool
+	ShowOtherWidgetFirst bool
 }
 
 func (t *Theme) ProgressBar(progress int) ProgressBarStyle {
@@ -221,18 +221,35 @@ func (mp *MultiLayerProgressBar) progressBarLayout(gtx C) D {
 	)
 }
 
-func (mp *MultiLayerProgressBar) Layout(gtx C, labelWdg layout.Widget) D {
-	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
-		layout.Rigid(func(gtx C) D {
-			return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
-		}),
+func (mp *MultiLayerProgressBar) Layout(gtx C, additionalWidget layout.Widget) D {
+	if additionalWidget == nil {
+		// We're only displaying the progress bar, no need for flex layout to wrap it.
+		// TODO: Verify if a top padding is necessary if we're only displaying the progressbar.
+		return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
+	}
+
+	progressBarTopPadding, otherWidget := values.MarginPadding24, additionalWidget
+	if !mp.ShowOtherWidgetFirst {
+		// reduce the top padding if we're showing the progress bar before the other widget
+		progressBarTopPadding = values.MarginPadding5
+		otherWidget = func(gtx C) D {
+			return layout.Center.Layout(gtx, additionalWidget)
+		}
+	}
+
+	flexWidgets := []layout.FlexChild{
 		layout.Rigid(func(gtx C) D {
-			if mp.ShowLedger {
-				return layout.Center.Layout(gtx, labelWdg)
-			}
-			return D{}
+			return layout.Inset{Top: progressBarTopPadding}.Layout(gtx, mp.progressBarLayout)
 		}),
-	)
+		layout.Rigid(otherWidget),
+	}
+
+	if mp.ShowOtherWidgetFirst {
+		// Swap the label and progress bar...
+		flexWidgets[0], flexWidgets[1] = flexWidgets[1], flexWidgets[0]
+	}
+
+	return layout.Flex{Axis: layout.Vertical}.Layout(gtx, flexWidgets...)
 }
 
 func (t *Theme) ProgressBarCirle(progress int) ProgressCircleStyle {

ui/page/components/coinformat.go

@@ -21,7 +21,7 @@ var (
 	noDecimal                 = regexp.MustCompile(`([0-9]{1,3},*)+`)
 )
 
-func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, scale float32, col color.NRGBA, isBoldText, displayUnitText bool) D {
+func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, col color.NRGBA, isBoldText, displayUnitText bool) D {
 
 	startIndex := 0
 	stopIndex := 0
@@ -45,7 +45,7 @@ func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, sca
 
 	mainText, subText, unitText := amount[:startIndex], amount[startIndex:stopIndex], amount[stopIndex:]
 
-	subTextSize := unit.Sp(float32(mainTextSize) * scale)
+	subTextSize := unit.Sp(float32(mainTextSize) * defaultScale)
 
 	lblWidget := func(size unit.Sp, text string) D {
 		lbl := l.Theme.Label(size, text)
@@ -115,31 +115,27 @@ func getIndexUnit(amount string) int {
 // LayoutBalance aligns the main and sub DCR balances horizontally, putting the sub
 // balance at the baseline of the row.
 func LayoutBalance(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.Text, false, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.Text, false, false)
 }
 
 func LayoutBalanceWithUnit(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.PageNavText, false, true)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.PageNavText, false, true)
 }
 
 func LayoutBalanceWithUnitSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.PageNavText, false, true)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.PageNavText, false, true)
 }
 
 func LayoutBalanceWithUnitSizeBoldText(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, .85, l.Theme.Color.PageNavText, true, true)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.PageNavText, true, true)
 }
 
 func LayoutBalanceSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.Text, false, false)
-}
-
-func LayoutBalanceSizeScale(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp, scale float32) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, scale, l.Theme.Color.Text, false, false)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.Text, false, false)
 }
 
 func LayoutBalanceColor(gtx layout.Context, l *load.Load, amount string, color color.NRGBA) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, color, false, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, color, false, false)
 }
 
 func LayoutBalanceWithState(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {

ui/page/components/utils.go

@@ -111,23 +111,20 @@ func checksumByte(data []byte) byte {
 	return sha256.Sum256(intermediateHash[:])[0]
 }
 
-func LayoutIconAndText(l *load.Load, gtx C, title string, val string, col color.NRGBA) D {
+func LayoutIconAndTextWithSize(l *load.Load, gtx C, text string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
 	return layout.Inset{Right: values.MarginPadding12}.Layout(gtx, func(gtx C) D {
-		return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
+		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
-				return layout.Inset{Right: values.MarginPadding5, Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
+				return layout.Inset{
+					Right: values.MarginPadding5,
+				}.Layout(gtx, func(gtx C) D {
 					ic := cryptomaterial.NewIcon(l.Theme.Icons.ImageBrightness1)
 					ic.Color = col
-					return ic.Layout(gtx, values.MarginPadding8)
+					return ic.Layout(gtx, iconSize)
 				})
 			}),
 			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(values.TextSize14, title)
-				txt.Color = l.Theme.Color.GrayText2
-				return txt.Layout(gtx)
-			}),
-			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(values.TextSize14, val)
+				txt := l.Theme.Label(size, text)
 				txt.Color = l.Theme.Color.GrayText2
 				return txt.Layout(gtx)
 			}),

ui/page/info/sync_status.go

@@ -272,7 +272,7 @@ func (pg *WalletInfo) progressStatusDetails() (int, string) {
 	}
 
 	if wallet.IsSyncing() || walletIsRescanning {
-		timeLeftLabel = values.StringF(values.StrTimeLeft, timeLeft)
+		timeLeftLabel = values.StringF(values.StrTimeLeftFmt, timeLeft)
 		if progress == 0 {
 			timeLeftLabel = values.String(values.StrLoading)
 		}

ui/page/privacy/account_mixer_page.go

@@ -165,10 +165,12 @@ func (pg *AccountMixerPage) mixerProgressBarLayout(gtx C) D {
 		return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
 			return layout.Flex{}.Layout(gtx,
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, "", pg.mixedBalance.String(), items[0].Color)
+					text := pg.mixedBalance.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[0].Color, values.TextSize14, values.MarginPadding8)
 				}),
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, "", pg.unmixedBalance.String(), items[1].Color)
+					text := pg.unmixedBalance.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[1].Color, values.TextSize14, values.MarginPadding8)
 				}),
 			)
 		})