Bug 43658 - Adjust notifications to new design
Adjust notifications to new design
Status: CLOSED FIXED
Product: UCS
Classification: Unclassified
Component: UMC (Generic)
UCS 4.2
Other Linux
: P5 normal (vote)
: UCS 4.2-1-errata
Assigned To: Johannes Keiser
Alexander Kläser
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2017-02-27 17:36 CET by Alexander Kläser
Modified: 2017-08-22 11:47 CEST (History)
4 users (show)

See Also:
What kind of report is it?: Development Internal
What type of bug is this?: ---
Who will be affected by this bug?: ---
How will those affected feel about the bug?: ---
User Pain:
Enterprise Customer affected?:
School Customer affected?:
ISV affected?:
Ticket number:
Bug group (optional): Design, Usability
Max CVSS v3 score:


Attachments
UMC overview - no new notifications (110.20 KB, image/png)
2017-02-27 17:36 CET, Alexander Kläser
Details
UMC overview - new notifications pop up (134.32 KB, image/png)
2017-02-27 17:37 CET, Alexander Kläser
Details
UMC overview - notification entry is expanded on hovering (137.72 KB, image/png)
2017-02-27 17:37 CET, Alexander Kläser
Details
Implementation of drop down menu (54.05 KB, image/png)
2017-08-07 15:39 CEST, Johannes Keiser
Details
Snackbar notification - normal (45.70 KB, image/png)
2017-08-07 15:39 CEST, Johannes Keiser
Details
Snackbar notification - warning (59.37 KB, image/png)
2017-08-07 15:40 CEST, Johannes Keiser
Details
mockup for notification icon (18.29 KB, image/svg+xml)
2017-08-08 15:20 CEST, Alexander Kläser
Details
mockup for notification icon (18.29 KB, image/svg+xml)
2017-08-08 15:22 CEST, Alexander Kläser
Details
Screenshot of notification on small screen (21.58 KB, image/png)
2017-08-08 16:22 CEST, Alexander Kläser
Details
Screenshot of context warn on IE11 (Win7) (244.52 KB, image/png)
2017-08-08 16:58 CEST, Alexander Kläser
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Alexander Kläser univentionstaff 2017-02-27 17:36:27 CET
Created attachment 8468 [details]
UMC overview - no new notifications

The appearance of the notifications will be reworked in UCS 4.2. See the attached mockups:
* New notifications will trigger a menu popping up from the bell icon. In the 
  menu, only unread items will be shown.
* The menu can be closed by clicking anywhere outside the menu.
* The bell icon will stay red as long as there are messages which have not been
  closed (via the x-icon of a notification entry). When turning red, the bell
  will initially shake (via CSS transition effects).
* Notification entries are by default only cut down to a length of 2 lines. When 
  hovering over a notification entry, the entry expands to its full length.
* An entry can be dismissed by clicking on the x-icon.

Note that we need to remove positive confirmations such as "The service
has been restarted successfully" (cf., services module). Only notifications which are not related to any actions should be shown in the notifications menu.
Comment 1 Alexander Kläser univentionstaff 2017-02-27 17:37:25 CET
Created attachment 8469 [details]
UMC overview - new notifications pop up
Comment 2 Alexander Kläser univentionstaff 2017-02-27 17:37:52 CET
Created attachment 8470 [details]
UMC overview - notification entry is expanded on hovering
Comment 3 Erik Damrose univentionstaff 2017-02-27 17:43:52 CET
Please add an option to remove/close all notifications
Comment 4 Johannes Keiser univentionstaff 2017-08-04 17:58:07 CEST
r 81800
univention-management-console (9.0.80-60) 
* Bug #43658: adjust notifications to new design


r 81798
univention-web (1.0.42-26) 
* Bug #43658: adjust design of notifications

