~eliasnaur/gio-example

a7bf96f68a745faccba865ff26f987c585e9da08 — Chris Waldon 7 months ago 8d7e983
gio-extras/materials: update example with palette switching

This adds a switch that can change the materials example program's
palette. This also updates the example to use the latest materials API.

Signed-off-by: Chris Waldon <christopher.waldon.dev@gmail.com>
3 files changed, 63 insertions(+), 19 deletions(-)

M gio-extras/materials/main.go
M go.mod
M go.sum
M gio-extras/materials/main.go => gio-extras/materials/main.go +57 -13
@@ 13,6 13,7 @@ import (
	"gioui.org/io/system"
	"gioui.org/layout"
	"gioui.org/op"
	"gioui.org/op/paint"
	"gioui.org/unit"
	"gioui.org/widget"
	"gioui.org/widget/material"


@@ 252,12 253,14 @@ const (
)

func LayoutAboutPage(gtx C) D {
	th := *th
	th.Palette = currentAccent
	return layout.Flex{
		Alignment: layout.Middle,
		Axis:      layout.Vertical,
	}.Layout(gtx,
		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
			return inset.Layout(gtx, material.Body1(th, `This library implements material design components from https://material.io using https://gioui.org.
			return inset.Layout(gtx, material.Body1(&th, `This library implements material design components from https://material.io using https://gioui.org.

Materials (this library) would not be possible without the incredible work of Elias Naur and the Gio community. Materials is maintained by Chris Waldon.



@@ 267,20 270,30 @@ If you like this library and work like it, please consider sponsoring Elias and/
		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
			return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
				layout.Flexed(settingDetailsColumnWidth, func(gtx C) D {
					return inset.Layout(gtx, material.Body1(th, "Elias Naur can be sponsored on GitHub at "+sponsorEliasURL).Layout)
					return inset.Layout(gtx, material.Body1(&th, "Try another theme:").Layout)
				}),
				layout.Flexed(settingNameColumnWidth, func(gtx C) D {
					return inset.Layout(gtx, material.Switch(&th, &alternatePalette).Layout)
				}),
			)
		}),
		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
			return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
				layout.Flexed(settingDetailsColumnWidth, func(gtx C) D {
					return inset.Layout(gtx, material.Body1(&th, "Elias Naur can be sponsored on GitHub at "+sponsorEliasURL).Layout)
				}),
				layout.Flexed(settingNameColumnWidth, func(gtx C) D {
					if eliasCopyButton.Clicked() {
						clipboardRequests <- sponsorEliasURL
					}
					return inset.Layout(gtx, material.Button(th, &eliasCopyButton, "Copy Sponsorship URL").Layout)
					return inset.Layout(gtx, material.Button(&th, &eliasCopyButton, "Copy Sponsorship URL").Layout)
				}),
			)
		}),
		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
			return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
				layout.Flexed(settingDetailsColumnWidth, func(gtx C) D {
					return inset.Layout(gtx, material.Body1(th, "Chris Waldon can be sponsored on GitHub at "+sponsorChrisURLGitHub+" and on Liberapay at "+sponsorChrisURLLiberapay).Layout)
					return inset.Layout(gtx, material.Body1(&th, "Chris Waldon can be sponsored on GitHub at "+sponsorChrisURLGitHub+" and on Liberapay at "+sponsorChrisURLLiberapay).Layout)
				}),
				layout.Flexed(settingNameColumnWidth, func(gtx C) D {
					if chrisCopyButtonGH.Clicked() {


@@ 291,8 304,8 @@ If you like this library and work like it, please consider sponsoring Elias and/
					}
					return inset.Layout(gtx, func(gtx C) D {
						return layout.Flex{}.Layout(gtx,
							layout.Flexed(.5, material.Button(th, &chrisCopyButtonGH, "Copy GitHub URL").Layout),
							layout.Flexed(.5, material.Button(th, &chrisCopyButtonLP, "Copy Liberapay URL").Layout),
							layout.Flexed(.5, material.Button(&th, &chrisCopyButtonGH, "Copy GitHub URL").Layout),
							layout.Flexed(.5, material.Button(&th, &chrisCopyButtonLP, "Copy Liberapay URL").Layout),
						)
					})
				}),


