Skip to content

Commit

Permalink
add click for the slider and fix layout for sync info section on over…
Browse files Browse the repository at this point in the history 
… view page
  • Loading branch information
@JustinBeBoy
JustinBeBoy committed Jan 16, 2024
1 parent ffe0eee commit 8d94d91
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 63 deletions.
90 changes: 62 additions & 28 deletions ui/cryptomaterial/slider.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@
package cryptomaterial

import (
"image"
"image/color"

"gioui.org/gesture"
"gioui.org/layout"
"gioui.org/op"
"gioui.org/op/clip"

"github.com/crypto-power/cryptopower/ui/values"
)
Expand All @@ -30,6 +34,8 @@ type Slider struct {
IndicatorBackgroundColor color.NRGBA
SelectedIndicatorColor color.NRGBA // this is a full color no opacity
slideAction *SlideAction
clicker gesture.Click
clicked bool
}

var m4 = values.MarginPadding4
Expand Down Expand Up @@ -86,33 +92,46 @@ func (s *Slider) Layout(gtx C, items []layout.Widget) D {
return D{}
}

s.handleClickEvent()
return s.slideAction.DragLayout(gtx, func(gtx C) D {
return layout.Stack{Alignment: layout.S}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return s.slideAction.TransformLayout(gtx, s.slideItems[s.selected].widgetItem)
}),
layout.Stacked(func(gtx C) 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 layout.Flex{
Axis: layout.Horizontal,
}.Layout(gtx,
layout.Rigid(s.selectedItemIndicatorLayout),
layout.Flexed(1, func(gtx C) D {
return layout.E.Layout(gtx, s.buttonLayout)
}),
)
})
}),
)
})
s.handleClickEvent(gtx)
var dims layout.Dimensions
var call op.CallOp
{
m := op.Record(gtx.Ops)
dims = s.slideAction.DragLayout(gtx, func(gtx C) D {
return layout.Stack{Alignment: layout.S}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return s.slideAction.TransformLayout(gtx, s.slideItems[s.selected].widgetItem)
}),
layout.Stacked(func(gtx C) 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 layout.Flex{
Axis: layout.Horizontal,
}.Layout(gtx,
layout.Rigid(s.selectedItemIndicatorLayout),
layout.Flexed(1, func(gtx C) D {
return layout.E.Layout(gtx, s.buttonLayout)
}),
)
})
}),
)
})
call = m.Stop()
}

area := clip.Rect(image.Rect(0, 0, dims.Size.X, dims.Size.Y)).Push(gtx.Ops)
s.clicker.Add(gtx.Ops)
defer area.Pop()

call.Add(gtx.Ops)
return dims
}

func (s *Slider) buttonLayout(gtx C) D {
Expand Down Expand Up @@ -178,7 +197,13 @@ func (s *Slider) RefreshItems() {
s.isSliderItemsSet = false
}

func (s *Slider) handleClickEvent() {
func (s *Slider) Clicked() bool {
clicked := s.clicked
s.clicked = false
return clicked
}

func (s *Slider) handleClickEvent(gtx C) {
if s.nextButton.Clicked() {
s.handleActionEvent(true)
}
Expand All @@ -202,6 +227,15 @@ func (s *Slider) handleClickEvent() {
break
}
}

for _, events := range s.clicker.Events(gtx) {
switch events.Type {
case gesture.TypeClick:
if !s.clicked {
s.clicked = true
}
}
}
}

func (s *Slider) handleActionEvent(isNext bool) {
Expand Down
78 changes: 45 additions & 33 deletions ui/page/components/wallet_sync_info.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ type WalletSyncInfo struct {
isStatusConnected bool
reload Reload
backup func(sharedW.Asset)

ShowAssetIcon bool
}

type ProgressInfo struct {
Expand Down Expand Up @@ -70,6 +72,10 @@ func (wsi *WalletSyncInfo) Init() {
}()
}

func (wsi *WalletSyncInfo) GetWallet() sharedW.Asset {
return wsi.wallet
}

func (wsi *WalletSyncInfo) WalletInfoLayout(gtx C) D {
wsi.handle()

Expand All @@ -90,52 +96,58 @@ func (wsi *WalletSyncInfo) WalletInfoLayout(gtx C) D {
}

func (wsi *WalletSyncInfo) pageContentWrapper(gtx C, sectionTitle string, redirectBtn, body layout.Widget) D {
return layout.Inset{
Bottom: values.MarginPadding16,
}.Layout(gtx, func(gtx C) D {
return wsi.Theme.Card().Layout(gtx, func(gtx C) D {
return layout.UniformInset(values.MarginPadding16).Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{
Bottom: values.MarginPadding16,
}.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
if sectionTitle == "" {
return D{}
}

txt := wsi.Theme.Body1(sectionTitle)
txt.Font.Weight = font.SemiBold
return txt.Layout(gtx)
}),
layout.Flexed(1, func(gtx C) D {
if redirectBtn != nil {
return layout.E.Layout(gtx, redirectBtn)
}
return wsi.Theme.Card().Layout(gtx, func(gtx C) D {
return layout.UniformInset(values.MarginPadding16).Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{
Bottom: values.MarginPadding16,
}.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
if sectionTitle == "" {
return D{}
}),
)
})
}),
layout.Rigid(body),
)
})
}
txt := wsi.Theme.Body1(sectionTitle)
txt.Font.Weight = font.SemiBold
return txt.Layout(gtx)
}),
layout.Flexed(1, func(gtx C) D {
if redirectBtn != nil {
return layout.E.Layout(gtx, redirectBtn)
}
return D{}
}),
)
})
}),
layout.Rigid(body),
)
})
})
}

