diff --git a/internal/pwa/components/hello.go b/internal/pwa/components/hello.go index b58d997..03d72da 100644 --- a/internal/pwa/components/hello.go +++ b/internal/pwa/components/hello.go @@ -1,6 +1,8 @@ package components import ( + "fmt" + "github.com/maxence-charriere/go-app/v9/pkg/app" "github.com/mlctrez/goapp-mdc/pkg/bar" "github.com/mlctrez/goapp-mdc/pkg/icon" @@ -49,48 +51,53 @@ func (h *Hello) OnMount(ctx app.Context) { } func (h *Hello) Render() app.UI { - var actions []app.HTMLButton - if h.isAppInstallable { - actions = append(actions, icon.MIDownload.Button().Title("Install PWA"). - OnClick(func(ctx app.Context, e app.Event) { ctx.ShowAppInstallPrompt() })) - } - actions = append(actions, icon.MIRefresh.Button().Title("reload the page"). - OnClick(func(ctx app.Context, e app.Event) { ctx.Reload() })) topBar := &bar.TopAppBar{Title: "Salty IM", - // if there is a need for a navigation menu, include this next line - //Navigation: []app.HTMLButton{icon.MIMenu.Button()}, - Fixed: true, ScrollTarget: "main-content", Actions: actions, + Navigation: []app.HTMLButton{icon.MIMenu.Button()}, + Fixed: true, + ScrollTarget: "main-content", + Actions: h.topActions(), } if h.chatInput == nil { h.chatInput = &textfield.TextField{Id: "chat-input"} } - return app.Div(). - Body( - &AppUpdateBanner{}, - topBar, - app.Div().Class("main-content").ID("main-content").Body( - topBar.Main().Body( - app.H3().Text(introText), - app.Range(h.messages).Slice(func(i int) app.UI { - return app.P().Text(h.messages[i]) - }), - app.Hr(), + return app.Div().Body( + &AppUpdateBanner{}, + topBar, + app.Div().Class("main-content").ID("main-content").Body( + topBar.Main().Body( + app.Div().ID("wrapper").Body( + app.Div().ID("chatbox").Body( + app.Range(h.messages).Slice(func(i int) app.UI { + return app.P().Text(h.messages[i]) + }), + ), app.Form().OnSubmit(func(ctx app.Context, e app.Event) { + fmt.Println("app.Form().OnSubmit()") e.PreventDefault() - msg := h.chatInput.Value - // send message to pub endpoint - // clear message + h.messages = append(h.messages, h.chatInput.Value) h.chatInput.Value = "" - // append message to current message list - h.messages = append(h.messages, msg) }).Body( h.chatInput, - icon.MISend.Button(), + icon.MISend.Button().ID("chat-send"), ), ), ), - ) + ), + ) +} + +func (h *Hello) topActions() (actions []app.HTMLButton) { + + if h.isAppInstallable { + actions = append(actions, icon.MIDownload.Button().Title("Install PWA"). + OnClick(func(ctx app.Context, e app.Event) { ctx.ShowAppInstallPrompt() })) + } + + actions = append(actions, icon.MIRefresh.Button().Title("reload the page"). + OnClick(func(ctx app.Context, e app.Event) { ctx.Reload() })) + + return actions } diff --git a/internal/web/css/style.css b/internal/web/css/style.css index ec8631c..7fbfdfe 100644 --- a/internal/web/css/style.css +++ b/internal/web/css/style.css @@ -10,6 +10,38 @@ body { margin-right: 5px; } + +form { + display: flex; + gap: 5px; + justify-content: flex-start; +} + +#wrapper { + margin: 0px; + background: #eee; + max-width: 100%; +} + +#chatbox { + text-align: left; + box-sizing: border-box; + padding: 10px; + background: #fff; + height: calc(100vh - 130px); + width: 100%; + overflow: auto; +} + +#chat-input { + flex: 1; +} + +#chat-send { + padding-top: 16px; +} + + @font-face { font-family: 'Material Icons'; font-style: normal;