@@ 458,13 471,35 @@ var (
		Duration: time.Millisecond * 100,
		State:    materials.Invisible,
	}
	nav      = materials.NewNav(th, "Navigation Drawer", "This is an example.")
	nav      = materials.NewNav("Navigation Drawer", "This is an example.")
	modalNav = materials.ModalNavFrom(&nav, modal)

	bar = materials.NewAppBar(th, modal)
	bar = materials.NewAppBar(modal)

	inset = layout.UniformInset(unit.Dp(8))
	th    = material.NewTheme(gofont.Collection())
	inset              = layout.UniformInset(unit.Dp(8))
	th                 = material.NewTheme(gofont.Collection())
	lightPalette       = th.Palette
	lightPaletteAccent = func() material.Palette {
		out := th.Palette
		out.ContrastBg = color.NRGBA{A: 0xff, R: 0x9e, G: 0x9d, B: 0x24}
		return out
	}()
	altPalette = func() material.Palette {
		out := th.Palette
		out.Bg = color.NRGBA{R: 0xff, G: 0xfb, B: 0xe6, A: 0xff}
		out.Fg = color.NRGBA{A: 0xff}
		out.ContrastBg = color.NRGBA{R: 0x35, G: 0x69, B: 0x59, A: 0xff}
		return out
	}()
	altPaletteAccent = func() material.Palette {
		out := th.Palette
		out.Bg = color.NRGBA{R: 0xff, G: 0xfb, B: 0xe6, A: 0xff}
		out.Fg = color.NRGBA{A: 0xff}
		out.ContrastBg = color.NRGBA{R: 0xfd, G: 0x55, B: 0x23, A: 0xff}
		out.ContrastFg = out.Fg
		return out
	}()
	currentAccent material.Palette = lightPaletteAccent

	heartBtn, plusBtn, exampleOverflowState               widget.Clickable
	red, green, blue                                      widget.Clickable


@@ 473,6 508,7 @@ var (
	bottomBar                                             widget.Bool
	customNavIcon                                         widget.Bool
	nonModalDrawer                                        widget.Bool
	alternatePalette                                      widget.Bool
	favorited                                             bool
	inputAlignment                                        layout.Alignment
	inputAlignmentEnum                                    widget.Enum


@@ 596,11 632,19 @@ func loop(w *app.Window) error {
						log.Printf("Overflow action selected: %v", event)
					}
				}
				if alternatePalette.Value {
					th.Palette = altPalette
					currentAccent = altPaletteAccent
				} else {
					th.Palette = lightPalette
					currentAccent = lightPaletteAccent
				}
				if nav.NavDestinationChanged() {
					page := pages[nav.CurrentNavDestination().(int)]
					bar.Title = page.Name
					bar.SetActions(page.Actions, page.Overflow)
				}
				paint.Fill(gtx.Ops, th.Palette.Bg)
				layout.Inset{
					Top:    e.Insets.Top,
					Bottom: e.Insets.Bottom,


@@ 611,7 655,7 @@ func loop(w *app.Window) error {
						return layout.Flex{}.Layout(gtx,
							layout.Rigid(func(gtx layout.Context) layout.Dimensions {
								gtx.Constraints.Max.X /= 3
								return nav.Layout(gtx, &navAnim)
								return nav.Layout(gtx, th, &navAnim)
							}),
							layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
								page := &pages[nav.CurrentNavDestination().(int)]


@@ 624,7 668,7 @@ func loop(w *app.Window) error {
						)
					})
					bar := layout.Rigid(func(gtx layout.Context) layout.Dimensions {
						return bar.Layout(gtx)
						return bar.Layout(gtx, th)
					})
					flex := layout.Flex{Axis: layout.Vertical}
					if bottomBar.Value {


@@ 632,7 676,7 @@ func loop(w *app.Window) error {
					} else {
						flex.Layout(gtx, bar, content)
					}
					modal.Layout(gtx)
					modal.Layout(gtx, th)
					return layout.Dimensions{Size: gtx.Constraints.Max}
				})
				e.Frame(gtx.Ops)

M go.mod => go.mod +2 -2
@@ 3,10 3,10 @@ module gioui.org/example
go 1.13

