Skip to content

Commit

Permalink
update all component on send page for desktop and mobile version
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustinBeBoy
JustinBeBoy committed Dec 20, 2023
1 parent 6d23f2b commit 0db953a
Show file tree
Hide file tree
Showing 8 changed files with 62 additions and 44 deletions.
1 change: 0 additions & 1 deletion ui/cryptomaterial/collapsible.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ type Collapsible struct {
}

type CollapsibleWithOption struct {
isExpanded bool
button *widget.Clickable
BackgroundColor color.NRGBA
card Card
Expand Down
2 changes: 1 addition & 1 deletion ui/cryptomaterial/modal.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ func (m *Modal) Layout(gtx layout.Context, widgets []layout.Widget, width ...flo
}

maxWidth := float32(360)
if len(width) > 0 {
if len(width) > 0 && width[0] > 0 {
maxWidth = width[0]
} else if currentAppWidth := gtx.Metric.PxToDp(gtx.Constraints.Max.X); currentAppWidth <= values.StartMobileView {
// maxWidth must be less than currentAppWidth on mobile, so the
Expand Down
1 change: 0 additions & 1 deletion ui/cryptomaterial/segmented_control.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,6 @@ func (sc *SegmentedControl) Layout(gtx C, body func(gtx C) D, isMobileView ...bo
if sc.disableUniformPadding {
return widget(gtx)
}

return UniformPadding(gtx, widget, sc.isMobileView)
}

Expand Down
6 changes: 3 additions & 3 deletions ui/page/components/fee_rate_selector.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ func NewFeeRateSelector(l *load.Load, callback walletTypeCallbackFunc) *FeeRateS
Top: values.MarginPadding4,
}

fs.SaveRate.TextSize = values.TextSize16
fs.SaveRate.TextSize = values.TextSizeTransform(fs.IsMobileView(), values.TextSize16)
fs.SaveRate.Inset = layout.Inset{
Top: values.MarginPadding12,
Right: values.MarginPadding16,
Expand Down Expand Up @@ -158,11 +158,11 @@ func (fs *FeeRateSelector) Layout(gtx C) D {
}

if fs.feeRateSwitch.SelectedSegment() == values.String(values.StrFetched) {
fs.fetchedRatesDropDown.Width = values.MarginPadding510
fs.fetchedRatesDropDown.Width = gtx.Metric.PxToDp(gtx.Constraints.Max.X)
layoutBody = fs.fetchedRatesDropDown.Layout
}

return fs.feeRateSwitch.Layout(gtx, layoutBody)
return fs.feeRateSwitch.Layout(gtx, layoutBody, fs.IsMobileView())
}),
layout.Rigid(func(gtx C) D {
col := fs.Theme.Color.GrayText2
Expand Down
4 changes: 4 additions & 0 deletions ui/page/root/home_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,10 @@ func (hp *HomePage) HandleUserInteractions() {
receiveModal := components.NewReceiveModal(hp.Load)
hp.ParentWindow().ShowModal(receiveModal)
}

if strings.ToLower(item.PageID) == values.StrSend {
hp.ParentWindow().ShowModal(send.NewSendPage(hp.Load, nil))
}
}
}
}
Expand Down
18 changes: 13 additions & 5 deletions ui/page/send/layout.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,15 @@ func (pg *Page) initLayoutWidgets() {
// to be eventually drawn on screen.
// Part of the load.Page interface.
func (pg *Page) Layout(gtx C) D {
if pg.modalLayout != nil {
modalContent := []layout.Widget{pg.contentLayout}
return pg.modalLayout.Layout(gtx, modalContent, 450)
if pg.modalLayout == nil {
return pg.contentLayout(gtx)
}
var modalWidth float32 = 450
if pg.IsMobileView() {
modalWidth = 0
}
return pg.contentLayout(gtx)
modalContent := []layout.Widget{pg.contentLayout}
return pg.modalLayout.Layout(gtx, modalContent, modalWidth)
}

func (pg *Page) contentLayout(gtx C) D {
Expand Down Expand Up @@ -279,11 +283,15 @@ func (pg *Page) balanceSection(gtx C) D {
}

func (pg *Page) sectionWrapper(gtx C, body layout.Widget) D {
margin16 := values.MarginPadding16
if pg.modalLayout != nil {
margin16 = values.MarginPadding0
}
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Orientation: layout.Vertical,
Padding: layout.UniformInset(values.MarginPadding16),
Padding: layout.UniformInset(margin16),
Background: pg.Theme.Color.Surface,
Border: cryptomaterial.Border{
Radius: cryptomaterial.Radius(8),
Expand Down
70 changes: 38 additions & 32 deletions ui/page/send/manual_coin_selection.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ func NewManualCoinSelectionPage(l *load.Load, sendPage *Page) *ManualCoinSelecti
pg.clearButton.Color = l.Theme.Color.Danger
pg.clearButton.Inset = layout.UniformInset(values.MarginPadding4)
pg.clearButton.HighlightColor = cryptomaterial.GenHighlightColor(l.Theme.Color.Danger)
pg.clearButton.TextSize = values.TextSizeTransform(l.IsMobileView(), values.TextSize16)

pg.txSize = pg.Theme.Label(values.TextSize14, "--")
pg.totalAmount = pg.Theme.Label(values.TextSize14, "--")
Expand Down Expand Up @@ -387,7 +388,7 @@ func (pg *ManualCoinSelectionPage) Layout(gtx C) D {
})
}),
)
})
}, pg.IsMobileView())
}),
)
}),
Expand All @@ -412,50 +413,46 @@ func (pg *ManualCoinSelectionPage) topSection(gtx C) D {
return pg.Theme.Icons.ChevronLeft.LayoutSize(gtx, values.MarginPadding8)
})
}),
layout.Rigid(pg.Theme.H6(values.String(values.StrCoinSelection)).Layout),
layout.Rigid(func(gtx layout.Context) layout.Dimensions {
lbl := pg.Theme.H6(values.String(values.StrCoinSelection))
lbl.TextSize = values.TextSizeTransform(pg.IsMobileView(), values.TextSize20)
return lbl.Layout(gtx)
}),
)
})
})
}

