Update Receive page and modal for desktop and mobile (crypto-power#346)

* update new UI for receive page * update layout for receive page * fix layout for single wallet main page * clean code * update modal receive for mobile layout * clean code * fix uniform on receive page * clean code
JustinBeBoy · Dec 20, 2023 · 0a3850c · 0a3850c
1 parent fad8a8e
commit 0a3850c
Show file tree

Hide file tree

Showing 31 changed files with 286 additions and 710 deletions.
diff --git a/ui/assets/decredicons/circle_btc_log.png b/ui/assets/decredicons/circle_btc_log.png
diff --git a/ui/assets/decredicons/circle_dcr_log.png b/ui/assets/decredicons/circle_dcr_log.png
diff --git a/ui/assets/decredicons/circle_ltc_log.png b/ui/assets/decredicons/circle_ltc_log.png
diff --git a/ui/cryptomaterial/icon_gallery.go b/ui/cryptomaterial/icon_gallery.go
@@ -28,7 +28,8 @@ type Icons struct {
 	RevealIcon, InfoAction, LightMode, DarkMode, AddIcon, ChevronRight, AddExchange, FlypMeIcon, ChangellyIcon,
 	SimpleSwapIcon, SwapzoneIcon, ShapeShiftIcon, GodexIcon, CoinSwitchIcon, ChangeNowIcon, TrocadorIcon, CaretUp, CaretDown,
 	LTCBackground, LTCGroupIcon, DCRBackground, DCRGroupIcon, BTCBackground, BTCGroupIcon, CrossPlatformIcon,
-	IntegratedExchangeIcon, MultiWalletIcon, Dot, TradeExchangeIcon, FilterImgIcon, FilterOffImgIcon, ShareIcon, DeleteIcon *Image
+	IntegratedExchangeIcon, MultiWalletIcon, Dot, TradeExchangeIcon, FilterImgIcon, FilterOffImgIcon, ShareIcon, DeleteIcon,
+	CircleBTC, CircleLTC, CircleDCR *Image
 
 	NewStakeIcon,
 	TicketImmatureIcon,
@@ -209,6 +210,9 @@ func (i *Icons) DefaultIcons() *Icons {
 	i.FilterOffImgIcon = NewImage(decredIcons["ic_filter_off"])
 	i.ShareIcon = NewImage(decredIcons["ic_share"])
 	i.DeleteIcon = NewImage(decredIcons["deleteIcon"])
+	i.CircleBTC = NewImage(decredIcons["circle_btc_log"])
+	i.CircleDCR = NewImage(decredIcons["circle_dcr_log"])
+	i.CircleLTC = NewImage(decredIcons["circle_ltc_log"])
 
 	return i
 }

diff --git a/ui/cryptomaterial/label.go b/ui/cryptomaterial/label.go
@@ -39,6 +39,10 @@ func (t *Theme) H6(txt string) Label {
 	return t.labelWithDefaultColor(Label{material.H6(t.Base, txt)})
 }
 
+func (t *Theme) Subtitle1(txt string) Label {
+	return t.labelWithDefaultColor(Label{material.Subtitle1(t.Base, txt)})
+}
+
 func (t *Theme) Body1(txt string) Label {
 	return t.labelWithDefaultColor(Label{material.Body1(t.Base, txt)})
 }

diff --git a/ui/cryptomaterial/modal.go b/ui/cryptomaterial/modal.go
@@ -34,15 +34,16 @@ type Modal struct {
 	isFloatTitle  bool
 	isDisabled    bool
 	showScrollBar bool
+	isMobileView  bool
 }
 
-func (t *Theme) ModalFloatTitle(id string) *Modal {
-	mod := t.Modal(id)
+func (t *Theme) ModalFloatTitle(id string, isMobileView bool) *Modal {
+	mod := t.Modal(id, isMobileView)
 	mod.isFloatTitle = true
 	return mod
 }
 
-func (t *Theme) Modal(id string) *Modal {
+func (t *Theme) Modal(id string, isMobileView bool) *Modal {
 	overlayColor := t.Color.Black
 	overlayColor.A = 200
 
@@ -57,7 +58,8 @@ func (t *Theme) Modal(id string) *Modal {
 		button:         new(widget.Clickable),
 		overlayBlinder: new(widget.Clickable),
 		card:           t.Card(),
-		padding:        unit.Dp(24),
+		padding:        values.MarginPadding24,
+		isMobileView:   isMobileView,
 	}
 
 	m.scroll = t.List(m.list)
@@ -117,7 +119,7 @@ func (m *Modal) Layout(gtx layout.Context, widgets []layout.Widget, width ...flo
 			}
 
 			maxWidth := float32(360)
-			if len(width) > 0 {
+			if len(width) > 0 && width[0] > 0 {
 				maxWidth = width[0]
 			} else if currentAppWidth := gtx.Metric.PxToDp(gtx.Constraints.Max.X); currentAppWidth <= values.StartMobileView {
 				// maxWidth must be less than currentAppWidth on mobile, so the
@@ -129,6 +131,10 @@ func (m *Modal) Layout(gtx layout.Context, widgets []layout.Widget, width ...flo
 				Top:    unit.Dp(30),
 				Bottom: unit.Dp(30),
 			}
+			uniformInset := layout.UniformInset(m.padding)
+			horizontalMargin := values.MarginPaddingTransform(m.isMobileView, values.MarginPadding24)
+			uniformInset.Left = horizontalMargin
+			uniformInset.Right = horizontalMargin
 			return inset.Layout(gtx, func(gtx C) D {
 				return layout.Stack{Alignment: layout.Center}.Layout(gtx,
 					layout.Expanded(func(gtx C) D {
@@ -141,7 +147,7 @@ func (m *Modal) Layout(gtx layout.Context, widgets []layout.Widget, width ...flo
 							Orientation: layout.Vertical,
 							Width:       WrapContent,
 							Height:      WrapContent,
-							Padding:     layout.UniformInset(m.padding),
+							Padding:     uniformInset,
 							Alignment:   layout.Middle,
 							Border: Border{
 								Radius: Radius(14),
@@ -153,7 +159,7 @@ func (m *Modal) Layout(gtx layout.Context, widgets []layout.Widget, width ...flo
 								if m.isFloatTitle && len(widgets) > 0 {
 									gtx.Constraints.Min.X = gtx.Constraints.Max.X
 									if m.padding == unit.Dp(0) {
-										return layout.UniformInset(m.padding).Layout(gtx, title)
+										return uniformInset.Layout(gtx, title)
 									}
 
 									inset := layout.Inset{

diff --git a/ui/modal/create_password_modal.go b/ui/modal/create_password_modal.go
@@ -55,7 +55,7 @@ type CreatePasswordModal struct {
 func NewCreatePasswordModal(l *load.Load) *CreatePasswordModal {
 	cm := &CreatePasswordModal{
 		Load:                   l,
-		Modal:                  l.Theme.ModalFloatTitle("create_password_modal"),
+		Modal:                  l.Theme.ModalFloatTitle("create_password_modal", l.IsMobileView()),
 		passwordStrength:       l.Theme.ProgressBar(0),
 		btnPositive:            l.Theme.Button(values.String(values.StrConfirm)),
 		btnNegative:            l.Theme.OutlineButton(values.String(values.StrCancel)),

diff --git a/ui/modal/create_watch_only_modal.go b/ui/modal/create_watch_only_modal.go
@@ -39,7 +39,7 @@ type CreateWatchOnlyModal struct {
 func NewCreateWatchOnlyModal(l *load.Load) *CreateWatchOnlyModal {
 	cm := &CreateWatchOnlyModal{
 		Load:         l,
-		Modal:        l.Theme.ModalFloatTitle("create_watch_only_modal"),
+		Modal:        l.Theme.ModalFloatTitle("create_watch_only_modal", l.IsMobileView()),
 		btnPositve:   l.Theme.Button(values.String(values.StrImport)),
 		btnNegative:  l.Theme.OutlineButton(values.String(values.StrCancel)),
 		isCancelable: true,

diff --git a/ui/modal/info_modal.go b/ui/modal/info_modal.go
@@ -106,7 +106,7 @@ func newModal(l *load.Load, title string, icon *cryptomaterial.Image, clicked Cl
 func newInfoModalWithKey(l *load.Load, key string, btnPositiveType ButtonType) *InfoModal {
 	in := &InfoModal{
 		Load:             l,
-		Modal:            l.Theme.ModalFloatTitle(key),
+		Modal:            l.Theme.ModalFloatTitle(key, l.IsMobileView()),
 		btnNegative:      l.Theme.OutlineButton(""),
 		isCancelable:     true,
 		isLoading:        false,

diff --git a/ui/modal/password_modal.go b/ui/modal/password_modal.go
@@ -40,7 +40,7 @@ type PasswordModal struct {
 func NewPasswordModal(l *load.Load) *PasswordModal {
 	pm := &PasswordModal{
 		Load:         l,
-		Modal:        l.Theme.ModalFloatTitle("password_modal"),
+		Modal:        l.Theme.ModalFloatTitle("password_modal", l.IsMobileView()),
 		btnPositve:   l.Theme.Button(values.String(values.StrConfirm)),
 		btnNegative:  l.Theme.OutlineButton(values.String(values.StrCancel)),
 		isCancelable: true,

diff --git a/ui/page/components/asset_selector.go b/ui/page/components/asset_selector.go
@@ -205,7 +205,7 @@ func (ats *AssetTypeSelector) Layout(window app.WindowNavigator, gtx C) D {
 func newAssetTypeModal(l *load.Load) *assetTypeModal {
 	atm := &assetTypeModal{
 		Load:          l,
-		Modal:         l.Theme.ModalFloatTitle(values.String(values.StrSelectAServer)),
+		Modal:         l.Theme.ModalFloatTitle(values.String(values.StrSelectAServer), l.IsMobileView()),
 		assetTypeList: layout.List{Axis: layout.Vertical},
 		isCancelable:  true,
 		dialogTitle:   values.String(values.StrSelectAssetType),