summaryrefslogtreecommitdiffstats
path: root/documentation
diff options
context:
space:
mode:
authorMarko Gronroos <magi@vaadin.com>2016-06-30 13:49:11 +0300
committerMarko Grönroos <magi@vaadin.com>2016-06-30 11:14:18 +0000
commit38557c10ac26290161c00b82798032f873f5e27d (patch)
tree81d7657ea3c4ad283350863d9f6e7a64c6ea5823 /documentation
parent93767cf76b2fb14c65b758066c67fc8b48cc2eeb (diff)
downloadvaadin-framework-38557c10ac26290161c00b82798032f873f5e27d.tar.gz
vaadin-framework-38557c10ac26290161c00b82798032f873f5e27d.zip
Fixed notification message images and updated layout schematic diagram. #19835
Change-Id: I3e14463a11e24cfeeafb1cddd7a42927e6897073
Diffstat (limited to 'documentation')
-rw-r--r--documentation/application/application-notifications.asciidoc34
-rw-r--r--documentation/layout/img/layout-schematic-hi.pngbin54267 -> 54863 bytes
2 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%]
diff --git a/documentation/layout/img/layout-schematic-hi.png b/documentation/layout/img/layout-schematic-hi.png
index 89fe14362a..f64e5bb482 100644
--- a/documentation/layout/img/layout-schematic-hi.png
+++ b/documentation/layout/img/layout-schematic-hi.png
Binary files differ