Add update button
This commit is contained in:
parent
67358d1616
commit
acba8179fb
@ -4,10 +4,15 @@ import "github.com/maxence-charriere/go-app/v9/pkg/app"
|
|||||||
|
|
||||||
type navbar struct {
|
type navbar struct {
|
||||||
app.Compo
|
app.Compo
|
||||||
|
updateAvailable bool
|
||||||
|
|
||||||
OnClickButton func(page string)
|
OnClickButton func(page string)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func (n *navbar) OnAppUpdate(ctx app.Context) {
|
||||||
|
n.updateAvailable = ctx.AppUpdateAvailable()
|
||||||
|
}
|
||||||
|
|
||||||
func (n *navbar) Render() app.UI {
|
func (n *navbar) Render() app.UI {
|
||||||
return app.Div().Body(
|
return app.Div().Body(
|
||||||
app.Ul().Body(
|
app.Ul().Body(
|
||||||
@ -28,5 +33,21 @@ func (n *navbar) Render() app.UI {
|
|||||||
app.A().Href("/blog").Text("Blog"),
|
app.A().Href("/blog").Text("Blog"),
|
||||||
).Style("display", "none"),
|
).Style("display", "none"),
|
||||||
),
|
),
|
||||||
|
app.If(n.updateAvailable,
|
||||||
|
app.Div().Body(
|
||||||
|
app.Img().
|
||||||
|
Src("/web/static/images/hot1.gif").
|
||||||
|
Class("update-img"),
|
||||||
|
app.Span().
|
||||||
|
Text("Update available! Click here to update!").
|
||||||
|
Class("update-text"),
|
||||||
|
).
|
||||||
|
Class("update-div").
|
||||||
|
OnClick(n.onUpdateClick),
|
||||||
|
),
|
||||||
).Class("navbar")
|
).Class("navbar")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func (n *navbar) onUpdateClick(ctx app.Context, e app.Event) {
|
||||||
|
ctx.Reload()
|
||||||
|
}
|
||||||
|
@ -35,12 +35,22 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.update-box {
|
.update-div {
|
||||||
position:absolute;
|
|
||||||
max-width: 100px;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-div:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-text {
|
||||||
|
align-self: center;
|
||||||
|
flex: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-img {
|
||||||
|
flex: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
|
Loading…
Reference in New Issue
Block a user