Univention Bugzilla – Bug 43658
Adjust notifications to new design
Last modified: 2017-08-22 11:47:47 CEST
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.
Created attachment 8469 [details] UMC overview - new notifications pop up
Created attachment 8470 [details] UMC overview - notification entry is expanded on hovering
Please add an option to remove/close all notifications
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
(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.
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
Created attachment 9096 [details] Implementation of drop down menu
Created attachment 9097 [details] Snackbar notification - normal
Created attachment 9098 [details] Snackbar notification - warning
YAML: r 81857
r 81858 univention-web (1.0.42-29) * Bug #43658: fix non clickable area on bottom of screen, caused by snackbar notifications
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.
Created attachment 9103 [details] mockup for notification icon A little adjustment, on grey background, we do not need a contour around the bubble.
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;
As discussed, the snackbar needs a subtle shadow.
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).
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).
(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).
(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
(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
(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
(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
"The UMC uses guidelines defined by the Google Material Design." → should rather be "... defined by Google Material Design."
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)
Is it possible to give the context notifications a higher z-index than the standby animation?
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.
(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
(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)
r 81963 univention-web (1.0.42-36) * Bug #43658: remove old unused javascript and css code
r 81964 univention-web (1.0.42-37) * Bug #43658: fix missing dependency
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
<http://errata.software-univention.de/ucs/4.2/138.html> <http://errata.software-univention.de/ucs/4.2/139.html>
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