Skip to content

Commit

Permalink
Add slide action to slider and Update layout on overview page (#256)
Browse files Browse the repository at this point in the history 
* Add slice action to slider

* add slide action, update logic on slide action, implement slide action to slider, update logic click to indicator on slider

* implement slide action to segmented control, update layout for main page, trade page

* fix lint

* clean optimize code

* add comment for function

* update segmented control and slide action

* update segmented control, fix drag action on slide action, fix drag on slider, update segmented for transaction tab

* update slider and clean code

* update function name of slide action

* update logic on slider and segmented control

* update layout for slider on overview pag

* update slide action on segmented control
  • Loading branch information
@JustinBeBoy
JustinBeBoy authored Dec 6, 2023
1 parent 6ca308d commit cdff39d
Show file tree
Hide file tree
Showing 26 changed files with 592 additions and 194 deletions.
10 changes: 0 additions & 10 deletions go.sum
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,14 +286,6 @@ github.com/cpuguy83/go-md2man/v2 v2.0.1/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46t
github.com/creack/pty v1.1.7/go.mod h1:lj5s0c3V2DBrqTV7llrYr5NG6My20zk30Fl46Y7DoTY=
github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
github.com/creack/pty v1.1.11/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
github.com/crypto-power/instantswap v0.0.0-20230619161136-95ecf47d5ebf h1:8dd0iV9EMNiMOaZD2U3UjmMNmYTNbXz8L58NLWlFjWk=
github.com/crypto-power/instantswap v0.0.0-20230619161136-95ecf47d5ebf/go.mod h1:Yey9HyCagUlBLZfnUV4zTixvNrLvowj89BV5wVDVVXE=
github.com/crypto-power/instantswap v0.0.0-20231117043956-f4a664ce5a63 h1:lG4ZX5eAGW7BRCFgac82UuS8cYxTdoRlDAhv6MQI+/M=
github.com/crypto-power/instantswap v0.0.0-20231117043956-f4a664ce5a63/go.mod h1:Yey9HyCagUlBLZfnUV4zTixvNrLvowj89BV5wVDVVXE=
github.com/crypto-power/instantswap v0.0.0-20231117152958-8105fa603188 h1:F8e4iACvL2Xdos+/ptOpXl9D2UzrJ3mLC6vRnKmdgz8=
github.com/crypto-power/instantswap v0.0.0-20231117152958-8105fa603188/go.mod h1:Yey9HyCagUlBLZfnUV4zTixvNrLvowj89BV5wVDVVXE=
github.com/crypto-power/instantswap v0.0.0-20231129170512-36f01a6f27f6 h1:MYjQZGr8ngIyLh+02aIo7ykr4k6TgCDKwGN4pFvrhyc=
github.com/crypto-power/instantswap v0.0.0-20231129170512-36f01a6f27f6/go.mod h1:Yey9HyCagUlBLZfnUV4zTixvNrLvowj89BV5wVDVVXE=
github.com/crypto-power/instantswap v0.0.0-20231205171529-1a958b193aa4 h1:rILnjlNzcN1d3I3+9NZaAHQ8mb0sIrpef3MPTxnCyoA=
github.com/crypto-power/instantswap v0.0.0-20231205171529-1a958b193aa4/go.mod h1:Yey9HyCagUlBLZfnUV4zTixvNrLvowj89BV5wVDVVXE=
github.com/davecgh/go-spew v0.0.0-20161028175848-04cdfd42973b/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
Expand Down Expand Up @@ -1151,8 +1143,6 @@ github.com/urfave/cli v1.20.0/go.mod h1:70zkFmudgCuE/ngEzBv17Jvp/497gISqfk5gWijb
github.com/urfave/cli v1.22.1/go.mod h1:Gos4lmkARVdJ6EkW0WaNv/tZAAMe9V7XWyB60NtXRu0=
github.com/urfave/cli v1.22.4/go.mod h1:Gos4lmkARVdJ6EkW0WaNv/tZAAMe9V7XWyB60NtXRu0=
github.com/urfave/cli v1.22.7/go.mod h1:Gos4lmkARVdJ6EkW0WaNv/tZAAMe9V7XWyB60NtXRu0=
github.com/vibros68/instantswap v0.0.0-20231205093815-045a3f9f0a0c h1:wblz/dKdN+jClbB8Tw1q3sF3PIRxuystc7N9mwfAy40=
github.com/vibros68/instantswap v0.0.0-20231205093815-045a3f9f0a0c/go.mod h1:Yey9HyCagUlBLZfnUV4zTixvNrLvowj89BV5wVDVVXE=
github.com/vmihailenco/msgpack v4.0.1+incompatible h1:RMF1enSPeKTlXrXdOcqjFUElywVZjjC6pqse21bKbEU=
github.com/vmihailenco/msgpack v4.0.1+incompatible/go.mod h1:fy3FlTQTDXWkZ7Bh6AcGMlsjHatGryHQYUTf1ShIgkk=
github.com/xanzy/go-gitlab v0.31.0/go.mod h1:sPLojNBn68fMUWSxIJtdVVIP8uSBYqesTfDUseX11Ug=
Expand Down
155 changes: 122 additions & 33 deletions ui/cryptomaterial/segmented_control.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ import (
"github.com/crypto-power/cryptopower/ui/values"
)

type SegmentType int

const (
SegmentTypeGroup SegmentType = iota
SegmentTypeSplit
)

type SegmentedControl struct {
theme *Theme
list *ClickableList
Expand All @@ -23,23 +30,78 @@ type SegmentedControl struct {

changed bool
mu sync.Mutex

isSwipeActionEnabled bool
slideAction *SlideAction
slideActionTitle *SlideAction
segmentType SegmentType

allowCycle bool
}

func (t *Theme) SegmentedControl(segmentTitles []string) *SegmentedControl {
func (t *Theme) SegmentedControl(segmentTitles []string, segmentType SegmentType) *SegmentedControl {
list := t.NewClickableList(layout.Horizontal)
list.IsHoverable = false

return &SegmentedControl{
list: list,
theme: t,
segmentTitles: segmentTitles,
leftNavBtn: t.NewClickable(false),
rightNavBtn: t.NewClickable(false),
Padding: layout.UniformInset(values.MarginPadding8),
sc := &SegmentedControl{
list: list,
theme: t,
segmentTitles: segmentTitles,
leftNavBtn: t.NewClickable(false),
rightNavBtn: t.NewClickable(false),
isSwipeActionEnabled: true,
segmentType: segmentType,
slideAction: NewSlideAction(),
slideActionTitle: NewSlideAction(),
Padding: layout.UniformInset(values.MarginPadding8),
}

sc.slideAction.Draged(func(dragDirection SwipeDirection) {
isNext := dragDirection == SwipeLeft
sc.handleActionEvent(isNext)
})

sc.slideActionTitle.SetDragEffect(50)

sc.slideActionTitle.Draged(func(dragDirection SwipeDirection) {
isNext := dragDirection == SwipeRight
sc.handleActionEvent(isNext)
})

return sc
}

func (sc *SegmentedControl) Layout(gtx C) D {
func (sc *SegmentedControl) SetEnableSwipe(enable bool) {
sc.isSwipeActionEnabled = enable
}

func (sc *SegmentedControl) Layout(gtx C, body func(gtx C) D) D {
return UniformPadding(gtx, func(gtx C) D {
return layout.Flex{
Axis: layout.Vertical,
Alignment: layout.Middle,
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
if sc.segmentType == SegmentTypeGroup {
return sc.GroupTileLayout(gtx)
}
return sc.splitTileLayout(gtx)
}),
layout.Rigid(func(gtx C) D {
return layout.Inset{Top: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
if !sc.isSwipeActionEnabled {
return body(gtx)
}
return sc.slideAction.DragLayout(gtx, func(gtx C) D {
return sc.slideAction.TransformLayout(gtx, body)
})
})
}),
)
})
}

func (sc *SegmentedControl) GroupTileLayout(gtx C) D {
sc.handleEvents()

return LinearLayout{
Expand All @@ -49,38 +111,37 @@ func (sc *SegmentedControl) Layout(gtx C) D {
Border: Border{Radius: Radius(8)},
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return sc.list.Layout(gtx, len(sc.segmentTitles), func(gtx C, i int) D {
isSelectedSegment := sc.SelectedIndex() == i
return layout.Center.Layout(gtx, func(gtx C) D {
bg := sc.theme.Color.SurfaceHighlight
txt := sc.theme.DecoratedText(values.TextSize16, sc.segmentTitles[i], sc.theme.Color.GrayText1, font.SemiBold)
border := Border{Radius: Radius(0)}
if isSelectedSegment {
bg = sc.theme.Color.Surface
txt.Color = sc.theme.Color.Text
border = Border{Radius: Radius(8)}
}

ll := LinearLayout{
Width: WrapContent,
Height: WrapContent,
Background: bg,
Margin: layout.UniformInset(values.MarginPadding5),
Border: border,
Padding: sc.Padding,
}

return ll.Layout2(gtx, txt.Layout)
return sc.slideActionTitle.DragLayout(gtx, func(gtx C) D {
return sc.list.Layout(gtx, len(sc.segmentTitles), func(gtx C, i int) D {
isSelectedSegment := sc.SelectedIndex() == i
return layout.Center.Layout(gtx, func(gtx C) D {
bg := sc.theme.Color.SurfaceHighlight
txt := sc.theme.DecoratedText(values.TextSize16, sc.segmentTitles[i], sc.theme.Color.GrayText1, font.SemiBold)
border := Border{Radius: Radius(0)}
if isSelectedSegment {
bg = sc.theme.Color.Surface
txt.Color = sc.theme.Color.Text
border = Border{Radius: Radius(8)}
}
return LinearLayout{
Width: WrapContent,
Height: WrapContent,
Background: bg,
Margin: layout.UniformInset(values.MarginPadding5),
Border: border,
Padding: sc.Padding,
}.Layout2(gtx, txt.Layout)
})
})
})
}),
)
}

func (sc *SegmentedControl) TransparentLayout(gtx C) D {
func (sc *SegmentedControl) splitTileLayout(gtx C) D {
sc.handleEvents()
return LinearLayout{
Width: gtx.Dp(values.MarginPadding600),
Width: gtx.Dp(values.MarginPadding700),
Height: WrapContent,
Orientation: layout.Horizontal,
Alignment: layout.Middle,
Expand Down Expand Up @@ -182,3 +243,31 @@ func (sc *SegmentedControl) SetSelectedSegment(segment string) {
}
}
}

func (sc *SegmentedControl) handleActionEvent(isNext bool) {
l := len(sc.segmentTitles) - 1 // index starts at 0
if isNext {
if sc.selectedIndex == l {
if !sc.allowCycle {
return
}
sc.selectedIndex = 0
} else {
sc.selectedIndex++
}
sc.slideAction.PushLeft()
sc.slideActionTitle.PushLeft()
} else {
if sc.selectedIndex == 0 {
if !sc.allowCycle {
return
}
sc.selectedIndex = l
} else {
sc.selectedIndex--
}
sc.slideAction.PushRight()
sc.slideActionTitle.PushRight()
}
sc.changed = true
}
Loading

0 comments on commit cdff39d

Please sign in to comment.