Fixed notification message images and updated layout schematic diagram. #19835

Change-Id: I3e14463a11e24cfeeafb1cddd7a42927e6897073

1 files changed, 20 insertions, 14 deletions

diff --git a/documentation/application/application-notifications.asciidoc b/documentation/application/application-notifications.asciidoc
index d58bf7b59a..920bcbc6f7 100644
--- a/documentation/application/application-notifications.asciidoc
+++ b/documentation/application/application-notifications.asciidoc
@@ -28,7 +28,7 @@ Notification.show("This is the caption",
 
 [[figure.notification.example1]]
 .Notification
-image::img/notification-example2.png[]
+image::img/notification-example2.png[width=50%, scaledwidth=80%]
 
 For more control, you can create a [classname]#Notification# object. Different
 constructors exist for taking just the caption, and optionally the description,
@@ -57,7 +57,7 @@ User Input to Prevent Cross-Site Scripting">>.
 
 [[figure.notification.example2]]
 .Notification with HTML Formatting
-image::img/notification-example3.png[]
+image::img/notification-example3.png[width=30%, scaledwidth=60%]
 
 [[application.notifications.type]]
 == Notification Type
@@ -67,31 +67,41 @@ notification. If no notification type is given, the "humanized" type is used as
 the default. The notification types, listed below, are defined in the
 [classname]#Notification.Type# class.
 
-[parameter]#TYPE_HUMANIZED_MESSAGE# image:[]:: A user-friendly message that does not annoy too much: it does not require
+[parameter]#TYPE_HUMANIZED_MESSAGE#::
+image:img/notification-humanized.png[width=30%, scaledwidth=50%]
++
+A user-friendly message that does not annoy too much: it does not require
 confirmation by clicking and disappears quickly. It is centered and has a
 neutral gray color.
 
-[parameter]#TYPE_WARNING_MESSAGE# image:[]:: Warnings are messages of medium importance. They are displayed with colors that
+[parameter]#TYPE_WARNING_MESSAGE#::
+image:img/notification-warning.png[width=30%, scaledwidth=50%]
++
+Warnings are messages of medium importance. They are displayed with colors that
 are neither neutral nor too distractive. A warning is displayed for 1.5 seconds,
 but the user can click the message box to dismiss it. The user can continue to
 interact with the application while the warning is displayed.
 
-[parameter]#TYPE_ERROR_MESSAGE# image:[]:: Error messages are notifications that require the highest user attention, with
+[parameter]#TYPE_ERROR_MESSAGE#::
+image:img/notification-error.png[width=30%, scaledwidth=50%]
++
+Error messages are notifications that require the highest user attention, with
 alert colors, and they require the user to click the message to dismiss it. The
 error message box does not itself include an instruction to click the message,
 although the close box in the upper right corner indicates it visually. Unlike
 with other notifications, the user can not interact with the application while
 the error message is displayed.
 
-[parameter]#TYPE_TRAY_NOTIFICATION# image:[]:: Tray notifications are displayed in the "system tray" area, that is, in the
+[parameter]#TYPE_TRAY_NOTIFICATION#::
+image:img/notification-tray.png[width=30%, scaledwidth=50%]
++
+Tray notifications are displayed in the "system tray" area, that is, in the
 lower-right corner of the browser view. As they do not usually obscure any user
 interface, they are displayed longer than humanized or warning messages, 3
 seconds by default. The user can continue to interact with the application
 normally while the tray notification is displayed.
 
 
-
-
 ifdef::web[]
 [[application.notifications.customization]]
 == Customizing Notifications
@@ -114,7 +124,7 @@ notif.setDelayMsec(20000);
 notif.setPosition(Position.BOTTOM_RIGHT);
 notif.setStyleName("mystyle");
 notif.setIcon(new ThemeResource("img/reindeer.png"));
-                
+
 // Show it in the page
 notif.show(Page.getCurrent());
 ----
@@ -170,8 +180,4 @@ The result is shown, with the icon set earlier in the customization example, in
 
 [[figure.application.errors.notifications.css]]
 .A Styled Notification
-image::img/notification-customization.png[]
-
-
-
-
+image::img/notification-customization.png[width=40%, scaledwidth=60%]