71 lines
2.3 KiB
Go
71 lines
2.3 KiB
Go
package mujica
|
|
|
|
import (
|
|
"github.com/egoist/mygo/ui"
|
|
|
|
"mujicaui/internal"
|
|
"mujicaui/theme"
|
|
)
|
|
|
|
// CardOptions configure a Card.
|
|
type CardOptions struct {
|
|
// Title heads the card in the serif face; empty shows no header.
|
|
Title string
|
|
// Footer builds the bottom slot, below a divider; nil shows none.
|
|
Footer func()
|
|
// Decorated draws a double border and corner ornaments in Ornament.
|
|
Decorated bool
|
|
}
|
|
|
|
// cardInset is how far the inner line of a decorated card sits inside.
|
|
const cardInset float32 = 4
|
|
|
|
// Card groups content on a surface with an outline. It adds no click behavior.
|
|
func Card(c *ui.Context, opts CardOptions, body func()) *ui.Element {
|
|
k := Tokens(c)
|
|
u := Density(c).Unit()
|
|
pad := u * 4
|
|
if opts.Decorated {
|
|
pad += cardInset + 2
|
|
}
|
|
card := ui.Column(c).Background(k.Surface).Radius(theme.CardRadius).Gap(u * 3).Padding(pad).Role(ui.RoleGroup)
|
|
if opts.Title != "" {
|
|
card.Label(opts.Title)
|
|
}
|
|
if opts.Decorated {
|
|
card.Border(theme.BorderWidth, k.Ornament).DrawOver(func(p *ui.Painter, r ui.Rect) {
|
|
cardOrnament(p, r, k.Ornament)
|
|
})
|
|
} else {
|
|
card.Border(theme.BorderWidth, k.Border)
|
|
}
|
|
card.Children(func() {
|
|
if opts.Title != "" {
|
|
ui.Text(c, opts.Title).Font(theme.SerifFont).FontSize(theme.H3Size).FontWeight(600).LineHeight(1.3)
|
|
if opts.Decorated {
|
|
ui.Box(c).Height(7).FillWidth().Shrink(0).Draw(func(p *ui.Painter, r ui.Rect) {
|
|
cy := r.Y + r.H/2
|
|
p.Line(r.X, cy, r.X+r.W/2-6, cy, 1, k.Ornament)
|
|
p.Line(r.X+r.W/2+6, cy, r.X+r.W, cy, 1, k.Ornament)
|
|
p.FillPath(internal.Diamond(internal.Snap(p, r.X+r.W/2), internal.Snap(p, cy), 7), k.Ornament)
|
|
})
|
|
}
|
|
}
|
|
ui.Column(c).Gap(u * 2).Children(body)
|
|
if opts.Footer != nil {
|
|
ui.Box(c).Height(1).FillWidth().Shrink(0).Background(k.Border)
|
|
ui.Row(c).Gap(u * 2).Justify(ui.End).AlignItems(ui.Center).Wrap().Children(opts.Footer)
|
|
}
|
|
})
|
|
return card
|
|
}
|
|
|
|
// cardOrnament draws the inner line and the four corner diamonds.
|
|
func cardOrnament(p *ui.Painter, r ui.Rect, col ui.Color) {
|
|
in := ui.Rect{X: r.X + cardInset, Y: r.Y + cardInset, W: r.W - 2*cardInset, H: r.H - 2*cardInset}
|
|
p.Stroke(in, col, 1, 1)
|
|
for _, pt := range [4][2]float32{{in.X, in.Y}, {in.X + in.W, in.Y}, {in.X, in.Y + in.H}, {in.X + in.W, in.Y + in.H}} {
|
|
p.FillPath(internal.Diamond(internal.Snap(p, pt[0]), internal.Snap(p, pt[1]), 9), col)
|
|
}
|
|
}
|