Skip to content

Commit

Permalink
update layout proposal detail for mobile version
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustinBeBoy
JustinBeBoy committed Dec 12, 2023
1 parent 9c8550d commit 25931bd
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 149 deletions.
13 changes: 13 additions & 0 deletions ui/load/appinfo.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,16 @@ func (app *AppInfo) ConvertTextSize(size unit.Sp) unit.Sp {
return size
}
}

// This function return icon size for desktop and mobile
func (app *AppInfo) ConvertIconSize(size unit.Dp) unit.Dp {
if !app.isMobileView {
return size
}
switch size {
case values.MarginPadding24:
return values.MarginPadding16
default:
return size
}
}
6 changes: 6 additions & 0 deletions ui/page/components/components.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,12 @@ func UniformHorizontalInset(v unit.Dp) layout.Inset {
return layout.Inset{Right: v, Left: v}
}

// UniformVeticalInset creates an inset with the specified amount applied uniformly to both the top and bottom edges.
// This function is useful for ensuring consistent vetical padding or margin around elements, without affecting the horizontal spacing.
func UniformVeticalInset(v unit.Dp) layout.Inset {
return layout.Inset{Right: v, Left: v}
}

func UniformPadding(gtx layout.Context, body layout.Widget) layout.Dimensions {
width := gtx.Constraints.Max.X

Expand Down
5 changes: 1 addition & 4 deletions ui/page/components/consensus_list.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,6 @@ func layoutAgendaStatus(gtx C, l *load.Load, agenda *dcr.Agenda) D {
lbl := l.Theme.Label(l.ConvertTextSize(values.TextSize20), agenda.AgendaID)
lbl.Font.Weight = font.SemiBold
return lbl.Layout(gtx)
// return layout.Flex{}.Layout(gtx,
// layout.Rigid(lbl.Layout),
// )
}),
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Expand Down Expand Up @@ -132,7 +129,7 @@ func layoutAgendaVoteAction(gtx C, l *load.Load, item *ConsensusItem, hasVotingW
func LayoutNoAgendasFound(gtx C, l *load.Load, syncing bool) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
lb := l.Theme.Body1(values.String(values.StrNoAgendaYet))
lb.TextSize = l.ConvertTextSize(values.TextSize14)
lb.TextSize = l.ConvertTextSize(values.TextSize16)
lb.Color = l.Theme.Color.GrayText3
if syncing {
lb.Text = values.String(values.StrFetchingAgenda)
Expand Down
21 changes: 14 additions & 7 deletions ui/page/components/sub_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,11 @@ func SubpageHeaderButtons(l *load.Load) (cryptomaterial.IconButton, cryptomateri
backButton := l.Theme.IconButton(l.Theme.Icons.NavigationArrowBack)
infoButton := l.Theme.IconButton(l.Theme.Icons.ActionInfo)

m24 := values.MarginPadding24
backButton.Size, infoButton.Size = m24, m24
size := values.MarginPadding24
if l.IsMobileView() {
size = values.MarginPadding16
}
backButton.Size, infoButton.Size = size, size

buttonInset := layout.UniformInset(values.MarginPadding0)
backButton.Inset, infoButton.Inset = buttonInset, buttonInset
Expand All @@ -54,11 +57,15 @@ func (sp *SubPage) Layout(window app.WindowNavigator, gtx C) D {
func (sp *SubPage) LayoutWithHeadCard(window app.WindowNavigator, gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
horizontalPadding := values.MarginPadding24
if sp.IsMobileView() {
horizontalPadding = 16
}
return sp.Theme.Card().Layout(gtx, func(gtx C) D {
return layout.Inset{
Top: values.MarginPadding16,
Left: values.MarginPadding24,
Right: values.MarginPadding24,
Left: horizontalPadding,
Right: horizontalPadding,
}.Layout(gtx, func(gtx C) D {
return sp.Header(window, gtx)
})
Expand All @@ -78,18 +85,18 @@ func (sp *SubPage) Header(window app.WindowNavigator, gtx C) D {
return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{
Right: values.MarginPadding20,
Right: values.MarginPadding4,
}.Layout(gtx, sp.BackButton.Layout)
}),
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(sp.Load.Theme.SemiBoldLabelWithSize(values.TextSize20, sp.Title).Layout),
layout.Rigid(sp.Load.Theme.SemiBoldLabelWithSize(sp.ConvertTextSize(values.TextSize20), sp.Title).Layout),
layout.Rigid(func(gtx C) D {
if !utils.StringNotEmpty(sp.SubTitle) {
return D{}
}

sub := sp.Load.Theme.Label(values.TextSize14, sp.SubTitle)
sub := sp.Load.Theme.Label(sp.ConvertTextSize(values.TextSize14), sp.SubTitle)
sub.Color = sp.Load.Theme.Color.GrayText2
return sub.Layout(gtx)
}),
Expand Down
107 changes: 1 addition & 106 deletions ui/page/governance/governance_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,113 +121,8 @@ func (pg *Page) HandleUserInteractions() {
}

func (pg *Page) Layout(gtx C) D {
if pg.Load.IsMobileView() {
return pg.layoutMobile(gtx)
}
return pg.layoutDesktop(gtx)
}

func (pg *Page) layoutDesktop(gtx layout.Context) layout.Dimensions {
if !pg.isGovernanceAPIAllowed() {
return cryptomaterial.UniformPadding(gtx, pg.splashScreen)
}
return pg.tab.Layout(gtx, pg.CurrentPage().Layout)
return pg.tab.Layout(gtx, pg.CurrentPage().Layout, pg.IsMobileView())
}

func (pg *Page) layoutMobile(gtx layout.Context) layout.Dimensions {
return pg.tab.Layout(gtx, pg.CurrentPage().Layout, true)
// return components.UniformMobile(gtx, false, true, func(gtx C) D {
// return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
// layout.Rigid(pg.layoutPageTopNav),
// layout.Rigid(pg.layoutTabs),
// layout.Rigid(pg.Theme.Separator().Layout),
// 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 *Page) selectedTabIndex() int {
// switch pg.CurrentPageID() {
// case ProposalsPageID:
// return 0
// case ConsensusPageID:
// return 1
// case TreasuryPageID:
// return 2
// default:
// return -1
// }
// }

// func (pg *Page) layoutTabs(gtx C) D {
// var selectedTabDims layout.Dimensions

// return layout.Inset{
// Top: values.MarginPadding20,
// }.Layout(gtx, func(gtx C) D {
// return pg.tabCategoryList.Layout(gtx, len(governanceTabTitles), func(gtx C, i int) D {
// isSelectedTab := pg.selectedTabIndex() == i
// return layout.Stack{Alignment: layout.S}.Layout(gtx,
// layout.Stacked(func(gtx C) D {
// return layout.Inset{
// Right: values.MarginPadding24,
// Bottom: values.MarginPadding8,
// }.Layout(gtx, func(gtx C) D {
// return layout.Center.Layout(gtx, func(gtx C) D {
// lbl := pg.Theme.Label(values.TextSize16, governanceTabTitles[i])
// lbl.Color = pg.Theme.Color.GrayText1
// if isSelectedTab {
// lbl.Color = pg.Theme.Color.Primary
// selectedTabDims = lbl.Layout(gtx)
// }

// return lbl.Layout(gtx)
// })
// })
// }),
// layout.Stacked(func(gtx C) D {
// if !isSelectedTab {
// return D{}
// }

// tabHeight := gtx.Dp(values.MarginPadding2)
// tabRect := image.Rect(0, 0, selectedTabDims.Size.X, tabHeight)

// return layout.Inset{
// Left: values.MarginPaddingMinus22,
// }.Layout(gtx, func(gtx C) D {
// paint.FillShape(gtx.Ops, pg.Theme.Color.Primary, clip.Rect(tabRect).Op())
// return layout.Dimensions{
// Size: image.Point{X: selectedTabDims.Size.X, Y: tabHeight},
// }
// })
// }),
// )
// })
// })
// }

// func (pg *Page) layoutPageTopNav(gtx C) D {
// return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
// layout.Rigid(func(gtx C) D {
// return layout.Inset{
// Left: values.MarginPadding20,
// }.Layout(gtx, func(gtx C) D {
// txt := pg.Theme.Label(values.TextSize20, values.String(values.StrGovernance))
// txt.Font.Weight = font.SemiBold
// return txt.Layout(gtx)
// })
// }),
// layout.Flexed(1, func(gtx C) D {
// return layout.E.Layout(gtx, func(gtx C) D {
// return D{}
// // TODO: governance syncing functionality.
// // TODO: Split wallet sync from governance
// })
// }),
// )
// }
Loading

0 comments on commit 25931bd

Please sign in to comment.