on master help sign in
Extract Grid with bottom bar into reusable withBottomBar layout function
8f3a00eiko
client/Styles.fs+16
@@ -5,7 +5,12 @@ module Styles =
5 open Avalonia
5 open Avalonia
6 open Avalonia.Controls
6 open Avalonia.Controls
7 open Avalonia.Controls.Presenters
7 open Avalonia.Controls.Presenters
8+ open Avalonia.Media
8 open Avalonia.Styling
9 open Avalonia.Styling
10+ open Fabulous
11+ open Fabulous.Avalonia
12+
13+ open type Fabulous.Avalonia.View
9
14
10 let style (selector: Selector -> Selector) (setters: Setter list) =
15 let style (selector: Selector -> Selector) (setters: Setter list) =
11 let s = Style(selector)
16 let s = Style(selector)
@@ -15,6 +20,17 @@ module Styles =
15
20
16 s :> IStyle
21 s :> IStyle
17
22
23+ let withBottomBar (bar: WidgetBuilder<'msg, 'a>) (content: WidgetBuilder<'msg, 'b>) =
24+ Grid([], [ Dimension.Star; Dimension.Auto ]) {
25+ AnyView(content).gridRow (0)
26+
27+ Border(AnyView(bar))
28+ .borderThickness(Avalonia.Thickness(0., 4., 0., 0.))
29+ .borderBrush(SolidColorBrush(Colors.Black))
30+ .background(Constants.accentColor)
31+ .gridRow (1)
32+ }
33+
18 let noListBoxPadding () =
34 let noListBoxPadding () =
19 [ style
35 [ style
20 _.OfType<ListBoxItem>()
36 _.OfType<ListBoxItem>()
client/ViewConversations.fs+20−27
@@ -16,16 +16,15 @@ module ViewConversations =
16 let viewConversations model =
16 let viewConversations model =
17 let contacts = model.Contacts.Values |> Seq.toList
17 let contacts = model.Contacts.Values |> Seq.toList
18
18
19− (Grid([], [ Dimension.Star; Dimension.Auto ]) {
19+ let content =
20−
21 if contacts.IsEmpty then
20 if contacts.IsEmpty then
21+ AnyView(
22− TextBlock("No contacts yet. Tap + to add one.")
22+ TextBlock("No contacts yet. Tap + to add one.")
23− .centerText()
23+ .centerText()
24− .foreground(SolidColorBrush(Colors.Gray))
24+ .foreground(SolidColorBrush(Colors.Gray))
25− .gridRow (1)
25+ )
26−
26+ else
27− if not contacts.IsEmpty then
28− ListBox(
27+ AnyView(ListBox(
29 contacts,
28 contacts,
30 fun c ->
29 fun c ->
31 let name = contactName model.Contacts c.Pubkey
30 let name = contactName model.Contacts c.Pubkey
@@ -74,21 +73,15 @@ module ViewConversations =
74 .onTapped (fun _ -> SetPage(Chat(c.Pubkey, "")))
73 .onTapped (fun _ -> SetPage(Chat(c.Pubkey, "")))
75 )
74 )
76 .styles(noListBoxPadding ())
75 .styles(noListBoxPadding ())
77− .background(Colors.White)
76+ .background(Colors.White))
78− .gridRow (0)
77+
79−
78+ let bar =
80− Border(
81− (Grid([ Dimension.Auto; Dimension.Star; Dimension.Auto ], []) {
79+ (Grid([ Dimension.Auto; Dimension.Star; Dimension.Auto ], []) {
82− (smallImageButton None (SetPage Settings)).gridColumn (0)
80+ (smallImageButton None (SetPage Settings)).gridColumn (0)
83− (textField "" Search).margin(0.).margin(8.).gridColumn (1)
81+ (textField "" Search).margin(0.).margin(8.).gridColumn (1)
84− (smallTextButton "+" (SetPage(AddContact("", "")))).gridColumn (2)
82+ (smallTextButton "+" (SetPage(AddContact("", "")))).gridColumn (2)
85− })
83+ })
86− .margin(20.)
84+ .margin(20.)
87− .horizontalAlignment (HorizontalAlignment.Stretch)
85+ .horizontalAlignment (HorizontalAlignment.Stretch)
88− )
86+
89− .borderThickness(Avalonia.Thickness(0., 4., 0., 0.))
87+ withBottomBar bar content
90− .borderBrush(SolidColorBrush(Colors.Black))
91− .background(Constants.accentColor)
92− .gridRow (1)
93− })
94− .margin (0.)
client/ViewEditProfile.fs+8−14
@@ -10,9 +10,10 @@ module ViewEditProfile =
10 open AppTypes
10 open AppTypes
11 open Buttons
11 open Buttons
12 open TextFields
12 open TextFields
13+ open Styles
13
14
14 let viewEditProfile model displayName bio (photo: byte[] option) =
15 let viewEditProfile model displayName bio (photo: byte[] option) =
15− (Grid([], [ Dimension.Star; Dimension.Auto ]) {
16+ let content =
16 ScrollViewer(
17 ScrollViewer(
17 (VStack(16.) {
18 (VStack(16.) {
18 viewErrorBanner model.Error
19 viewErrorBanner model.Error
@@ -30,18 +31,11 @@ module ViewEditProfile =
30 })
31 })
31 .margin (20.)
32 .margin (20.)
32 )
33 )
33− .gridRow (0)
34
34
35− Border(
35+ let bar =
36+ HStack(8.) {
37+ (button Secondary "back" (SetPage Settings)).margin (8.)
38+ (button Secondary "save" DoSaveProfile).margin (8.)
39+ }
36
40
37− (HStack(8.) {
41+ withBottomBar bar content
38− (button Secondary "back" (SetPage Settings)).margin (8.)
39−
40− (button Secondary "save" DoSaveProfile).margin (8.)
41− })
42− .background (Constants.accentColor)
43− )
44− .borderThickness(Avalonia.Thickness(0., 4., 0., 0.))
45− .borderBrush(SolidColorBrush(Colors.Black))
46− .gridRow (1)
47− })