on master help sign in
Enhance button component with press animations and improve UI styling
56e3e8aiko
client/App.fs+6−14
@@ -495,17 +495,12 @@ module App =
495 let mapCmd cmdMsg =
495 let mapCmd cmdMsg =
496 match cmdMsg with
496 match cmdMsg with
497 | CmdConnect(url, identity) ->
497 | CmdConnect(url, identity) ->
498− Cmd.OfAsync.either
499− (fun (url, id) -> authenticate url id)
498+ Cmd.OfAsync.either (fun (url, id) -> authenticate url id) (url, identity) AuthOk (fun ex ->
500− (url, identity)
501− AuthOk
502− (fun ex -> AuthErr ex.Message)
499+ AuthErr ex.Message)
503
500
504 | CmdSend(session, recipientHex, envelope) ->
501 | CmdSend(session, recipientHex, envelope) ->
505− Cmd.OfAsync.attempt
506− (fun (s, r, e) -> sendEnvelope s r e)
507− (session, recipientHex, envelope)
502+ Cmd.OfAsync.attempt (fun (s, r, e) -> sendEnvelope s r e) (session, recipientHex, envelope) (fun ex ->
508− (fun ex -> SendFailed ex.Message)
503+ SendFailed ex.Message)
509
504
510 | CmdPoll(session, cursor) ->
505 | CmdPoll(session, cursor) ->
511 Cmd.ofEffect (fun dispatch ->
506 Cmd.ofEffect (fun dispatch ->
@@ -650,13 +645,10 @@ module App =
650 (VStack(spacing = 24.) {
645 (VStack(spacing = 24.) {
651 Image("logo.png").margin(8, 0).maximumWidth (300)
646 Image("logo.png").margin(8, 0).maximumWidth (300)
652
647
653− Label("Skrepka").font(size = 32.).centerTextHorizontal ()
648+ Label("Skrepka").font(size = 32., fontFamily = "UnboundedBold").centerTextHorizontal ()
654−
649+ BoxView(Colors.Transparent).height (50)
655− Label("End-to-end encrypted messaging").font(size = 16.).centerTextHorizontal ()
656−
657
650
658 button "Next" GenIdentity
651 button "Next" GenIdentity
659− Button("Generate Identity", GenIdentity).centerHorizontal ()
660 })
652 })
661 .padding(30.)
653 .padding(30.)
662 .centerVertical ()
654 .centerVertical ()
client/Buttons.fs+42−10
@@ -9,24 +9,56 @@ open Fabulous.Maui
9open Microsoft.Maui.Graphics
9open Microsoft.Maui.Graphics
10open Fabulous
10open Fabulous
11open Fabulous.Maui
11open Fabulous.Maui
12−open Microsoft.Maui
13open Microsoft.Maui.Graphics
12open Microsoft.Maui.Graphics
14
13
15open type Fabulous.Maui.View
14open type Fabulous.Maui.View
15+open type Fabulous.Maui.VisualElementAnimationModifiers
16+open type Microsoft.Maui.Controls.ViewExtensions
16
17
17module Buttons =
18module Buttons =
18 open Microsoft.Maui
19 open Microsoft.Maui
19
20
21+ let private animationDuration = 100u
22+ let private animationEasing = Easing.CubicOut
23+
20− let button (text: string) (msg: 'msg) : WidgetBuilder<'msg, _> =
24+ let button (text: string) (msg: 'msg) =
25+
26+ let shadowRef = ViewRef<Microsoft.Maui.Controls.Shapes.Rectangle>()
27+
28+ let animate pressed =
29+ match shadowRef.TryValue with
30+ | None -> ()
31+ | Some c ->
32+ if pressed then
33+ c.TranslateToAsync(8., 8., animationDuration, animationEasing) |> ignore
34+ else
35+ c.TranslateToAsync(12., 12., animationDuration, animationEasing) |> ignore
36+
21 Component(text) {
37 Component(text) {
38+
22 Grid() {
39 Grid() {
23− Rectangle().margin(Thickness(8., 8., -8., -8.)).background (Colors.Black)
40+
24−
41+ Rectangle().reference(shadowRef).background(Colors.Black).translationX(12.).translationY (12.)
25− Button(text, msg)
26− .borderWidth(4)
27− .background(Constants.accentColor)
42+ Rectangle().background (Constants.accentColor)
28− .borderColor(Colors.Black)
43+
29− .textColor(Colors.White)
44+
30− .font (fontFamily = "UnboundedBold", size = 24.)
45+ Label(text).textColor(Colors.White).font(fontFamily = "UnboundedBold", size = 24.).center().margin (8)
46+
47+
48+ Rectangle()
49+ .strokeThickness(4.)
50+ .stroke(Colors.Black)
51+ .margin(-3)
52+ .fillHorizontal()
53+ .fillVertical()
54+ .gestureRecognizers () {
55+ PointerGestureRecognizer()
56+ .onPointerPressed(fun _ -> animate true)
57+ .onPointerReleased(fun _ -> animate false)
58+ .onPointerExited (fun _ -> animate false)
59+
60+ TapGestureRecognizer(msg)
61+ }
62+
31 }
63 }
32 }
64 }
client/MauiProgram.fs+2−1
@@ -19,5 +19,6 @@ type MauiProgram =
19 .AddFont("Unbounded-ExtraLight.ttf", "UnboundedExtraLight")
19 .AddFont("Unbounded-ExtraLight.ttf", "UnboundedExtraLight")
20 .AddFont("Unbounded-Light.ttf", "UnboundedLight")
20 .AddFont("Unbounded-Light.ttf", "UnboundedLight")
21 .AddFont("Unbounded-Medium.ttf", "UnboundedMedium")
21 .AddFont("Unbounded-Medium.ttf", "UnboundedMedium")
22− .AddFont("Unbounded-Regular.ttf", "UnboundedRegular") |> ignore)
22+ .AddFont("Unbounded-Regular.ttf", "UnboundedRegular")
23+ |> ignore)
23 .Build()
24 .Build()
client/obj/Debug/net10.0-maccatalyst/maccatalyst-arm64/.NETCoreApp,Version=v10.0.AssemblyAttributes.fsdeleted−3
@@ -1,3 +0,0 @@
1−namespace Microsoft.BuildSettings
2− [<System.Runtime.Versioning.TargetFrameworkAttribute(".NETCoreApp,Version=v10.0", FrameworkDisplayName=".NET 10.0")>]
3− do ()
client/obj/Debug/net10.0-maccatalyst/maccatalyst-arm64/ILLink.Substitutions.xmldeleted−15
@@ -1,15 +0,0 @@
1−<?xml version="1.0" encoding="utf-8"?>
2−<linker>
3− <assembly fullname="Skrepka">
4− <resource name="FSharpSignatureData.Skrepka" action="remove"></resource>
5− <resource name="FSharpSignatureCompressedData.Skrepka" action="remove"></resource>
6− <resource name="FSharpSignatureDataB.Skrepka" action="remove"></resource>
7− <resource name="FSharpSignatureCompressedDataB.Skrepka" action="remove"></resource>
8− <resource name="FSharpOptimizationData.Skrepka" action="remove"></resource>
9− <resource name="FSharpOptimizationCompressedData.Skrepka" action="remove"></resource>
10− <resource name="FSharpOptimizationDataB.Skrepka" action="remove"></resource>
11− <resource name="FSharpOptimizationCompressedDataB.Skrepka" action="remove"></resource>
12− <resource name="FSharpOptimizationInfo.Skrepka" action="remove"></resource>
13− <resource name="FSharpSignatureInfo.Skrepka" action="remove"></resource>
14− </assembly>
15−</linker>
client/obj/Debug/net10.0-maccatalyst/maccatalyst-arm64/Skrepka.AssemblyInfo.fsdeleted−19
@@ -1,19 +0,0 @@
1−// <auto-generated>
2−// Generated by the FSharp WriteCodeFragment class.
3−// </auto-generated>
4−namespace FSharp
5−
6−open System
7−open System.Reflection
8−
9−
10−[<assembly: System.Reflection.AssemblyCompanyAttribute("Skrepka")>]
11−[<assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")>]
12−[<assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")>]
13−[<assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0+c622597942208741d3c804aefd43a0d3c4efc092")>]
14−[<assembly: System.Reflection.AssemblyProductAttribute("Skrepka")>]
15−[<assembly: System.Reflection.AssemblyTitleAttribute("Skrepka")>]
16−[<assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")>]
17−[<assembly: System.Runtime.Versioning.TargetPlatformAttribute("MacCatalyst26.2")>]
18−[<assembly: System.Runtime.Versioning.SupportedOSPlatformAttribute("MacCatalyst26.2")>]
19−do()
client/obj/Debug/net10.0-maccatalyst/maccatalyst-arm64/Skrepka.AssemblyInfoInputs.cachedeleted−1
@@ -1 +0,0 @@
1−cea69c3a0745f404bdbfe2dfe0d3d4978e6dac8ccf2ed5f2edd84f58fc06912a