func (wsi *WalletSyncInfo) walletNameAndBackupInfo(gtx C) D {
items := []layout.FlexChild{layout.Rigid(func(gtx C) D {
items := make([]layout.FlexChild, 0)
if wsi.ShowAssetIcon {
items = append(items, layout.Rigid(func(gtx C) D {
return layout.Inset{
Right: values.MarginPadding10,
}.Layout(gtx, func(gtx C) D {
icon := wsi.Theme.AssetIcon(wsi.wallet.GetAssetType())
return icon.Layout16dp(gtx)
})
}))
}
items = append(items, layout.Rigid(func(gtx C) D {
return layout.Inset{
Right: values.MarginPadding10,
}.Layout(gtx, func(gtx C) D {
txt := wsi.Theme.Body1(strings.ToUpper(wsi.wallet.GetWalletName()))
txt.Font.Weight = font.SemiBold
return txt.Layout(gtx)
})
})}
}))

if len(wsi.wallet.GetEncryptedSeed()) > 0 {
items = append(items, layout.Rigid(func(gtx C) D {
Expand Down
2 changes: 2 additions & 0 deletions ui/page/info/info_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,8 @@ func (pg *WalletInfo) Layout(gtx C) D {
return pg.Theme.List(pg.container).Layout(gtx, 1, func(gtx C, i int) D {
items := []layout.FlexChild{layout.Rigid(pg.walletSyncInfo.WalletInfoLayout)}

items = append(items, layout.Rigid(layout.Spacer{Height: values.MarginPadding16}.Layout))

if pg.wallet.GetAssetType() == libutils.DCRWalletAsset && pg.wallet.(*dcr.Asset).IsAccountMixerActive() {
items = append(items, layout.Rigid(pg.mixerLayout))
}
Expand Down
35 changes: 33 additions & 2 deletions ui/page/root/overview_page.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,10 @@ func NewOverviewPage(l *load.Load, showNavigationFunc showNavigationFunc) *Overv
pg.mixerSlider.IndicatorBackgroundColor = values.TransparentColor(values.TransparentDeepBlue, 0.02)
pg.mixerSlider.SelectedIndicatorColor = pg.Theme.Color.DeepBlue

pg.infoSyncWalletsSlider.ButtonBackgroundColor = values.TransparentColor(values.TransparentDeepBlue, 0.02)
pg.infoSyncWalletsSlider.IndicatorBackgroundColor = values.TransparentColor(values.TransparentDeepBlue, 0.02)
pg.infoSyncWalletsSlider.SelectedIndicatorColor = pg.Theme.Color.DeepBlue

pg.forwardButton, pg.infoButton = components.SubpageHeaderButtons(l)
pg.forwardButton.Icon = pg.Theme.Icons.NavigationArrowForward
pg.forwardButton.Size = values.MarginPadding20
Expand Down Expand Up @@ -266,6 +270,28 @@ func (pg *OverviewPage) HandleUserInteractions() {
swmp.Display(privacy.NewAccountMixerPage(pg.Load, selectedWallet)) // Display mixer page on the main page.
swmp.PageNavigationTab.SetSelectedSegment(values.String(values.StrStakeShuffle))
}

if pg.infoSyncWalletsSlider.Clicked() {
curSliderIndex := pg.infoSyncWalletsSlider.GetSelectedIndex()
infoSyncWallet := pg.listInfoWallets[curSliderIndex]

// pg.showNavigationFunc(true)
// walletCallbackFunc := func() {
// pg.showNavigationFunc(false)
// }

pg.showNavigationFunc(true)
callback := func() {
pg.showNavigationFunc(false)
pg.ParentNavigator().CloseCurrentPage()
}
swmp := wallet.NewSingleWalletMasterPage(pg.Load, infoSyncWallet.GetWallet(), callback)
pg.ParentNavigator().Display(swmp)
// swmp.Display(privacy.NewAccountMixerPage(pg.Load, selectedWallet)) // Display mixer page on the main page.
// swmp.PageNavigationTab.SetSelectedSegment(values.String(values.StrStakeShuffle))

fmt.Println("----------------------------->")
}
}

// OnNavigatedFrom is called when the page is about to be removed from
Expand Down Expand Up @@ -352,7 +378,9 @@ func (pg *OverviewPage) initInfoWallets() {
if wal.IsWatchingOnlyWallet() {
continue
}
pg.listInfoWallets = append(pg.listInfoWallets, components.NewWalletSyncInfo(pg.Load, wal, pg.reload, pg.backup))
infoSync := components.NewWalletSyncInfo(pg.Load, wal, pg.reload, pg.backup)
infoSync.ShowAssetIcon = true
pg.listInfoWallets = append(pg.listInfoWallets, infoSync)
}
}

Expand All @@ -364,7 +392,10 @@ func (pg *OverviewPage) infoWalletLayout(gtx C) D {
if len(sliderWidget) == 0 {
return D{}
}
return pg.infoSyncWalletsSlider.Layout(gtx, sliderWidget)

return layout.Inset{Bottom: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
return pg.infoSyncWalletsSlider.Layout(gtx, sliderWidget)
})
}

func (pg *OverviewPage) sliderLayout(gtx C) D {
Expand Down

0 comments on commit 8d94d91

Please sign in to comment.