on master help sign in
Make text fields stretch vertically with centered text and always-white background
commitedcb4da5beff130327e7bb21293f4ca5f76e16c5 authoriko <mail@iko.soy> dateSat 18 Apr 2026, 13:08 (6 months ago) parent8560d1f
3 files changed+29−12
client/TextFields.fs+25−3 client/ViewAddContact.fs+2−7 client/ViewConversations.fs+2−2
client/TextFields.fs+25−3
@@ -7,11 +7,33 @@ open Fabulous.Avalonia
77open type Fabulous.Avalonia.View
88
99module 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+
1032 let textField value msg =
11− Grid() {
12− TextBox(value, msg).fontFamily (Constants.fontFamily)
33+ (Grid() {
34+ TextBox(value, msg).fontFamily(Constants.fontFamily).verticalAlignment(VerticalAlignment.Stretch).verticalContentAlignment(VerticalAlignment.Center).background(SolidColorBrush(Colors.White))
1335 Rectangle().stroke(Colors.Black).strokeThickness (4.)
14− }
36+ }).styles (whiteBg)
1537
1638 let multilineTextField value msg =
1739 Grid() {
client/ViewAddContact.fs+2−7
@@ -27,9 +27,7 @@ module ViewAddContact =
2727
2828 TextBlock("Your key (share with contact):").foreground (SolidColorBrush(Colors.DimGray))
2929
30− Image(Styles.cachedBitmap (qrBytes ob), Stretch.Uniform)
31− .maxWidth(200.)
32− .centerHorizontal ()
30+ Image(Styles.cachedBitmap (qrBytes ob), Stretch.Uniform).maxWidth(200.).centerHorizontal ()
3331
3432 TextBlock(truncKey id.PubKeyHex)
3533 .fontSize(12.)
@@ -50,9 +48,6 @@ module ViewAddContact =
5048 .margin (20.)
5149 )
5250
53− let bar =
54− HStack(8.) {
55− backButton (SetPage Conversations)
56− }
51+ let bar = HStack(8.) { backButton (SetPage Conversations) }
5752
5853 withBottomBar bar content
client/ViewConversations.fs+2−2
@@ -72,9 +72,9 @@ module ViewConversations =
7272 .background(Colors.White))
7373
7474 let bar =
75− (Grid([ Dimension.Auto; Dimension.Star; Dimension.Auto ], []) {
75+ (Grid([ Dimension.Auto; Dimension.Star; Dimension.Auto ], [Dimension.Auto]) {
7676 (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)
7878 (smallTextButton "+" (SetPage(AddContact("", "")))).gridColumn (2)
7979 })
8080 .margin(20.)