Skip to content

Commit

Permalink
Update UI for start page and fix bugs (#486)
Browse files Browse the repository at this point in the history 
* update start page

* update editor for password modal
  • Loading branch information
@JustinBeBoy
JustinBeBoy authored Mar 21, 2024
1 parent ca2b259 commit 579bc3f
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 82 deletions.
10 changes: 10 additions & 0 deletions ui/cryptomaterial/editor.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ type Editor struct {
eventKey int
isShowMenu bool
isDisableMenu bool

// add space for error lable if it is true
isSpaceError bool
}

func (t *Theme) EditorPassword(editor *widget.Editor, hint string) Editor {
Expand Down Expand Up @@ -254,6 +257,9 @@ func (e *Editor) layout(gtx C) D {
}
return inset.Layout(gtx, e.errorLabel.Layout)
}
if e.isSpaceError {
return layout.Spacer{Height: values.MarginPadding18}.Layout(gtx)
}
return D{}
}),
)
Expand Down Expand Up @@ -490,3 +496,7 @@ func (e *Editor) ClearError() {
func (e *Editor) IsDirty() bool {
return e.errorLabel.Text == ""
}

func (e *Editor) AllowSpaceError(allow bool) {
e.isSpaceError = allow
}
21 changes: 16 additions & 5 deletions ui/cryptomaterial/slider.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ type Slider struct {
slideAction *SlideAction
clicker gesture.Click
clicked bool
disableButtonDirection bool
ControlInset layout.Inset
}

var m4 = values.MarginPadding4
Expand All @@ -53,6 +55,12 @@ func (t *Theme) Slider() *Slider {
slideAction: NewSlideAction(),
}

sl.ControlInset = layout.Inset{
Right: values.MarginPadding16,
Left: values.MarginPadding16,
Bottom: values.MarginPadding16,
}

sl.card = sl.t.Card()
sl.card.Radius = Radius(8)

Expand All @@ -69,6 +77,10 @@ func (s *Slider) GetSelectedIndex() int {
return s.selected
}

func (s *Slider) SetDisableDirectionBtn(disable bool) {
s.disableButtonDirection = disable
}

func (s *Slider) sliderItems(items []layout.Widget) []*sliderItem {
slideItems := make([]*sliderItem, 0)
for _, item := range items {
Expand Down Expand Up @@ -106,16 +118,15 @@ func (s *Slider) Layout(gtx C, items []layout.Widget) D {
if len(s.slideItems) == 1 {
return D{}
}
return layout.Inset{
Right: values.MarginPadding16,
Left: values.MarginPadding16,
Bottom: values.MarginPadding16,
}.Layout(gtx, func(gtx C) D {
return s.ControlInset.Layout(gtx, func(gtx C) D {
return layout.Flex{
Axis: layout.Horizontal,
}.Layout(gtx,
layout.Rigid(s.selectedItemIndicatorLayout),
layout.Flexed(1, func(gtx C) D {
if s.disableButtonDirection {
return D{}
}
return layout.E.Layout(gtx, s.buttonLayout)
}),
)
Expand Down
1 change: 1 addition & 0 deletions ui/modal/create_password_modal.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ func NewCreatePasswordModal(l *load.Load) *CreatePasswordModal {

cm.confirmPasswordEditor = l.Theme.EditorPassword(new(widget.Editor), values.String(values.StrConfirmSpendingPassword))
cm.confirmPasswordEditor.Editor.SingleLine, cm.confirmPasswordEditor.Editor.Submit = true, true
cm.confirmPasswordEditor.AllowSpaceError(true)

// Set the default click functions
cm.negativeButtonClicked = func() {}
Expand Down
121 changes: 45 additions & 76 deletions ui/page/start_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import (
const (
StartPageID = "start_page"
// startupSettingsPageIndex is the index of the settings setup page.
startupSettingsPageIndex = 3
startupSettingsPageIndex = 1
// advancedSettingsOptionIndex is the index of the advanced settings option.
advancedSettingsOptionIndex = 1
)
Expand All @@ -55,8 +55,7 @@ type onBoardingScreen struct {
title string
subTitle string

image *cryptomaterial.Image // optional
indicatorBtn *cryptomaterial.Clickable // optional
image *cryptomaterial.Image
}

type startPage struct {
Expand Down Expand Up @@ -84,6 +83,8 @@ type startPage struct {

currentPageIndex int
selectedSettingsOptionIndex int

introductionSlider *cryptomaterial.Slider
}

func NewStartPage(ctx context.Context, l *load.Load, isShuttingDown ...bool) app.Page {
Expand All @@ -98,6 +99,15 @@ func NewStartPage(ctx context.Context, l *load.Load, isShuttingDown ...bool) app
nextButton: l.Theme.Button(values.String(values.StrNext)),
backButton: l.Theme.NewClickable(true),
networkSwitchButton: l.Theme.NewClickable(true),
introductionSlider: l.Theme.Slider(),
}

sp.introductionSlider.IndicatorBackgroundColor = values.TransparentColor(values.TransparentWhite, 1)
sp.introductionSlider.SelectedIndicatorColor = sp.Theme.Color.Primary
sp.introductionSlider.SetDisableDirectionBtn(true)
sp.introductionSlider.ControlInset = layout.Inset{
Right: values.MarginPadding16,
Left: values.MarginPadding16,
}

if len(isShuttingDown) > 0 {
Expand Down Expand Up @@ -155,26 +165,19 @@ func (sp *startPage) initPage() {

sp.onBoardingScreens = []onBoardingScreen{
{
title: values.String(values.StrMultiWalletSupport),
subTitle: values.String(values.StrMultiWalletSupportSubtext),
image: sp.Theme.Icons.MultiWalletIcon,
indicatorBtn: sp.Theme.NewClickable(false),
},
{
title: values.String(values.StrCrossPlatform),
subTitle: values.String(values.StrCrossPlatformSubtext),
image: sp.Theme.Icons.CrossPlatformIcon,
indicatorBtn: sp.Theme.NewClickable(false),
title: values.String(values.StrMultiWalletSupport),
subTitle: values.String(values.StrMultiWalletSupportSubtext),
image: sp.Theme.Icons.MultiWalletIcon,
},
{
title: values.String(values.StrIntegratedExchangeFunctionality),
subTitle: values.String(values.StrIntegratedExchangeSubtext),
image: sp.Theme.Icons.IntegratedExchangeIcon,
indicatorBtn: sp.Theme.NewClickable(false),
title: values.String(values.StrCrossPlatform),
subTitle: values.String(values.StrCrossPlatformSubtext),
image: sp.Theme.Icons.CrossPlatformIcon,
},
{
title: values.String(values.StrChooseSetupType),
subTitle: values.String(values.StrLanguage),
title: values.String(values.StrIntegratedExchangeFunctionality),
subTitle: values.String(values.StrIntegratedExchangeSubtext),
image: sp.Theme.Icons.IntegratedExchangeIcon,
},
}

Expand Down Expand Up @@ -256,12 +259,11 @@ func (sp *startPage) HandleUserInteractions() {
}

for sp.nextButton.Clicked() {
if sp.currentPageIndex == len(sp.onBoardingScreens)-1 { // index starts at 0
// save user setting when reached the last sceen
sp.updateSettings()
sp.currentPageIndex = -1 // we have reached the last screen.
} else {
if sp.currentPageIndex < startupSettingsPageIndex {
sp.currentPageIndex++
} else {
sp.updateSettings()
sp.currentPageIndex = -1
}
}

Expand Down Expand Up @@ -298,14 +300,6 @@ func (sp *startPage) HandleUserInteractions() {
sp.currentPageIndex--
}

for i, onBoardingScreen := range sp.onBoardingScreens {
if i < startupSettingsPageIndex {
if onBoardingScreen.indicatorBtn.Clicked() {
sp.currentPageIndex = i
}
}
}

if sp.displayStartPage {
time.AfterFunc(time.Second*2, func() {
sp.displayStartPage = false
Expand Down Expand Up @@ -430,6 +424,22 @@ func (sp *startPage) loadingSection(gtx C) D {
})
}

func (sp *startPage) introScreenLayout(gtx C) D {
sliderWidget := make([]layout.Widget, 0)
for i := range sp.onBoardingScreens {
onBoardingScreen := sp.onBoardingScreens[i]
dims := func(gtx C) D {
return layout.Inset{
Bottom: values.MarginPadding40,
}.Layout(gtx, func(gtx C) D {
return sp.pageSections(gtx, onBoardingScreen)
})
}
sliderWidget = append(sliderWidget, dims)
}
return sp.introductionSlider.Layout(gtx, sliderWidget)
}

func (sp *startPage) onBoardingScreensLayout(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
Expand All @@ -449,12 +459,10 @@ func (sp *startPage) onBoardingScreensLayout(gtx C) D {
Alignment: layout.Middle,
Axis: layout.Vertical,
}.Layout(gtx,
layout.Rigid(sp.onBoardingScreenLayout),
layout.Rigid(func(gtx C) D {
return layout.Inset{
Top: values.MarginPadding30,
Bottom: values.MarginPadding30,
}.Layout(gtx, sp.currentPageIndicatorLayout)
}.Layout(gtx, sp.introScreenLayout)
}),
layout.Rigid(func(gtx C) D {
gtx.Constraints.Min.X = gtx.Dp(values.MarginPaddingTransform(sp.IsMobileView(), values.MarginPadding420))
Expand Down Expand Up @@ -495,7 +503,7 @@ func (sp *startPage) onBoardingScreensLayout(gtx C) D {
return layout.Inset{Top: values.MarginPaddingMinus200}.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func(gtx C) D {
titleLabel := sp.Theme.Label(values.TextSize16, sp.onBoardingScreens[sp.currentPageIndex].title)
titleLabel := sp.Theme.Label(values.TextSize16, values.String(values.StrChooseSetupType))
titleLabel.Font.Weight = font.Bold
return layout.Inset{Bottom: values.MarginPadding40}.Layout(gtx, titleLabel.Layout)
}),
Expand Down Expand Up @@ -524,16 +532,6 @@ func (sp *startPage) onBoardingScreensLayout(gtx C) D {
)
}

func (sp *startPage) onBoardingScreenLayout(gtx C) D {
list := layout.List{Axis: layout.Horizontal}
return list.Layout(gtx, len(sp.onBoardingScreens), func(gtx C, i int) D {
if i != sp.currentPageIndex {
return D{}
}
return sp.pageSections(gtx, sp.onBoardingScreens[sp.currentPageIndex])
})
}

func (sp *startPage) settingsOptionsLayout(gtx C) D {
padding := values.MarginPadding16
optionWidth := (settingsOptionPageWidth - padding) / unit.Dp(len(sp.settingsOptions))
Expand Down Expand Up @@ -610,7 +608,7 @@ func (sp *startPage) settingsOptionsLayout(gtx C) D {
)
}

func (sp *startPage) pageHeaderLayout(gtx C) layout.Dimensions {
func (sp *startPage) pageHeaderLayout(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Expand Down Expand Up @@ -653,35 +651,6 @@ func (sp *startPage) pageSections(gtx C, onBoardingScreen onBoardingScreen) D {
)
}

func (sp *startPage) currentPageIndicatorLayout(gtx C) D {
if sp.currentPageIndex < 0 {
return D{}
}

list := &layout.List{Axis: layout.Horizontal}
return list.Layout(gtx, len(sp.onBoardingScreens), func(gtx C, i int) D {
return layout.Inset{Top: values.MarginPadding35, Bottom: values.MarginPadding35}.Layout(gtx, func(gtx C) D {
if i > startupSettingsPageIndex-1 {
return D{}
}

ic := cryptomaterial.NewIcon(sp.Theme.Icons.DotIcon)
ic.Color = values.TransparentColor(values.TransparentBlack, 0.2)
if i == sp.currentPageIndex {
ic.Color = sp.Theme.Color.Primary
}
return layout.Inset{
Right: values.MarginPadding4,
Left: values.MarginPadding4,
}.Layout(gtx, func(gtx C) D {
return sp.onBoardingScreens[i].indicatorBtn.Layout(gtx, func(gtx C) D {
return ic.Layout(gtx, values.MarginPadding12)
})
})
})
})
}

func (sp *startPage) setLanguagePref(useExistingUserPreference bool) {
var lang string
if useExistingUserPreference {
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 @@ -427,7 +427,7 @@ const EN = `
"owned" = "Valid address owned by you."
"pageWarningNotSync" = "Page cannot be accessed because the wallet is not synced, please sync your wallet and try again"
"pageWarningSync" = "Page cannot be accessed because the wallet sync is in progress, please wait for the sync to complete"
"passwordNotMatch" = "Passwords do not match"
"passwordNotMatch" = "Passwords do not match."
"pasteSeedWords" = "Paste Seed Words"
"peer" = "Peer"
"peers" = "peers"
Expand Down

0 comments on commit 579bc3f

Please sign in to comment.