From 0ba6c10cdd185884a8c25a1fc9b987f1e0199411 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Tue, 5 Dec 2023 19:16:12 +0100 Subject: [PATCH] improve slash page and review changes Signed-off-by: Philemon Ukane --- ...hange-line.png => trade_exchange_icon.png} | Bin ui/cryptomaterial/icon_gallery.go | 4 +- ui/page/dcrdex/dcrdex_page.go | 23 ++++-- ui/page/dcrdex/dex_splash_page.go | 69 +++++++--------- ui/page/exchange/cex_splash_page.go | 78 ++++++++---------- ui/page/exchange/create_order_page.go | 20 +++-- ui/values/localizable/en.go | 2 +- ui/values/strings.go | 2 +- 8 files changed, 100 insertions(+), 98 deletions(-) rename ui/assets/decredicons/{ri_exchange-line.png => trade_exchange_icon.png} (100%) diff --git a/ui/assets/decredicons/ri_exchange-line.png b/ui/assets/decredicons/trade_exchange_icon.png similarity index 100% rename from ui/assets/decredicons/ri_exchange-line.png rename to ui/assets/decredicons/trade_exchange_icon.png diff --git a/ui/cryptomaterial/icon_gallery.go b/ui/cryptomaterial/icon_gallery.go index 9c29c2633..36265937b 100644 --- a/ui/cryptomaterial/icon_gallery.go +++ b/ui/cryptomaterial/icon_gallery.go @@ -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, @@ -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"]) diff --git a/ui/page/dcrdex/dcrdex_page.go b/ui/page/dcrdex/dcrdex_page.go index a1c29b36c..763443c35 100644 --- a/ui/page/dcrdex/dcrdex_page.go +++ b/ui/page/dcrdex/dcrdex_page.go @@ -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" @@ -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 } @@ -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 { diff --git a/ui/page/dcrdex/dex_splash_page.go b/ui/page/dcrdex/dex_splash_page.go index 8f94c3c83..2e2df5848 100644 --- a/ui/page/dcrdex/dex_splash_page.go +++ b/ui/page/dcrdex/dex_splash_page.go @@ -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, @@ -24,40 +19,38 @@ 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)) + }) }), ) } @@ -65,7 +58,7 @@ func (pg *DEXPage) splashPage(gtx layout.Context) layout.Dimensions { 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) } diff --git a/ui/page/exchange/cex_splash_page.go b/ui/page/exchange/cex_splash_page.go index 6b8065e86..dc660dbf3 100644 --- a/ui/page/exchange/cex_splash_page.go +++ b/ui/page/exchange/cex_splash_page.go @@ -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, @@ -25,44 +19,42 @@ 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)) + }) }), ) } @@ -70,7 +62,7 @@ func (pg *CreateOrderPage) splashPage(gtx layout.Context) layout.Dimensions { 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) } diff --git a/ui/page/exchange/create_order_page.go b/ui/page/exchange/create_order_page.go index cda9d4ecd..d8b988930 100644 --- a/ui/page/exchange/create_order_page.go +++ b/ui/page/exchange/create_order_page.go @@ -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 @@ -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) @@ -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 @@ -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{ diff --git a/ui/values/localizable/en.go b/ui/values/localizable/en.go index f27261f4f..a0960559f 100644 --- a/ui/values/localizable/en.go +++ b/ui/values/localizable/en.go @@ -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" diff --git a/ui/values/strings.go b/ui/values/strings.go index f35c671c1..136085f5d 100644 --- a/ui/values/strings.go +++ b/ui/values/strings.go @@ -288,7 +288,7 @@ const ( StrDexContent = "dexContent" StrDexDataReset = "dexDataReset" StrDexDataResetFalse = "dexDataResetFalse" - StrDexInfo = "dexInfo" + StrTradeSettingsMsg = "tradeSettingsMsg" StrDexResetInfo = "dexResetInfo" StrDexStartupErr = "dexStartupErr" StrDisable = "disable"