func (pg *ManualCoinSelectionPage) summarySection(gtx C) D {
return layout.Inset{Bottom: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
textSize16 := values.TextSizeTransform(pg.IsMobileView(), values.TextSize16)
return layout.Inset{Bottom: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
return pg.Theme.Card().Layout(gtx, func(gtx C) D {
topContainer := layout.UniformInset(values.MarginPadding15)
return topContainer.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{Bottom: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
textLabel := pg.Theme.Label(values.TextSize16, values.String(values.StrSummary))
textLabel := pg.Theme.Label(textSize16, values.String(values.StrSummary))
textLabel.Font.Weight = font.SemiBold
return textLabel.Layout(gtx)
})
}),
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Flexed(0.22, func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(pg.Theme.Label(values.TextSize14, values.String(values.StrSelectedUTXO)+": ").Layout),
layout.Flexed(1, func(gtx C) D {
return layout.W.Layout(gtx, pg.selectedUTXOs.Layout)
}),
)
axis := layout.Horizontal
if pg.IsMobileView() {
axis = layout.Vertical
}
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return layout.Flex{Axis: axis, Spacing: layout.SpaceBetween}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return pg.sumaryContent(gtx, values.String(values.StrSelectedUTXO)+": ", pg.selectedUTXOs)
}),
layout.Flexed(0.38, func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(pg.Theme.Label(values.TextSize14, values.StringF(values.StrTxSize, " : ")).Layout),
layout.Flexed(1, func(gtx C) D {
return layout.W.Layout(gtx, pg.txSize.Layout)
}),
)
layout.Rigid(func(gtx C) D {
return pg.sumaryContent(gtx, values.StringF(values.StrTxSize, " : "), pg.txSize)

}),
layout.Flexed(0.4, func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(pg.Theme.Label(values.TextSize14, values.String(values.StrTotalAmount)+": ").Layout),
layout.Flexed(1, func(gtx C) D {
return layout.W.Layout(gtx, pg.totalAmount.Layout)
}),
)
layout.Rigid(func(gtx C) D {
return pg.sumaryContent(gtx, values.String(values.StrTotalAmount)+": ", pg.totalAmount)
}),
)
}),
Expand All @@ -465,14 +462,24 @@ func (pg *ManualCoinSelectionPage) summarySection(gtx C) D {
})
}

func (pg *ManualCoinSelectionPage) sumaryContent(gtx C, text string, valueLable cryptomaterial.Label) D {
textSize14 := values.TextSizeTransform(pg.IsMobileView(), values.TextSize14)
valueLable.TextSize = textSize14
return layout.Flex{}.Layout(gtx,
layout.Rigid(pg.Theme.Label(textSize14, text).Layout),
layout.Rigid(valueLable.Layout),
)
}

