Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement dark mode #401

Merged
merged 7 commits into from May 25, 2021
Merged

Implement dark mode #401

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
64e7f3e
Implement dark mode
tuhalang May 8, 2021
bcb6181
fix go lint
tuhalang May 8, 2021
252ce9e
Fix feedback:
tuhalang May 11, 2021
87fd4f7
Fix crash app when startup
tuhalang May 13, 2021
4ad65f8
Fix feedback:
tuhalang May 15, 2021
e418236
Fix feedback:
tuhalang May 23, 2021
3bf0ffc
Remove redundant comments and function
tuhalang May 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/account_details_page.go
View file
Open in desktop
Expand Up @@ -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 {
Expand Down
37 changes: 25 additions & 12 deletions ui/compontents.go
View file
Open in desktop
Expand Up @@ -30,15 +30,23 @@ 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 {
return page.theme.Label(values.TextSize20, mainText).Layout(gtx)
label := page.theme.Label(values.TextSize20, mainText)
if isSwitchColor {
label.Color = page.theme.Color.DeepBlue
}
return label.Layout(gtx)
Comment on lines +38 to +42
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the colour for the text being done specifically here, shouldn't it be affected like other text colours in the app?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the text in here alway display black color independent dark or light mode
image

}),
layout.Rigid(func(gtx C) D {
return page.theme.Label(values.TextSize14, subText).Layout(gtx)
label := page.theme.Label(values.TextSize14, subText)
if isSwitchColor {
label.Color = page.theme.Color.DeepBlue
}
return label.Layout(gtx)
}),
)
}
Expand All @@ -60,7 +68,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,
Expand All @@ -71,7 +79,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.Label(values.TextSize14, amountDCRtoUSDString).Layout(gtx)
return page.theme.Body2(amountDCRtoUSDString).Layout(gtx)
//return page.theme.LabelColor(values.TextSize14, amountDCRtoUSDString, page.theme.Color.DeepBlue).Layout(gtx)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove redundant comments

})
})
})
Expand Down Expand Up @@ -108,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 {
Expand Down Expand Up @@ -178,7 +187,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 {
Expand Down Expand Up @@ -221,7 +230,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
}
Expand Down Expand Up @@ -313,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 {
Expand All @@ -334,7 +343,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)
})
Expand Down Expand Up @@ -661,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 {
Expand Down Expand Up @@ -879,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 {
Expand Down
101 changes: 76 additions & 25 deletions ui/decredmaterial/theme.go
View file
Open in desktop
Expand Up @@ -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
Expand All @@ -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),
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))
Expand All @@ -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,
Expand Down
6 changes: 6 additions & 0 deletions ui/decredmaterial/votebar.go
View file
Open in desktop
Expand Up @@ -30,6 +30,7 @@ type VoteBar struct {
noColor color.NRGBA
bgColor color.NRGBA
thumbCol color.NRGBA
notifyColor color.NRGBA

yesLabel Label
noLabel Label
Expand Down Expand Up @@ -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"),
Expand Down Expand Up @@ -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))
Expand Down
2 changes: 1 addition & 1 deletion ui/modal_templates.go
View file
Open in desktop
Expand Up @@ -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)
})
Expand Down
14 changes: 12 additions & 2 deletions ui/overview_page.go
View file
Open in desktop
Expand Up @@ -86,6 +86,7 @@ type overviewPage struct {
}

func (win *Window) OverviewPage(c pageCommon) layout.Widget {

pg := overviewPage{
theme: c.theme,
tab: c.navTab,
Expand Down Expand Up @@ -162,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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You shouldn't need to pass the window struct to the handler method. It seems you're trying to call the reload method from the handler after toggling the dark mode option. Is there a reason you need to re-initialize the icons and pages after toggling the dark mode option?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, i need re-initialize pages after toggling the dark mode option.

return pg.Layout(gtx, c)
}
}
Expand Down Expand Up @@ -639,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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this method called in the overview and settings page. Shouldn't it be called just once from the settings page?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I called it in the settings page to handle the button click event dark mode. In the overview page because it is the first page loaded when app startup, i can read config from the wallet in this page and switch to the dark mode.

win.reloadPage(c)
}
}

if pg.walletInfo.Synced {
pg.sync.Text = pg.text.disconnect
}
Expand Down
9 changes: 9 additions & 0 deletions ui/page.go
View file
Open in desktop
Expand Up @@ -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),
Expand Down Expand Up @@ -377,6 +382,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.icons)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a redundant wrapper for the loadPage method.


func (page *pageCommon) fetchExchangeValue(target interface{}) error {
url := "https://api.bittrex.com/v3/markets/DCR-USDT/ticker"
res, err := http.Get(url)
Expand Down
6 changes: 3 additions & 3 deletions ui/privacy_page.go
View file
Open in desktop
Expand Up @@ -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)
}),
)
}),
Expand All @@ -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)
}),
)
}),
Expand Down
1 change: 1 addition & 0 deletions ui/receive_page.go
View file
Open in desktop
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion ui/send_page.go
View file
Open in desktop
Expand Up @@ -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 {
Expand Down