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

Jump to bottom

Update transaction card and staking card on overview page for mobile #339

Merged
merged 1 commit into from
Dec 19, 2023
Merged

Update transaction card and staking card on overview page for mobile #339

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
183 changes: 86 additions & 97 deletions ui/page/root/overview_page.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ func (pg *OverviewPage) Layout(gtx C) D {
return pg.layoutDesktop(gtx)
}

func (pg *OverviewPage) layoutDesktop(gtx layout.Context) layout.Dimensions {
func (pg *OverviewPage) layoutDesktop(gtx C) D {
pageContent := []func(gtx C) D{
pg.sliderLayout,
pg.marketOverview,
Expand Down Expand Up @@ -361,7 +361,7 @@ func (pg *OverviewPage) sliderLayout(gtx C) D {
return pg.assetBalanceSliderLayout(gtx, mixerSliderDims.Size.Y)
}),
layout.Flexed(.5, func(gtx C) D {
return layout.Inset{Left: values.MarginPadding10}.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
return layout.Inset{Left: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
call.Add(gtx.Ops)
return mixerSliderDims
})
Expand Down Expand Up @@ -500,14 +500,14 @@ func (pg *OverviewPage) marketOverview(gtx C) D {
return D{}
}

titleLayout := func(gtx layout.Context) layout.Dimensions {
titleLayout := func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Orientation: layout.Horizontal,
Spacing: layout.SpaceBetween,
}.Layout(gtx,
layout.Rigid(func(gtx layout.Context) layout.Dimensions {
layout.Rigid(func(gtx C) D {
return pg.Theme.Body2(values.String(values.StrMarketOverview)).Layout(gtx)
}),
layout.Flexed(1, func(gtx C) D {
Expand Down Expand Up @@ -539,7 +539,7 @@ func (pg *OverviewPage) marketOverview(gtx C) D {
layout.Rigid(func(gtx C) D {
// No divider for last row
if i == len(pg.mktValues)-1 {
return layout.Dimensions{}
return D{}
}

gtx.Constraints.Min.X = gtx.Constraints.Max.X
Expand Down Expand Up @@ -586,7 +586,7 @@ func (pg *OverviewPage) mobileMarketOverview(gtx C) D {
Orientation: layout.Horizontal,
Spacing: layout.SpaceBetween,
}.Layout(gtx,
layout.Rigid(func(gtx layout.Context) layout.Dimensions {
layout.Rigid(func(gtx C) D {
txt := pg.Theme.Label(values.TextSize18, values.String(values.StrMarketOverview))
txt.Color = pg.Theme.Color.Text
return layout.Inset{Bottom: values.MarginPadding8}.Layout(gtx, txt.Layout)
Expand Down Expand Up @@ -833,101 +833,90 @@ func (pg *OverviewPage) txStakingSection(gtx C) D {
Direction: layout.Center,
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
var flexChilds []layout.FlexChild
if pg.IsMobileView() {
return layout.Flex{Axis: axis}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
return pg.pageContentWrapper(gtx, values.String(values.StrRecentTransactions), nil, func(gtx C) D {
return pg.centerLayout(gtx, values.MarginPadding10, values.MarginPadding10, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return pg.Theme.Body1(values.String(values.StrNoTransactions)).Layout(gtx)
})
})
})
}),
layout.Rigid(func(gtx C) D {
return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
return pg.pageContentWrapper(gtx, values.String(values.StrStakingActivity), nil, func(gtx C) D {
return pg.centerLayout(gtx, values.MarginPadding10, values.MarginPadding10, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return pg.Theme.Body1(values.String(values.StrNoStaking)).Layout(gtx)
})
})
})
}),
)
flexChilds = []layout.FlexChild{
layout.Rigid(layout.Spacer{Height: values.MarginPadding16}.Layout),
layout.Rigid(pg.recentTransactionsLayout),
layout.Rigid(pg.recentStakingsLayout),
}
} else {
flexChilds = []layout.FlexChild{
layout.Flexed(.5, pg.recentTransactionsLayout),
layout.Rigid(layout.Spacer{Width: values.MarginPadding10}.Layout),
layout.Flexed(.5, pg.recentStakingsLayout),
}
}

return layout.Flex{}.Layout(gtx,
layout.Flexed(.5, func(gtx C) D {
return layout.Inset{Right: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
return pg.pageContentWrapper(gtx, values.String(values.StrRecentTransactions), nil, func(gtx C) D {
if len(pg.transactions) == 0 {
return pg.centerLayout(gtx, values.MarginPadding10, values.MarginPadding10, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return pg.Theme.Body1(values.String(values.StrNoTransactions)).Layout(gtx)
})
}
return layout.Flex{Axis: axis}.Layout(gtx, flexChilds...)
}),
)
}

return pg.recentTransactions.Layout(gtx, len(pg.transactions), func(gtx C, index int) D {
tx, wal := pg.txAndWallet(pg.transactions[index])
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return components.LayoutTransactionRow(gtx, pg.Load, wal, tx, false)
}),
layout.Rigid(func(gtx C) D {
// No divider for last row
if index == len(pg.transactions)-1 {
return D{}
}
func (pg *OverviewPage) recentTransactionsLayout(gtx C) D {
return pg.pageContentWrapper(gtx, values.String(values.StrRecentTransactions), nil, func(gtx C) D {
if len(pg.transactions) == 0 {
return pg.centerLayout(gtx, values.MarginPadding10, values.MarginPadding10, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return pg.Theme.Body1(values.String(values.StrNoTransactions)).Layout(gtx)
})
}

gtx.Constraints.Min.X = gtx.Constraints.Max.X
separator := pg.Theme.Separator()
return layout.E.Layout(gtx, func(gtx C) D {
// Show bottom divider for all rows except last
return layout.Inset{Left: values.MarginPadding32}.Layout(gtx, separator.Layout)
})
}),
)
})
})
return pg.recentTransactions.Layout(gtx, len(pg.transactions), func(gtx C, index int) D {
tx, wal := pg.txAndWallet(pg.transactions[index])
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return components.LayoutTransactionRow(gtx, pg.Load, wal, tx, false)
}),
layout.Rigid(func(gtx C) D {
// No divider for last row
if index == len(pg.transactions)-1 {
return D{}
}

gtx.Constraints.Min.X = gtx.Constraints.Max.X
separator := pg.Theme.Separator()
return layout.E.Layout(gtx, func(gtx C) D {
// Show bottom divider for all rows except last
return layout.Inset{Left: values.MarginPadding32}.Layout(gtx, separator.Layout)
})
}),
layout.Flexed(.5, func(gtx C) D {
return pg.pageContentWrapper(gtx, values.String(values.StrStakingActivity), nil, func(gtx C) D {
if len(pg.stakes) == 0 {
return pg.centerLayout(gtx, values.MarginPadding10, values.MarginPadding10, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return pg.Theme.Body1(values.String(values.StrNoStaking)).Layout(gtx)
})
}
)
})
})
}

return pg.recentStakes.Layout(gtx, len(pg.stakes), func(gtx C, index int) D {
tx, wal := pg.txAndWallet(pg.stakes[index])
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return components.LayoutTransactionRow(gtx, pg.Load, wal, tx, false)
}),
layout.Rigid(func(gtx C) D {
// No divider for last row
if index == len(pg.stakes)-1 {
return D{}
}

gtx.Constraints.Min.X = gtx.Constraints.Max.X
separator := pg.Theme.Separator()
return layout.E.Layout(gtx, func(gtx C) D {
// Show bottom divider for all rows except last
return layout.Inset{Left: values.MarginPadding32}.Layout(gtx, separator.Layout)
})
}),
)
})
func (pg *OverviewPage) recentStakingsLayout(gtx C) D {
return pg.pageContentWrapper(gtx, values.String(values.StrStakingActivity), nil, func(gtx C) D {
if len(pg.stakes) == 0 {
return pg.centerLayout(gtx, values.MarginPadding10, values.MarginPadding10, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return pg.Theme.Body1(values.String(values.StrNoStaking)).Layout(gtx)
})
}

return pg.recentStakes.Layout(gtx, len(pg.stakes), func(gtx C, index int) D {
tx, wal := pg.txAndWallet(pg.stakes[index])
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return components.LayoutTransactionRow(gtx, pg.Load, wal, tx, false)
}),
layout.Rigid(func(gtx C) D {
// No divider for last row
if index == len(pg.stakes)-1 {
return D{}
}

gtx.Constraints.Min.X = gtx.Constraints.Max.X
separator := pg.Theme.Separator()
return layout.E.Layout(gtx, func(gtx C) D {
// Show bottom divider for all rows except last
return layout.Inset{Left: values.MarginPadding32}.Layout(gtx, separator.Layout)
})
}),
)
}),
)
})
})
}

