Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update staking layout #244

Merged
merged 11 commits into from
Nov 28, 2023
+284 −145
Merged

Update staking layout #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
72dc5c1
update staking info section
JustinBeBoy Nov 9, 2023
b051f4f
Add new layout for Statistics section and Update tikets section
JustinBeBoy Nov 10, 2023
876211c
fix lint
JustinBeBoy Nov 10, 2023
adc932c
fix image size, coinformat and progressbar
JustinBeBoy Nov 14, 2023
38281dd
optimize some function, update layout on staking section
JustinBeBoy Nov 15, 2023
a9cf24b
update layout on staking overview
JustinBeBoy Nov 17, 2023
70ffa77
update layout staking and fix crash
JustinBeBoy Nov 18, 2023
813ed6b
add divider to staking info section
JustinBeBoy Nov 23, 2023
c6f5295
update code from master
JustinBeBoy Nov 23, 2023
9ebc79f
fix conflict
JustinBeBoy Nov 28, 2023
e7527c5
update layout for staking page
JustinBeBoy Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ui/assets/decredicons/ticket_immature.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ui/assets/decredicons/ticket_unmined.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ui/assets/decredicons/ticket_voted.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 34 additions & 17 deletions ui/cryptomaterial/progressbar.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
20 changes: 8 additions & 12 deletions ui/page/components/coinformat.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default scale is .7, but this guy was using .85. I see that this LayoutBalanceWithUnitSizeBoldText was added by @Sirmorrison in #247. Let's get his thoughts on this change to use .7 instead of .85.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its used by the mixer layout to scale the size of the main text and subtext to the update UI.
image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fine to use the same scale all through. However, I'm not sure the default scale should be .7. From what I see in many places on figma, the significant part of the amount text uses 18px while the insignificant part uses 14px, which is a scale of 0.78 (14/18). Please verify and adjust accordingly @JustinBeBoy.

}

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 {
Expand Down
17 changes: 7 additions & 10 deletions ui/page/components/utils.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}),
Expand Down
2 changes: 1 addition & 1 deletion ui/page/info/sync_status.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down
6 changes: 4 additions & 2 deletions ui/page/privacy/account_mixer_page.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}),
)
})
Expand Down
Loading
Loading