Skip to content

Commit 579bc3f

Browse files
JustinBeBoyJustinBeBoy
authored
Update UI for start page and fix bugs (#486)
* update start page * update editor for password modal
1 parent ca2b259 commit 579bc3f

File tree

5 files changed

+73
-82
lines changed

5 files changed

+73
-82
lines changed

‎ui/cryptomaterial/editor.go‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,9 @@ type Editor struct {
7171
eventKey int
7272
isShowMenu bool
7373
isDisableMenu bool
74+
75+
// add space for error lable if it is true
76+
isSpaceError bool
7477
}
7578

7679
func (t *Theme) EditorPassword(editor *widget.Editor, hint string) Editor {
@@ -254,6 +257,9 @@ func (e *Editor) layout(gtx C) D {
254257
}
255258
return inset.Layout(gtx, e.errorLabel.Layout)
256259
}
260+
if e.isSpaceError {
261+
return layout.Spacer{Height: values.MarginPadding18}.Layout(gtx)
262+
}
257263
return D{}
258264
}),
259265
)
@@ -490,3 +496,7 @@ func (e *Editor) ClearError() {
490496
func (e *Editor) IsDirty() bool {
491497
return e.errorLabel.Text == ""
492498
}
499+
500+
func (e *Editor) AllowSpaceError(allow bool) {
501+
e.isSpaceError = allow
502+
}

‎ui/cryptomaterial/slider.go‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ type Slider struct {
3636
slideAction *SlideAction
3737
clicker gesture.Click
3838
clicked bool
39+
disableButtonDirection bool
40+
ControlInset layout.Inset
3941
}
4042

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

58+
sl.ControlInset = layout.Inset{
59+
Right: values.MarginPadding16,
60+
Left: values.MarginPadding16,
61+
Bottom: values.MarginPadding16,
62+
}
63+
5664
sl.card = sl.t.Card()
5765
sl.card.Radius = Radius(8)
5866

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

80+
func (s *Slider) SetDisableDirectionBtn(disable bool) {
81+
s.disableButtonDirection = disable
82+
}
83+
7284
func (s *Slider) sliderItems(items []layout.Widget) []*sliderItem {
7385
slideItems := make([]*sliderItem, 0)
7486
for _, item := range items {
@@ -106,16 +118,15 @@ func (s *Slider) Layout(gtx C, items []layout.Widget) D {
106118
if len(s.slideItems) == 1 {
107119
return D{}
108120
}
109-
return layout.Inset{
110-
Right: values.MarginPadding16,
111-
Left: values.MarginPadding16,
112-
Bottom: values.MarginPadding16,
113-
}.Layout(gtx, func(gtx C) D {
121+
return s.ControlInset.Layout(gtx, func(gtx C) D {
114122
return layout.Flex{
115123
Axis: layout.Horizontal,
116124
}.Layout(gtx,
117125
layout.Rigid(s.selectedItemIndicatorLayout),
118126
layout.Flexed(1, func(gtx C) D {
127+
if s.disableButtonDirection {
128+
return D{}
129+
}
119130
return layout.E.Layout(gtx, s.buttonLayout)
120131
}),
121132
)

‎ui/modal/create_password_modal.go‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ func NewCreatePasswordModal(l *load.Load) *CreatePasswordModal {
7676

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

8081
// Set the default click functions
8182
cm.negativeButtonClicked = func() {}

‎ui/page/start_page.go‎

Lines changed: 45 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import (
2929
const (
3030
StartPageID = "start_page"
3131
// startupSettingsPageIndex is the index of the settings setup page.
32-
startupSettingsPageIndex = 3
32+
startupSettingsPageIndex = 1
3333
// advancedSettingsOptionIndex is the index of the advanced settings option.
3434
advancedSettingsOptionIndex = 1
3535
)
@@ -55,8 +55,7 @@ type onBoardingScreen struct {
5555
title string
5656
subTitle string
5757

58-
image *cryptomaterial.Image // optional
59-
indicatorBtn *cryptomaterial.Clickable // optional
58+
image *cryptomaterial.Image
6059
}
6160

6261
type startPage struct {
@@ -84,6 +83,8 @@ type startPage struct {
8483

8584
currentPageIndex int
8685
selectedSettingsOptionIndex int
86+
87+
introductionSlider *cryptomaterial.Slider
8788
}
8889

8990
func NewStartPage(ctx context.Context, l *load.Load, isShuttingDown ...bool) app.Page {
@@ -98,6 +99,15 @@ func NewStartPage(ctx context.Context, l *load.Load, isShuttingDown ...bool) app
9899
nextButton: l.Theme.Button(values.String(values.StrNext)),
99100
backButton: l.Theme.NewClickable(true),
100101
networkSwitchButton: l.Theme.NewClickable(true),
102+
introductionSlider: l.Theme.Slider(),
103+
}
104+
105+
sp.introductionSlider.IndicatorBackgroundColor = values.TransparentColor(values.TransparentWhite, 1)
106+
sp.introductionSlider.SelectedIndicatorColor = sp.Theme.Color.Primary
107+
sp.introductionSlider.SetDisableDirectionBtn(true)
108+
sp.introductionSlider.ControlInset = layout.Inset{
109+
Right: values.MarginPadding16,
110+
Left: values.MarginPadding16,
101111
}
102112

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

156166
sp.onBoardingScreens = []onBoardingScreen{
157167
{
158-
title: values.String(values.StrMultiWalletSupport),
159-
subTitle: values.String(values.StrMultiWalletSupportSubtext),
160-
image: sp.Theme.Icons.MultiWalletIcon,
161-
indicatorBtn: sp.Theme.NewClickable(false),
162-
},
163-
{
164-
title: values.String(values.StrCrossPlatform),
165-
subTitle: values.String(values.StrCrossPlatformSubtext),
166-
image: sp.Theme.Icons.CrossPlatformIcon,
167-
indicatorBtn: sp.Theme.NewClickable(false),
168+
title: values.String(values.StrMultiWalletSupport),
169+
subTitle: values.String(values.StrMultiWalletSupportSubtext),
170+
image: sp.Theme.Icons.MultiWalletIcon,
168171
},
169172
{
170-
title: values.String(values.StrIntegratedExchangeFunctionality),
171-
subTitle: values.String(values.StrIntegratedExchangeSubtext),
172-
image: sp.Theme.Icons.IntegratedExchangeIcon,
173-
indicatorBtn: sp.Theme.NewClickable(false),
173+
title: values.String(values.StrCrossPlatform),
174+
subTitle: values.String(values.StrCrossPlatformSubtext),
175+
image: sp.Theme.Icons.CrossPlatformIcon,
174176
},
175177
{
176-
title: values.String(values.StrChooseSetupType),
177-
subTitle: values.String(values.StrLanguage),
178+
title: values.String(values.StrIntegratedExchangeFunctionality),
179+
subTitle: values.String(values.StrIntegratedExchangeSubtext),
180+
image: sp.Theme.Icons.IntegratedExchangeIcon,
178181
},
179182
}
180183

@@ -256,12 +259,11 @@ func (sp *startPage) HandleUserInteractions() {
256259
}
257260

258261
for sp.nextButton.Clicked() {
259-
if sp.currentPageIndex == len(sp.onBoardingScreens)-1 { // index starts at 0
260-
// save user setting when reached the last sceen
261-
sp.updateSettings()
262-
sp.currentPageIndex = -1 // we have reached the last screen.
263-
} else {
262+
if sp.currentPageIndex < startupSettingsPageIndex {
264263
sp.currentPageIndex++
264+
} else {
265+
sp.updateSettings()
266+
sp.currentPageIndex = -1
265267
}
266268
}
267269

@@ -298,14 +300,6 @@ func (sp *startPage) HandleUserInteractions() {
298300
sp.currentPageIndex--
299301
}
300302

301-
for i, onBoardingScreen := range sp.onBoardingScreens {
302-
if i < startupSettingsPageIndex {
303-
if onBoardingScreen.indicatorBtn.Clicked() {
304-
sp.currentPageIndex = i
305-
}
306-
}
307-
}
308-
309303
if sp.displayStartPage {
310304
time.AfterFunc(time.Second*2, func() {
311305
sp.displayStartPage = false
@@ -430,6 +424,22 @@ func (sp *startPage) loadingSection(gtx C) D {
430424
})
431425
}
432426

427+
func (sp *startPage) introScreenLayout(gtx C) D {
428+
sliderWidget := make([]layout.Widget, 0)
429+
for i := range sp.onBoardingScreens {
430+
onBoardingScreen := sp.onBoardingScreens[i]
431+
dims := func(gtx C) D {
432+
return layout.Inset{
433+
Bottom: values.MarginPadding40,
434+
}.Layout(gtx, func(gtx C) D {
435+
return sp.pageSections(gtx, onBoardingScreen)
436+
})
437+
}
438+
sliderWidget = append(sliderWidget, dims)
439+
}
440+
return sp.introductionSlider.Layout(gtx, sliderWidget)
441+
}
442+
433443
func (sp *startPage) onBoardingScreensLayout(gtx C) D {
434444
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
435445
layout.Rigid(func(gtx C) D {
@@ -449,12 +459,10 @@ func (sp *startPage) onBoardingScreensLayout(gtx C) D {
449459
Alignment: layout.Middle,
450460
Axis: layout.Vertical,
451461
}.Layout(gtx,
452-
layout.Rigid(sp.onBoardingScreenLayout),
453462
layout.Rigid(func(gtx C) D {
454463
return layout.Inset{
455-
Top: values.MarginPadding30,
456464
Bottom: values.MarginPadding30,
457-
}.Layout(gtx, sp.currentPageIndicatorLayout)
465+
}.Layout(gtx, sp.introScreenLayout)
458466
}),
459467
layout.Rigid(func(gtx C) D {
460468
gtx.Constraints.Min.X = gtx.Dp(values.MarginPaddingTransform(sp.IsMobileView(), values.MarginPadding420))
@@ -495,7 +503,7 @@ func (sp *startPage) onBoardingScreensLayout(gtx C) D {
495503
return layout.Inset{Top: values.MarginPaddingMinus200}.Layout(gtx, func(gtx C) D {
496504
return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
497505
layout.Rigid(func(gtx C) D {
498-
titleLabel := sp.Theme.Label(values.TextSize16, sp.onBoardingScreens[sp.currentPageIndex].title)
506+
titleLabel := sp.Theme.Label(values.TextSize16, values.String(values.StrChooseSetupType))
499507
titleLabel.Font.Weight = font.Bold
500508
return layout.Inset{Bottom: values.MarginPadding40}.Layout(gtx, titleLabel.Layout)
501509
}),
@@ -524,16 +532,6 @@ func (sp *startPage) onBoardingScreensLayout(gtx C) D {
524532
)
525533
}
526534

527-
func (sp *startPage) onBoardingScreenLayout(gtx C) D {
528-
list := layout.List{Axis: layout.Horizontal}
529-
return list.Layout(gtx, len(sp.onBoardingScreens), func(gtx C, i int) D {
530-
if i != sp.currentPageIndex {
531-
return D{}
532-
}
533-
return sp.pageSections(gtx, sp.onBoardingScreens[sp.currentPageIndex])
534-
})
535-
}
536-
537535
func (sp *startPage) settingsOptionsLayout(gtx C) D {
538536
padding := values.MarginPadding16
539537
optionWidth := (settingsOptionPageWidth - padding) / unit.Dp(len(sp.settingsOptions))
@@ -610,7 +608,7 @@ func (sp *startPage) settingsOptionsLayout(gtx C) D {
610608
)
611609
}
612610

613-
func (sp *startPage) pageHeaderLayout(gtx C) layout.Dimensions {
611+
func (sp *startPage) pageHeaderLayout(gtx C) D {
614612
return cryptomaterial.LinearLayout{
615613
Width: cryptomaterial.MatchParent,
616614
Height: cryptomaterial.WrapContent,
@@ -653,35 +651,6 @@ func (sp *startPage) pageSections(gtx C, onBoardingScreen onBoardingScreen) D {
653651
)
654652
}
655653

656-
func (sp *startPage) currentPageIndicatorLayout(gtx C) D {
657-
if sp.currentPageIndex < 0 {
658-
return D{}
659-
}
660-
661-
list := &layout.List{Axis: layout.Horizontal}
662-
return list.Layout(gtx, len(sp.onBoardingScreens), func(gtx C, i int) D {
663-
return layout.Inset{Top: values.MarginPadding35, Bottom: values.MarginPadding35}.Layout(gtx, func(gtx C) D {
664-
if i > startupSettingsPageIndex-1 {
665-
return D{}
666-
}
667-
668-
ic := cryptomaterial.NewIcon(sp.Theme.Icons.DotIcon)
669-
ic.Color = values.TransparentColor(values.TransparentBlack, 0.2)
670-
if i == sp.currentPageIndex {
671-
ic.Color = sp.Theme.Color.Primary
672-
}
673-
return layout.Inset{
674-
Right: values.MarginPadding4,
675-
Left: values.MarginPadding4,
676-
}.Layout(gtx, func(gtx C) D {
677-
return sp.onBoardingScreens[i].indicatorBtn.Layout(gtx, func(gtx C) D {
678-
return ic.Layout(gtx, values.MarginPadding12)
679-
})
680-
})
681-
})
682-
})
683-
}
684-
685654
func (sp *startPage) setLanguagePref(useExistingUserPreference bool) {
686655
var lang string
687656
if useExistingUserPreference {

‎ui/values/localizable/en.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,7 @@ const EN = `
427427
"owned" = "Valid address owned by you."
428428
"pageWarningNotSync" = "Page cannot be accessed because the wallet is not synced, please sync your wallet and try again"
429429
"pageWarningSync" = "Page cannot be accessed because the wallet sync is in progress, please wait for the sync to complete"
430-
"passwordNotMatch" = "Passwords do not match"
430+
"passwordNotMatch" = "Passwords do not match."
431431
"pasteSeedWords" = "Paste Seed Words"
432432
"peer" = "Peer"
433433
"peers" = "peers"

0 commit comments

Comments
 (0)