Skip to content

Commit

Permalink
fix cex page for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@dreacot
dreacot committed Dec 14, 2023
1 parent cdc2002 commit 19d0b72
Show file tree
Hide file tree
Showing 14 changed files with 421 additions and 219 deletions.
3 changes: 2 additions & 1 deletion ui/cryptomaterial/icon_gallery.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type Icons struct {
ContentAdd, NavigationCheck, NavigationMore, ActionCheckCircle, ActionInfo, NavigationArrowBack,
NavigationArrowForward, ActionCheck, NavigationCancel, NavMoreIcon,
ImageBrightness1, ContentClear, DropDownIcon, Cached, ContentRemove, SearchIcon, PlayIcon,
ActionSettings, ActionSwapHoriz, NavigationRefresh, ContentCopy *widget.Icon
ActionSettings, ActionSwapHoriz, ActionSwapVertical, NavigationRefresh, ContentCopy *widget.Icon

OverviewIcon, OverviewIconInactive, WalletIcon, WalletIconInactive, TradeIconActive, TradeIconInactive, MixerInactive, RedAlert, Alert,
ReceiveIcon, Transferred, TransactionsIcon, TransactionsIconInactive, SendIcon, MoreIcon, MoreIconInactive,
Expand Down Expand Up @@ -62,6 +62,7 @@ func (i *Icons) StandardMaterialIcons() *Icons {
i.PlayIcon = MustIcon(widget.NewIcon(icons.AVPlayArrow))
i.ActionSettings = MustIcon(widget.NewIcon(icons.ActionSettings))
i.ActionSwapHoriz = MustIcon(widget.NewIcon(icons.ActionSwapHoriz))
i.ActionSwapVertical = MustIcon(widget.NewIcon(icons.ActionSwapVert))
i.NavigationRefresh = MustIcon(widget.NewIcon(icons.NavigationRefresh))
i.ContentCopy = MustIcon(widget.NewIcon(icons.ContentContentPaste))

Expand Down
10 changes: 10 additions & 0 deletions ui/cryptomaterial/image.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,16 @@ func (img *Image) LayoutSize(gtx C, size unit.Dp) D {
return i.Layout(gtx)
}

// LayoutTransform is used to scale images for mobile view.
func (img *Image) LayoutTransform(gtx C, isMobileView bool, size unit.Dp) D {
if isMobileView {
size := values.MarginPaddingTransform(isMobileView, size)
return img.LayoutSize(gtx, size)
}

return img.LayoutSize(gtx, size)
}

func (img *Image) LayoutSize2(gtx C, width, height unit.Dp) D {
var dst *image.RGBA
img.layoutSize2Mtx.Lock()
Expand Down
34 changes: 34 additions & 0 deletions ui/page/components/components.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import (
"github.com/crypto-power/cryptopower/app"
"github.com/crypto-power/cryptopower/libwallet/assets/dcr"
sharedW "github.com/crypto-power/cryptopower/libwallet/assets/wallet"
"github.com/crypto-power/cryptopower/libwallet/instantswap"
"github.com/crypto-power/cryptopower/libwallet/txhelper"
libutils "github.com/crypto-power/cryptopower/libwallet/utils"
"github.com/crypto-power/cryptopower/ui/cryptomaterial"
Expand Down Expand Up @@ -977,3 +978,36 @@ func IconButton(icon *widget.Icon, txt string, inset layout.Inset, th *cryptomat
})
}
}

// ConditionalFlexedRigidLayout decides whether to use layout.Rigid or layout.Flexed
func ConditionalFlexedRigidLayout(flexWidth float32, isMobileView bool, content layout.Widget) layout.FlexChild {
if isMobileView {
return layout.Rigid(content)
}
return layout.Flexed(flexWidth, content)
}

// GetServerIcon returns the icon for the provided server name.
func GetServerIcon(theme *cryptomaterial.Theme, serverName string) *cryptomaterial.Image {
switch serverName {
case instantswap.Changelly.ToString():
return theme.Icons.ChangellyIcon
case instantswap.ChangeNow.ToString():
return theme.Icons.ChangeNowIcon
case instantswap.CoinSwitch.ToString():
return theme.Icons.CoinSwitchIcon
case instantswap.FlypMe.ToString():
return theme.Icons.FlypMeIcon
case instantswap.GoDex.ToString():
return theme.Icons.GodexIcon
case instantswap.SimpleSwap.ToString():
return theme.Icons.SimpleSwapIcon
case instantswap.SwapZone.ToString():
return theme.Icons.SwapzoneIcon
case instantswap.Trocador.ToString():
return theme.Icons.TrocadorIcon

default:
return theme.Icons.AddExchange
}
}
66 changes: 44 additions & 22 deletions ui/page/components/order_list.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,9 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
Height: cryptomaterial.WrapContent,
Alignment: layout.Middle,
Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(14)},
Margin: layout.Inset{
Top: values.MarginPadding8,
Bottom: values.MarginPadding10,
},
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
textSize16 := values.TextSizeTransform(l.IsMobileView(), values.TextSize16)
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{
Expand All @@ -35,10 +32,10 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{
Right: values.MarginPadding10,
Left: values.MarginPadding10,
Right: values.MarginPadding8,
}.Layout(gtx, func(gtx C) D {
return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.FromCurrency), values.MarginPadding30)
size := values.MarginPaddingTransform(l.IsMobileView(), values.MarginPadding24)
return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.FromCurrency), size)
})
}),
layout.Rigid(func(gtx C) D {
Expand All @@ -53,9 +50,9 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
layout.Rigid(func(gtx C) D {
return layout.Inset{
Right: values.MarginPadding10,
Left: values.MarginPadding10,
}.Layout(gtx, func(gtx C) D {
return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.ToCurrency), values.MarginPadding30)
size := values.MarginPaddingTransform(l.IsMobileView(), values.MarginPadding24)
return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.ToCurrency), size)
})
}),
layout.Rigid(func(gtx C) D {
Expand All @@ -70,16 +67,34 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{
Right: values.MarginPadding50,
}.Layout(gtx, func(gtx C) D {
return D{}
})
}),
layout.Rigid(func(gtx layout.Context) layout.Dimensions {
return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(l.Theme.Label(values.TextSize16, orderItem.Status.String()).Layout),
layout.Rigid(func(gtx layout.Context) layout.Dimensions {
layout.Rigid(func(gtx C) D {
return layout.Inset{
Right: values.MarginPadding5,
}.Layout(gtx, func(gtx C) D {
serverIcon := GetServerIcon(l.Theme, orderItem.ExchangeServer.Server.ToString())
if serverIcon == nil {
return D{}
}
return serverIcon.LayoutTransform(gtx, l.IsMobileView(), values.MarginPadding24)
})
}),
layout.Rigid(func(gtx C) D {
if l.IsMobileView() {
return D{}
}
return l.Theme.Label(textSize16, orderItem.ExchangeServer.Server.CapFirstLetter()).Layout(gtx)
}),
layout.Rigid(func(gtx C) D {
return layout.Center.Layout(gtx, func(gtx C) D {
return layout.Inset{
Left: values.MarginPadding8,
Right: values.MarginPadding8,
}.Layout(gtx, l.Theme.Icons.Dot.Layout8dp)
})
}),
layout.Rigid(l.Theme.Label(textSize16, orderItem.Status.String()).Layout),
layout.Rigid(func(gtx layout.Context) D {
statusLayout := statusIcon(l, orderItem.Status)
if statusLayout == nil {
return layout.Dimensions{}
Expand All @@ -98,7 +113,10 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
date := time.Unix(orderItem.CreatedAt, 0).Format("Jan 2, 2006")
timeSplit := time.Unix(orderItem.CreatedAt, 0).Format("03:04:05 PM")
createdAt := fmt.Sprintf("%v at %v", date, timeSplit)
timestamp := l.Theme.Label(values.TextSize16, createdAt)
if l.IsMobileView() {
createdAt = fmt.Sprintf("%v", date)
}
timestamp := l.Theme.Label(textSize16, createdAt)
timestamp.Color = l.Theme.Color.GrayText2
return timestamp.Layout(gtx)
}),
Expand All @@ -112,12 +130,16 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
)
}

func statusIcon(l *load.Load, status api.Status) func(gtx C) layout.Dimensions {
func statusIcon(l *load.Load, status api.Status) func(gtx C) D {
switch status {
case api.OrderStatusCompleted:
return l.Theme.Icons.ConfirmIcon.Layout16dp
return func(gtx C) D {
return l.Theme.Icons.ConfirmIcon.LayoutTransform(gtx, l.IsMobileView(), values.MarginPadding16)
}
case api.OrderStatusCanceled, api.OrderStatusExpired, api.OrderStatusFailed:
return l.Theme.Icons.FailedIcon.Layout16dp
return func(gtx C) D {
return l.Theme.Icons.FailedIcon.LayoutTransform(gtx, l.IsMobileView(), values.MarginPadding16)
}
}
return nil
}
Expand Down
2 changes: 1 addition & 1 deletion ui/page/components/utils.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,5 +157,5 @@ func LayoutOrderAmount(l *load.Load, gtx C, assetType string, amount float64) D
convertedAmountStr = "Unsupported asset type"
}

return l.Theme.Label(values.TextSize16, convertedAmountStr).Layout(gtx)
return l.Theme.Label(values.TextSizeTransform(l.IsMobileView(), values.TextSize16), convertedAmountStr).Layout(gtx)
}
2 changes: 1 addition & 1 deletion ui/page/dcrdex/market.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const (
var (
dp5 = values.MarginPadding5
dp8 = values.MarginPadding8
dp300 = values.DP300
dp300 = values.MarginPadding300
orderFormAndOrderBookWidth = (values.AppWidth / 2) - 40 // Minus 40 px to allow for margin between the order form and order book.
// orderFormAndOrderBookHeight is a an arbitrary height that accommodates
// the current order form elements and maxOrderDisplayedInOrderBook. Use
Expand Down

0 comments on commit 19d0b72

Please sign in to comment.