Skip to content

Commit d6497f0

Browse files
authored
Custom notification content (#291)
* renamed and reworded example inlined custom notification-like question * replaced unrendered unicode icon changing file encoding to do so * toggling inlined notification by button because NotificationCard is pretty useless otherwise as it can't be passed to a NotificationManager * renamed messages and reworded buttons to disambiguate * DRAFT rendering managed notification with custom content * added questions
1 parent 6991b9c commit d6497f0

2 files changed

Lines changed: 50 additions & 19 deletions

File tree

samples/Gallery/Pages/NotificationsPage.fs

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,18 @@ open type Fabulous.Avalonia.View
1616

1717
module NotificationsPage =
1818
type Model =
19-
{ NotificationManager: INotificationManager
20-
NotificationPosition: NotificationPosition }
19+
{ NotificationManager: WindowNotificationManager
20+
NotificationPosition: NotificationPosition
21+
ShowInlined: bool }
2122

2223
type Msg =
23-
| ShowManagedNotification
24+
| ShowPlainNotification
25+
| ShowCustomPlainNotification
2426
| ShowCustomManagedNotification
2527
| ShowNativeNotification
2628
| ShowAsyncCompletedNotification
2729
| ShowAsyncStatusNotifications
30+
| ToggleInlinedNotification
2831
| NotifyInfo of string
2932
| YesCommand
3033
| NoCommand
@@ -61,12 +64,25 @@ module NotificationsPage =
6164
}
6265
|> Async.Start)
6366

64-
let showNotification (notificationManager: INotificationManager) notification =
67+
let showNotification (notificationManager: WindowNotificationManager) notification =
6568
Cmd.ofEffect(fun dispatch ->
6669
Dispatcher.UIThread.Post(fun () ->
6770
notificationManager.Show(notification)
6871
dispatch(NotificationShown)))
6972

73+
let showNotificationContent (notificationManager: WindowNotificationManager) (content: WidgetBuilder<'msg, 'marker>) =
74+
Cmd.ofEffect(fun dispatch ->
75+
Dispatcher.UIThread.Post(fun () ->
76+
let widget = content.Compile()
77+
let widgetDef = WidgetDefinitionStore.get widget.Key
78+
79+
// TODO how to attach or create the view? how to get TreeContext and EnvironmentContext?
80+
(*let struct (_node, view) =
81+
widgetDef.CreateView(widget, ...?, ...?, ValueNone)
82+
83+
notificationManager.Show(view)*)
84+
dispatch(NotificationShown)))
85+
7086
let controlNotificationsRef = ViewRef<WindowNotificationManager>()
7187

7288
let notification title message =
@@ -81,31 +97,37 @@ module NotificationsPage =
8197

8298
let init () =
8399
{ NotificationManager = null
84-
NotificationPosition = NotificationPosition.TopRight },
100+
NotificationPosition = NotificationPosition.TopRight
101+
ShowInlined = false },
85102
[]
86103

104+
let questionContent title question = InlinedYesNoQuestion(title, question, YesCommand, NoCommand)
105+
87106
let update msg model =
88107
match msg with
89-
| ShowManagedNotification ->
108+
| ShowPlainNotification ->
90109
model, showNotification model.NotificationManager (Notification("Welcome", "Avalonia now supports Notifications.", NotificationType.Information))
91110

92-
| ShowCustomManagedNotification ->
111+
| ShowCustomPlainNotification ->
93112
model,
94113
showNotification model.NotificationManager (notification "Hey There!" "Did you know that Avalonia now supports Custom In-Window Notifications?")
114+
115+
| ShowCustomManagedNotification ->
116+
model,
117+
showNotificationContent model.NotificationManager (questionContent "Can you dig it?" "You can use standard widgets in notifications!")
95118

96119
| ShowNativeNotification ->
97120
model,
98121
showNotification model.NotificationManager (Notification("Error", "Native Notifications are not quite ready. Coming soon.", NotificationType.Error))
99122

100123
| ShowAsyncCompletedNotification -> model, notifyOneAsync()
101124
| ShowAsyncStatusNotifications -> model, notifyAsyncStatusUpdates()
125+
| ToggleInlinedNotification -> {model with ShowInlined = not model.ShowInlined}, Cmd.none
102126

