git.iko.soy/skrepka
on master help sign in
Refactor chat view to use bottom bar wrapper and styled components
cf27930iko
client/ViewChat.fs+53−36
compare with master
unifiedsplit
@@ -10,47 +10,64 @@ module ViewChat =
10 open Store
10 open Store
11 open AppTypes
11 open AppTypes
12 open Buttons
12 open Buttons
13+ open TextFields
13
14
14 let viewChat model pk compose =
15 let viewChat model pk compose =
15 let name = contactName model.Contacts pk
16 let name = contactName model.Contacts pk
16 let msgs = messagesFor pk model.Messages
17 let msgs = messagesFor pk model.Messages
17
18
19+ let bar =
18− (Grid([ Dimension.Auto; Dimension.Auto; Dimension.Star; Dimension.Auto ], [ Dimension.Star ]) {
20+ (Grid([ Dimension.Auto; Dimension.Star; Dimension.Auto ], [ Dimension.Auto ]) {
19− (HStack(8.) {
20− backButton (SetPage Conversations)
21+ (backButton (SetPage Conversations)).gridColumn (0)
21
22
22− TextBlock(name).fontSize(20.).centerVertical ()
23+ (textField compose (fun text -> SetPage(Chat(pk, text))))
24+ .verticalAlignment(VerticalAlignment.Stretch)
25+ .margin(8.)
26+ .gridColumn (1)
27+
28+ (smallButton Primary "Send" DoSend).gridColumn (2)
23 })
29 })
24− .gridRow (0)
30+ .horizontalAlignment (HorizontalAlignment.Stretch)
25−
31+
32+ let content =
33+ (Grid([ Dimension.Star ], [ Dimension.Auto; Dimension.Auto; Dimension.Star ]) {
34+ TextBlock(name).fontSize(20.).padding(8.).gridRow (0)
35+
26− (viewErrorBanner model.Error).gridRow (1)
36+ (viewErrorBanner model.Error).gridRow (1)
27−
37+
28− (if msgs.IsEmpty then
38+ (if msgs.IsEmpty then
29− AnyView(TextBlock("No messages yet").padding(8.).fontSize (14.))
39+ AnyView(TextBlock("No messages yet").padding(8.).fontSize (14.))
30− else
40+ else
31− let reversed = List.rev msgs
41+ let layout = Avalonia.Layout.StackLayout()
32−
42+ layout.DisableVirtualization <- true
43+
33− AnyView(
44+ AnyView(
34− ScrollViewer(
45+ ScrollViewer(
35− ItemsRepeater(reversed, fun m ->
46+ ItemsRepeater(msgs, fun m ->
36− let prefix, tick =
47+ let tick =
37− match m.Direction with
48+ match m.Direction with
38− | Outgoing DeliveryStatus.Delivered -> "You: ", " \u2713"
49+ | Outgoing DeliveryStatus.Delivered -> " ✓"
39− | Outgoing DeliveryStatus.Sent -> "You: ", ""
50+ | Outgoing DeliveryStatus.Sent -> ""
51+ | Incoming -> ""
52+
53+ let align =
54+ match m.Direction with
40− | Incoming -> "", ""
55+ | Incoming -> HorizontalAlignment.Right
41−
56+ | Outgoing _ -> HorizontalAlignment.Left
57+
58+ Border(
42− TextBlock($"{prefix}{m.Body}{tick}").padding(8.).fontSize (14.))
59+ TextBlock($"{m.Body}{tick}")
43− )
60+ .fontSize(14.)
44− ))
61+ .padding (8.))
45− .gridRow (2)
62+ .borderThickness(Avalonia.Thickness(2.))
46−
63+ .borderBrush(Avalonia.Media.SolidColorBrush(Avalonia.Media.Colors.Black))
47− (HStack(8.) {
64+ .horizontalAlignment(align)
48− TextBox(compose, fun text -> SetPage(Chat(pk, text)))
65+ .margin (4.))
49− .watermark("Message...")
66+ .layout(layout)
50− .horizontalAlignment (HorizontalAlignment.Stretch)
67+ )
51−
68+ .horizontalScrollBarVisibility(Avalonia.Controls.Primitives.ScrollBarVisibility.Disabled)
52− Button("Send", DoSend)
69+ .offset(Avalonia.Vector(0., System.Double.MaxValue))))
70+ .gridRow (2)
53 })
71 })
54− .gridRow (3)
72+
55− })
73+ Styles.withBottomBar bar content
56− .margin (12.)