Implement overview layout

ui/cryptomaterial/icon_gallery.go

@@ -14,7 +14,7 @@ type Icons struct {
 	ImageBrightness1, ContentClear, DropDownIcon, Cached, ContentRemove, SearchIcon, PlayIcon,
 	ActionSettings, ActionSwapHoriz, NavigationRefresh, ContentCopy *widget.Icon
 
-	OverviewIcon, OverviewIconInactive, WalletIcon, WalletIconInactive, MixerInactive, RedAlert,
+	OverviewIcon, OverviewIconInactive, WalletIcon, WalletIconInactive, MixerInactive, RedAlert, Alert,
 	ReceiveIcon, Transferred, TransactionsIcon, TransactionsIconInactive, SendIcon, MoreIcon, MoreIconInactive,
 	PendingIcon, Logo, RedirectIcon, ConfirmIcon, NewWalletIcon, WalletAlertIcon, ArrowForward, EllipseHoriz,
 	ImportedAccountIcon, AccountIcon, EditIcon, expandIcon, CopyIcon, MixedTx, Mixer,
@@ -26,7 +26,8 @@ type Icons struct {
 	LockinInactiveIcon, SuccessIcon, FailedIcon, ReceiveInactiveIcon, SendInactiveIcon, DarkmodeIcon,
 	ChevronExpand, ChevronCollapse, ChevronLeft, MixedTxIcon, UnmixedTxIcon, MixerIcon, NotSynced, ConcealIcon,
 	RevealIcon, InfoAction, LightMode, DarkMode, AddIcon, ChevronRight, AddExchange, FlypMeIcon, ChangellyIcon,
-	SimpleSwapIcon, SwapzoneIcon, ShapeShiftIcon, GodexIcon, CoinSwitchIcon, ChangeNowIcon, CaretUp, CaretDown *Image
+	SimpleSwapIcon, SwapzoneIcon, ShapeShiftIcon, GodexIcon, CoinSwitchIcon, ChangeNowIcon, CaretUp, CaretDown,
+	LTCBackground, LTCGroupIcon, DCRBackground, DCRGroupIcon, BTCBackground, BTCGroupIcon *Image
 
 	NewStakeIcon,
 	TicketImmatureIcon,
@@ -138,6 +139,7 @@ func (i *Icons) DefaultIcons() *Icons {
 	i.LockinInactiveIcon = NewImage(decredIcons["lockin_inactive"])
 	i.TransactionFingerprint = NewImage(decredIcons["transaction_fingerprint"])
 	i.ArrowForward = NewImage(decredIcons["arrow_fwd"])
+	i.Alert = NewImage(decredIcons["alert"])
 
 	/* Start - Asset types Icons */
 	i.DcrDex = NewImage(decredIcons["logo_dcrdex"])
@@ -147,6 +149,13 @@ func (i *Icons) DefaultIcons() *Icons {
 	i.DcrWatchOnly = NewImage(decredIcons["logo_dcr_watch_only"])
 	i.BtcWatchOnly = NewImage(decredIcons["logo_btc_watch_only"])
 	i.LtcWatchOnly = NewImage(decredIcons["logo_ltc_watch_only"])
+
+	i.DCRBackground = NewImage(decredIcons["dcrBkgImage"])
+	i.DCRGroupIcon = NewImage(decredIcons["dcrGroupImage"])
+	i.LTCBackground = NewImage(decredIcons["ltBkgImage"])
+	i.LTCGroupIcon = NewImage(decredIcons["ltGroupImage"])
+	i.BTCBackground = NewImage(decredIcons["btcBkgImage"])
+	i.BTCGroupIcon = NewImage(decredIcons["btcGroupIcon"])
 	/* End - Asset types Icons */
 
 	i.SuccessIcon = NewImage(decredIcons["success_check"])

ui/cryptomaterial/image.go

@@ -24,31 +24,40 @@ func NewImage(src image.Image) *Image {
 // this in turn reduced the image layout size by half. Multiplying the
 // layout size by 2 to give the original image size to scale ratio.
 func (img *Image) Layout12dp(gtx C) D {
-	return img.LayoutSize(gtx, values.MarginPadding12*2)
+	return img.LayoutSize(gtx, values.MarginPadding12)
 }
 
 func (img *Image) Layout16dp(gtx C) D {
-	return img.LayoutSize(gtx, values.MarginPadding16*2)
+	return img.LayoutSize(gtx, values.MarginPadding16)
 }
 
 func (img *Image) Layout20dp(gtx C) D {
-	return img.LayoutSize(gtx, values.MarginPadding20*2)
+	return img.LayoutSize(gtx, values.MarginPadding20)
 }
 
 func (img *Image) Layout24dp(gtx C) D {
-	return img.LayoutSize(gtx, values.MarginPadding24*2)
+	return img.LayoutSize(gtx, values.MarginPadding24)
 }
 
 func (img *Image) Layout36dp(gtx C) D {
-	return img.LayoutSize(gtx, values.MarginPadding36*2)
+	return img.LayoutSize(gtx, values.MarginPadding36)
 }
 
 func (img *Image) Layout48dp(gtx C) D {
-	return img.LayoutSize(gtx, values.MarginPadding48*2)
+	return img.LayoutSize(gtx, values.MarginPadding48)
 }
 
 func (img *Image) LayoutSize(gtx C, size unit.Dp) D {
-	dst := image.NewRGBA(image.Rectangle{Max: image.Point{X: int(size), Y: int(size)}})
+	dst := image.NewRGBA(image.Rectangle{Max: image.Point{X: int(size * 2), Y: int(size * 2)}})
+	draw.BiLinear.Scale(dst, dst.Bounds(), img, img.Bounds(), draw.Src, nil)
+
+	i := widget.Image{Src: paint.NewImageOp(dst)}
+	i.Scale = .5 // reduced the original scale of 1 by half to fix blurry images
+	return i.Layout(gtx)
+}
+
+func (img *Image) LayoutSize2(gtx C, width, height unit.Dp) D {
+	dst := image.NewRGBA(image.Rectangle{Max: image.Point{X: int(width), Y: int(height * 2)}})
 	draw.BiLinear.Scale(dst, dst.Bounds(), img, img.Bounds(), draw.Src, nil)
 
 	i := widget.Image{Src: paint.NewImageOp(dst)}

ui/cryptomaterial/slider.go

@@ -0,0 +1,153 @@
+// SPDX-License-Identifier: Unlicense OR MIT
+
+package cryptomaterial
+
+import (
+	"image/color"
+
+	"gioui.org/layout"
+
+	"github.com/crypto-power/cryptopower/ui/values"
+)
+
+type Slider struct {
+	t *Theme
+
+	nextButton *Clickable
+	prevButton *Clickable
+	card       Card
+	items      []layout.Widget
+
+	selected int
+
+	// colors of the indicator and navigation button
+	ButtonBackgroundColor    color.NRGBA
+	IndicatorBackgroundColor color.NRGBA
+	SelectedIndicatorColor   color.NRGBA // this is a full color no opacity
+}
+
+var m4 = values.MarginPadding4
+
+func (t *Theme) Slider() *Slider {
+	sl := &Slider{
+		t:     t,
+		items: make([]layout.Widget, 0),
+
+		nextButton:               t.NewClickable(false),
+		prevButton:               t.NewClickable(false),
+		ButtonBackgroundColor:    values.TransparentColor(values.TransparentWhite, 0.2),
+		IndicatorBackgroundColor: values.TransparentColor(values.TransparentWhite, 0.2),
+		SelectedIndicatorColor:   t.Color.White,
+	}
+
+	sl.card = sl.t.Card()
+	sl.card.Radius = Radius(8)
+
+	return sl
+}
+
+func (s *Slider) Layout(gtx C, items []layout.Widget) D {
+	s.items = items
+	s.handleClickEvent()
+
+	gtx.Constraints.Max = s.items[s.selected](gtx).Size
+	return layout.Stack{Alignment: layout.S}.Layout(gtx,
+		layout.Expanded(s.items[s.selected]),
+		layout.Stacked(func(gtx C) D {
+			return layout.Inset{
+				Right:  values.MarginPadding15,
+				Left:   values.MarginPadding15,
+				Bottom: values.MarginPadding10,
+			}.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)
+					}),
+				)
+			})
+		}),
+	)
+}
+
+func (s *Slider) buttonLayout(gtx C) D {
+	s.card.Radius = Radius(10)
+	s.card.Color = s.ButtonBackgroundColor
+	return s.containerLayout(gtx, func(gtx C) D {
+		return layout.Inset{
+			Right: m4,
+			Left:  m4,
+		}.Layout(gtx, func(gtx C) D {
+			return LinearLayout{
+				Width:       WrapContent,
+				Height:      WrapContent,
+				Orientation: layout.Horizontal,
+			}.Layout(gtx,
+				layout.Rigid(func(gtx C) D {
+					return s.prevButton.Layout(gtx, s.t.Icons.ChevronLeft.Layout20dp)
+				}),
+				layout.Rigid(func(gtx C) D {
+					return s.nextButton.Layout(gtx, s.t.Icons.ChevronRight.Layout20dp)
+				}),
+			)
+		})
+	})
+}
+
+func (s *Slider) selectedItemIndicatorLayout(gtx C) D {
+	m4 := values.MarginPadding4
+	s.card.Radius = Radius(10)
+	s.card.Color = s.IndicatorBackgroundColor
+	return s.containerLayout(gtx, func(gtx C) D {
+		return layout.Inset{
+			Right: m4,
+			Left:  m4,
+		}.Layout(gtx, func(gtx C) D {
+			list := &layout.List{Axis: layout.Horizontal}
+			return list.Layout(gtx, len(s.items), func(gtx C, i int) D {
+				ic := NewIcon(s.t.Icons.ImageBrightness1)
+				ic.Color = values.TransparentColor(values.TransparentBlack, 0.2)
+				if i == s.selected {
+					ic.Color = s.SelectedIndicatorColor
+				}
+				return layout.Inset{
+					Top:    m4,
+					Bottom: m4,
+					Right:  m4,
+					Left:   m4,
+				}.Layout(gtx, func(gtx C) D {
+					return ic.Layout(gtx, values.MarginPadding12)
+				})
+			})
+		})
+	})
+}
+
+func (s *Slider) containerLayout(gtx C, content layout.Widget) D {
+	return s.card.Layout(gtx, content)
+}
+
+func (s *Slider) centerLayout(gtx C, content layout.Widget) D {
+	return layout.Center.Layout(gtx, content)
+}
+
+func (s *Slider) handleClickEvent() {
+	l := len(s.items) - 1 // index starts at 0
+	if s.nextButton.Clicked() {
+		if s.selected == l {
+			s.selected = 0
+		} else {
+			s.selected++
+		}
+	}
+
+	if s.prevButton.Clicked() {
+		if s.selected == 0 {
+			s.selected = l
+		} else {
+			s.selected--
+		}
+	}
+}

