diff --git a/README.md b/README.md index d2db502e..afd2fc65 100644 --- a/README.md +++ b/README.md @@ -216,6 +216,23 @@ m := NewMap() ![](img/map.png) +## Dialogs + +### About + +A cool parallax about dialog that pulls data from the app metadata and includes +some markup content and links at the bottom of the window/dialog. + +```go + docURL, _ := url.Parse("https://docs.fyne.io") + links := []*widget.Hyperlink{ + widget.NewHyperlink("Docs", docURL), + } + dialog.ShowAboutWindow("Some **cool** stuff", links, a) +``` + +![](img/about.png) + ## Data Binding Community contributed data sources for binding. diff --git a/cmd/fyne-x/FyneApp.toml b/cmd/fyne-x/FyneApp.toml new file mode 100644 index 00000000..a616fe49 --- /dev/null +++ b/cmd/fyne-x/FyneApp.toml @@ -0,0 +1,4 @@ +[Details] + Icon = "Icon.png" + Version = "0.1.0" + Build = 5 diff --git a/cmd/fyne-x/Icon.png b/cmd/fyne-x/Icon.png new file mode 100644 index 00000000..066216d8 Binary files /dev/null and b/cmd/fyne-x/Icon.png differ diff --git a/cmd/fyne-x/fyne-x.tar.xz b/cmd/fyne-x/fyne-x.tar.xz new file mode 100644 index 00000000..02aa90e0 Binary files /dev/null and b/cmd/fyne-x/fyne-x.tar.xz differ diff --git a/cmd/fyne-x/main.go b/cmd/fyne-x/main.go new file mode 100644 index 00000000..a3b5996b --- /dev/null +++ b/cmd/fyne-x/main.go @@ -0,0 +1,30 @@ +package main + +import ( + "net/url" + + "fyne.io/fyne/v2/app" + "fyne.io/fyne/v2/container" + "fyne.io/fyne/v2/widget" + "fyne.io/x/fyne/dialog" +) + +func main() { + a := app.New() + w := a.NewWindow("Fyne-x demo") + + docURL, _ := url.Parse("https://docs.fyne.io") + links := []*widget.Hyperlink{ + widget.NewHyperlink("Docs", docURL), + } + w.SetContent(container.NewGridWithColumns(1, + widget.NewButton("About", func() { + dialog.ShowAbout("Some **cool** stuff", links, a, w) + }), + widget.NewButton("About window", func() { + dialog.ShowAboutWindow("Some **cool** stuff", links, a) + }), + )) + + w.ShowAndRun() +} diff --git a/cmd/fyne-x/usr/local/bin/fyne-x b/cmd/fyne-x/usr/local/bin/fyne-x new file mode 100755 index 00000000..160e5921 Binary files /dev/null and b/cmd/fyne-x/usr/local/bin/fyne-x differ diff --git a/dialog/about.go b/dialog/about.go new file mode 100644 index 00000000..8f4e38b2 --- /dev/null +++ b/dialog/about.go @@ -0,0 +1,136 @@ +package dialog + +import ( + "image/color" + + "fyne.io/fyne/v2" + "fyne.io/fyne/v2/canvas" + "fyne.io/fyne/v2/container" + "fyne.io/fyne/v2/dialog" + "fyne.io/fyne/v2/layout" + "fyne.io/fyne/v2/theme" + "fyne.io/fyne/v2/widget" +) + +// ShowAbout opens a parallax about dialog using the app metadata along with the +// markdown content and links passed into this method. +func ShowAbout(content string, links []*widget.Hyperlink, a fyne.App, w fyne.Window) { + d := dialog.NewCustom("About", "OK", aboutContent(content, links, a), w) + d.Resize(fyne.NewSize(400, 320)) + d.Show() +} + +// ShowAboutWindow opens a parallax about window using the app metadata along with the +// markdown content and links passed into this method. +func ShowAboutWindow(content string, links []*widget.Hyperlink, a fyne.App) { + w := a.NewWindow("About") + w.SetContent(aboutContent(content, links, a)) + w.Resize(fyne.NewSize(360, 280)) + w.Show() +} + +func aboutContent(content string, links []*widget.Hyperlink, a fyne.App) fyne.CanvasObject { + rich := widget.NewRichTextFromMarkdown(content) + + logo := canvas.NewImageFromResource(a.Metadata().Icon) + logo.FillMode = canvas.ImageFillContain + logo.SetMinSize(fyne.NewSize(128, 128)) + + footer := container.NewHBox(layout.NewSpacer()) + for i, a := range links { + footer.Add(a) + if i < len(links)-1 { + footer.Add(widget.NewLabel("-")) + } + } + footer.Add(layout.NewSpacer()) + + body := container.NewVBox( + container.NewCenter( + widget.NewRichTextFromMarkdown("**Version:** "+a.Metadata().Version)), + logo, + container.NewCenter(rich)) + scroll := container.NewScroll(body) + + bgColor := withAlpha(theme.BackgroundColor(), 0xe0) + shadowColor := withAlpha(theme.BackgroundColor(), 0x33) + + underlay := canvas.NewImageFromResource(a.Metadata().Icon) + bg := canvas.NewRectangle(bgColor) + underlayer := underLayout{} + slideBG := container.New(underlayer, underlay) + footerBG := canvas.NewRectangle(shadowColor) + + listen := make(chan fyne.Settings) + fyne.CurrentApp().Settings().AddChangeListener(listen) + go func() { + for range listen { + bgColor = withAlpha(theme.BackgroundColor(), 0xe0) + bg.FillColor = bgColor + bg.Refresh() + + shadowColor = withAlpha(theme.BackgroundColor(), 0x33) + footerBG.FillColor = bgColor + footer.Refresh() + } + }() + + underlay.Resize(fyne.NewSize(512, 512)) + scroll.OnScrolled = func(p fyne.Position) { + underlayer.offset = -p.Y / 3 + underlayer.Layout(slideBG.Objects, slideBG.Size()) + } + + bgClip := container.NewScroll(slideBG) + bgClip.Direction = container.ScrollNone + return container.NewStack(container.New(unpad{top: true}, bgClip, bg), + container.NewBorder(nil, + container.NewStack(footerBG, footer), nil, nil, + container.New(unpad{top: true, bottom: true}, scroll))) +} + +func withAlpha(c color.Color, alpha uint8) color.Color { + r, g, b, _ := c.RGBA() + return color.NRGBA{R: uint8(r >> 8), G: uint8(g >> 8), B: uint8(b >> 8), A: alpha} +} + +type underLayout struct { + offset float32 +} + +func (u underLayout) Layout(objs []fyne.CanvasObject, size fyne.Size) { + under := objs[0] + left := size.Width/2 - under.Size().Width/2 + under.Move(fyne.NewPos(left, u.offset-50)) +} + +func (u underLayout) MinSize(_ []fyne.CanvasObject) fyne.Size { + return fyne.Size{} +} + +type unpad struct { + top, bottom bool +} + +func (u unpad) Layout(objs []fyne.CanvasObject, s fyne.Size) { + pad := theme.Padding() + var pos fyne.Position + if u.top { + pos = fyne.NewPos(0, -pad) + } + size := s + if u.top { + size = size.AddWidthHeight(0, pad) + } + if u.bottom { + size = size.AddWidthHeight(0, pad) + } + for _, o := range objs { + o.Move(pos) + o.Resize(size) + } +} + +func (u unpad) MinSize(_ []fyne.CanvasObject) fyne.Size { + return fyne.NewSize(100, 100) +} diff --git a/img/about-dialog.png b/img/about-dialog.png new file mode 100644 index 00000000..ee623729 Binary files /dev/null and b/img/about-dialog.png differ diff --git a/img/about.png b/img/about.png new file mode 100644 index 00000000..2634722e Binary files /dev/null and b/img/about.png differ