r 81801
univention-web (1.0.42-27) 
* Bug #43658: fix syntax error
Comment 5 Johannes Keiser univentionstaff 2017-08-07 14:56:30 CEST
(In reply to Alexander Kläser from comment #0)

> Note that we need to remove positive confirmations such as "The service
> has been restarted successfully" (cf., services module). Only notifications
> which are not related to any actions should be shown in the notifications
> menu.

There are now two types of notifications.

First, the persistent notifications with the style shown in attachment 8469 [details].
These notifications are global and the meaning should not be dependent on performed actions or the current context of an action.
Example for global notifications:
"An update for UCS is available. Please visit the "Software update" module to install the updates."
or 
_('The %(certificate)s will expire in %(days)d days and should be renewed!', {certificate: certType, days: days})


Second,notifications like
"You are currently editing a policy. Changing its properties affects all referenced objects and may affect your system globally."
or
"Signal (SIGTERM) sent successfully" (terminating a process)
that are tied to a currently performed action or context.

They loose meaning after a minute or so of terminating a process or if you stop editing the policy and should therefore not be in the drop down menu for the global notifications.

For these types of notifications the 'Snackbar' defined by Google Material Design (https://material.io/guidelines/components/snackbars-toasts.html) is used.


The old functions 'notify' and 'warn' from dialog.js use the drop down menu.
The new functions 'contextNotify' and 'contextWarn' use the Snackbar.

The 'addNotification' and 'addWarning' functions in
widgets/_ModuleMixin.js, widgets/Page.js, widgets/Form.js
now use the new Snackbar notifications.
Comment 6 Johannes Keiser univentionstaff 2017-08-07 14:57:08 CEST
r 81852
univention-web (1.0.42-28) 
* Bug #43658: adjust styling of action button in snackbar notifications
and add copyright notice for google material design and iconmonstr
Comment 7 Johannes Keiser univentionstaff 2017-08-07 15:39:10 CEST
Created attachment 9096 [details]
Implementation of drop down menu
Comment 8 Johannes Keiser univentionstaff 2017-08-07 15:39:42 CEST
Created attachment 9097 [details]
Snackbar notification - normal
Comment 9 Johannes Keiser univentionstaff 2017-08-07 15:40:07 CEST
Created attachment 9098 [details]
Snackbar notification - warning
Comment 10 Johannes Keiser univentionstaff 2017-08-07 15:48:28 CEST
YAML: r 81857
Comment 11 Johannes Keiser univentionstaff 2017-08-07 17:06:51 CEST
r 81858
univention-web (1.0.42-29) 
* Bug #43658: fix non clickable area on bottom of screen, caused
by snackbar notifications
Comment 12 Alexander Kläser univentionstaff 2017-08-08 15:20:42 CEST
Created attachment 9102 [details]
mockup for notification icon

As discussed, the bell icon with a bubble and the number of messages would probably be more familiar to users to recognize. See attached mockup of the icon with different backgrounds.
Comment 13 Alexander Kläser univentionstaff 2017-08-08 15:22:40 CEST
Created attachment 9103 [details]
mockup for notification icon

A little adjustment, on grey background, we do not need a contour around the bubble.
Comment 14 Alexander Kläser univentionstaff 2017-08-08 15:49:39 CEST
In IE11 (Win7), I saw the following JS error:
> Unable to get property 'indexOf' of undefined or null reference
in js/dialog/NotificationDropDownButton.js:472:
> return evt.path.indexOf(node) !== -1;
Comment 15 Alexander Kläser univentionstaff 2017-08-08 16:13:09 CEST
As discussed, the snackbar needs a subtle shadow.
Comment 16 Alexander Kläser univentionstaff 2017-08-08 16:22:54 CEST
Created attachment 9105 [details]
Screenshot of notification on small screen

I would suggest to style the notifications for small screens in order to be centered and with a width=100% (similar to the snackbars).
Comment 17 Alexander Kläser univentionstaff 2017-08-08 16:58:25 CEST
Created attachment 9106 [details]
Screenshot of context warn on IE11 (Win7)

I noticed that the line break for the contextWarn/Notify() function does not work with IE11 (Win7).
Comment 18 Alexander Kläser univentionstaff 2017-08-08 17:15:11 CEST
(In reply to Alexander Kläser from comment #17)
> Created attachment 9106 [details]
> Screenshot of context warn on IE11 (Win7)
> 
> I noticed that the line break for the contextWarn/Notify() function does not
> work with IE11 (Win7).

Note that the alignment to the bottom does not work correctly for IE11 (Win7).
Comment 19 Johannes Keiser univentionstaff 2017-08-08 17:52:49 CEST
(In reply to Alexander Kläser from comment #12)
> Created attachment 9102 [details]
> mockup for notification icon
> 
> As discussed, the bell icon with a bubble and the number of messages would
> probably be more familiar to users to recognize. See attached mockup of the
> icon with different backgrounds.


r 81905
univention-web (1.0.42-30) 
* Bug #43658: add notification counter to NotificationDropDownButton
and adjust width of snackbar notifications on small screens

r 81907
univention-management-console (9.0.80-61) 
* Bug #43658: insert color specific stylings for NotificationDropDownButton
Comment 20 Johannes Keiser univentionstaff 2017-08-08 18:33:26 CEST
(In reply to Alexander Kläser from comment #18)
> (In reply to Alexander Kläser from comment #17)
> > Created attachment 9106 [details]
> > Screenshot of context warn on IE11 (Win7)
> > 
> > I noticed that the line break for the contextWarn/Notify() function does not
> > work with IE11 (Win7).
> 
> Note that the alignment to the bottom does not work correctly for IE11
> (Win7).

r 81908
univention-web (1.0.42-31) 
* Bug #43658: use float instead of flex
Comment 21 Johannes Keiser univentionstaff 2017-08-08 19:05:33 CEST
(In reply to Alexander Kläser from comment #14)
> In IE11 (Win7), I saw the following JS error:
> > Unable to get property 'indexOf' of undefined or null reference
> in js/dialog/NotificationDropDownButton.js:472:
> > return evt.path.indexOf(node) !== -1;

MouseEvent.path is only supported in Chrome. Added a workaround for other
browsers.

r 81911
univention-web (1.0.42-32) 
* Bug #43658: fix MouseEvent error due to MouseEvent.path
only being available in Chrome
Comment 22 Johannes Keiser univentionstaff 2017-08-08 19:10:15 CEST
(In reply to Alexander Kläser from comment #15)
> As discussed, the snackbar needs a subtle shadow.

r 81912
univention-web (1.0.42-33) 
* Bug #43658: add shadow to snackbar notifications
Comment 23 Alexander Kläser univentionstaff 2017-08-09 11:56:12 CEST
"The UMC uses guidelines defined by the Google Material Design."
→ should rather be "... defined by Google Material Design."
Comment 24 Alexander Kläser univentionstaff 2017-08-09 13:40:45 CEST
I would suggest to adjust the time a context notification is shown. Assuming that a slow reader reads 2 words per second, I would suggest to calculate it like:

max(4 sec, numberOfWords * 0.5 sec)
Comment 25 Alexander Kläser univentionstaff 2017-08-09 13:42:49 CEST
Is it possible to give the context notifications a higher z-index than the standby animation?
Comment 26 Alexander Kläser univentionstaff 2017-08-09 13:57:16 CEST
As discussed, the bubble containing the number of notifications, would look a bit nicer if it was smaller. I'd suggest the following CSS values:

> width: 17px;
> height: 17px;
> top: 8px;
> right: 15px;

Please make sure that values > 99 are not displayed, but instead they stay at 99.
Comment 27 Johannes Keiser univentionstaff 2017-08-09 14:14:24 CEST
(In reply to Alexander Kläser from comment #25)
> Is it possible to give the context notifications a higher z-index than the
> standby animation?

(In reply to Alexander Kläser from comment #23)
> "The UMC uses guidelines defined by the Google Material Design."
> → should rather be "... defined by Google Material Design."

(In reply to Alexander Kläser from comment #24)
> I would suggest to adjust the time a context notification is shown. Assuming
> that a slow reader reads 2 words per second, I would suggest to calculate it
> like:
> 
> max(4 sec, numberOfWords * 0.5 sec)

r 81939
univention-web (1.0.42-34) 
* Bug #43658: increase time snackbar notifications stay on screen
for long messages and show snackbar notifications above standby
animations
Comment 28 Johannes Keiser univentionstaff 2017-08-09 17:39:48 CEST
(In reply to Alexander Kläser from comment #16)
> Created attachment 9105 [details]
> Screenshot of notification on small screen
> 
> I would suggest to style the notifications for small screens in order to be
> centered and with a width=100% (similar to the snackbars).

> As discussed, the bubble containing the number of notifications, would look
> a bit nicer if it was smaller. I'd suggest the following CSS values:
> 
> > width: 17px;
> > height: 17px;
> > top: 8px;
> > right: 15px;
> 
> Please make sure that values > 99 are not displayed, but instead they stay
> at 99.

r 81961
univention-web (1.0.42-35) 
* Bug #43658: use full window width for notificationsdropdown on
small screens and adjusted NotificationDropDownButton notifications
coutner(In reply to Alexander Kläser from comment #26)
Comment 29 Johannes Keiser univentionstaff 2017-08-09 17:50:18 CEST
r 81963
univention-web (1.0.42-36) 
* Bug #43658: remove old unused javascript and css code
Comment 30 Johannes Keiser univentionstaff 2017-08-09 18:09:47 CEST
r 81964
univention-web (1.0.42-37) 
* Bug #43658: fix missing dependency
Comment 31 Alexander Kläser univentionstaff 2017-08-14 17:38:18 CEST
Issues since last QA:
* Bell icon with bubble → OK
* Shadow for snackbars → OK
* Notifications with width=100% on small screens →
* Text adaptations for copyright →
* Snackbar duration depending on number of words → OK
* z-index of snackbars higher than standby animation → OK

Issues for IE11 on Win7:
* JS error → OK
* Line break in snackbars → OK
* Alignment of snackbars to bottom → OK

YAML file: OK (adapted package version)

→ VERIFIED
Comment 33 Christina Scheinig univentionstaff 2017-08-22 11:47:47 CEST
Maybe we have a regression with this errata update. In a test environment and in a customer environment (Ticket#2017082221000178) as well, after this errata no menu is shown in the UMC using Firefox with ssl.

Clearing the browser cache solved the problem