Update notification-toaster.yaml

Updated version with component advanced properties

Author: DavidZoon

power-apps/Notification-Toaster/source/notification-toaster.yaml

@@ -8,6 +8,31 @@ ComponentDefinitions:
         DisplayName: AutoHeight
         Description: A custom property
         DataType: Number
+      Notify:
+        PropertyKind: Action
+        DisplayName: Notify
+        Description: A custom property
+        ReturnType: Table
+        Parameters:
+          - Title:
+              Description: Notification title (bold)
+              DataType: Text
+              Default: =""
+          - Type:
+              Description: Notification type, use NotificationType.Succes .Error etc..
+              IsOptional: true
+              DataType: Number
+              Default: =3
+          - Text:
+              Description: Detailled notification text
+              IsOptional: true
+              DataType: Text
+              Default: =""
+          - Duration:
+              Description: Notification duration in milliseconds
+              IsOptional: true
+              DataType: Number
+              Default: =Blank()
       Theme:
         PropertyKind: Input
         DisplayName: Theme
@@ -16,20 +41,21 @@ ComponentDefinitions:
         Default: |-
           =/*---------------- Instructions ------------------
           To Notify, use :
-          Collect(colNotifications, {
-              Title:      "✅ Success",                                      // set your notificaiton title here
-              Text:       "Your settings have been saved successfully.",  // put you notification text here
-              Type:       NotificationType.Success,                       // used for notification appearance
-              Duration:   2000                                            // Notification duration in milliseconds
-              }
-          )
+
+          NotificationToaster_1.Notify(                           //replace 'NotificationToaster_1' by the name of the component in your app screen
+              "✅ Success",                                       // Mandatory : Title of your notification in bold text
+              NotificationType.Success,                           // Optionnal : NotificationType.Information by default
+              "Your settings have been saved successfully.",      // Optional : Detailled notifiction text
+              3000                                                // Optionnal : The notification lifetime will be calculated based on the number of characters to be read and the 'ReadingSpeed' in the 'Theme' parameter
+
           Componnent positionning : To position the component in the bottom right corner of your screen, use the following positioning formulas:
           x: Parent.Width-Self.Width
           y: Parent.Height-Self.Height
 
           */
           {Transparency:"99", // in hexadecimal : from 00(transparent) to ff (opaque)
           FontSize:11,
+          ReadingSpeed:23, // chars per second, used to calculate default notification duration
           SuccessTextColor:"#ffffff",
           SuccessBckgndColor:"#009944",
           ErrorTextColor:"#ffffff",
@@ -45,7 +71,8 @@ ComponentDefinitions:
       Height: |-
         =// Adjusts the height according to the number of notifications without exceeding the screen height, do not modify
         Min(NotificationToaster.AutoHeight,App.ActiveScreen.Height)
-      Width: =640 // Can be adjusted
+      Notify: =Collect(colNotifications,{ID:Max(colNotifications,ID)+1,Title:Title,Text:Text, Type:Type, Duration:Duration})
+      Width: =420
     Children:
       - GalleryNotifs:
           Control: Gallery@2.15.0
@@ -75,7 +102,7 @@ ComponentDefinitions:
                             /* --- Div styles --- */
                             position: relative;
                             overflow: hidden; /* Nécessaire pour couper la barre de progression aux bords arrondis */
-                            width: 98%;
+                            width: 100%;
                             box-sizing: border-box;
                             color: {Switch(ThisItem.Type,NotificationType.Error,NotificationToaster.Theme.ErrorTextColor,NotificationType.Information,NotificationToaster.Theme.InformationTextColor,NotificationType.Success,NotificationToaster.Theme.SuccessTextColor,NotificationType.Warning,NotificationToaster.Theme.WarningTextColor,"#000000")};
                             border-radius: 16px;
@@ -84,6 +111,7 @@ ComponentDefinitions:
                             margin-bottom: 5px;
                             padding: 20px;
                             padding-top: 25px;
+                            padding-right: 35px;
                             backdrop-filter: blur(8px);
                             -webkit-backdrop-filter: blur(8px);
 
@@ -99,7 +127,7 @@ ComponentDefinitions:
                                 width: 100%;
                                 height: 4px;
                                 background-color: rgba(255, 255, 255, 0.3);
-                            '>{If((ThisItem.ID=First(colNotifications).ID && ThisItem.ID <> Blank()) || CountRows(colNotifications)=1 /* Hide progress bar if not first item */,$"
+                            '>{If(ThisItem.ID=First(colNotifications).ID /* Show progress bar only on 1st item */,$"
                             <div class='progress-bar-fill' style='
                                     height: 100%;
                                     width: {Text(IfError(TimerDeleteNotification.Value*100/TimerDeleteNotification.Duration,0),"0.00","en-US")}%; /* Force en-US to avoid comma separated decimals */
@@ -137,18 +165,28 @@ ComponentDefinitions:
                   Icon: ="DismissCircle"
                   IconStyle: ='ButtonCanvas.IconStyle'.Filled
                   Layout: ='ButtonCanvas.Layout'.IconOnly
-                  OnSelect: =If(ThisItem.ID=First(colNotifications).ID && ThisItem.ID <> Blank(), Set(vRemoveNotif,TimerDeleteNotification.Value) ,Remove(colNotifications,ThisItem))
+                  OnSelect: |-
+                    =If(ThisItem.ID=First(colNotifications).ID && ThisItem.ID <> Blank() // To avoid timer from keeping last item value
+                    , Set(vRemoveNotif,TimerDeleteNotification.Value) ,Remove(colNotifications,ThisItem))
                   Text: ="Remove"
                   Width: =40
-                  X: =Parent.TemplateWidth-Self.Width-25
+                  X: =Parent.TemplateWidth-Self.Width-15
                   Y: =15
       - TimerDeleteNotification:
           Control: Timer@2.1.0
           Properties:
             AutoStart: =true
-            Duration: =Coalesce(vRemoveNotif,First(colNotifications).Duration,2000)
+            Duration: |-
+              =With({FirstNotif:First(colNotifications)},
+              Coalesce(
+                  vRemoveNotif,
+                  FirstNotif.Duration,
+                  IfError((Len(FirstNotif.Title)+Len(FirstNotif.Text))/NotificationToaster.Theme.ReadingSpeed*1000,3500))
+              )
             OnSelect: =Collect(colNotifications,FirstN([{ID:1,Title:"",Text:"",Duration:1000}],0))
-            OnTimerEnd: =UpdateIf(colNotifications,ID=Blank(),{ID:Max(colNotifications,ID)+1});Remove(colNotifications,First(colNotifications));Set(vRemoveNotif,Blank())
+            OnTimerEnd: |-
+              =Remove(colNotifications,First(colNotifications));
+              Set(vRemoveNotif,Blank()) // To avoid timer from keeping last item value
             OnTimerStart: =UpdateIf(colNotifications,ID=Blank(),{ID:Max(colNotifications,ID)+1})
             Repeat: =true
             Reset: =//CountIf(colNotifications,ID=Blank())>0 || CountIf(colNotifications,ID=Blank())=0