diff --git a/ui/page/root/single_wallet_main_page.go b/ui/page/root/single_wallet_main_page.go index 40415b079..9829c8e92 100644 --- a/ui/page/root/single_wallet_main_page.go +++ b/ui/page/root/single_wallet_main_page.go @@ -123,15 +123,16 @@ func (swmp *SingleWalletMasterPage) OnNavigatedTo() { swmp.checkBox.CheckBox.Value = false needBackup := swmp.selectedWallet.GetEncryptedSeed() != "" - if needBackup && !backupLater { - swmp.showBackupInfo() - } if swmp.CurrentPage() == nil { swmp.Display(info.NewInfoPage(swmp.Load, swmp.selectedWallet)) // TODO: Should pagestack have a start page? YES! } else { swmp.CurrentPage().OnNavigatedTo() } + + if needBackup && !backupLater { + swmp.showBackupInfo() + } // set active tab value swmp.activeTab[swmp.pageNavigationTab.SelectedSegment()] = swmp.CurrentPageID() @@ -780,10 +781,10 @@ func (swmp *SingleWalletMasterPage) showBackupInfo() { }). PositiveButtonStyle(swmp.Load.Theme.Color.Primary, swmp.Load.Theme.Color.InvText). SetPositiveButtonText(values.String(values.StrBackupNow)). - SetPositiveButtonCallback(func(_ bool, _ *modal.InfoModal) bool { - swmp.selectedWallet.SaveUserConfigValue(sharedW.SeedBackupNotificationConfigKey, true) + SetPositiveButtonCallback(func(_ bool, m *modal.InfoModal) bool { swmp.ParentNavigator().Display(seedbackup.NewBackupInstructionsPage(swmp.Load, swmp.selectedWallet, func(load *load.Load, navigator app.WindowNavigator) { - navigator.ClosePagesAfter(swmp.ParentWindow().CurrentPageID()) + swmp.selectedWallet.SaveUserConfigValue(sharedW.SeedBackupNotificationConfigKey, true) + swmp.ParentNavigator().CloseCurrentPage() })) return true }) diff --git a/ui/page/seedbackup/backup_instructions.go b/ui/page/seedbackup/backup_instructions.go index 3f3569c4a..b9c685fb5 100644 --- a/ui/page/seedbackup/backup_instructions.go +++ b/ui/page/seedbackup/backup_instructions.go @@ -66,7 +66,7 @@ func NewBackupInstructionsPage(l *load.Load, wallet sharedW.Asset, redirect Redi } for i := range bi.checkBoxes { - bi.checkBoxes[i].TextSize = values.TextSize16 + bi.checkBoxes[i].TextSize = values.TextSizeTransform(l.IsMobileView(), values.TextSize16) } bi.infoList = &layout.List{Axis: layout.Vertical} @@ -78,8 +78,7 @@ func NewBackupInstructionsPage(l *load.Load, wallet sharedW.Asset, redirect Redi // may be used to initialize page features that are only relevant when // the page is displayed. // Part of the load.Page interface. -func (pg *BackupInstructionsPage) OnNavigatedTo() { -} +func (pg *BackupInstructionsPage) OnNavigatedTo() {} // HandleUserInteractions is called just before Layout() to determine // if any user interaction recently occurred on the page and may be @@ -120,7 +119,7 @@ func (pg *BackupInstructionsPage) OnNavigatedFrom() {} // Layout draws the page UI components into the provided layout context // to be eventually drawn on screen. // Part of the load.Page interface. -func (pg *BackupInstructionsPage) Layout(gtx layout.Context) layout.Dimensions { +func (pg *BackupInstructionsPage) Layout(gtx C) D { sp := components.SubPage{ Load: pg.Load, Title: values.String(values.StrKeepInMind), @@ -156,10 +155,10 @@ func (pg *BackupInstructionsPage) verifyCheckBoxes() bool { func container(gtx C, isMobile bool, theme cryptomaterial.Theme, body layout.Widget, infoText string, actionBtn cryptomaterial.Button, showActionBtn bool) D { bodyLayout := func(gtx C) D { return layout.Stack{}.Layout(gtx, - layout.Expanded(func(gtx layout.Context) layout.Dimensions { + layout.Expanded(func(gtx C) D { return body(gtx) }), - layout.Stacked(func(gtx layout.Context) layout.Dimensions { + layout.Stacked(func(gtx C) D { if !showActionBtn { return D{} } @@ -187,12 +186,10 @@ func container(gtx C, isMobile bool, theme cryptomaterial.Theme, body layout.Wid layout.Rigid(func(gtx C) D { gtx.Constraints.Min.X = gtx.Constraints.Max.X return actionBtn.Layout(gtx) - })) + }), + ) }), ) } - if isMobile { - return components.UniformMobile(gtx, false, false, bodyLayout) - } - return cryptomaterial.UniformPadding(gtx, bodyLayout) + return cryptomaterial.UniformPadding(gtx, bodyLayout, isMobile) } diff --git a/ui/page/seedbackup/backup_success.go b/ui/page/seedbackup/backup_success.go index 70f1763f6..d94c638ec 100644 --- a/ui/page/seedbackup/backup_success.go +++ b/ui/page/seedbackup/backup_success.go @@ -85,13 +85,13 @@ func (pg *BackupSuccessPage) Layout(gtx C) D { return successIcon.Layout(gtx, values.MarginPadding64) }), layout.Rigid(func(gtx C) D { - label := pg.Theme.Label(values.TextSize24, values.String(values.StrSeedPhraseVerified)) + label := pg.Theme.Label(values.TextSizeTransform(pg.IsMobileView(), values.TextSize24), values.String(values.StrSeedPhraseVerified)) label.Color = pg.Theme.Color.DeepBlue return layout.Inset{Top: values.MarginPadding24}.Layout(gtx, label.Layout) }), layout.Rigid(func(gtx C) D { - label := pg.Theme.Label(values.TextSize16, values.String(values.StrSureToSafeStoreSeed)) + label := pg.Theme.Label(values.TextSizeTransform(pg.IsMobileView(), values.TextSize16), values.String(values.StrSureToSafeStoreSeed)) label.Color = pg.Theme.Color.GrayText1 return layout.Inset{Top: values.MarginPadding16}.Layout(gtx, label.Layout) diff --git a/ui/page/seedbackup/save_seed.go b/ui/page/seedbackup/save_seed.go index 11517db7a..ccfae5e01 100644 --- a/ui/page/seedbackup/save_seed.go +++ b/ui/page/seedbackup/save_seed.go @@ -9,6 +9,7 @@ import ( "gioui.org/font" "gioui.org/io/clipboard" "gioui.org/layout" + "gioui.org/op" "gioui.org/widget" "github.com/crypto-power/cryptopower/app" @@ -42,7 +43,8 @@ type SaveSeedPage struct { // and the root WindowNavigator. *app.GenericPageModal - wallet sharedW.Asset + wallet sharedW.Asset + pageContainer *widget.List backButton cryptomaterial.IconButton actionButton cryptomaterial.Button @@ -50,10 +52,9 @@ type SaveSeedPage struct { hexLabel cryptomaterial.Label copy cryptomaterial.Button - infoText string - seed string - rows []saveSeedRow - mobileRows []saveSeedRow + infoText string + seed string + rows []saveSeedRow redirectCallback Redirectfunc @@ -88,7 +89,12 @@ func NewSaveSeedPage(l *load.Load, wallet sharedW.Asset, redirect Redirectfunc) pg.backButton.Icon = l.Theme.Icons.ContentClear pg.actionButton.Font.Weight = font.Medium - + pg.pageContainer = &widget.List{ + List: layout.List{ + Axis: layout.Vertical, + Alignment: layout.Middle, + }, + } return pg } @@ -111,9 +117,7 @@ func (pg *SaveSeedPage) OnNavigatedTo() { m.SetError(err.Error()) return false } - m.Dismiss() - pg.seed = seed wordList := strings.Split(seed, " ") @@ -124,31 +128,31 @@ func (pg *SaveSeedPage) OnNavigatedTo() { // for mobile rowMobile1 := wordList[:17] rowMobile2 := wordList[17:] - mobileRows := make([]saveSeedRow, 0) - for i := range rowMobile1 { - r2 := "" - if i < len(rowMobile2) { - r2 = rowMobile2[i] - } - mobileRows = append(mobileRows, saveSeedRow{ - rowIndex: i + 1, - word1: rowMobile1[i], - word2: r2, - }) - } - rows := make([]saveSeedRow, 0) - for i := range row1 { - rows = append(rows, saveSeedRow{ - rowIndex: i + 1, - word1: row1[i], - word2: row2[i], - word3: row3[i], - }) + + if pg.IsMobileView() { + for i := range rowMobile1 { + r2 := "" + if i < len(rowMobile2) { + r2 = rowMobile2[i] + } + rows = append(rows, saveSeedRow{ + rowIndex: i + 1, + word1: rowMobile1[i], + word2: r2, + }) + } + } else { + for i := range row1 { + rows = append(rows, saveSeedRow{ + rowIndex: i + 1, + word1: row1[i], + word2: row2[i], + word3: row3[i], + }) + } } pg.rows = rows - pg.mobileRows = mobileRows - return true }). SetNegativeButtonCallback(func() { @@ -182,61 +186,6 @@ func (pg *SaveSeedPage) OnNavigatedFrom() {} // to be eventually drawn on screen. // Part of the load.Page interface. func (pg *SaveSeedPage) Layout(gtx C) D { - if pg.Load.IsMobileView() { - return pg.layoutMobile(gtx) - } - return pg.layoutDesktop(gtx) -} - -func (pg *SaveSeedPage) layoutDesktop(gtx C) D { - sp := components.SubPage{ - Load: pg.Load, - Title: values.String(values.StrWriteDownSeed), - SubTitle: values.String(values.StrStep1), - BackButton: pg.backButton, - Back: func() { - promptToExit(pg.Load, pg.ParentWindow(), pg.redirectCallback) - }, - Body: func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, - layout.Rigid(func(gtx C) D { - label := pg.Theme.Label(values.TextSize16, values.String(values.StrWriteDownAll33Words)) - label.Color = pg.Theme.Color.GrayText1 - return label.Layout(gtx) - }), - layout.Flexed(1, func(gtx C) D { - label := pg.Theme.Label(values.TextSize14, values.String(values.StrYourSeedWords)) - label.Color = pg.Theme.Color.GrayText1 - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Orientation: layout.Vertical, - Background: pg.Theme.Color.Surface, - Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8)}, - Margin: layout.Inset{Top: values.MarginPadding16, Bottom: values.MarginPadding2}, - Padding: layout.Inset{Top: values.MarginPadding16, Right: values.MarginPadding16, Bottom: values.MarginPadding8, Left: values.MarginPadding16}, - }.Layout(gtx, - layout.Rigid(label.Layout), - layout.Rigid(func(gtx C) D { - return pg.Theme.List(pg.seedList).Layout(gtx, len(pg.rows), func(gtx C, index int) D { - return pg.desktopSeedRow(gtx, pg.rows[index]) - }) - }), - ) - }), - layout.Flexed(1, pg.hexLayout), - ) - }, - } - - layout := func(gtx C) D { - return sp.Layout(pg.ParentWindow(), gtx) - } - - return container(gtx, false, *pg.Theme, layout, pg.infoText, pg.actionButton, true) -} - -func (pg *SaveSeedPage) layoutMobile(gtx C) D { sp := components.SubPage{ Load: pg.Load, Title: values.String(values.StrWriteDownSeed), @@ -246,73 +195,78 @@ func (pg *SaveSeedPage) layoutMobile(gtx C) D { promptToExit(pg.Load, pg.ParentWindow(), pg.redirectCallback) }, Body: func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, - layout.Rigid(func(gtx C) D { - label := pg.Theme.Label(values.TextSize16, values.String(values.StrWriteDownAll33Words)) - label.Color = pg.Theme.Color.GrayText1 - return label.Layout(gtx) - }), - layout.Rigid(func(gtx C) D { - label := pg.Theme.Label(values.TextSize14, values.String(values.StrYourSeedWords)) - label.Color = pg.Theme.Color.GrayText1 - - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Orientation: layout.Vertical, - Background: pg.Theme.Color.Surface, - Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8)}, - // bottom margin accounts for action button's height + components.UniformPadding bottom margin 24dp + 16dp - Margin: layout.Inset{Top: values.MarginPadding16, Bottom: values.MarginPadding120}, - Padding: layout.Inset{Top: values.MarginPadding16, Right: values.MarginPadding16, Bottom: values.MarginPadding8, Left: values.MarginPadding16}, - }.Layout(gtx, - layout.Rigid(label.Layout), - layout.Rigid(func(gtx C) D { - return pg.Theme.List(pg.seedList).Layout(gtx, len(pg.mobileRows), func(gtx C, index int) D { - return pg.mobileSeedRow(gtx, pg.mobileRows[index]) - }) - }), - ) - }), - ) + return pg.Theme.List(pg.pageContainer).Layout(gtx, 1, func(gtx C, i int) D { + return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + label := pg.Theme.Label(values.TextSize16, values.String(values.StrWriteDownAll33Words)) + label.Color = pg.Theme.Color.GrayText1 + return label.Layout(gtx) + }), + layout.Rigid(func(gtx C) D { + label := pg.Theme.Label(values.TextSize14, values.String(values.StrYourSeedWords)) + label.Color = pg.Theme.Color.GrayText1 + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.MatchParent, + Height: cryptomaterial.WrapContent, + Orientation: layout.Vertical, + Background: pg.Theme.Color.Surface, + Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8)}, + Margin: layout.Inset{Top: values.MarginPadding16, Bottom: values.MarginPadding2}, + Padding: layout.Inset{Top: values.MarginPadding16, Right: values.MarginPadding16, Bottom: values.MarginPadding8, Left: values.MarginPadding16}, + }.Layout(gtx, + layout.Rigid(label.Layout), + layout.Rigid(func(gtx C) D { + return pg.Theme.List(pg.seedList).Layout(gtx, len(pg.rows), func(gtx C, index int) D { + return pg.desktopSeedRow(gtx, pg.rows[index]) + }) + }), + ) + }), + layout.Rigid(pg.hexLayout), + layout.Rigid(layout.Spacer{Height: values.MarginPadding130}.Layout), + ) + }) }, } layout := func(gtx C) D { return sp.Layout(pg.ParentWindow(), gtx) } - - return container(gtx, true, *pg.Theme, layout, pg.infoText, pg.actionButton, true) + return container(gtx, pg.IsMobileView(), *pg.Theme, layout, pg.infoText, pg.actionButton, true) } -func (pg *SaveSeedPage) mobileSeedRow(gtx C, row saveSeedRow) D { - itemWidth := gtx.Constraints.Max.X / 2 // Divide total width into 2 rows for mobile +func (pg *SaveSeedPage) desktopSeedRow(gtx C, row saveSeedRow) D { topMargin := values.MarginPadding8 if row.rowIndex == 1 { topMargin = values.MarginPadding16 } + + var flexChils []layout.FlexChild + if pg.IsMobileView() { + itemWidth := gtx.Constraints.Max.X / 2 // Divide total width into 2 rows for mobile + flexChils = []layout.FlexChild{ + seedItem(pg.Theme, gtx, itemWidth, row.rowIndex, row.word1), + seedItem(pg.Theme, gtx, itemWidth, row.rowIndex+17, row.word2), + } + } else { + itemWidth := gtx.Constraints.Max.X / 3 // Divide total width into 3 rows for deskop + flexChils = []layout.FlexChild{ + seedItem(pg.Theme, gtx, itemWidth, row.rowIndex, row.word1), + seedItem(pg.Theme, gtx, itemWidth, row.rowIndex+11, row.word2), + seedItem(pg.Theme, gtx, itemWidth, row.rowIndex+22, row.word3), + } + } return cryptomaterial.LinearLayout{ Width: cryptomaterial.MatchParent, Height: cryptomaterial.WrapContent, Margin: layout.Inset{Top: topMargin}, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return seedItem(pg.Theme, gtx, itemWidth, row.rowIndex, row.word1) - }), - layout.Rigid(func(gtx C) D { - if row.word2 == "" { - return layout.Dimensions{} - } - return seedItem(pg.Theme, gtx, itemWidth, row.rowIndex+17, row.word2) - }), - ) + }.Layout(gtx, flexChils...) } -func (pg *SaveSeedPage) hexLayout(gtx layout.Context) layout.Dimensions { +func (pg *SaveSeedPage) hexLayout(gtx C) D { pg.handleCopyEvent(gtx) card := cryptomaterial.Card{ Color: pg.Theme.Color.Gray4, } - return cryptomaterial.LinearLayout{ Width: cryptomaterial.MatchParent, Height: cryptomaterial.WrapContent, @@ -324,12 +278,16 @@ func (pg *SaveSeedPage) hexLayout(gtx layout.Context) layout.Dimensions { }.Layout(gtx, layout.Rigid(pg.layoutVoteChoice()), layout.Rigid(func(gtx C) D { + cgtx := gtx + macro := op.Record(cgtx.Ops) + copyLayout := pg.copyButtonLayout(cgtx) + call := macro.Stop() return layout.Flex{Alignment: layout.Middle}.Layout(gtx, layout.Rigid(func(gtx C) D { + gtx.Constraints.Max.X = gtx.Constraints.Max.X - copyLayout.Size.X card.Radius = cryptomaterial.CornerRadius{TopRight: 0, TopLeft: 8, BottomRight: 0, BottomLeft: 8} - return card.Layout(gtx, func(gtx C) D { - return layout.UniformInset(values.MarginPadding16).Layout(gtx, func(gtx layout.Context) layout.Dimensions { + return layout.UniformInset(values.MarginPadding16).Layout(gtx, func(gtx C) D { seedString := pg.seed if seedString != "" { switch pg.seedFormatRadioGroup.Value { @@ -345,17 +303,25 @@ func (pg *SaveSeedPage) hexLayout(gtx layout.Context) layout.Dimensions { }) }), layout.Rigid(func(gtx C) D { - card.Radius = cryptomaterial.CornerRadius{TopRight: 8, TopLeft: 0, BottomRight: 8, BottomLeft: 0} - return layout.Inset{Left: values.MarginPadding1}.Layout(gtx, func(gtx C) D { - return card.Layout(gtx, pg.copy.Layout) - }) + call.Add(gtx.Ops) + return copyLayout }), ) }), ) } -func (pg *SaveSeedPage) handleCopyEvent(gtx layout.Context) { +func (pg *SaveSeedPage) copyButtonLayout(gtx C) D { + card := cryptomaterial.Card{ + Color: pg.Theme.Color.Gray4, + } + card.Radius = cryptomaterial.CornerRadius{TopRight: 8, TopLeft: 0, BottomRight: 8, BottomLeft: 0} + return layout.Inset{Left: values.MarginPadding1}.Layout(gtx, func(gtx C) D { + return card.Layout(gtx, pg.copy.Layout) + }) +} + +func (pg *SaveSeedPage) handleCopyEvent(gtx C) { if pg.copy.Clicked() { if pg.seedFormatRadioGroup.Value == seedWordFormat { clipboard.WriteOp{Text: pg.seed}.Add(gtx.Ops) @@ -373,60 +339,43 @@ func (pg *SaveSeedPage) handleCopyEvent(gtx layout.Context) { } } -func (pg *SaveSeedPage) desktopSeedRow(gtx C, row saveSeedRow) D { - itemWidth := gtx.Constraints.Max.X / 3 // Divide total width into 3 rows for deskop - topMargin := values.MarginPadding8 - if row.rowIndex == 1 { - topMargin = values.MarginPadding16 - } - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.WrapContent, - Margin: layout.Inset{Top: topMargin}, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return seedItem(pg.Theme, gtx, itemWidth, row.rowIndex, row.word1) - }), - layout.Rigid(func(gtx C) D { - return seedItem(pg.Theme, gtx, itemWidth, row.rowIndex+11, row.word2) - }), - layout.Rigid(func(gtx C) D { - return seedItem(pg.Theme, gtx, itemWidth, row.rowIndex+22, row.word3) - }), - ) -} - -func seedItem(theme *cryptomaterial.Theme, gtx C, width, index int, word string) D { - return cryptomaterial.LinearLayout{ - Width: width, - Height: cryptomaterial.WrapContent, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - indexLabel := theme.Label(values.TextSize16, fmt.Sprint(index)) - indexLabel.Color = theme.Color.GrayText1 - indexLabel.Font.Weight = font.Medium - return cryptomaterial.LinearLayout{ - Width: gtx.Dp(values.MarginPadding30), - Height: gtx.Dp(values.MarginPadding22), - Direction: layout.Center, - Margin: layout.Inset{Right: values.MarginPadding8}, - Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(9), Color: theme.Color.Gray3, Width: values.MarginPadding1}, - }.Layout2(gtx, indexLabel.Layout) - }), - layout.Rigid(func(gtx C) D { - seedWord := theme.Label(values.TextSize16, word) - seedWord.Color = theme.Color.GrayText1 - seedWord.Font.Weight = font.Medium - return seedWord.Layout(gtx) - }), - ) +func seedItem(theme *cryptomaterial.Theme, gtx C, width, index int, word string) layout.FlexChild { + return layout.Rigid(func(gtx C) D { + if word == "" { + return D{} + } + return cryptomaterial.LinearLayout{ + Width: width, + Height: cryptomaterial.WrapContent, + }.Layout(gtx, + layout.Rigid(func(gtx C) D { + indexLabel := theme.Label(values.TextSize16, fmt.Sprint(index)) + indexLabel.Color = theme.Color.GrayText1 + indexLabel.Font.Weight = font.Medium + return cryptomaterial.LinearLayout{ + Width: gtx.Dp(values.MarginPadding30), + Height: gtx.Dp(values.MarginPadding22), + Direction: layout.Center, + Margin: layout.Inset{Right: values.MarginPadding8}, + Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(9), Color: theme.Color.Gray3, Width: values.MarginPadding1}, + }.Layout2(gtx, indexLabel.Layout) + }), + layout.Rigid(layout.Spacer{Width: values.MarginPadding2}.Layout), + layout.Rigid(func(gtx C) D { + seedWord := theme.Label(values.TextSize16, word) + seedWord.Color = theme.Color.GrayText1 + seedWord.Font.Weight = font.Medium + return seedWord.Layout(gtx) + }), + ) + }) } func (pg *SaveSeedPage) layoutVoteChoice() layout.Widget { return func(gtx C) D { return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx, layout.Rigid(func(gtx C) D { - lbl := pg.Theme.Label(values.TextSize16, values.String(values.StrCopySeed)) + lbl := pg.Theme.Label(values.TextSizeTransform(pg.IsMobileView(), values.TextSize16), values.String(values.StrCopySeed)) lbl.Font.Weight = font.SemiBold return lbl.Layout(gtx) }), diff --git a/ui/page/seedbackup/verify_seed.go b/ui/page/seedbackup/verify_seed.go index 36f5e121c..62e730724 100644 --- a/ui/page/seedbackup/verify_seed.go +++ b/ui/page/seedbackup/verify_seed.go @@ -248,13 +248,8 @@ func (pg *VerifySeedPage) OnNavigatedFrom() {} // to be eventually drawn on screen. // Part of the load.Page interface. func (pg *VerifySeedPage) Layout(gtx C) D { - if pg.Load.IsMobileView() { - return pg.layoutMobile(gtx) - } - return pg.layoutDesktop(gtx) -} - -func (pg *VerifySeedPage) layoutDesktop(gtx layout.Context) layout.Dimensions { + textSize16 := values.TextSizeTransform(pg.IsMobileView(), values.TextSize16) + margin16 := values.MarginPaddingTransform(pg.IsMobileView(), values.MarginPadding16) sp := components.SubPage{ Load: pg.Load, Title: values.String(values.StrVerifySeed), @@ -266,12 +261,12 @@ func (pg *VerifySeedPage) layoutDesktop(gtx layout.Context) layout.Dimensions { Body: func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { - return layout.Inset{Top: values.MarginPadding0, Bottom: values.MarginPadding8}.Layout(gtx, func(gtx C) D { + return layout.Inset{Bottom: values.MarginPadding8}.Layout(gtx, func(gtx C) D { return layout.Flex{}.Layout(gtx, layout.Rigid(func(gtx C) D { return layout.Inset{Right: values.MarginPadding10}.Layout(gtx, pg.toggleSeedInput.Layout) }), - layout.Rigid(pg.Theme.Label(values.TextSize16, values.String(values.StrPasteSeedWords)).Layout), + layout.Rigid(pg.Theme.Label(textSize16, values.String(values.StrPasteSeedWords)).Layout), ) }) }), @@ -279,97 +274,35 @@ func (pg *VerifySeedPage) layoutDesktop(gtx layout.Context) layout.Dimensions { if pg.toggleSeedInput.IsChecked() { return D{} } - label := pg.Theme.Label(values.TextSize16, values.String(values.StrSelectPhrasesToVerify)) + label := pg.Theme.Label(textSize16, values.String(values.StrSelectPhrasesToVerify)) label.Color = pg.Theme.Color.GrayText1 return label.Layout(gtx) }), + layout.Rigid(layout.Spacer{Height: values.MarginPadding16}.Layout), layout.Rigid(func(gtx C) D { if pg.toggleSeedInput.IsChecked() { - return layout.Inset{ - Top: values.MarginPadding16, - }.Layout(gtx, func(gtx C) D { - return cryptomaterial.LinearLayout{ - Width: cryptomaterial.MatchParent, - Height: cryptomaterial.MatchParent, - Orientation: layout.Vertical, - Margin: layout.Inset{Bottom: values.MarginPadding16}, - }.Layout(gtx, - layout.Rigid(func(gtx C) D { - return pg.Theme.Card().Layout(gtx, func(gtx C) D { + return cryptomaterial.LinearLayout{ + Width: cryptomaterial.MatchParent, + Height: cryptomaterial.MatchParent, + Orientation: layout.Vertical, + }.Layout(gtx, + layout.Rigid(func(gtx C) D { + return pg.Theme.Card().Layout(gtx, func(gtx C) D { + return layout.UniformInset(margin16).Layout(gtx, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, - layout.Rigid(func(gtx layout.Context) D { - return layout.Inset{ - Left: values.MarginPadding16, - Right: values.MarginPadding16, - Top: values.MarginPadding30, - }.Layout(gtx, func(gtx C) D { - return pg.seedInputEditor.Layout(gtx) - }) - }), + layout.Rigid(pg.seedInputEditor.Layout), + layout.Rigid(layout.Spacer{Height: values.MarginPadding16}.Layout), layout.Rigid(func(gtx C) D { - return layout.Flex{}.Layout(gtx, - layout.Flexed(1, func(gtx C) D { - return layout.E.Layout(gtx, func(gtx C) D { - return layout.Inset{ - Left: values.MarginPadding16, - Right: values.MarginPadding16, - Top: values.MarginPadding16, - Bottom: values.MarginPadding16, - }.Layout(gtx, func(gtx C) D { - pg.verifySeedButton.Text = values.String(values.StrVerify) - return pg.verifySeedButton.Layout(gtx) - }) - }) - }), - ) + gtx.Constraints.Min.X = gtx.Constraints.Max.X + pg.verifySeedButton.Text = values.String(values.StrVerify) + return layout.E.Layout(gtx, pg.verifySeedButton.Layout) }), ) }) - }), - ) - }) + }) + }), + ) } - return layout.Inset{ - Bottom: values.MarginPadding96, - }.Layout(gtx, func(gtx C) D { - return pg.Theme.List(pg.list).Layout(gtx, len(pg.multiSeedList), func(gtx C, i int) D { - return layout.Inset{Right: values.MarginPadding10}.Layout(gtx, func(gtx C) D { - return pg.seedListRow(gtx, i, pg.multiSeedList[i]) - }) - }) - }) - }), - ) - }, - } - - pg.actionButton.SetEnabled(pg.allSeedsSelected()) - layout := func(gtx C) D { - return sp.Layout(pg.ParentWindow(), gtx) - } - if pg.toggleSeedInput.IsChecked() { - return container(gtx, false, *pg.Theme, layout, "", pg.actionButton, false) - } - return container(gtx, false, *pg.Theme, layout, "", pg.actionButton, true) -} - -func (pg *VerifySeedPage) layoutMobile(gtx layout.Context) layout.Dimensions { - sp := components.SubPage{ - Load: pg.Load, - Title: values.String(values.StrVerifySeed), - SubTitle: values.String(values.StrStep2of2), - BackButton: pg.backButton, - Back: func() { - promptToExit(pg.Load, pg.ParentWindow(), pg.redirectCallback) - }, - Body: func(gtx C) D { - return layout.Flex{Axis: layout.Vertical}.Layout(gtx, - layout.Rigid(func(gtx C) D { - label := pg.Theme.Label(values.TextSize16, values.String(values.StrSelectPhrasesToVerify)) - label.Color = pg.Theme.Color.GrayText1 - return label.Layout(gtx) - }), - layout.Rigid(func(gtx C) D { return layout.Inset{ Bottom: values.MarginPadding96, }.Layout(gtx, func(gtx C) D { @@ -386,39 +319,37 @@ func (pg *VerifySeedPage) layoutMobile(gtx layout.Context) layout.Dimensions { layout := func(gtx C) D { return sp.Layout(pg.ParentWindow(), gtx) } - return container(gtx, true, *pg.Theme, layout, "", pg.actionButton, true) + return container(gtx, pg.IsMobileView(), *pg.Theme, layout, "", pg.actionButton, !pg.toggleSeedInput.IsChecked()) } func (pg *VerifySeedPage) seedListRow(gtx C, index int, multiSeed shuffledSeedWords) D { + marginPading16 := values.MarginPaddingTransform(pg.IsMobileView(), values.MarginPadding16) + text := "-" + if multiSeed.selectedIndex != -1 { + text = multiSeed.words[multiSeed.selectedIndex] + } + seedItem := seedItem(pg.Theme, gtx, gtx.Constraints.Max.X, index+1, text) return cryptomaterial.LinearLayout{ Width: cryptomaterial.MatchParent, Height: cryptomaterial.WrapContent, Orientation: layout.Vertical, Background: pg.Theme.Color.Surface, Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8)}, - Margin: layout.Inset{Top: values.MarginPadding4, Bottom: values.MarginPadding4}, - Padding: layout.Inset{Top: values.MarginPadding16, Right: values.MarginPadding16, Bottom: values.MarginPadding8, Left: values.MarginPadding16}, + Margin: components.VerticalInset(values.MarginPadding4), + Padding: layout.Inset{Top: marginPading16, Right: marginPading16, Bottom: values.MarginPadding8, Left: marginPading16}, }.Layout(gtx, - layout.Rigid(func(gtx C) D { - text := "-" - if multiSeed.selectedIndex != -1 { - text = multiSeed.words[multiSeed.selectedIndex] - } - return seedItem(pg.Theme, gtx, gtx.Constraints.Max.X, index+1, text) - }), + seedItem, + layout.Rigid(layout.Spacer{Height: marginPading16}.Layout), layout.Rigid(func(gtx C) D { gtx.Constraints.Min.X = gtx.Constraints.Max.X - - return layout.Inset{Top: values.MarginPadding16}.Layout(gtx, func(gtx C) D { - widgets := []layout.Widget{ - func(gtx C) D { return pg.seedButton(gtx, 0, multiSeed) }, - func(gtx C) D { return pg.seedButton(gtx, 1, multiSeed) }, - func(gtx C) D { return pg.seedButton(gtx, 2, multiSeed) }, - func(gtx C) D { return pg.seedButton(gtx, 3, multiSeed) }, - } - return pg.listGroupSeed[index].Layout(gtx, len(widgets), func(gtx C, i int) D { - return layout.UniformInset(values.MarginPadding0).Layout(gtx, widgets[i]) - }) + widgets := []layout.Widget{ + func(gtx C) D { return pg.seedButton(gtx, 0, multiSeed) }, + func(gtx C) D { return pg.seedButton(gtx, 1, multiSeed) }, + func(gtx C) D { return pg.seedButton(gtx, 2, multiSeed) }, + func(gtx C) D { return pg.seedButton(gtx, 3, multiSeed) }, + } + return pg.listGroupSeed[index].Layout(gtx, len(widgets), func(gtx C, i int) D { + return widgets[i](gtx) }) }), ) @@ -433,14 +364,20 @@ func (pg *VerifySeedPage) seedButton(gtx C, index int, multiSeed shuffledSeedWor } return multiSeed.clickables[index].Layout(gtx, func(gtx C) D { + width := values.MarginPadding100 + height := values.MarginPadding40 + if pg.IsMobileView() { + width = values.MarginPadding85 + height = values.MarginPadding30 + } return cryptomaterial.LinearLayout{ - Width: gtx.Dp(values.MarginPadding100), - Height: gtx.Dp(values.MarginPadding40), + Width: gtx.Dp(width), + Height: gtx.Dp(height), Background: pg.Theme.Color.Surface, Direction: layout.Center, Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8), Color: borderColor, Width: values.MarginPadding2}, }.Layout2(gtx, func(gtx C) D { - label := pg.Theme.Label(values.TextSize16, multiSeed.words[index]) + label := pg.Theme.Label(values.TextSizeTransform(pg.IsMobileView(), values.TextSize16), multiSeed.words[index]) label.Color = textColor return label.Layout(gtx) })