Skip to content

Commit

Permalink
improve slash page and review changes
Browse files Browse the repository at this point in the history 
Signed-off-by: Philemon Ukane <[email protected]>
  • Loading branch information
@ukane-philemon
ukane-philemon committed Dec 5, 2023
1 parent dc5fe0b commit 0ba6c10
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 98 deletions.
0 ui/assets/decredicons/ri_exchange-line.png → ...ssets/decredicons/trade_exchange_icon.png
View file
File renamed without changes
4 changes: 2 additions & 2 deletions ui/cryptomaterial/icon_gallery.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ type Icons struct {
RevealIcon, InfoAction, LightMode, DarkMode, AddIcon, ChevronRight, AddExchange, FlypMeIcon, ChangellyIcon,
SimpleSwapIcon, SwapzoneIcon, ShapeShiftIcon, GodexIcon, CoinSwitchIcon, ChangeNowIcon, CaretUp, CaretDown,
LTCBackground, LTCGroupIcon, DCRBackground, DCRGroupIcon, BTCBackground, BTCGroupIcon, CrossPlatformIcon,
IntegratedExchangeIcon, MultiWalletIcon, Dot, TradeExchange *Image
IntegratedExchangeIcon, MultiWalletIcon, Dot, TradeExchangeIcon *Image

NewStakeIcon,
TicketImmatureIcon,
Expand Down Expand Up @@ -133,7 +133,7 @@ func (i *Icons) DefaultIcons() *Icons {
i.ConcealIcon = NewImage(decredIcons["reveal"])
i.RevealIcon = NewImage(decredIcons["hide"])
i.AddExchange = NewImage(decredIcons["add_exchange"])
i.TradeExchange = NewImage(decredIcons["ri_exchange-line"])
i.TradeExchangeIcon = NewImage(decredIcons["trade_exchange_icon"])

i.SettingsActiveIcon = NewImage(decredIcons["settings_active"])
i.SettingsInactiveIcon = NewImage(decredIcons["settings_inactive"])
Expand Down
23 changes: 16 additions & 7 deletions ui/page/dcrdex/dcrdex_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import (
"context"

"gioui.org/layout"
"gioui.org/widget"
"github.com/crypto-power/cryptopower/app"
"github.com/crypto-power/cryptopower/ui/cryptomaterial"
"github.com/crypto-power/cryptopower/ui/load"
Expand All @@ -28,20 +29,26 @@ type DEXPage struct {

openTradeMainPage *cryptomaterial.Clickable
splashPageInfoButton cryptomaterial.IconButton
splashPageContainer *widget.List
finalizeOnboardingBtn cryptomaterial.Button
isDexFirstVisit bool
}

func NewDEXPage(l *load.Load) *DEXPage {
dp := &DEXPage{
Load: l,
MasterPage: app.NewMasterPage(DCRDEXPageID),
openTradeMainPage: l.Theme.NewClickable(false),
isDexFirstVisit: true,
MasterPage: app.NewMasterPage(DCRDEXPageID),
Load: l,
openTradeMainPage: l.Theme.NewClickable(false),
finalizeOnboardingBtn: l.Theme.Button(values.String(values.StrStartTrading)),
splashPageContainer: &widget.List{List: layout.List{
Alignment: layout.Middle,
Axis: layout.Vertical,
}},
isDexFirstVisit: true,
}

dp.initSplashPageWidgets()
dp.finalizeOnboardingBtn = dp.Theme.Button(values.String(values.StrStartTrading))
// Init splash page more info widget.
_, dp.splashPageInfoButton = components.SubpageHeaderButtons(l)
return dp
}

Expand Down Expand Up @@ -71,7 +78,9 @@ func (pg *DEXPage) OnNavigatedTo() {
// Part of the load.Page interface.
func (pg *DEXPage) Layout(gtx C) D {
if pg.isDexFirstVisit {
return components.UniformPadding(gtx, pg.splashPage)
return pg.Theme.List(pg.splashPageContainer).Layout(gtx, 1, func(gtx C, i int) D {
return pg.splashPage(gtx)
})
}
return layout.Stack{}.Layout(gtx,
layout.Expanded(func(gtx C) D {
Expand Down
69 changes: 31 additions & 38 deletions ui/page/dcrdex/dex_splash_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,10 @@ import (

"github.com/crypto-power/cryptopower/ui/cryptomaterial"
"github.com/crypto-power/cryptopower/ui/modal"
"github.com/crypto-power/cryptopower/ui/page/components"
"github.com/crypto-power/cryptopower/ui/values"
)

func (pg *DEXPage) initSplashPageWidgets() {
_, pg.splashPageInfoButton = components.SubpageHeaderButtons(pg.Load)
}

func (pg *DEXPage) splashPage(gtx layout.Context) layout.Dimensions {
func (pg *DEXPage) splashPage(gtx C) D {
return cryptomaterial.LinearLayout{
Orientation: layout.Vertical,
Width: cryptomaterial.MatchParent,
Expand All @@ -24,48 +19,46 @@ func (pg *DEXPage) splashPage(gtx layout.Context) layout.Dimensions {
Direction: layout.Center,
Alignment: layout.Middle,
Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(14)},
Padding: layout.UniformInset(values.MarginPadding24),
Padding: layout.Inset{Top: values.MarginPadding30, Bottom: values.MarginPadding30, Right: values.MarginPadding24, Left: values.MarginPadding24},
}.Layout(gtx,
layout.Flexed(1, func(gtx C) D {
return layout.Stack{Alignment: layout.NE}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return pg.Theme.Icons.DcrDex.LayoutSize(gtx, values.MarginPadding100)
}),
layout.Rigid(func(gtx C) D {
pgTitle := pg.Theme.Label(values.TextSize24, values.String(values.StrWhatIsDex))
pgTitle.Font.Weight = font.SemiBold

return layout.Inset{
Top: values.MarginPadding30,
Bottom: values.MarginPadding16,
}.Layout(gtx, pgTitle.Layout)
}),
layout.Rigid(func(gtx C) D {
pgContent := pg.Theme.Label(values.TextSize16, values.String(values.StrDexContent))
pgContent.Alignment = text.Middle
return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, pgContent.Layout)
}),
)
}),
layout.Stacked(pg.splashPageInfoButton.Layout),
)
layout.Rigid(func(gtx C) D {
return layout.Inset{Bottom: values.MarginPadding50}.Layout(gtx, func(gtx C) D {
return layout.Stack{Alignment: layout.NE}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{Top: values.MarginPadding24}.Layout(gtx, func(gtx C) D {
return pg.Theme.Icons.DcrDex.LayoutSize(gtx, values.MarginPadding100)
})
}),
layout.Rigid(func(gtx C) D {
pgTitle := pg.Theme.Label(values.TextSize24, values.String(values.StrWhatIsDex))
pgTitle.Font.Weight = font.SemiBold
return layout.Inset{Top: values.MarginPadding30, Bottom: values.MarginPadding16}.Layout(gtx, pgTitle.Layout)
}),
layout.Rigid(func(gtx C) D {
pgContent := pg.Theme.Label(values.TextSize16, values.String(values.StrDexContent))
pgContent.Alignment = text.Middle
return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, pgContent.Layout)
}),
)
}),
layout.Stacked(pg.splashPageInfoButton.Layout),
)
})
}),
layout.Rigid(func(gtx C) D {
gtx.Constraints.Min.X = gtx.Dp(values.MarginPadding350)
return layout.Inset{
Top: values.MarginPadding24,
Right: values.MarginPadding16,
}.Layout(gtx, pg.finalizeOnboardingBtn.Layout)
return layout.Inset{Right: values.MarginPadding15, Left: values.MarginPadding15}.Layout(gtx, func(gtx C) D {
return layout.Flex{}.Layout(gtx, layout.Flexed(1, pg.finalizeOnboardingBtn.Layout))
})
}),
)
}

