Mirrors/prologic-saltyim
6
1
Fork 0
mirror of https://git.mills.io/saltyim/saltyim.git synced 2024-06-30 18:51:03 +00:00
Code Issues Projects Releases Wiki Activity

chat screen layout

Browse Source
This commit is contained in:
mlctrez 2022-03-23 12:08:21 -05:00
parent 4452560dc3
commit c084b99953
2 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
internal/pwa/components/hello.go
View File

@ -1,6 +1,8 @@
package components package components
import ( import (
"fmt"
"github.com/maxence-charriere/go-app/v9/pkg/app" "github.com/maxence-charriere/go-app/v9/pkg/app"
"github.com/mlctrez/goapp-mdc/pkg/bar" "github.com/mlctrez/goapp-mdc/pkg/bar"
"github.com/mlctrez/goapp-mdc/pkg/icon" "github.com/mlctrez/goapp-mdc/pkg/icon"
@ -49,48 +51,53 @@ func (h *Hello) OnMount(ctx app.Context) {
} }
func (h *Hello) Render() app.UI { 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", 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()},
//Navigation: []app.HTMLButton{icon.MIMenu.Button()}, Fixed: true,
Fixed: true, ScrollTarget: "main-content", Actions: actions, ScrollTarget: "main-content",
Actions: h.topActions(),
} }
if h.chatInput == nil { if h.chatInput == nil {
h.chatInput = &textfield.TextField{Id: "chat-input"} h.chatInput = &textfield.TextField{Id: "chat-input"}
} }
return app.Div(). return app.Div().Body(
Body( &AppUpdateBanner{},
&AppUpdateBanner{}, topBar,
topBar, app.Div().Class("main-content").ID("main-content").Body(
app.Div().Class("main-content").ID("main-content").Body( topBar.Main().Body(
topBar.Main().Body( app.Div().ID("wrapper").Body(
app.H3().Text(introText), app.Div().ID("chatbox").Body(
app.Range(h.messages).Slice(func(i int) app.UI { app.Range(h.messages).Slice(func(i int) app.UI {
return app.P().Text(h.messages[i]) return app.P().Text(h.messages[i])
}), }),
app.Hr(), ),
app.Form().OnSubmit(func(ctx app.Context, e app.Event) { app.Form().OnSubmit(func(ctx app.Context, e app.Event) {
fmt.Println("app.Form().OnSubmit()")
e.PreventDefault() e.PreventDefault()
msg := h.chatInput.Value h.messages = append(h.messages, h.chatInput.Value)
// send message to pub endpoint
// clear message
h.chatInput.Value = "" h.chatInput.Value = ""
// append message to current message list
h.messages = append(h.messages, msg)
}).Body( }).Body(
h.chatInput, 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
} }

32
internal/web/css/style.css
View File

@ -10,6 +10,38 @@ body {
margin-right: 5px; 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-face {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;