mirror of
https://git.sr.ht/~eliasnaur/gio
synced 2026-07-06 18:05:35 +00:00
material: make theme constructors stand-alone functions
The multitude of widget methods on Theme is unnecessary coupling in that all possible widgets either have to be included in package material, or be different than 3rd party widgets: var th *Theme // Core widget, calling a method on Theme. th.Button(...).Layout(...) // 3rd party widget, calling a function taking a Theme. datepicker.New(th, ...).Layout(...) Another reason for the Theme methods was to enable a poor man's theme replacement, so that you could use the same code for compatible themes. For example, mat.Button(...).Layout(...) would not need to change if the type of mat changed, as long as the new type had a compatible method Button. However, that point misses the fact that the mat variable had to be declared somewhere, naming the theme package: var mat *material.Theme (or, say, *cocoa.Theme) A better and complete way to replace a theme is to use import renaming. For example, to replace the material theme with a hypothetical Windows theme, replace import theme "gioui.org/widget/material" with import theme "github.com/somebody/windows This change moves all Theme widget methods to be standalone functions, and renames the widget style types accordingly. For example, instead of the method func (t *Theme) Button(...) Button there is now a function func Button(t *Theme, ...) ButtonStyle Signed-off-by: Elias Naur <mail@eliasnaur.com>
This commit is contained in:
+20
-20
@@ -17,7 +17,7 @@ import (
|
|||||||
"gioui.org/widget"
|
"gioui.org/widget"
|
||||||
)
|
)
|
||||||
|
|
||||||
type Button struct {
|
type ButtonStyle struct {
|
||||||
Text string
|
Text string
|
||||||
// Color is the text color.
|
// Color is the text color.
|
||||||
Color color.RGBA
|
Color color.RGBA
|
||||||
@@ -29,14 +29,14 @@ type Button struct {
|
|||||||
shaper text.Shaper
|
shaper text.Shaper
|
||||||
}
|
}
|
||||||
|
|
||||||
type ButtonLayout struct {
|
type ButtonLayoutStyle struct {
|
||||||
Background color.RGBA
|
Background color.RGBA
|
||||||
Color color.RGBA
|
Color color.RGBA
|
||||||
CornerRadius unit.Value
|
CornerRadius unit.Value
|
||||||
Inset layout.Inset
|
Inset layout.Inset
|
||||||
}
|
}
|
||||||
|
|
||||||
type IconButton struct {
|
type IconButtonStyle struct {
|
||||||
Background color.RGBA
|
Background color.RGBA
|
||||||
Color color.RGBA
|
Color color.RGBA
|
||||||
Icon *widget.Icon
|
Icon *widget.Icon
|
||||||
@@ -45,42 +45,42 @@ type IconButton struct {
|
|||||||
Inset layout.Inset
|
Inset layout.Inset
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) Button(txt string) Button {
|
func Button(th *Theme, txt string) ButtonStyle {
|
||||||
return Button{
|
return ButtonStyle{
|
||||||
Text: txt,
|
Text: txt,
|
||||||
Color: rgb(0xffffff),
|
Color: rgb(0xffffff),
|
||||||
CornerRadius: unit.Dp(4),
|
CornerRadius: unit.Dp(4),
|
||||||
Background: t.Color.Primary,
|
Background: th.Color.Primary,
|
||||||
TextSize: t.TextSize.Scale(14.0 / 16.0),
|
TextSize: th.TextSize.Scale(14.0 / 16.0),
|
||||||
Inset: layout.Inset{
|
Inset: layout.Inset{
|
||||||
Top: unit.Dp(10), Bottom: unit.Dp(10),
|
Top: unit.Dp(10), Bottom: unit.Dp(10),
|
||||||
Left: unit.Dp(12), Right: unit.Dp(12),
|
Left: unit.Dp(12), Right: unit.Dp(12),
|
||||||
},
|
},
|
||||||
shaper: t.Shaper,
|
shaper: th.Shaper,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) ButtonLayout() ButtonLayout {
|
func ButtonLayout(th *Theme) ButtonLayoutStyle {
|
||||||
return ButtonLayout{
|
return ButtonLayoutStyle{
|
||||||
Background: t.Color.Primary,
|
Background: th.Color.Primary,
|
||||||
Color: t.Color.InvText,
|
Color: th.Color.InvText,
|
||||||
CornerRadius: unit.Dp(4),
|
CornerRadius: unit.Dp(4),
|
||||||
Inset: layout.UniformInset(unit.Dp(12)),
|
Inset: layout.UniformInset(unit.Dp(12)),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) IconButton(icon *widget.Icon) IconButton {
|
func IconButton(th *Theme, icon *widget.Icon) IconButtonStyle {
|
||||||
return IconButton{
|
return IconButtonStyle{
|
||||||
Background: t.Color.Primary,
|
Background: th.Color.Primary,
|
||||||
Color: t.Color.InvText,
|
Color: th.Color.InvText,
|
||||||
Icon: icon,
|
Icon: icon,
|
||||||
Size: unit.Dp(56),
|
Size: unit.Dp(56),
|
||||||
Padding: unit.Dp(16),
|
Padding: unit.Dp(16),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (b Button) Layout(gtx *layout.Context, button *widget.Button) {
|
func (b ButtonStyle) Layout(gtx *layout.Context, button *widget.Button) {
|
||||||
ButtonLayout{
|
ButtonLayoutStyle{
|
||||||
Background: b.Background,
|
Background: b.Background,
|
||||||
CornerRadius: b.CornerRadius,
|
CornerRadius: b.CornerRadius,
|
||||||
Color: b.Color,
|
Color: b.Color,
|
||||||
@@ -90,7 +90,7 @@ func (b Button) Layout(gtx *layout.Context, button *widget.Button) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
func (b ButtonLayout) Layout(gtx *layout.Context, button *widget.Button, w layout.Widget) {
|
func (b ButtonLayoutStyle) Layout(gtx *layout.Context, button *widget.Button, w layout.Widget) {
|
||||||
hmin := gtx.Constraints.Width.Min
|
hmin := gtx.Constraints.Width.Min
|
||||||
vmin := gtx.Constraints.Height.Min
|
vmin := gtx.Constraints.Height.Min
|
||||||
layout.Stack{Alignment: layout.Center}.Layout(gtx,
|
layout.Stack{Alignment: layout.Center}.Layout(gtx,
|
||||||
@@ -123,7 +123,7 @@ func (b ButtonLayout) Layout(gtx *layout.Context, button *widget.Button, w layou
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (b IconButton) Layout(gtx *layout.Context, button *widget.Button) {
|
func (b IconButtonStyle) Layout(gtx *layout.Context, button *widget.Button) {
|
||||||
layout.Stack{Alignment: layout.Center}.Layout(gtx,
|
layout.Stack{Alignment: layout.Center}.Layout(gtx,
|
||||||
layout.Expanded(func() {
|
layout.Expanded(func() {
|
||||||
size := gtx.Constraints.Width.Min
|
size := gtx.Constraints.Width.Min
|
||||||
|
|||||||
+10
-10
@@ -8,26 +8,26 @@ import (
|
|||||||
"gioui.org/widget"
|
"gioui.org/widget"
|
||||||
)
|
)
|
||||||
|
|
||||||
type CheckBox struct {
|
type CheckBoxStyle struct {
|
||||||
checkable
|
checkable
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) CheckBox(label string) CheckBox {
|
func CheckBox(th *Theme, label string) CheckBoxStyle {
|
||||||
return CheckBox{
|
return CheckBoxStyle{
|
||||||
checkable{
|
checkable{
|
||||||
Label: label,
|
Label: label,
|
||||||
Color: t.Color.Text,
|
Color: th.Color.Text,
|
||||||
IconColor: t.Color.Primary,
|
IconColor: th.Color.Primary,
|
||||||
TextSize: t.TextSize.Scale(14.0 / 16.0),
|
TextSize: th.TextSize.Scale(14.0 / 16.0),
|
||||||
Size: unit.Dp(26),
|
Size: unit.Dp(26),
|
||||||
shaper: t.Shaper,
|
shaper: th.Shaper,
|
||||||
checkedStateIcon: t.checkBoxCheckedIcon,
|
checkedStateIcon: th.checkBoxCheckedIcon,
|
||||||
uncheckedStateIcon: t.checkBoxUncheckedIcon,
|
uncheckedStateIcon: th.checkBoxUncheckedIcon,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (c CheckBox) Layout(gtx *layout.Context, checkBox *widget.CheckBox) {
|
func (c CheckBoxStyle) Layout(gtx *layout.Context, checkBox *widget.CheckBox) {
|
||||||
c.layout(gtx, checkBox.Checked(gtx))
|
c.layout(gtx, checkBox.Checked(gtx))
|
||||||
checkBox.Layout(gtx)
|
checkBox.Layout(gtx)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,12 +22,12 @@
|
|||||||
//
|
//
|
||||||
// theme := material.NewTheme(...)
|
// theme := material.NewTheme(...)
|
||||||
//
|
//
|
||||||
// th.Button("Click me!").Layout(gtx, button)
|
// material.Button(theme, "Click me!").Layout(gtx, button)
|
||||||
//
|
//
|
||||||
// Customization
|
// Customization
|
||||||
//
|
//
|
||||||
// Quite often, a program needs to customize the theme provided defaults. Several
|
// Quite often, a program needs to customize the theme-provided defaults. Several
|
||||||
// options are available, depending on the nature of the change:
|
// options are available, depending on the nature of the change.
|
||||||
//
|
//
|
||||||
// Mandatory parameters: Some parameters are not part of the widget state but
|
// Mandatory parameters: Some parameters are not part of the widget state but
|
||||||
// have no obvious default. In the program above, the button text is a
|
// have no obvious default. In the program above, the button text is a
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
// Widget-local parameters: For changing the look of a particular widget,
|
// Widget-local parameters: For changing the look of a particular widget,
|
||||||
// adjust the widget specific theme object:
|
// adjust the widget specific theme object:
|
||||||
//
|
//
|
||||||
// btn := th.Button("Click me!")
|
// btn := material.Button(theme, "Click me!")
|
||||||
// btn.Font.Style = text.Italic
|
// btn.Font.Style = text.Italic
|
||||||
// btn.Layout(gtx)
|
// btn.Layout(gtx)
|
||||||
//
|
//
|
||||||
@@ -51,7 +51,7 @@
|
|||||||
//
|
//
|
||||||
// icon := material.NewIcon(...)
|
// icon := material.NewIcon(...)
|
||||||
//
|
//
|
||||||
// th.IconButton(icon).Layout(gtx, button)
|
// material.IconButton(theme, icon).Layout(gtx, button)
|
||||||
//
|
//
|
||||||
// Specialized widgets: Theme both define a generic Label method
|
// Specialized widgets: Theme both define a generic Label method
|
||||||
// that takes a text size, and specialized methods for standard text
|
// that takes a text size, and specialized methods for standard text
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import (
|
|||||||
"gioui.org/widget"
|
"gioui.org/widget"
|
||||||
)
|
)
|
||||||
|
|
||||||
type Editor struct {
|
type EditorStyle struct {
|
||||||
Font text.Font
|
Font text.Font
|
||||||
TextSize unit.Value
|
TextSize unit.Value
|
||||||
// Color is the text color.
|
// Color is the text color.
|
||||||
@@ -26,17 +26,17 @@ type Editor struct {
|
|||||||
shaper text.Shaper
|
shaper text.Shaper
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) Editor(hint string) Editor {
|
func Editor(th *Theme, hint string) EditorStyle {
|
||||||
return Editor{
|
return EditorStyle{
|
||||||
TextSize: t.TextSize,
|
TextSize: th.TextSize,
|
||||||
Color: t.Color.Text,
|
Color: th.Color.Text,
|
||||||
shaper: t.Shaper,
|
shaper: th.Shaper,
|
||||||
Hint: hint,
|
Hint: hint,
|
||||||
HintColor: t.Color.Hint,
|
HintColor: th.Color.Hint,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (e Editor) Layout(gtx *layout.Context, editor *widget.Editor) {
|
func (e EditorStyle) Layout(gtx *layout.Context, editor *widget.Editor) {
|
||||||
var stack op.StackOp
|
var stack op.StackOp
|
||||||
stack.Push(gtx.Ops)
|
stack.Push(gtx.Ops)
|
||||||
var macro op.MacroOp
|
var macro op.MacroOp
|
||||||
|
|||||||
+24
-24
@@ -12,7 +12,7 @@ import (
|
|||||||
"gioui.org/widget"
|
"gioui.org/widget"
|
||||||
)
|
)
|
||||||
|
|
||||||
type Label struct {
|
type LabelStyle struct {
|
||||||
// Face defines the text style.
|
// Face defines the text style.
|
||||||
Font text.Font
|
Font text.Font
|
||||||
// Color is the text color.
|
// Color is the text color.
|
||||||
@@ -27,52 +27,52 @@ type Label struct {
|
|||||||
shaper text.Shaper
|
shaper text.Shaper
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) H1(txt string) Label {
|
func H1(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(96.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(96.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) H2(txt string) Label {
|
func H2(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(60.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(60.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) H3(txt string) Label {
|
func H3(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(48.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(48.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) H4(txt string) Label {
|
func H4(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(34.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(34.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) H5(txt string) Label {
|
func H5(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(24.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(24.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) H6(txt string) Label {
|
func H6(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(20.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(20.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) Body1(txt string) Label {
|
func Body1(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize, txt)
|
return Label(th, th.TextSize, txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) Body2(txt string) Label {
|
func Body2(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(14.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(14.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) Caption(txt string) Label {
|
func Caption(th *Theme, txt string) LabelStyle {
|
||||||
return t.Label(t.TextSize.Scale(12.0/16.0), txt)
|
return Label(th, th.TextSize.Scale(12.0/16.0), txt)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) Label(size unit.Value, txt string) Label {
|
func Label(th *Theme, size unit.Value, txt string) LabelStyle {
|
||||||
return Label{
|
return LabelStyle{
|
||||||
Text: txt,
|
Text: txt,
|
||||||
Color: t.Color.Text,
|
Color: th.Color.Text,
|
||||||
TextSize: size,
|
TextSize: size,
|
||||||
shaper: t.Shaper,
|
shaper: th.Shaper,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (l Label) Layout(gtx *layout.Context) {
|
func (l LabelStyle) Layout(gtx *layout.Context) {
|
||||||
paint.ColorOp{Color: l.Color}.Add(gtx.Ops)
|
paint.ColorOp{Color: l.Color}.Add(gtx.Ops)
|
||||||
tl := widget.Label{Alignment: l.Alignment, MaxLines: l.MaxLines}
|
tl := widget.Label{Alignment: l.Alignment, MaxLines: l.MaxLines}
|
||||||
tl.Layout(gtx, l.shaper, l.Font, l.TextSize, l.Text)
|
tl.Layout(gtx, l.shaper, l.Font, l.TextSize, l.Text)
|
||||||
|
|||||||
@@ -13,17 +13,17 @@ import (
|
|||||||
"gioui.org/unit"
|
"gioui.org/unit"
|
||||||
)
|
)
|
||||||
|
|
||||||
type ProgressBar struct {
|
type ProgressBarStyle struct {
|
||||||
Color color.RGBA
|
Color color.RGBA
|
||||||
}
|
}
|
||||||
|
|
||||||
func (t *Theme) ProgressBar() ProgressBar {
|
func ProgressBar(th *Theme) ProgressBarStyle {
|
||||||
return ProgressBar{
|
return ProgressBarStyle{
|
||||||
Color: t.Color.Primary,
|
Color: th.Color.Primary,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (b ProgressBar) Layout(gtx *layout.Context, progress int) {
|
func (b ProgressBarStyle) Layout(gtx *layout.Context, progress int) {
|
||||||
shader := func(width float32, color color.RGBA) {
|
shader := func(width float32, color color.RGBA) {
|
||||||
maxHeight := unit.Dp(4)
|
maxHeight := unit.Dp(4)
|
||||||
rr := float32(gtx.Px(unit.Dp(2)))
|
rr := float32(gtx.Px(unit.Dp(2)))
|
||||||
|
|||||||
@@ -8,31 +8,31 @@ import (
|
|||||||
"gioui.org/widget"
|
"gioui.org/widget"
|
||||||
)
|
)
|
||||||
|
|
||||||
type RadioButton struct {
|
type RadioButtonStyle struct {
|
||||||
checkable
|
checkable
|
||||||
Key string
|
Key string
|
||||||
}
|
}
|
||||||
|
|
||||||
// RadioButton returns a RadioButton with a label. The key specifies
|
// RadioButton returns a RadioButton with a label. The key specifies
|
||||||
// the value for the Enum.
|
// the value for the Enum.
|
||||||
func (t *Theme) RadioButton(key, label string) RadioButton {
|
func RadioButton(th *Theme, key, label string) RadioButtonStyle {
|
||||||
return RadioButton{
|
return RadioButtonStyle{
|
||||||
checkable: checkable{
|
checkable: checkable{
|
||||||
Label: label,
|
Label: label,
|
||||||
|
|
||||||
Color: t.Color.Text,
|
Color: th.Color.Text,
|
||||||
IconColor: t.Color.Primary,
|
IconColor: th.Color.Primary,
|
||||||
TextSize: t.TextSize.Scale(14.0 / 16.0),
|
TextSize: th.TextSize.Scale(14.0 / 16.0),
|
||||||
Size: unit.Dp(26),
|
Size: unit.Dp(26),
|
||||||
shaper: t.Shaper,
|
shaper: th.Shaper,
|
||||||
checkedStateIcon: t.radioCheckedIcon,
|
checkedStateIcon: th.radioCheckedIcon,
|
||||||
uncheckedStateIcon: t.radioUncheckedIcon,
|
uncheckedStateIcon: th.radioUncheckedIcon,
|
||||||
},
|
},
|
||||||
Key: key,
|
Key: key,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (r RadioButton) Layout(gtx *layout.Context, enum *widget.Enum) {
|
func (r RadioButtonStyle) Layout(gtx *layout.Context, enum *widget.Enum) {
|
||||||
r.layout(gtx, enum.Value(gtx) == r.Key)
|
r.layout(gtx, enum.Value(gtx) == r.Key)
|
||||||
enum.Layout(gtx, r.Key)
|
enum.Layout(gtx, r.Key)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user