75 lines
2.8 KiB
Go
75 lines
2.8 KiB
Go
package main
|
|
|
|
import (
|
|
"fmt"
|
|
|
|
"github.com/egoist/mygo/ui"
|
|
|
|
mujica "mujicaui"
|
|
"mujicaui/icons"
|
|
"mujicaui/theme"
|
|
)
|
|
|
|
// componentPage shows one component: demo, code, keys and its events.
|
|
func (g *gallery) componentPage(c *ui.Context, p page) {
|
|
k := mujica.Tokens(c)
|
|
mujica.Container(c, mujica.ContainerOptions{MaxWidth: 1080, Center: true}, func() {
|
|
ui.Column(c).FillWidth().Gap(24).Children(func() {
|
|
mujica.Heading(c, g.pageName(p), mujica.HeadingOptions{
|
|
Subtitle: fmt.Sprintf("%s · %s · %s", p.ID, g.t(p.ZhName, p.Name), g.categoryName(p.Category)),
|
|
Divider: true,
|
|
})
|
|
ui.Column(c).FillWidth().Gap(16).Children(func() { p.Demo(c, g.logFor(p.ID)) })
|
|
mujica.Grid(c, mujica.GridOptions{Columns: []ui.Track{ui.Fr(3), ui.Fr(2)}, Gap: mujica.SpaceL}, func() {
|
|
mujica.Card(c, mujica.CardOptions{Title: g.t("Code", "代码"), Footer: func() {
|
|
if mujica.Button(c, g.t("Copy", "复制"), mujica.ButtonOptions{Variant: mujica.Secondary, Icon: icons.Must("copy")}).Clicked() {
|
|
c.WriteClipboard(p.Code)
|
|
g.logFor(p.ID)("code copied")
|
|
mujica.ShowToast(c, mujica.ToastMessage{ID: "copied", Severity: mujica.SeveritySuccess, Message: g.t("Code copied", "代码已复制")})
|
|
}
|
|
}}, func() {
|
|
ui.Text(c, p.Code).Font(theme.MonoFont).FontSize(mujica.FontSize(c, theme.CaptionSize)).Selectable().FillWidth()
|
|
})
|
|
mujica.Card(c, mujica.CardOptions{Title: g.t("Keyboard", "键盘")}, func() {
|
|
ui.Text(c, p.Keys).TextColor(k.TextMuted).FillWidth()
|
|
})
|
|
})
|
|
g.eventCard(c, p.ID)
|
|
})
|
|
})
|
|
}
|
|
|
|
// eventCard lists the newest events of one page.
|
|
func (g *gallery) eventCard(c *ui.Context, id string) {
|
|
k := mujica.Tokens(c)
|
|
mujica.Card(c, mujica.CardOptions{Title: g.t("Events", "事件")}, func() {
|
|
shown := 0
|
|
for i := len(g.events) - 1; i >= 0 && shown < 8; i-- {
|
|
e := g.events[i]
|
|
if e.page != id {
|
|
continue
|
|
}
|
|
shown++
|
|
ui.Row(c).Gap(12).Children(func() {
|
|
ui.Text(c, e.at.Format("15:04:05.000")).Font(theme.MonoFont).FontSize(mujica.FontSize(c, theme.CaptionSize)).TextColor(k.TextMuted)
|
|
ui.Text(c, e.text).Grow(1)
|
|
})
|
|
}
|
|
if shown == 0 {
|
|
ui.Text(c, g.t("Interact with the demo; its events appear here.", "操作上方示例，事件会显示在这里。")).TextColor(k.TextMuted)
|
|
}
|
|
})
|
|
}
|
|
|
|
// compositePage shows one composition demo above its events.
|
|
func (g *gallery) compositePage(c *ui.Context, id string, body func(c *ui.Context, log func(string))) {
|
|
cp := compositionOf(id)
|
|
mujica.Container(c, mujica.ContainerOptions{MaxWidth: 1080, Center: true}, func() {
|
|
ui.Column(c).FillWidth().Gap(24).Children(func() {
|
|
mujica.Heading(c, g.t(cp.Name, cp.ZhName), mujica.HeadingOptions{Subtitle: g.t(cp.About, cp.ZhAbout), Divider: true})
|
|
ui.Column(c).FillWidth().Gap(16).Children(func() { body(c, g.logFor(id)) })
|
|
g.eventCard(c, id)
|
|
})
|
|
})
|
|
}
|