func (pg *DEXPage) showInfoModal() {
info := modal.NewCustomModal(pg.Load).
Title(values.String(values.StrDecentralized)).
Body(values.String(values.StrDexInfo)).
Body(values.String(values.StrTradeSettingsMsg)).
SetPositiveButtonText(values.String(values.StrGotIt))
pg.ParentWindow().ShowModal(info)
}
78 changes: 35 additions & 43 deletions ui/page/exchange/cex_splash_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,10 @@ import (

"github.com/crypto-power/cryptopower/ui/cryptomaterial"
"github.com/crypto-power/cryptopower/ui/modal"
"github.com/crypto-power/cryptopower/ui/page/components"
"github.com/crypto-power/cryptopower/ui/values"
)

func (pg *CreateOrderPage) initSplashPageWidgets() {
_, pg.splashPageInfoButton = components.SubpageHeaderButtons(pg.Load)
pg.enableDEXBtn = pg.Theme.Button(values.String(values.StrBack))
}

func (pg *CreateOrderPage) splashPage(gtx layout.Context) layout.Dimensions {
func (pg *CreateOrderPage) splashPage(gtx C) D {
return cryptomaterial.LinearLayout{
Orientation: layout.Vertical,
Width: cryptomaterial.MatchParent,
Expand All @@ -25,52 +19,50 @@ func (pg *CreateOrderPage) splashPage(gtx layout.Context) layout.Dimensions {
Direction: layout.Center,
Alignment: layout.Middle,
Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(14)},
Padding: layout.UniformInset(values.MarginPadding20),
Padding: layout.Inset{Top: values.MarginPadding30, Bottom: values.MarginPadding30, Right: values.MarginPadding24, Left: values.MarginPadding24},
}.Layout(gtx,
layout.Flexed(1, func(gtx C) D {
return layout.Stack{Alignment: layout.NE}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return pg.Theme.Icons.TradeExchange.LayoutSize(gtx, values.MarginPadding100)
}),
layout.Rigid(func(gtx C) D {
pgTitle := pg.Theme.Label(values.TextSize24, values.String(values.StrWhatIsCex))
pgTitle.Font.Weight = font.SemiBold

return layout.Inset{
Top: values.MarginPadding26,
Bottom: values.MarginPadding12,
}.Layout(gtx, pgTitle.Layout)
}),
layout.Rigid(func(gtx C) D {
pgContent := pg.Theme.Label(values.TextSize16, values.String(values.StrCexContent))
pgContent.Alignment = text.Middle
return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, pgContent.Layout)
}),
layout.Rigid(func(gtx C) D {
pgQuestion := pg.Theme.Label(values.TextSize16, values.String(values.StrWouldTradeCex))
return layout.Inset{Top: values.MarginPadding20}.Layout(gtx, pgQuestion.Layout)
}),
)
}),
layout.Stacked(pg.splashPageInfoButton.Layout),
)
layout.Rigid(func(gtx C) D {
return layout.Inset{Bottom: values.MarginPadding30}.Layout(gtx, func(gtx C) D {
return layout.Stack{Alignment: layout.NE}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{Top: values.MarginPadding20}.Layout(gtx, func(gtx C) D {
return pg.Theme.Icons.TradeExchangeIcon.LayoutSize(gtx, values.MarginPadding100)
})
}),
layout.Rigid(func(gtx C) D {
pgTitle := pg.Theme.Label(values.TextSize24, values.String(values.StrWhatIsCex))
pgTitle.Font.Weight = font.SemiBold
return layout.Inset{Top: values.MarginPadding26, Bottom: values.MarginPadding12}.Layout(gtx, pgTitle.Layout)
}),
layout.Rigid(func(gtx C) D {
pgContent := pg.Theme.Label(values.TextSize16, values.String(values.StrCexContent))
pgContent.Alignment = text.Middle
return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, pgContent.Layout)
}),
layout.Rigid(func(gtx C) D {
pgQuestion := pg.Theme.Label(values.TextSize16, values.String(values.StrWouldTradeCex))
return layout.Inset{Top: values.MarginPadding20}.Layout(gtx, pgQuestion.Layout)
}),
)
}),
layout.Stacked(pg.splashPageInfoButton.Layout),
)
})
}),
layout.Rigid(func(gtx C) D {
gtx.Constraints.Min.X = gtx.Dp(values.MarginPadding350)
return layout.Inset{
Top: values.MarginPadding20,
Right: values.MarginPadding16,
}.Layout(gtx, pg.navToSettingsBtn.Layout)
return layout.Inset{Right: values.MarginPadding15, Left: values.MarginPadding15}.Layout(gtx, func(gtx C) D {
return layout.Flex{}.Layout(gtx, layout.Flexed(1, pg.navToSettingsBtn.Layout))
})
}),
)
}

