|
| 1 | +Screens: |
| 2 | + Notification Toaster demo: |
| 3 | + Properties: |
| 4 | + BackgroundImage: ="https://images.unsplash.com/photo-1558485694-21e9d4f2bd36?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" |
| 5 | + ImagePosition: =ImagePosition.Fill |
| 6 | + Children: |
| 7 | + - Container1: |
| 8 | + Control: GroupContainer@1.3.0 |
| 9 | + Variant: AutoLayout |
| 10 | + Properties: |
| 11 | + DropShadow: =DropShadow.Bold |
| 12 | + Fill: =RGBA(255, 255, 255, 0.75) |
| 13 | + Height: =488 |
| 14 | + LayoutAlignItems: =LayoutAlignItems.Center |
| 15 | + LayoutDirection: =LayoutDirection.Vertical |
| 16 | + LayoutGap: =40 |
| 17 | + LayoutJustifyContent: =LayoutJustifyContent.Center |
| 18 | + RadiusBottomLeft: =20 |
| 19 | + RadiusBottomRight: =20 |
| 20 | + RadiusTopLeft: =20 |
| 21 | + RadiusTopRight: =20 |
| 22 | + Width: =404 |
| 23 | + X: =424 |
| 24 | + Y: =140 |
| 25 | + Children: |
| 26 | + - ButtonRandomNotification: |
| 27 | + Control: Classic/Button@2.2.0 |
| 28 | + Properties: |
| 29 | + Fill: =App.Theme.Colors.Lighter20 |
| 30 | + Height: =37 |
| 31 | + OnSelect: |- |
| 32 | + =Switch(RandBetween(1,4), |
| 33 | + 1, |
| 34 | + Select(ButtonShortNotification), |
| 35 | + 2, |
| 36 | + Select(ButtonMediumNotification), |
| 37 | + 3, |
| 38 | + Select(ButtonLongNotification), |
| 39 | + 4, |
| 40 | + Select(ButtonVeryLongNotification) |
| 41 | + ) |
| 42 | + TabIndex: =-1 |
| 43 | + Text: ="Random notification" |
| 44 | + Width: =282 |
| 45 | + X: =492 |
| 46 | + Y: =268 |
| 47 | + - ButtonShortNotification: |
| 48 | + Control: Classic/Button@2.2.0 |
| 49 | + Properties: |
| 50 | + Height: =37 |
| 51 | + OnSelect: =NotificationToaster_1.Notify("✅ Success",NotificationType.Success,"Your settings have been saved successfully.",3000) |
| 52 | + TabIndex: =-1 |
| 53 | + Text: ="Short notification" |
| 54 | + Width: =282 |
| 55 | + X: =492 |
| 56 | + Y: =107 |
| 57 | + - ButtonMediumNotification: |
| 58 | + Control: Classic/Button@2.2.0 |
| 59 | + Properties: |
| 60 | + Height: =37 |
| 61 | + OnSelect: =NotificationToaster_1.Notify("⚠️ Session Expiring",NotificationType.Warning,"Your session is about to expire due to inactivity. To protect your account, you will be logged out in two minutes. Please save any unsaved work now.") |
| 62 | + TabIndex: =-1 |
| 63 | + Text: ="Medium notification" |
| 64 | + Width: =282 |
| 65 | + X: =492 |
| 66 | + Y: =159 |
| 67 | + - ButtonLongNotification: |
| 68 | + Control: Classic/Button@2.2.0 |
| 69 | + Properties: |
| 70 | + Height: =37 |
| 71 | + OnSelect: =NotificationToaster_1.Notify("ℹ️ New Feature Available", NotificationType.Information,"We're excited to announce the arrival of our new ""Project Templates"" feature! You can now create and save custom project layouts to streamline your workflow. To get started, simply navigate to the ""Projects"" tab and select ""Create from Template."" We hope this update helps you work more efficiently.") |
| 72 | + TabIndex: =-1 |
| 73 | + Text: ="Long notification" |
| 74 | + Width: =282 |
| 75 | + X: =492 |
| 76 | + Y: =211 |
| 77 | + - ButtonVeryLongNotification: |
| 78 | + Control: Classic/Button@2.2.0 |
| 79 | + Properties: |
| 80 | + Height: =37 |
| 81 | + OnSelect: |- |
| 82 | + =NotificationToaster_1.Notify("❌ Payment Authorization Failed action required immediatly", NotificationType.Error,"We were unable to process your payment for order #855-24B. The authorization was declined by your bank, which can happen due to insufficient funds, an incorrect card number, or security limits set by your financial institution. Please double-check your payment details and try again. If the issue persists after verifying your information, we recommend contacting your bank directly for more details before attempting another transaction. We have saved your cart for your convenience.") |
| 83 | + TabIndex: =-1 |
| 84 | + Text: ="Very long notification" |
| 85 | + Width: =282 |
| 86 | + X: =492 |
| 87 | + Y: =260 |
| 88 | + - NotificationToaster_1: |
| 89 | + Control: CanvasComponent |
| 90 | + ComponentName: NotificationToaster |
| 91 | + Properties: |
| 92 | + ContentLanguage: ="" // YAML Snipet component by David Zoonekyndt https://dz13n.wordpress.com/ |
| 93 | + Height: |- |
| 94 | + =// Adjusts the height according to the number of notifications without exceeding the screen height, do not modify |
| 95 | + Min(NotificationToaster_1.AutoHeight,App.ActiveScreen.Height) |
| 96 | + Theme: |- |
| 97 | + =/*---------------- Instructions ------------------ |
| 98 | + To Notify, use : |
| 99 | +
|
| 100 | + NotificationToaster_1.Notify( //replace 'NotificationToaster_1' by the name of the component in your app screen |
| 101 | + "✅ Success", // Mandatory : Title of your notification in bold text |
| 102 | + NotificationType.Success, // Optionnal : NotificationType.Information by default |
| 103 | + "Your settings have been saved successfully.", // Optional : Detailled notifiction text |
| 104 | + 3000 // Optionnal : The notification lifetime will be calculated based on the number of characters to be read and the 'ReadingSpeed' in the 'Theme' parameter |
| 105 | +
|
| 106 | + Componnent positionning : To position the component in the bottom right corner of your screen, use the following positioning formulas: |
| 107 | + x: Parent.Width-Self.Width |
| 108 | + y: Parent.Height-Self.Height |
| 109 | +
|
| 110 | + */ |
| 111 | + {Transparency:"99", // in hexadecimal : from 00(transparent) to ff (opaque) |
| 112 | + FontSize:11, |
| 113 | + ReadingSpeed:23, // chars per second, used to calculate default notification duration |
| 114 | + SuccessTextColor:"#ffffff", |
| 115 | + SuccessBckgndColor:"#009944", |
| 116 | + ErrorTextColor:"#ffffff", |
| 117 | + ErrorBckgndColor:"#cf000f", |
| 118 | + WarningTextColor:"#ffffff", |
| 119 | + WarningBckgndColor:"#f0541e", |
| 120 | + InformationTextColor:"#000000", |
| 121 | + InformationBckgndColor:"#ffffff" |
| 122 | + } |
| 123 | + Width: =420 |
| 124 | + X: =Parent.Width-Self.Width |
| 125 | + Y: =Parent.Height-Self.Height |
0 commit comments