require (
	gioui.org v0.0.0-20201211192434-745bb949bb45
	gioui.org v0.0.0-20201219144351-00c4a53036ad
	git.sr.ht/~whereswaldon/colorpicker v0.0.0-20201207220634-905cd7cc7248
	git.sr.ht/~whereswaldon/haptic v0.0.0-20201207220958-78675dee81dd
	git.sr.ht/~whereswaldon/materials v0.0.0-20201212021906-748774a2ad9b
	git.sr.ht/~whereswaldon/materials v0.0.0-20201220015048-3f4fb49d1fd9
	git.sr.ht/~whereswaldon/niotify v0.0.3
	git.sr.ht/~whereswaldon/outlay v0.0.0-20201207220906-cbe824700857
	git.sr.ht/~whereswaldon/scroll v0.0.0-20201208022259-cc815a044b0b

M go.sum => go.sum +4 -4
@@ 2,14 2,14 @@ cloud.google.com/go v0.34.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMT
dmitri.shuralyov.com/gpu/mtl v0.0.0-20190408044501-666a987793e9/go.mod h1:H6x//7gZCb22OMCxBHrMx7a5I7Hp++hsVxbQ4BYO7hU=
gioui.org v0.0.0-20200619180744-e2f3bbdfc367/go.mod h1:jiUwifN9cRl/zmco43aAqh0aV+s9GbhG13KcD+gEpkU=
gioui.org v0.0.0-20201206220452-acc3f704e478/go.mod h1:Y+uS7hHMvku1Q+ooaoq6fYD5B2LGoT8JtFgvmYmRzTw=
gioui.org v0.0.0-20201211192434-745bb949bb45 h1:4g9VJg+Rt/lYUuPQMcSXsOM8KTU3/twXLS1nHtvP0XA=
gioui.org v0.0.0-20201211192434-745bb949bb45/go.mod h1:Y+uS7hHMvku1Q+ooaoq6fYD5B2LGoT8JtFgvmYmRzTw=
gioui.org v0.0.0-20201219144351-00c4a53036ad h1:ajb72/J/e8VXgBEThY0+wtlOm6tsOhu7MnmnQEYyO/U=
gioui.org v0.0.0-20201219144351-00c4a53036ad/go.mod h1:Y+uS7hHMvku1Q+ooaoq6fYD5B2LGoT8JtFgvmYmRzTw=
git.sr.ht/~whereswaldon/colorpicker v0.0.0-20201207220634-905cd7cc7248 h1:sI70yHfHsuzyAL72ikrsOecjRT3dgQw9rCCbFd/goDA=
git.sr.ht/~whereswaldon/colorpicker v0.0.0-20201207220634-905cd7cc7248/go.mod h1:6dPWP8F87bsIhQuwg0l5hH0TSDyk414e1xe3q+8BUho=
git.sr.ht/~whereswaldon/haptic v0.0.0-20201207220958-78675dee81dd h1:xTijdESZL/kM3nS7v/N1yJ/X8eInbsyqDLOz9ZFHpsE=
git.sr.ht/~whereswaldon/haptic v0.0.0-20201207220958-78675dee81dd/go.mod h1:lFvegCF1P7IXfv5FpnnvKFdoAQWTgJZhx8aWOBgE0yg=
git.sr.ht/~whereswaldon/materials v0.0.0-20201212021906-748774a2ad9b h1:XDu43OWpqnqDH/IrnU7kmxHzpLZp5bMu2aGptPlr+Nw=
git.sr.ht/~whereswaldon/materials v0.0.0-20201212021906-748774a2ad9b/go.mod h1:T+qQ+uWh7paSXI7QzQViqUPnxd+axqH6Wn9JG5sxiWY=
git.sr.ht/~whereswaldon/materials v0.0.0-20201220015048-3f4fb49d1fd9 h1:rb+UW4XloZFJvW022LJ++VyDRilIAcgEJbBLX3xtXd4=
git.sr.ht/~whereswaldon/materials v0.0.0-20201220015048-3f4fb49d1fd9/go.mod h1:evzscth58GGa3fzjGHmL2aR//0YLi52UfgfyTGFpMCM=
git.sr.ht/~whereswaldon/niotify v0.0.3 h1:EWRqPOzqTLU92A9h207LkS/U/nQxuawJ0PF7UEDApi0=
git.sr.ht/~whereswaldon/niotify v0.0.3/go.mod h1:itJ9vAQqq8+liURizx7mAdIY4o8gRDF6SAVfswYVg1U=
git.sr.ht/~whereswaldon/outlay v0.0.0-20201207220906-cbe824700857 h1:Sc+1cZRrwGyiBYgqIto5OlK+RTea1T7FYmZj+JC6RZI=