func (pg *OverviewPage) recentTrades(gtx C) D {
Expand All @@ -950,7 +939,7 @@ func (pg *OverviewPage) recentTrades(gtx C) D {
layout.Rigid(func(gtx C) D {
// Show bottom divider for all rows except the last row.
if i == len(pg.orders)-1 {
return layout.Dimensions{}
return D{}
}

gtx.Constraints.Min.X = gtx.Constraints.Max.X
Expand Down Expand Up @@ -980,7 +969,7 @@ func (pg *OverviewPage) recentProposal(gtx C) D {
layout.Rigid(func(gtx C) D {
// No divider for last row
if i == len(pg.proposalItems)-1 {
return layout.Dimensions{}
return D{}
}
return pg.Theme.Separator().Layout(gtx)
}),
Expand Down Expand Up @@ -1224,10 +1213,10 @@ func (pg *OverviewPage) reloadBalances() {
}

func (pg *OverviewPage) ratesRefreshComponent() func(gtx C) D {
return func(gtx layout.Context) layout.Dimensions {
return func(gtx C) D {
refreshing := pg.AssetsManager.RateSource.Refreshing()
return layout.Flex{Axis: layout.Horizontal, Alignment: layout.End}.Layout(gtx,
layout.Rigid(func(gtx layout.Context) layout.Dimensions {
layout.Rigid(func(gtx C) D {
var text string
if refreshing {
text = values.String(values.StrRefreshState)
Expand All @@ -1239,21 +1228,21 @@ func (pg *OverviewPage) ratesRefreshComponent() func(gtx C) D {
lastUpdatedInfo.Color = pg.Theme.Color.GrayText2
return layout.Inset{Bottom: values.MarginPadding2}.Layout(gtx, lastUpdatedInfo.Layout)
}),
layout.Rigid(func(gtx layout.Context) layout.Dimensions {
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.WrapContent,
Height: cryptomaterial.WrapContent,
Direction: layout.E,
Alignment: layout.End,
Margin: layout.Inset{Left: values.MarginPadding8},
Clickable: pg.forceRefreshRates,
}.Layout2(gtx, func(gtx layout.Context) layout.Dimensions {
}.Layout2(gtx, func(gtx C) D {
if refreshing {
gtx.Constraints.Max.X = gtx.Dp(values.MarginPadding20)
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return layout.Inset{Left: values.MarginPadding5, Bottom: values.MarginPadding2}.Layout(gtx, pg.materialLoader.Layout)
}
return layout.Inset{Left: values.MarginPadding5}.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
return layout.Inset{Left: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
return pg.Theme.Icons.Restore.LayoutSize(gtx, values.MarginPadding18)
})
})
Expand Down