OOUI now uses absolute positioning for these icons, which breaks
the centered text model we'd like to use. Longer-term we should
use a different widget for these buttons, or perhaps a widget of
our own, but for now let's hack around that by undoing the
absolute positioning.
Change-Id: I8cc1fd69eeedde00facec80d82a21d5cc5610992
We need the button to remain a standalone <a> element so it preserves
the exact same styling as the output we're getting from the PHP. the
only way to do this is to create the widget as the entire <li> and then
replace the original.
Bug: T112218
Change-Id: Ib6fd4369d46cb7f37b14675d63bbce9950abcd48
The unseen animation should display whether the option is unread or
read, because it should point out notifications that were unseen/new in
this session even if they are immediately marked as read (in cases
where the configuration is 'mark read when seen', like in alerts).
However, the animation itself switched by default to white background
which is an 'unread' state. This made cases like "mark all as read"
mark the notifications as read but still have a white background as
if they are unread, and yet have no 'x' button because they are actually
read. (Bear with me here)
This commit organizes the animation better. We now have a proper clear
naming for the two animations - unseen-to-read and unseen-to-unread and
we use unseen-to-read as default. unseen-to-unread is used when
the -unread class is applied and the other cases should reflect the
correct state of the option read/unread status.
Bug: T112826
Change-Id: I7fe8ea5dcf8c3e31d16213313be34b2350d03655
There is no need to load the entire of Echo's ui module (especially
since that includes ooui widgets and their styles) on every page load.
There's only need to load the entire module if and when a user clicks
the Echo notification badge.
Also, make the echo.dm model accept an external fetchNotifications
promise so we can send the API request alongside loading the echo UI
and "feed" it into the DM for processing.
CSS adjusted to make the "jump" between the nojs and the js buttons
seem less jumpy.
Bug: T112401
Change-Id: I516e655ffd198511d694489a0702c5c713a5fd68
Remove the behavior of the SelectWidget 'choose' and instead wrap
the notifications with their primary url links. That way, the click
handler returns to browser native response, and we gain automatic
behavior for ctrl+click, middle click, and regular click.
CSS had to be adjusted as well.
Bug: T112004
Change-Id: If10a4d3be71a8cf3ce966f15b922da0b9a2ddcc7
Make the popup header the pending element to give the user a visual
indication that the notification widget is being updated, but don't
clear the notifications before loading more from the database.
Bug: T112186
Change-Id: If2b724fab07ef5b7caf5cab3e44fe326470ac0e7
The flyout is now part of the personal tools, so Modern's styling of
`#p-personal li a` now affects it. Override that for links in the flyout
so it doesn't look super silly.
Bug: T111825
Change-Id: Ie67ff2d7803362bd7214bade27383282620799b9
The alignment of the buttons was done haphazadly before, using
padding. This should be done better; we should calculate the buttons
width to be 50% of the width of the popup.
Since the popup accepts a width config, we know what its value is,
and can calculate the proper width. The width was added to the
variables.less file for continued use.
* Added popupWidth config variable to the badge widget
* Added OO.ui.ButtonGroupWidget to place the buttons in for
consistency and styling
* Added calculated width styles to both footer buttons
* Added corrections for MonoBook
Change-Id: Iad2c947da06241e9303cf1f35574177a0f602bbb
Notification badges are conceptually closer together than the rest of toolbar elements.
So it makes sense to move them closer visually too.
This is just a small CSS adjustment to compensate for the default margin
that items in the menu get. If there is a cleanner way to achieve the same,
feel free to refactor.
Bug: T108190
Change-Id: I06403f67c24f045c125c505dca2101f9eed79594
This is so that the animation definition remains on the notification even
after it is marked as seen.
Change-Id: Ifd19cd5cd003a4e29d0c42788d51aca985e0b859
Split the notifications into 'alert' and 'message' badget with two
different flyouts. Also clean up styling and module behavior.
** Depends on ooui change Id4bbe14ba0bf6c for footers in popups.
** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in
inverted icons.
** MobileFrontend must also be updated to support the new modules
in this patch I168f485d6e54cb4067
In this change:
* Split notifcations into alert and messages and display those in
two different badges.
* Create two separate flyout/popups for each category with their
notifications.
* Create a view-model to control notification state and emit events
for both the popup and the badge to intercept and react to.
* Clean up module load and distribution:
* Create an ext.echo.ui module for javascript-ui support and ooui
widgets.
* Create an ext.echo.nojs module that unifies all base classes that
are needed for both nojs and js support, that the js version
builds upon.
* Create a separate ext.echo.logger module as a singleton that can
be called to perform all logging.
* Clean up style uses
* Move the special page LESS file into nojs module so all styles
load properly even in nojs mode.
* Transfer some of the styling from JS to LESS for consistency.
* Make the 'read more' button load already with the styles it
needs to look like a button, since its behavior is similar in
nojs and js vesions, but before its classes were applied only
by the js, making it inconsistent and also making its appearance
'jump' from a link to a button.
* Delete and clean up all old and unused files.
* Moved 'Help.png' icon from modules/overlay to modules/icons for
later use.
Bug: T108190
Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