103127
| NotifyInfo message -> model, showNotification model.NotificationManager (Notification(message, "", NotificationType.Information))
104-
| YesCommand ->
105-
model, showNotification model.NotificationManager (Notification("Avalonia Notifications", "Start adding notifications to your app today."))
128+
| YesCommand -> model, showNotification model.NotificationManager (Notification("Wise choice.", "You better!"))
129+
| NoCommand -> model, showNotification model.NotificationManager (Notification("What?", "Why wouldn't you?"))
106130

107-
| NoCommand ->
108-
model, showNotification model.NotificationManager (Notification("Avalonia Notifications", "Start adding notifications to your app today."))
109131
(* WindowNotificationManager can't be used immediately after creating it,
110132
so we need to wait for it to be attached to the visual tree.
111133
See https://github.com/AvaloniaUI/Avalonia/issues/5442 *)
@@ -153,10 +175,13 @@ module NotificationsPage =
153175
.classes([ "h2" ])
154176
.textWrapping(TextWrapping.Wrap)
155177

156-
Button("Show Standard Managed Notification", ShowManagedNotification)
178+
Button("A plain Notification", ShowPlainNotification)
157179
.dock(Dock.Top)
158180

159-
Button("Show Custom Managed Notification", ShowCustomManagedNotification)
181+
Button("A custom plain Notification", ShowCustomPlainNotification)
182+
.dock(Dock.Top)
183+
184+
Button("A Managed Notification with custom content", ShowCustomManagedNotification)
160185
.dock(Dock.Top)
161186

162187
Button("Notify async operation completed", ShowAsyncCompletedNotification)
@@ -165,6 +190,9 @@ module NotificationsPage =
165190
Button("Notify status updates from async operation", ShowAsyncStatusNotifications)
166191
.dock(Dock.Top)
167192

193+
Button("Toggle inlined notifications", ToggleInlinedNotification)
194+
.dock(Dock.Top)
195+
168196
TextBlock("Widget-only notification manager.")
169197
.dock(Dock.Top)
170198
.margin(2.)
@@ -188,11 +216,14 @@ module NotificationsPage =
188216
})
189217
.dock(Dock.Top)
190218

191-
CustomNotification("Avalonia Notifications", "Start adding notifications to your app today.", YesCommand, NoCommand)
219+
InlinedYesNoQuestion("Can you believe it?", "You can also roll your own inlined dialogs using standard widgets.", YesCommand, NoCommand)
220+
.isVisible(model.ShowInlined)
192221
.dock(Dock.Top)
193222

194-
NotificationCard(false, "This is a notification card.")
195-
.size(200., 100.)
223+
//TODO toggling the isClosed flag seems to do nothing. Why include it in the builders at all?
224+
NotificationCard(not model.ShowInlined, "I was here all along, just hidden!")
225+
.isVisible(model.ShowInlined)
226+
.size(300., 70.)
196227
.dock(Dock.Top)
197228
.padding(10)
198229
.borderBrush(SolidColorBrush(Colors.Blue))

samples/Gallery/Widgets.fs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Gallery
1+
namespace Gallery
22

33
open System.Runtime.CompilerServices
44
open Avalonia.Media
@@ -69,11 +69,11 @@ open type Fabulous.Avalonia.View
6969
module CustomNotificationBuilders =
7070
type Fabulous.Avalonia.View with
7171

72-
static member CustomNotification(title: string, message: string, yesCommand: 'msg, noCommand: 'msg) =
72+
static member InlinedYesNoQuestion(title: string, message: string, yesCommand: 'msg, noCommand: 'msg) =
7373
Border(
7474
Grid(coldefs = [ Auto; Star ], rowdefs = [ Auto ]) {
7575
(Panel() {
76-
TextBlock("&#xE115;")
76+
TextBlock("")
7777
.foreground(SolidColorBrush(Colors.White))
7878
.fontWeight(FontWeight.Bold)
7979
.fontSize(20.)

0 commit comments

Comments
 (0)