func (pg *CreateOrderPage) showInfoModal() {
info := modal.NewCustomModal(pg.Load).
Title(values.String(values.StrCentralizedExchangeCex)).
Body(values.String(values.StrDexInfo)).
Body(values.String(values.StrTradeSettingsMsg)).
SetPositiveButtonText(values.String(values.StrGotIt))
pg.ParentWindow().ShowModal(info)
}
20 changes: 14 additions & 6 deletions ui/page/exchange/create_order_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ type CreateOrderPage struct {
viewAllButton cryptomaterial.Button
navToSettingsBtn cryptomaterial.Button
splashPageInfoButton cryptomaterial.IconButton
enableDEXBtn cryptomaterial.Button
splashPageContainer *widget.List

min float64
max float64
Expand Down Expand Up @@ -117,10 +117,15 @@ func NewCreateOrderPage(l *load.Load) *CreateOrderPage {
refreshClickable: l.Theme.NewClickable(true),
iconClickable: l.Theme.NewClickable(true),
refreshIcon: l.Theme.Icons.Restore,
navToSettingsBtn: l.Theme.Button(values.String(values.StrStartTrading)),
splashPageContainer: &widget.List{List: layout.List{
Alignment: layout.Middle,
Axis: layout.Vertical,
}},
}

pg.initSplashPageWidgets()
pg.navToSettingsBtn = pg.Theme.Button(values.String(values.StrStartTrading))
// Init splash page more info widget
_, pg.splashPageInfoButton = components.SubpageHeaderButtons(pg.Load)

// pageSize defines the number of orders that can be fetched at ago.
pageSize := int32(5)
Expand Down Expand Up @@ -642,6 +647,12 @@ func (pg *CreateOrderPage) isMultipleAssetTypeWalletAvailable() bool {
}

func (pg *CreateOrderPage) Layout(gtx C) D {
if !pg.isExchangeAPIAllowed() {
return pg.Theme.List(pg.splashPageContainer).Layout(gtx, 1, func(gtx C, i int) D {
return pg.splashPage(gtx)
})
}

var msg string
var overlaySet bool
var navBtn *cryptomaterial.Button
Expand Down Expand Up @@ -690,9 +701,6 @@ func (pg *CreateOrderPage) Layout(gtx C) D {
}

func (pg *CreateOrderPage) layout(gtx C) D {
if !pg.isExchangeAPIAllowed() {
return components.UniformPadding(gtx, pg.splashPage)
}
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{
Expand Down
2 changes: 1 addition & 1 deletion ui/values/localizable/en.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ const EN = `
"dexDataReset" = "DEX client data reset complete."
"dexDataResetFalse" = "DEX client data reset failed. Check the logs."
"dexContent" = "The Decred Decentralized Exchange (DEX) is a system that enables exchange of different types of blockchain assets via a familiar market-based API. DEX uses atomic swap technology to match trading parties and facilitates price discovery while communicating swap details."
"dexInfo" = "Customization and notification of trading can be modified from the settings page"
"tradeSettingsMsg" = "Customization and notification of trading can be modified from the settings page"
"dexResetInfo" = "You may need to restart cryptopower before you can use the DEX again. Proceed?"
"dexStartupErr" = "Unable to start DEX client: %v"
"disable" = "Disable"
Expand Down
2 changes: 1 addition & 1 deletion ui/values/strings.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ const (
StrDexContent = "dexContent"
StrDexDataReset = "dexDataReset"
StrDexDataResetFalse = "dexDataResetFalse"
StrDexInfo = "dexInfo"
StrTradeSettingsMsg = "tradeSettingsMsg"
StrDexResetInfo = "dexResetInfo"
StrDexStartupErr = "dexStartupErr"
StrDisable = "disable"
Expand Down

0 comments on commit 0ba6c10

Please sign in to comment.