ui/page/components/components.go

@@ -36,8 +36,6 @@ const (
 	WalletsPageID = "Wallets"
 )
 
-var MaxWidth = unit.Dp(800)
-
 type (
 	C              = layout.Context
 	D              = layout.Dimensions
@@ -89,8 +87,8 @@ func UniformPadding(gtx layout.Context, body layout.Widget) layout.Dimensions {
 
 	padding := values.MarginPadding24
 
-	if (width - 2*gtx.Dp(padding)) > gtx.Dp(MaxWidth) {
-		paddingValue := float32(width-gtx.Dp(MaxWidth)) / 2
+	if (width - 2*gtx.Dp(padding)) > gtx.Dp(values.AppWidth) {
+		paddingValue := float32(width-gtx.Dp(values.AppWidth)) / 4
 		padding = unit.Dp(paddingValue)
 	}
 
@@ -107,8 +105,8 @@ func UniformHorizontalPadding(gtx layout.Context, body layout.Widget) layout.Dim
 
 	padding := values.MarginPadding24
 
-	if (width - 2*gtx.Dp(padding)) > gtx.Dp(MaxWidth) {
-		paddingValue := float32(width-gtx.Dp(MaxWidth)) / 3
+	if (width - 2*gtx.Dp(padding)) > gtx.Dp(values.AppWidth) {
+		paddingValue := float32(width-gtx.Dp(values.AppWidth)) / 3
 		padding = unit.Dp(paddingValue)
 	}
 

ui/page/components/nav_drawer.go

@@ -25,7 +25,7 @@ type NavHandler struct {
 type NavDrawer struct {
 	*load.Load
 
-	AppBarNavItems    []NavHandler
+	AppNavBarItems    []NavHandler
 	DCRDrawerNavItems []NavHandler
 	BTCDrawerNavItems []NavHandler
 	CurrentPage       string
@@ -76,11 +76,9 @@ func (nd *NavDrawer) LayoutNavDrawer(gtx layout.Context, navItems []NavHandler)
 				}.Layout(mGtx,
 					layout.Rigid(func(gtx C) D {
 						img := navItems[i].ImageInactive
-
 						if navItems[i].PageID == nd.CurrentPage {
 							img = navItems[i].Image
 						}
-
 						return img.Layout24dp(gtx)
 					}),
 					layout.Rigid(func(gtx C) D {
@@ -112,6 +110,57 @@ func (nd *NavDrawer) LayoutNavDrawer(gtx layout.Context, navItems []NavHandler)
 	)
 }
 
+func (nd *NavDrawer) LayoutTopBar(gtx layout.Context) layout.Dimensions {
+	card := nd.Theme.Card()
+	card.Radius = cryptomaterial.Radius(20)
+	card.Color = nd.Theme.Color.Gray2
+	padding8 := values.MarginPadding8
+	padding20 := values.MarginPadding20
+	return layout.Inset{Right: values.MarginPadding8}.Layout(gtx, func(gtx C) D {
+		return card.Layout(gtx, func(gtx C) D {
+			list := layout.List{Axis: layout.Horizontal}
+			return list.Layout(gtx, len(nd.AppNavBarItems), func(gtx C, i int) D {
+				return cryptomaterial.LinearLayout{
+					Width:       cryptomaterial.WrapContent,
+					Height:      cryptomaterial.WrapContent,
+					Orientation: layout.Horizontal,
+					Clickable:   nd.AppNavBarItems[i].Clickable,
+					Alignment:   layout.Middle,
+				}.Layout(gtx,
+					layout.Rigid(func(gtx C) D {
+						return layout.Inset{
+							Top:    padding8,
+							Bottom: padding8,
+							Left:   padding20,
+							Right:  padding8,
+						}.Layout(gtx, func(gtx C) D {
+							return layout.Center.Layout(gtx, nd.AppNavBarItems[i].Image.Layout24dp)
+						})
+					}),
+					layout.Rigid(func(gtx C) D {
+						return layout.Inset{
+							Top:    padding8,
+							Bottom: padding8,
+							Right:  padding20,
+							Left:   values.MarginPadding0,
+						}.Layout(gtx, func(gtx C) D {
+							return layout.Center.Layout(gtx, nd.Theme.Body1(nd.AppNavBarItems[i].Title).Layout)
+						})
+					}),
+					layout.Rigid(func(gtx C) D {
+						if i+1 == len(nd.AppNavBarItems) {
+							return D{}
+						}
+						verticalSeparator := nd.Theme.SeparatorVertical(int(gtx.Metric.PxPerDp*20.0), 2)
+						verticalSeparator.Color = nd.Theme.Color.DeepBlue
+						return verticalSeparator.Layout(gtx)
+					}),
+				)
+			})
+		})
+	})
+}
+
 func (nd *NavDrawer) DrawerToggled(min bool) {
 	if min {
 		nd.axis = layout.Vertical