on master help sign in
Make text fields stretch vertically with centered text and always-white background
edcb4daiko
client/TextFields.fs+25−3
@@ -7,11 +7,33 @@ open Fabulous.Avalonia
7open type Fabulous.Avalonia.View
7open type Fabulous.Avalonia.View
8
8
9module TextFields =
9module TextFields =
10+ open Avalonia.Layout
11+ open Avalonia.Styling
12+
13+ let private whiteBg =
14+ let bg = Avalonia.Media.Immutable.ImmutableSolidColorBrush(Colors.White)
15+ let setter = Setter(Avalonia.Controls.Border.BackgroundProperty, bg)
16+
17+ [ Skrepka.Styles.style
18+ (_.OfType<Avalonia.Controls.TextBox>()
19+ .Class(":pointerover")
20+ .Template()
21+ .OfType<Avalonia.Controls.Border>()
22+ .Name("PART_BorderElement"))
23+ [ setter ]
24+ Skrepka.Styles.style
25+ (_.OfType<Avalonia.Controls.TextBox>()
26+ .Class(":focus")
27+ .Template()
28+ .OfType<Avalonia.Controls.Border>()
29+ .Name("PART_BorderElement"))
30+ [ setter ] ]
31+
10 let textField value msg =
32 let textField value msg =
11− Grid() {
33+ (Grid() {
12− TextBox(value, msg).fontFamily (Constants.fontFamily)
34+ TextBox(value, msg).fontFamily(Constants.fontFamily).verticalAlignment(VerticalAlignment.Stretch).verticalContentAlignment(VerticalAlignment.Center).background(SolidColorBrush(Colors.White))
13 Rectangle().stroke(Colors.Black).strokeThickness (4.)
35 Rectangle().stroke(Colors.Black).strokeThickness (4.)
14− }
36+ }).styles (whiteBg)
15
37
16 let multilineTextField value msg =
38 let multilineTextField value msg =
17 Grid() {
39 Grid() {
client/ViewAddContact.fs+2−7
@@ -27,9 +27,7 @@ module ViewAddContact =
27
27
28 TextBlock("Your key (share with contact):").foreground (SolidColorBrush(Colors.DimGray))
28 TextBlock("Your key (share with contact):").foreground (SolidColorBrush(Colors.DimGray))
29
29
30− Image(Styles.cachedBitmap (qrBytes ob), Stretch.Uniform)
30+ Image(Styles.cachedBitmap (qrBytes ob), Stretch.Uniform).maxWidth(200.).centerHorizontal ()
31− .maxWidth(200.)
32− .centerHorizontal ()
33
31
34 TextBlock(truncKey id.PubKeyHex)
32 TextBlock(truncKey id.PubKeyHex)
35 .fontSize(12.)
33 .fontSize(12.)
@@ -50,9 +48,6 @@ module ViewAddContact =
50 .margin (20.)
48 .margin (20.)
51 )
49 )
52
50
53− let bar =
54− HStack(8.) {
55− backButton (SetPage Conversations)
51+ let bar = HStack(8.) { backButton (SetPage Conversations) }
56− }
57
52
58 withBottomBar bar content
53 withBottomBar bar content
client/ViewConversations.fs+2−2
@@ -72,9 +72,9 @@ module ViewConversations =
72 .background(Colors.White))
72 .background(Colors.White))
73
73
74 let bar =
74 let bar =
75− (Grid([ Dimension.Auto; Dimension.Star; Dimension.Auto ], []) {
75+ (Grid([ Dimension.Auto; Dimension.Star; Dimension.Auto ], [Dimension.Auto]) {
76 (smallImageButton None (SetPage Settings)).gridColumn (0)
76 (smallImageButton None (SetPage Settings)).gridColumn (0)
77− (textField "" Search).margin(0.).margin(8.).gridColumn (1)
77+ (textField "" Search).margin(8.).verticalAlignment(VerticalAlignment.Stretch).gridColumn (1)
78 (smallTextButton "+" (SetPage(AddContact("", "")))).gridColumn (2)
78 (smallTextButton "+" (SetPage(AddContact("", "")))).gridColumn (2)
79 })
79 })
80 .margin(20.)
80 .margin(20.)