func (pg *ManualCoinSelectionPage) accountListSection(gtx C) D {
textSize14 := values.TextSizeTransform(pg.IsMobileView(), values.TextSize14)
textSize16 := values.TextSizeTransform(pg.IsMobileView(), values.TextSize16)
return pg.Theme.Card().Layout(gtx, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X

return layout.UniformInset(values.MarginPadding15).Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
textLabel := pg.Theme.Label(values.TextSize16, values.String(values.StrAccountList))
textLabel := pg.Theme.Label(textSize16, values.String(values.StrAccountList))
textLabel.Font.Weight = font.SemiBold
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(textLabel.Layout),
Expand All @@ -483,7 +490,7 @@ func (pg *ManualCoinSelectionPage) accountListSection(gtx C) D {
}),
layout.Rigid(func(gtx C) D {
collapsibleHeader := func(gtx C) D {
t := pg.Theme.Label(values.TextSize16, pg.accountUTXOs.Account)
t := pg.Theme.Label(textSize16, pg.accountUTXOs.Account)
t.Font.Weight = font.SemiBold
return t.Layout(gtx)
}
Expand All @@ -492,7 +499,7 @@ func (pg *ManualCoinSelectionPage) accountListSection(gtx C) D {
if len(pg.accountUTXOs.Details) == 0 {
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return layout.Center.Layout(gtx,
pg.Theme.Label(values.TextSize14, values.String(values.StrNoUTXOs)).Layout,
pg.Theme.Label(textSize14, values.String(values.StrNoUTXOs)).Layout,
)
}
return pg.accountListItemsSection(gtx, pg.accountUTXOs.Details)
Expand All @@ -515,7 +522,7 @@ func (pg *ManualCoinSelectionPage) generateLabel(txt interface{}, clickable *cry
txtStr = fmt.Sprintf("%d", n)
}

lb := pg.Theme.Label(values.TextSize14, txtStr)
lb := pg.Theme.Label(values.TextSizeTransform(pg.IsMobileView(), values.TextSize14), txtStr)
if len(txtStr) > MaxAddressLen {
// Only addresses have texts longer than 16 characters.
lb.Text = txtStr[:MaxAddressLen] + "..."
Expand All @@ -542,7 +549,6 @@ func (pg *ManualCoinSelectionPage) accountListItemsSection(gtx C, utxos []*UTXOI
}),
layout.Rigid(func(gtx C) D {
gtx.Constraints.Min.X = gtx.Constraints.Max.X

return pg.Theme.List(pg.listContainer).Layout(gtx, len(utxos), func(gtx C, index int) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
Expand Down
4 changes: 3 additions & 1 deletion ui/page/send/recipient.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ func newRecipient(l *load.Load, selectedWallet sharedW.Asset) *recipient {
assetType := rp.selectedWallet.GetAssetType()

rp.amount = newSendAmount(l.Theme, assetType)
rp.amount.amountEditor.TextSize = values.TextSizeTransform(l.IsMobileView(), values.TextSize16)
rp.sendDestination = newSendDestination(l, assetType)

rp.description = rp.Theme.Editor(new(widget.Editor), values.String(values.StrNote))
Expand All @@ -51,6 +52,7 @@ func newRecipient(l *load.Load, selectedWallet sharedW.Asset) *recipient {
rp.description.IsTitleLabel = false
// Set the maximum characters the editor can accept.
rp.description.Editor.MaxLen = MaxTxLabelSize
rp.description.TextSize = values.TextSizeTransform(l.IsMobileView(), values.TextSize16)

return rp
}
Expand Down Expand Up @@ -205,7 +207,7 @@ func (rp *recipient) recipientLayout(index int, showIcon bool, window app.Window
if !rp.sendDestination.sendToAddress {
layoutBody = rp.walletAccountlayout(window)
}
return rp.sendDestination.accountSwitch.Layout(gtx, layoutBody)
return rp.sendDestination.accountSwitch.Layout(gtx, layoutBody, rp.IsMobileView())
}),
layout.Rigid(rp.addressAndAmountlayout),
layout.Rigid(rp.txLabelSection),
Expand Down

0 comments on commit 0db953a

Please sign in to comment.