From 64e7f3eab75e8873b347c822c1be873879eb7ec9 Mon Sep 17 00:00:00 2001 From: tuhalang Date: Sat, 8 May 2021 08:55:01 +0700 Subject: [PATCH 1/7] Implement dark mode --- ui/compontents.go | 18 ++++--- ui/decredmaterial/label.go | 10 ++++ ui/decredmaterial/theme.go | 97 +++++++++++++++++++++++++++++--------- ui/overview_page.go | 7 +++ ui/page.go | 8 ++++ ui/settings_page.go | 22 ++++++++- ui/test/testapp.go | 2 +- ui/transactions_page.go | 14 ++++++ ui/window.go | 2 +- 9 files changed, 146 insertions(+), 34 deletions(-) diff --git a/ui/compontents.go b/ui/compontents.go index b53cf8991..d7f54d6bf 100644 --- a/ui/compontents.go +++ b/ui/compontents.go @@ -35,10 +35,10 @@ func (page pageCommon) layoutBalance(gtx layout.Context, amount string) layout.D mainText, subText := breakBalance(page.printer, amount) return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx, layout.Rigid(func(gtx C) D { - return page.theme.Label(values.TextSize20, mainText).Layout(gtx) + return page.theme.LabelColor(values.TextSize20, mainText, page.theme.Color.DeepBlue).Layout(gtx) }), layout.Rigid(func(gtx C) D { - return page.theme.Label(values.TextSize14, subText).Layout(gtx) + return page.theme.LabelColor(values.TextSize14, subText, page.theme.Color.DeepBlue).Layout(gtx) }), ) } @@ -60,7 +60,7 @@ func (page pageCommon) layoutUSDBalance(gtx layout.Context) layout.Dimensions { Top: values.MarginPadding3, Left: values.MarginPadding8, } - border := widget.Border{Color: page.theme.Color.LightGray, CornerRadius: unit.Dp(8), Width: unit.Dp(0.5)} + border := widget.Border{Color: page.theme.Color.Gray, CornerRadius: unit.Dp(8), Width: unit.Dp(0.5)} return inset.Layout(gtx, func(gtx C) D { padding := layout.Inset{ Top: values.MarginPadding3, @@ -71,7 +71,7 @@ func (page pageCommon) layoutUSDBalance(gtx layout.Context) layout.Dimensions { return border.Layout(gtx, func(gtx C) D { return padding.Layout(gtx, func(gtx C) D { amountDCRtoUSDString := formatUSDBalance(page.printer, page.amountDCRtoUSD) - return page.theme.Label(values.TextSize14, amountDCRtoUSDString).Layout(gtx) + return page.theme.LabelColor(values.TextSize14, amountDCRtoUSDString, page.theme.Color.DeepBlue).Layout(gtx) }) }) }) @@ -178,7 +178,7 @@ func (page pageCommon) layoutNavDrawer(gtx layout.Context) layout.Dimensions { return list.Layout(gtx, len(page.drawerNavItems), func(gtx C, i int) D { background := page.theme.Color.Surface if page.drawerNavItems[i].page == *page.page { - background = page.theme.Color.LightGray + background = page.theme.Color.ActiveGray } txt := page.theme.Label(values.TextSize16, page.drawerNavItems[i].page) return decredmaterial.Clickable(gtx, page.drawerNavItems[i].clickable, func(gtx C) D { @@ -221,7 +221,7 @@ func (page pageCommon) layoutNavDrawer(gtx layout.Context) layout.Dimensions { Left: leftInset, Top: values.MarginPadding4, }.Layout(gtx, func(gtx C) D { - textColor := page.theme.Color.Gray3 + textColor := page.theme.Color.Gray4 if page.drawerNavItems[i].page == *page.page { textColor = page.theme.Color.DeepBlue } @@ -334,7 +334,11 @@ func transactionRow(gtx layout.Context, common pageCommon, row TransactionRow) l s = row.transaction.Status } status := common.theme.Body1(s) - status.Color = common.theme.Color.Gray + if row.transaction.Status != "confirmed" { + status.Color = common.theme.Color.Gray5 + }else{ + status.Color = common.theme.Color.Gray4 + } status.Alignment = text.Middle return status.Layout(gtx) }) diff --git a/ui/decredmaterial/label.go b/ui/decredmaterial/label.go index b37a637cd..823927cf2 100644 --- a/ui/decredmaterial/label.go +++ b/ui/decredmaterial/label.go @@ -5,6 +5,7 @@ package decredmaterial import ( "gioui.org/unit" "gioui.org/widget/material" + "image/color" ) type Label struct { @@ -57,6 +58,15 @@ func (t *Theme) Label(size unit.Value, txt string) Label { return Label{material.Label(t.Base, size, txt)} } +func (t *Theme) LabelColor(size unit.Value, txt string, color color.NRGBA) Label { + return t.labelWithColor(Label{material.Label(t.Base, size, txt)}, color) +} + +func (t *Theme) labelWithColor(l Label, color color.NRGBA) Label { + l.Color = color + return l +} + func (t *Theme) labelWithDefaultColor(l Label) Label { l.Color = t.Color.DeepBlue return l diff --git a/ui/decredmaterial/theme.go b/ui/decredmaterial/theme.go index 172ebefe0..f3bc5ab3a 100644 --- a/ui/decredmaterial/theme.go +++ b/ui/decredmaterial/theme.go @@ -57,11 +57,15 @@ type Theme struct { LightBlue color.NRGBA LightGray color.NRGBA InactiveGray color.NRGBA + ActiveGray color.NRGBA Gray1 color.NRGBA Gray2 color.NRGBA Gray3 color.NRGBA Orange color.NRGBA Orange2 color.NRGBA + Gray4 color.NRGBA + Gray5 color.NRGBA + Gray6 color.NRGBA } Icon struct { ContentCreate *widget.Icon @@ -81,35 +85,78 @@ type Theme struct { collapseIcon *widget.Image dropDownMenus []*DropDown + + DarkMode bool +} + +func (t *Theme) setColorMode(darkMode bool){ + if darkMode { + t.DarkMode = true + t.Color.Primary = rgb(0x57B6FF) + t.Color.Text = argb(0x99FFFFFF) + t.Color.Hint = rgb(0x8997A5) + t.Color.InvText = rgb(0xffffff) + t.Color.Overlay = rgb(0x000000) + t.Color.Surface = rgb(0x252525) + t.Color.Success = green + t.Color.Success2 = rgb(0xE1F8EF) + t.Color.Danger = rgb(0xed6d47) + t.Color.Gray = argb(0x99FFFFFF) + t.Color.Gray1 = rgb(0x1E1E1E) + t.Color.Gray2 = rgb(0x8997a5) + t.Color.Gray3 = argb(0xDEFFFFFF) + t.Color.Gray4 = argb(0x99FFFFFF) + t.Color.Gray5 = argb(0x61FFFFFF) + t.Color.Gray6 = argb(0xCCFFFFFF) + t.Color.LightGray = rgb(0x121212) + t.Color.ActiveGray = rgb(0x363636) + t.Color.DeepBlue = argb(0xDEFFFFFF) + t.Color.InactiveGray = rgb(0xc4cbd2) + t.Color.Black = rgb(0x000000) + t.Color.Background = argb(0x22444444) + t.Color.LightBlue = rgb(0xe4f6ff) + t.Color.Orange = rgb(0xD34A21) + t.Color.Orange2 = rgb(0xF8E8E7) + t.TextSize = unit.Sp(16) + } else { + t.DarkMode = false + t.Color.Primary = keyblue + t.Color.Text = darkblue + t.Color.Hint = rgb(0x8997A5) + t.Color.InvText = rgb(0xffffff) + t.Color.Overlay = rgb(0x000000) + t.Color.Surface = rgb(0xffffff) + t.Color.Success = green + t.Color.Success2 = rgb(0xE1F8EF) + t.Color.Danger = rgb(0xed6d47) + t.Color.Gray = rgb(0x596D81) + t.Color.Gray1 = rgb(0xe6eaed) + t.Color.Gray2 = rgb(0x8997a5) + t.Color.Gray3 = rgb(0x3d5873) + t.Color.Gray4 = rgb(0x3d5873) + t.Color.Gray5 = rgb(0x3d5873) + t.Color.Gray6 = rgb(0x091440) + t.Color.LightGray = rgb(0xf3f5f6) + t.Color.ActiveGray = rgb(0xf3f5f6) + t.Color.DeepBlue = rgb(0x091440) + t.Color.InactiveGray = rgb(0xc4cbd2) + t.Color.Black = rgb(0x000000) + t.Color.Background = argb(0x22444444) + t.Color.LightBlue = rgb(0xe4f6ff) + t.Color.Orange = rgb(0xD34A21) + t.Color.Orange2 = rgb(0xF8E8E7) + t.TextSize = unit.Sp(16) + } } -func NewTheme(fontCollection []text.FontFace, decredIcons map[string]image.Image) *Theme { +func NewTheme(fontCollection []text.FontFace, decredIcons map[string]image.Image, isDarkModeOn bool) *Theme { t := &Theme{ Shaper: text.NewCache(fontCollection), Base: material.NewTheme(fontCollection), + DarkMode: false, } - t.Color.Primary = keyblue - t.Color.Text = darkblue - t.Color.Hint = rgb(0x8997A5) - t.Color.InvText = rgb(0xffffff) - t.Color.Overlay = rgb(0x000000) - t.Color.Surface = rgb(0xffffff) - t.Color.Success = green - t.Color.Success2 = rgb(0xE1F8EF) - t.Color.Danger = rgb(0xed6d47) - t.Color.Gray = rgb(0x596D81) - t.Color.Gray1 = rgb(0xe6eaed) - t.Color.Gray2 = rgb(0x8997a5) - t.Color.Gray3 = rgb(0x3d5873) - t.Color.LightGray = rgb(0xf3f5f6) - t.Color.DeepBlue = rgb(0x091440) - t.Color.InactiveGray = rgb(0xc4cbd2) - t.Color.Black = rgb(0x000000) - t.Color.Background = argb(0x22444444) - t.Color.LightBlue = rgb(0xe4f6ff) - t.Color.Orange = rgb(0xD34A21) - t.Color.Orange2 = rgb(0xF8E8E7) - t.TextSize = unit.Sp(16) + + t.setColorMode(isDarkModeOn) t.checkBoxCheckedIcon = mustIcon(widget.NewIcon(icons.ToggleCheckBox)) t.checkBoxUncheckedIcon = mustIcon(widget.NewIcon(icons.ToggleCheckBoxOutlineBlank)) @@ -126,6 +173,10 @@ func NewTheme(fontCollection []text.FontFace, decredIcons map[string]image.Image return t } +func (t *Theme) SwitchDarkMode(isDarkModeOn bool) { + t.setColorMode(isDarkModeOn) +} + func (t *Theme) Background(gtx layout.Context, w layout.Widget) { layout.Stack{ Alignment: layout.N, diff --git a/ui/overview_page.go b/ui/overview_page.go index 28515ca5c..98b922093 100644 --- a/ui/overview_page.go +++ b/ui/overview_page.go @@ -86,6 +86,13 @@ type overviewPage struct { } func (win *Window) OverviewPage(c pageCommon) layout.Widget { + + isDarkModeOn := win.wallet.ReadBoolConfigValueForKey("isDarkModeOn") + if isDarkModeOn != win.theme.DarkMode { + win.theme.SwitchDarkMode(isDarkModeOn) + win.reloadPage(c) + } + pg := overviewPage{ theme: c.theme, tab: c.navTab, diff --git a/ui/page.go b/ui/page.go index dd5ea9555..260582bea 100644 --- a/ui/page.go +++ b/ui/page.go @@ -348,6 +348,10 @@ func (win *Window) addPages(decredIcons map[string]image.Image) { common.modalTemplate = win.LoadModalTemplates() + win.loadPage(common) +} + +func (win *Window) loadPage(common pageCommon){ win.pages = make(map[string]layout.Widget) win.pages[PageWallet] = win.WalletPage(common) win.pages[PageOverview] = win.OverviewPage(common) @@ -377,6 +381,10 @@ func (win *Window) addPages(decredIcons map[string]image.Image) { win.pages[PageTicketsList] = win.TicketPageList(common) } +func (win *Window) reloadPage(common pageCommon){ + win.loadPage(common) +} + func (page *pageCommon) fetchExchangeValue(target interface{}) error { url := "https://api.bittrex.com/v3/markets/DCR-USDT/ticker" res, err := http.Get(url) diff --git a/ui/settings_page.go b/ui/settings_page.go index 24804666d..d79e931e4 100644 --- a/ui/settings_page.go +++ b/ui/settings_page.go @@ -36,6 +36,7 @@ type settingsPage struct { confirm decredmaterial.Button cancel decredmaterial.Button + isDarkModeOn *widget.Bool spendUnconfirmed *widget.Bool startupPassword *widget.Bool beepNewBlocks *widget.Bool @@ -68,6 +69,7 @@ func (win *Window) SettingsPage(common pageCommon) layout.Widget { walletInfo: win.walletInfo, wal: common.wallet, + isDarkModeOn: new(widget.Bool), spendUnconfirmed: new(widget.Bool), startupPassword: new(widget.Bool), beepNewBlocks: new(widget.Bool), @@ -100,7 +102,7 @@ func (win *Window) SettingsPage(common pageCommon) layout.Widget { pg.chevronRightIcon.Color = color return func(gtx C) D { - pg.handle(common) + pg.handle(common, win) return pg.Layout(gtx, common) } } @@ -143,6 +145,9 @@ func (pg *settingsPage) general() layout.Widget { return func(gtx C) D { return pg.mainSection(gtx, "General", func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, + layout.Rigid(func(gtx C) D { + return pg.subSectionSwitch(gtx, "Dark mode", pg.isDarkModeOn) + }), layout.Rigid(func(gtx C) D { return pg.subSectionSwitch(gtx, "Spending unconfirmed funds", pg.spendUnconfirmed) }), @@ -380,7 +385,14 @@ func (pg *settingsPage) lineSeparator() layout.Widget { } } -func (pg *settingsPage) handle(common pageCommon) { +func (pg *settingsPage) handle(common pageCommon, win *Window) { + + if pg.isDarkModeOn.Changed() { + pg.theme.SwitchDarkMode(pg.isDarkModeOn.Value) + pg.wal.SaveConfigValueForKey("isDarkModeOn", pg.isDarkModeOn.Value) + win.reloadPage(common) + } + if pg.spendUnconfirmed.Changed() { pg.wal.SaveConfigValueForKey(dcrlibwallet.SpendUnconfirmedConfigKey, pg.spendUnconfirmed.Value) } @@ -562,6 +574,12 @@ func (pg *settingsPage) updateSettingOptions() { pg.isStartupPassword = true } + isDarkModeOn := pg.wal.ReadBoolConfigValueForKey("isDarkModeOn") + pg.isDarkModeOn.Value = false + if isDarkModeOn { + pg.isDarkModeOn.Value = true + } + isSpendUnconfirmed := pg.wal.ReadBoolConfigValueForKey(dcrlibwallet.SpendUnconfirmedConfigKey) pg.spendUnconfirmed.Value = false if isSpendUnconfirmed { diff --git a/ui/test/testapp.go b/ui/test/testapp.go index add6c465d..a9daa28d8 100644 --- a/ui/test/testapp.go +++ b/ui/test/testapp.go @@ -103,7 +103,7 @@ func CreateWindow() (*TestStruct, error) { log.Fatal(err) } - theme := decredmaterial.NewTheme(gofont.Collection(), decredIcons) + theme := decredmaterial.NewTheme(gofont.Collection(), decredIcons, true) if theme == nil { return nil, errors.New("Unexpected error while loading theme") } diff --git a/ui/transactions_page.go b/ui/transactions_page.go index 678b25490..9e566bdec 100644 --- a/ui/transactions_page.go +++ b/ui/transactions_page.go @@ -28,6 +28,7 @@ type transactionWdg struct { } type transactionsPage struct { +<<<<<<< HEAD container layout.Flex txsList layout.List walletTransactions **wallet.Transactions @@ -36,6 +37,18 @@ type transactionsPage struct { filterDirection, filterSort []decredmaterial.RadioButton toTxnDetails []*gesture.Click separator decredmaterial.Line +======= + container layout.Flex + txsList layout.List + walletTransactions **wallet.Transactions + walletTransaction **wallet.Transaction + filterSorter int + filterSortW, filterDirectionW *widget.Enum + filterDirection, filterSort []decredmaterial.RadioButton + toTxnDetails []*gesture.Click + separator decredmaterial.Line + theme *decredmaterial.Theme +>>>>>>> Implement dark mode orderDropDown *decredmaterial.DropDown txTypeDropDown *decredmaterial.DropDown @@ -49,6 +62,7 @@ func (win *Window) TransactionsPage(common pageCommon) layout.Widget { walletTransactions: &win.walletTransactions, walletTransaction: &win.walletTransaction, separator: common.theme.Separator(), + theme: common.theme, } pg.orderDropDown = common.theme.DropDown([]decredmaterial.DropDownItem{{Text: "Newest"}, {Text: "Oldest"}}, 1) diff --git a/ui/window.go b/ui/window.go index 22555df75..cb519b746 100644 --- a/ui/window.go +++ b/ui/window.go @@ -82,7 +82,7 @@ func CreateWindow(wal *wallet.Wallet, decredIcons map[string]image.Image, collec netType = wal.Net } win.window = app.NewWindow(app.Size(values.AppWidth, values.AppHeight), app.Title(fmt.Sprintf("%s (%s)", "godcr", netType))) - theme := decredmaterial.NewTheme(collection, decredIcons) + theme := decredmaterial.NewTheme(collection, decredIcons, false) if theme == nil { return nil, errors.New("Unexpected error while loading theme") } From bcb6181c10cc03438ed7e8de39cc493e5d75f557 Mon Sep 17 00:00:00 2001 From: tuhalang Date: Sat, 8 May 2021 10:47:55 +0700 Subject: [PATCH 2/7] fix go lint --- ui/compontents.go | 2 +- ui/decredmaterial/label.go | 3 ++- ui/decredmaterial/theme.go | 6 +++--- ui/page.go | 4 ++-- ui/transactions_page.go | 15 ++------------- 5 files changed, 10 insertions(+), 20 deletions(-) diff --git a/ui/compontents.go b/ui/compontents.go index d7f54d6bf..18f355cb5 100644 --- a/ui/compontents.go +++ b/ui/compontents.go @@ -336,7 +336,7 @@ func transactionRow(gtx layout.Context, common pageCommon, row TransactionRow) l status := common.theme.Body1(s) if row.transaction.Status != "confirmed" { status.Color = common.theme.Color.Gray5 - }else{ + } else { status.Color = common.theme.Color.Gray4 } status.Alignment = text.Middle diff --git a/ui/decredmaterial/label.go b/ui/decredmaterial/label.go index 823927cf2..d4a600989 100644 --- a/ui/decredmaterial/label.go +++ b/ui/decredmaterial/label.go @@ -3,9 +3,10 @@ package decredmaterial import ( + "image/color" + "gioui.org/unit" "gioui.org/widget/material" - "image/color" ) type Label struct { diff --git a/ui/decredmaterial/theme.go b/ui/decredmaterial/theme.go index f3bc5ab3a..f78df7b92 100644 --- a/ui/decredmaterial/theme.go +++ b/ui/decredmaterial/theme.go @@ -89,7 +89,7 @@ type Theme struct { DarkMode bool } -func (t *Theme) setColorMode(darkMode bool){ +func (t *Theme) setColorMode(darkMode bool) { if darkMode { t.DarkMode = true t.Color.Primary = rgb(0x57B6FF) @@ -151,8 +151,8 @@ func (t *Theme) setColorMode(darkMode bool){ func NewTheme(fontCollection []text.FontFace, decredIcons map[string]image.Image, isDarkModeOn bool) *Theme { t := &Theme{ - Shaper: text.NewCache(fontCollection), - Base: material.NewTheme(fontCollection), + Shaper: text.NewCache(fontCollection), + Base: material.NewTheme(fontCollection), DarkMode: false, } diff --git a/ui/page.go b/ui/page.go index 260582bea..19fbc798c 100644 --- a/ui/page.go +++ b/ui/page.go @@ -351,7 +351,7 @@ func (win *Window) addPages(decredIcons map[string]image.Image) { win.loadPage(common) } -func (win *Window) loadPage(common pageCommon){ +func (win *Window) loadPage(common pageCommon) { win.pages = make(map[string]layout.Widget) win.pages[PageWallet] = win.WalletPage(common) win.pages[PageOverview] = win.OverviewPage(common) @@ -381,7 +381,7 @@ func (win *Window) loadPage(common pageCommon){ win.pages[PageTicketsList] = win.TicketPageList(common) } -func (win *Window) reloadPage(common pageCommon){ +func (win *Window) reloadPage(common pageCommon) { win.loadPage(common) } diff --git a/ui/transactions_page.go b/ui/transactions_page.go index 9e566bdec..a2c8c3bcb 100644 --- a/ui/transactions_page.go +++ b/ui/transactions_page.go @@ -28,16 +28,6 @@ type transactionWdg struct { } type transactionsPage struct { -<<<<<<< HEAD - container layout.Flex - txsList layout.List - walletTransactions **wallet.Transactions - walletTransaction **wallet.Transaction - filterSorter int - filterDirection, filterSort []decredmaterial.RadioButton - toTxnDetails []*gesture.Click - separator decredmaterial.Line -======= container layout.Flex txsList layout.List walletTransactions **wallet.Transactions @@ -47,8 +37,7 @@ type transactionsPage struct { filterDirection, filterSort []decredmaterial.RadioButton toTxnDetails []*gesture.Click separator decredmaterial.Line - theme *decredmaterial.Theme ->>>>>>> Implement dark mode + theme *decredmaterial.Theme orderDropDown *decredmaterial.DropDown txTypeDropDown *decredmaterial.DropDown @@ -62,7 +51,7 @@ func (win *Window) TransactionsPage(common pageCommon) layout.Widget { walletTransactions: &win.walletTransactions, walletTransaction: &win.walletTransaction, separator: common.theme.Separator(), - theme: common.theme, + theme: common.theme, } pg.orderDropDown = common.theme.DropDown([]decredmaterial.DropDownItem{{Text: "Newest"}, {Text: "Oldest"}}, 1) From 252ce9e40174419df34b1d1a158cfa2c8d85a9f5 Mon Sep 17 00:00:00 2001 From: tuhalang Date: Wed, 12 May 2021 00:11:56 +0700 Subject: [PATCH 3/7] Fix feedback: - Remove function LableColor - Add dark mode for ticket page --- ui/compontents.go | 11 ++++++++--- ui/decredmaterial/label.go | 11 ----------- ui/tickets_page.go | 26 ++++++++++++++++++++------ 3 files changed, 28 insertions(+), 20 deletions(-) diff --git a/ui/compontents.go b/ui/compontents.go index 18f355cb5..99271cbe5 100644 --- a/ui/compontents.go +++ b/ui/compontents.go @@ -35,10 +35,14 @@ func (page pageCommon) layoutBalance(gtx layout.Context, amount string) layout.D mainText, subText := breakBalance(page.printer, amount) return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx, layout.Rigid(func(gtx C) D { - return page.theme.LabelColor(values.TextSize20, mainText, page.theme.Color.DeepBlue).Layout(gtx) + label := page.theme.Label(values.TextSize20, mainText) + label.Color = page.theme.Color.DeepBlue + return label.Layout(gtx) }), layout.Rigid(func(gtx C) D { - return page.theme.LabelColor(values.TextSize14, subText, page.theme.Color.DeepBlue).Layout(gtx) + label := page.theme.Label(values.TextSize14, subText) + label.Color = page.theme.Color.DeepBlue + return label.Layout(gtx) }), ) } @@ -71,7 +75,8 @@ func (page pageCommon) layoutUSDBalance(gtx layout.Context) layout.Dimensions { return border.Layout(gtx, func(gtx C) D { return padding.Layout(gtx, func(gtx C) D { amountDCRtoUSDString := formatUSDBalance(page.printer, page.amountDCRtoUSD) - return page.theme.LabelColor(values.TextSize14, amountDCRtoUSDString, page.theme.Color.DeepBlue).Layout(gtx) + return page.theme.Body2(amountDCRtoUSDString).Layout(gtx) + //return page.theme.LabelColor(values.TextSize14, amountDCRtoUSDString, page.theme.Color.DeepBlue).Layout(gtx) }) }) }) diff --git a/ui/decredmaterial/label.go b/ui/decredmaterial/label.go index d4a600989..b37a637cd 100644 --- a/ui/decredmaterial/label.go +++ b/ui/decredmaterial/label.go @@ -3,8 +3,6 @@ package decredmaterial import ( - "image/color" - "gioui.org/unit" "gioui.org/widget/material" ) @@ -59,15 +57,6 @@ func (t *Theme) Label(size unit.Value, txt string) Label { return Label{material.Label(t.Base, size, txt)} } -func (t *Theme) LabelColor(size unit.Value, txt string, color color.NRGBA) Label { - return t.labelWithColor(Label{material.Label(t.Base, size, txt)}, color) -} - -func (t *Theme) labelWithColor(l Label, color color.NRGBA) Label { - l.Color = color - return l -} - func (t *Theme) labelWithDefaultColor(l Label) Label { l.Color = t.Color.DeepBlue return l diff --git a/ui/tickets_page.go b/ui/tickets_page.go index 5132bf10a..b91cda5fc 100644 --- a/ui/tickets_page.go +++ b/ui/tickets_page.go @@ -212,10 +212,14 @@ func (pg *ticketPage) ticketPriceSection(gtx layout.Context, c pageCommon) layou mainText, subText := breakBalance(c.printer, pg.ticketPrice) return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx, layout.Rigid(func(gtx C) D { - return pg.th.Label(values.TextSize28, mainText).Layout(gtx) + label := pg.th.Label(values.TextSize28, mainText) + label.Color = pg.th.Color.DeepBlue + return label.Layout(gtx) }), layout.Rigid(func(gtx C) D { - return pg.th.Label(values.TextSize16, subText).Layout(gtx) + label := pg.th.Label(values.TextSize16, subText) + label.Color = pg.th.Color.DeepBlue + return label.Layout(gtx) }), ) }) @@ -253,7 +257,9 @@ func (pg *ticketPage) ticketsLiveSection(gtx layout.Context, c pageCommon) layou }), layout.Rigid(func(gtx C) D { return layout.Inset{Left: values.MarginPadding4}.Layout(gtx, func(gtx C) D { - return pg.th.Label(values.TextSize14, fmt.Sprintf("%d", item.Count)).Layout(gtx) + label := pg.th.Label(values.TextSize14, fmt.Sprintf("%d", item.Count)) + label.Color = pg.th.Color.DeepBlue + return label.Layout(gtx) }) }), ) @@ -337,9 +343,15 @@ func (pg *ticketPage) ticketActivityItemnInfo(gtx layout.Context, c pageCommon, }.Layout(gtx, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { + labelStatus := pg.th.Label(values.TextSize18, strings.Title(strings.ToLower(t.Info.Status))) + labelStatus.Color = pg.th.Color.DeepBlue + + labelDaysBehind := pg.th.Label(values.TextSize14, t.DaysBehind) + labelDaysBehind.Color = pg.th.Color.DeepBlue + return endToEndRow(gtx, - pg.th.Label(values.TextSize18, strings.Title(strings.ToLower(t.Info.Status))).Layout, - pg.th.Label(values.TextSize14, t.DaysBehind).Layout) + labelStatus.Layout, + labelDaysBehind.Layout) }), layout.Rigid(func(gtx C) D { return layout.Flex{ @@ -420,7 +432,9 @@ func (pg *ticketPage) stackingRecordSection(gtx layout.Context, c pageCommon) la return layout.Inset{Left: values.MarginPadding4}.Layout(gtx, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { - return pg.th.Label(values.TextSize16, fmt.Sprintf("%d", item.Count)).Layout(gtx) + label := pg.th.Label(values.TextSize16, fmt.Sprintf("%d", item.Count)) + label.Color = pg.th.Color.DeepBlue + return label.Layout(gtx) }), layout.Rigid(func(gtx C) D { return layout.Inset{Right: values.MarginPadding40}.Layout(gtx, func(gtx C) D { From 87fd4f7cde6c594c8cfff65ca0f6d39982502701 Mon Sep 17 00:00:00 2001 From: tuhalang Date: Thu, 13 May 2021 19:45:24 +0700 Subject: [PATCH 4/7] Fix crash app when startup - Sometimes, the application is crashed because the wallet hasn't loaded - Checking the wallet is not nil before read the config properties --- ui/overview_page.go | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/ui/overview_page.go b/ui/overview_page.go index 98b922093..9ddd4f429 100644 --- a/ui/overview_page.go +++ b/ui/overview_page.go @@ -87,12 +87,6 @@ type overviewPage struct { func (win *Window) OverviewPage(c pageCommon) layout.Widget { - isDarkModeOn := win.wallet.ReadBoolConfigValueForKey("isDarkModeOn") - if isDarkModeOn != win.theme.DarkMode { - win.theme.SwitchDarkMode(isDarkModeOn) - win.reloadPage(c) - } - pg := overviewPage{ theme: c.theme, tab: c.navTab, @@ -169,7 +163,7 @@ func (win *Window) OverviewPage(c pageCommon) layout.Widget { pg.cachedIcon = c.icons.cached return func(gtx C) D { - pg.Handler(gtx, c) + pg.Handler(gtx, c, win) return pg.Layout(gtx, c) } } @@ -646,7 +640,16 @@ func (pg *overviewPage) walletSyncBox(gtx layout.Context, inset layout.Inset, de }) } -func (pg *overviewPage) Handler(eq event.Queue, c pageCommon) { +func (pg *overviewPage) Handler(eq event.Queue, c pageCommon, win *Window) { + + if win.wallet != nil { + isDarkModeOn := win.wallet.ReadBoolConfigValueForKey("isDarkModeOn") + if isDarkModeOn != win.theme.DarkMode { + win.theme.SwitchDarkMode(isDarkModeOn) + win.reloadPage(c) + } + } + if pg.walletInfo.Synced { pg.sync.Text = pg.text.disconnect } From 4ad65f8184472f7fc9aca24b88faa223f18ff964 Mon Sep 17 00:00:00 2001 From: tuhalang Date: Sat, 15 May 2021 22:42:58 +0700 Subject: [PATCH 5/7] Fix feedback: - Fix darkmode for modals - Fix darkmode for receive address --- ui/page.go | 11 ++++++----- ui/receive_page.go | 1 + ui/settings_page.go | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/ui/page.go b/ui/page.go index 19fbc798c..bbd134c92 100644 --- a/ui/page.go +++ b/ui/page.go @@ -221,6 +221,11 @@ func (win *Window) addPages(decredIcons map[string]image.Image) { listGridIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["list_grid"])}, } + win.loadPage(ic) +} + +func (win *Window) loadPage(ic pageIcons) { + appBarNavItems := []navHandler{ { clickable: new(widget.Clickable), @@ -348,10 +353,6 @@ func (win *Window) addPages(decredIcons map[string]image.Image) { common.modalTemplate = win.LoadModalTemplates() - win.loadPage(common) -} - -func (win *Window) loadPage(common pageCommon) { win.pages = make(map[string]layout.Widget) win.pages[PageWallet] = win.WalletPage(common) win.pages[PageOverview] = win.OverviewPage(common) @@ -382,7 +383,7 @@ func (win *Window) loadPage(common pageCommon) { } func (win *Window) reloadPage(common pageCommon) { - win.loadPage(common) + win.loadPage(common.icons) } func (page *pageCommon) fetchExchangeValue(target interface{}) error { diff --git a/ui/receive_page.go b/ui/receive_page.go index 612f6bd27..d3e0d37d6 100644 --- a/ui/receive_page.go +++ b/ui/receive_page.go @@ -225,6 +225,7 @@ func (pg *receivePage) addressLayout(gtx layout.Context, c pageCommon) layout.Di return layout.Flex{Alignment: layout.Middle}.Layout(gtx, layout.Flexed(1, func(gtx C) D { pg.receiveAddress.Text = pg.addrs + pg.receiveAddress.Color = pg.theme.Color.DeepBlue pg.receiveAddress.Alignment = text.Middle pg.receiveAddress.MaxLines = 1 card.Radius = decredmaterial.CornerRadius{NE: 8, NW: 0, SE: 0, SW: 8} diff --git a/ui/settings_page.go b/ui/settings_page.go index d79e931e4..aa07b2e17 100644 --- a/ui/settings_page.go +++ b/ui/settings_page.go @@ -388,7 +388,7 @@ func (pg *settingsPage) lineSeparator() layout.Widget { func (pg *settingsPage) handle(common pageCommon, win *Window) { if pg.isDarkModeOn.Changed() { - pg.theme.SwitchDarkMode(pg.isDarkModeOn.Value) + win.theme.SwitchDarkMode(pg.isDarkModeOn.Value) pg.wal.SaveConfigValueForKey("isDarkModeOn", pg.isDarkModeOn.Value) win.reloadPage(common) } From e418236ca84d11760faa2342f4b047c243360887 Mon Sep 17 00:00:00 2001 From: tuhalang Date: Sun, 23 May 2021 19:25:10 +0700 Subject: [PATCH 6/7] Fix feedback: - Fix some texts are not readable when switch darkmode --- ui/account_details_page.go | 1 + ui/compontents.go | 18 +++++++++++------- ui/decredmaterial/votebar.go | 6 ++++++ ui/modal_templates.go | 2 +- ui/privacy_page.go | 6 +++--- ui/send_page.go | 2 +- ui/tickets_list_page.go | 2 +- ui/tickets_page.go | 4 ++-- ui/transactions_page.go | 19 +++++++++---------- ui/wallet_page.go | 2 +- 10 files changed, 36 insertions(+), 26 deletions(-) diff --git a/ui/account_details_page.go b/ui/account_details_page.go index e64898f77..0ed942045 100644 --- a/ui/account_details_page.go +++ b/ui/account_details_page.go @@ -167,6 +167,7 @@ func (pg *acctDetailsPage) accountBalanceLayout(gtx layout.Context, common *page func (pg *acctDetailsPage) acctBalLayout(gtx layout.Context, balType string, mainBalance, subBalance string, isFirst bool) layout.Dimensions { mainLabel := pg.theme.Body1(mainBalance) subLabel := pg.theme.Caption(subBalance) + subLabel.Color = pg.theme.Color.DeepBlue marginTop := values.MarginPadding16 marginLeft := values.MarginPadding35 if isFirst { diff --git a/ui/compontents.go b/ui/compontents.go index 99271cbe5..bde6ec057 100644 --- a/ui/compontents.go +++ b/ui/compontents.go @@ -30,18 +30,22 @@ const ( // layoutBalance aligns the main and sub DCR balances horizontally, putting the sub // balance at the baseline of the row. -func (page pageCommon) layoutBalance(gtx layout.Context, amount string) layout.Dimensions { +func (page pageCommon) layoutBalance(gtx layout.Context, amount string, isSwitchColor bool) layout.Dimensions { // todo: make "DCR" symbols small when there are no decimals in the balance mainText, subText := breakBalance(page.printer, amount) return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx, layout.Rigid(func(gtx C) D { label := page.theme.Label(values.TextSize20, mainText) - label.Color = page.theme.Color.DeepBlue + if isSwitchColor { + label.Color = page.theme.Color.DeepBlue + } return label.Layout(gtx) }), layout.Rigid(func(gtx C) D { label := page.theme.Label(values.TextSize14, subText) - label.Color = page.theme.Color.DeepBlue + if isSwitchColor { + label.Color = page.theme.Color.DeepBlue + } return label.Layout(gtx) }), ) @@ -113,7 +117,7 @@ func (page pageCommon) layoutTopBar(gtx layout.Context) layout.Dimensions { }), layout.Rigid(func(gtx C) D { return layout.Center.Layout(gtx, func(gtx C) D { - return page.layoutBalance(gtx, page.info.TotalBalance) + return page.layoutBalance(gtx, page.info.TotalBalance, true) }) }), layout.Rigid(func(gtx C) D { @@ -318,7 +322,7 @@ func transactionRow(gtx layout.Context, common pageCommon, row TransactionRow) l return layout.Inset{Left: values.MarginPadding16}.Layout(gtx, func(gtx C) D { return layout.Flex{Axis: layout.Vertical}.Layout(gtx, layout.Rigid(func(gtx C) D { - return common.layoutBalance(gtx, row.transaction.Balance) + return common.layoutBalance(gtx, row.transaction.Balance, true) }), layout.Rigid(func(gtx C) D { if row.showBadge { @@ -670,7 +674,7 @@ func (page *pageCommon) walletAccountLayout(gtx layout.Context, wallAcct walletA acct := page.theme.Label(values.TextSize18, wallAcct.accountName) acct.Color = page.theme.Color.Text return endToEndRow(gtx, acct.Layout, func(gtx C) D { - return page.layoutBalance(gtx, wallAcct.totalBalance) + return page.layoutBalance(gtx, wallAcct.totalBalance, true) }) }), layout.Rigid(func(gtx C) D { @@ -888,7 +892,7 @@ func ticketCard(gtx layout.Context, c pageCommon, t *wallet.Ticket) layout.Dimen return layout.Inset{ Top: values.MarginPadding16, }.Layout(gtx, func(gtx C) D { - return c.layoutBalance(gtx, t.Amount) + return c.layoutBalance(gtx, t.Amount, true) }) }), layout.Rigid(func(gtx C) D { diff --git a/ui/decredmaterial/votebar.go b/ui/decredmaterial/votebar.go index 5b5773019..147e17bba 100644 --- a/ui/decredmaterial/votebar.go +++ b/ui/decredmaterial/votebar.go @@ -30,6 +30,7 @@ type VoteBar struct { noColor color.NRGBA bgColor color.NRGBA thumbCol color.NRGBA + notifyColor color.NRGBA yesLabel Label noLabel Label @@ -69,6 +70,7 @@ func (t *Theme) VoteBar(infoIcon, legendIcon *widget.Icon) VoteBar { legendIcon: legendIcon, thumbCol: t.Color.InactiveGray, bgColor: t.Color.Gray1, + notifyColor: t.Color.Gray4, passTooltipLabel: t.Caption(""), totalVotesTooltipLabel: t.Caption("Total votes"), quorumRequirementTooltipLabel: t.Caption("Quorum requirement"), @@ -281,6 +283,10 @@ func (v *VoteBar) layoutInfo(gtx C) D { func (v *VoteBar) layoutInfoTooltip(gtx C, rect image.Rectangle) { inset := layout.Inset{Top: unit.Dp(20), Left: unit.Dp(-180)} + v.totalVotesTooltipLabel.Color = v.notifyColor + v.totalVotesCountLabel.Color = v.notifyColor + v.quorumRequirementTooltipLabel.Color = v.notifyColor + v.quorumRequirementCountLabel.Color = v.notifyColor v.quorumTooltip.Layout(gtx, rect, inset, func(gtx C) D { gtx.Constraints.Min.X = gtx.Px(unit.Dp(180)) gtx.Constraints.Max.X = gtx.Px(unit.Dp(180)) diff --git a/ui/modal_templates.go b/ui/modal_templates.go index 444a9084a..069bfb7a8 100644 --- a/ui/modal_templates.go +++ b/ui/modal_templates.go @@ -142,7 +142,7 @@ func (m *ModalTemplate) createNewAccount() []layout.Widget { }), layout.Rigid(func(gtx C) D { info := m.th.Body1(" cannot ") - info.Color = m.th.Color.Black + info.Color = m.th.Color.DeepBlue return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D { return info.Layout(gtx) }) diff --git a/ui/privacy_page.go b/ui/privacy_page.go index bcda1d250..bc8ebb123 100644 --- a/ui/privacy_page.go +++ b/ui/privacy_page.go @@ -232,9 +232,9 @@ func (pg *privacyPage) mixerInfoLayout(gtx layout.Context, c *pageCommon) layout }), layout.Rigid(func(gtx C) D { if c.wallet.IsAccountMixerActive(c.info.Wallets[*c.selectedWallet].ID) { - return c.layoutBalance(gtx, unmixedBalance) + return c.layoutBalance(gtx, unmixedBalance, true) } - return c.layoutBalance(gtx, unmixedBalance) + return c.layoutBalance(gtx, unmixedBalance, true) }), ) }), @@ -253,7 +253,7 @@ func (pg *privacyPage) mixerInfoLayout(gtx layout.Context, c *pageCommon) layout return t.Layout(gtx) }), layout.Rigid(func(gtx C) D { - return c.layoutBalance(gtx, mixedBalance) + return c.layoutBalance(gtx, mixedBalance, true) }), ) }), diff --git a/ui/send_page.go b/ui/send_page.go index e27727c53..fc8c16070 100644 --- a/ui/send_page.go +++ b/ui/send_page.go @@ -477,7 +477,7 @@ func (pg *sendPage) confirmationModal(gtx layout.Context, common pageCommon) lay layout.Rigid(func(gtx C) D { return layout.Flex{}.Layout(gtx, layout.Rigid(func(gtx C) D { - return common.layoutBalance(gtx, pg.sendAmountDCR) + return common.layoutBalance(gtx, pg.sendAmountDCR, true) }), layout.Flexed(1, func(gtx C) D { if pg.usdExchangeSet { diff --git a/ui/tickets_list_page.go b/ui/tickets_list_page.go index 2cac107c1..48b7421e5 100644 --- a/ui/tickets_list_page.go +++ b/ui/tickets_list_page.go @@ -234,7 +234,7 @@ func (pg *ticketPageList) ticketListLayout(gtx layout.Context, c pageCommon, tic layout.Rigid(func(gtx C) D { dtime := c.theme.Label(values.TextSize14, tickets[index].DateTime) dtime.Color = c.theme.Color.Gray2 - return endToEndRow(gtx, func(gtx C) D { return c.layoutBalance(gtx, tickets[index].Amount) }, dtime.Layout) + return endToEndRow(gtx, func(gtx C) D { return c.layoutBalance(gtx, tickets[index].Amount, true) }, dtime.Layout) }), layout.Rigid(func(gtx C) D { l := func(gtx C) layout.Dimensions { diff --git a/ui/tickets_page.go b/ui/tickets_page.go index b91cda5fc..c50651c20 100644 --- a/ui/tickets_page.go +++ b/ui/tickets_page.go @@ -476,7 +476,7 @@ func (pg *ticketPage) stackingRecordSection(gtx layout.Context, c pageCommon) la return ic.Layout(gtx) }), layout.Rigid(func(gtx C) D { - return c.layoutBalance(gtx, "16.5112316") + return c.layoutBalance(gtx, "16.5112316", false) }), ) }), @@ -503,7 +503,7 @@ func (pg *ticketPage) purchaseModal(gtx layout.Context, c pageCommon) layout.Dim }), layout.Rigid(func(gtx C) D { return layout.Inset{Top: values.MarginPadding8}.Layout(gtx, func(gtx C) D { - return c.layoutBalance(gtx, pg.ticketPrice) + return c.layoutBalance(gtx, pg.ticketPrice, true) }) }), ) diff --git a/ui/transactions_page.go b/ui/transactions_page.go index a2c8c3bcb..eb29741e5 100644 --- a/ui/transactions_page.go +++ b/ui/transactions_page.go @@ -28,16 +28,15 @@ type transactionWdg struct { } type transactionsPage struct { - container layout.Flex - txsList layout.List - walletTransactions **wallet.Transactions - walletTransaction **wallet.Transaction - filterSorter int - filterSortW, filterDirectionW *widget.Enum - filterDirection, filterSort []decredmaterial.RadioButton - toTxnDetails []*gesture.Click - separator decredmaterial.Line - theme *decredmaterial.Theme + container layout.Flex + txsList layout.List + walletTransactions **wallet.Transactions + walletTransaction **wallet.Transaction + filterSorter int + filterDirection, filterSort []decredmaterial.RadioButton + toTxnDetails []*gesture.Click + separator decredmaterial.Line + theme *decredmaterial.Theme orderDropDown *decredmaterial.DropDown txTypeDropDown *decredmaterial.DropDown diff --git a/ui/wallet_page.go b/ui/wallet_page.go index 311cdd382..84e9c6a75 100644 --- a/ui/wallet_page.go +++ b/ui/wallet_page.go @@ -715,7 +715,7 @@ func (pg *walletPage) walletAccountsLayout(gtx layout.Context, name, totalBal, s }), layout.Flexed(1, func(gtx C) D { return layout.E.Layout(gtx, func(gtx C) D { - return common.layoutBalance(gtx, totalBal) + return common.layoutBalance(gtx, totalBal, true) }) }), ) From 3bf0ffc648429e72a97a9b339690557866735d88 Mon Sep 17 00:00:00 2001 From: tuhalang Date: Tue, 25 May 2021 20:25:41 +0700 Subject: [PATCH 7/7] Remove redundant comments and function --- ui/compontents.go | 1 - ui/overview_page.go | 2 +- ui/page.go | 4 ---- ui/settings_page.go | 2 +- 4 files changed, 2 insertions(+), 7 deletions(-) diff --git a/ui/compontents.go b/ui/compontents.go index bde6ec057..140d22194 100644 --- a/ui/compontents.go +++ b/ui/compontents.go @@ -80,7 +80,6 @@ func (page pageCommon) layoutUSDBalance(gtx layout.Context) layout.Dimensions { return padding.Layout(gtx, func(gtx C) D { amountDCRtoUSDString := formatUSDBalance(page.printer, page.amountDCRtoUSD) return page.theme.Body2(amountDCRtoUSDString).Layout(gtx) - //return page.theme.LabelColor(values.TextSize14, amountDCRtoUSDString, page.theme.Color.DeepBlue).Layout(gtx) }) }) }) diff --git a/ui/overview_page.go b/ui/overview_page.go index 9ddd4f429..16d2b1e30 100644 --- a/ui/overview_page.go +++ b/ui/overview_page.go @@ -646,7 +646,7 @@ func (pg *overviewPage) Handler(eq event.Queue, c pageCommon, win *Window) { isDarkModeOn := win.wallet.ReadBoolConfigValueForKey("isDarkModeOn") if isDarkModeOn != win.theme.DarkMode { win.theme.SwitchDarkMode(isDarkModeOn) - win.reloadPage(c) + win.loadPage(c.icons) } } diff --git a/ui/page.go b/ui/page.go index bbd134c92..8e23a3237 100644 --- a/ui/page.go +++ b/ui/page.go @@ -382,10 +382,6 @@ func (win *Window) loadPage(ic pageIcons) { win.pages[PageTicketsList] = win.TicketPageList(common) } -func (win *Window) reloadPage(common pageCommon) { - win.loadPage(common.icons) -} - func (page *pageCommon) fetchExchangeValue(target interface{}) error { url := "https://api.bittrex.com/v3/markets/DCR-USDT/ticker" res, err := http.Get(url) diff --git a/ui/settings_page.go b/ui/settings_page.go index aa07b2e17..f12956c73 100644 --- a/ui/settings_page.go +++ b/ui/settings_page.go @@ -390,7 +390,7 @@ func (pg *settingsPage) handle(common pageCommon, win *Window) { if pg.isDarkModeOn.Changed() { win.theme.SwitchDarkMode(pg.isDarkModeOn.Value) pg.wal.SaveConfigValueForKey("isDarkModeOn", pg.isDarkModeOn.Value) - win.reloadPage(common) + win.loadPage(common.icons) } if pg.spendUnconfirmed.Changed() {