Gallery shell: AppShell, search, sidebar, theme/density/locale, palette, code, keys, events, Overture

examples/gallery/page_view.go

@@ -0,0 +1,62 @@
+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)
+		}
+	})
+}