To support accessibility, make sure the titles in Special:Notifications
are <h2> headings.
Bug: T149955
Change-Id: I4f15694efb04896e9bd7b026d297891047759644
Just show the textual "Alerts (1)" and "Notices (1)".
Updated NotificationBadgeWidget to use that internally as label,
same as the PHP-generated list item does after d4d325e7.
Bug: T141944
Change-Id: I468c67b0866530e21c9af32cd02816075a3693a1
Popup alignment corrections are now done with margins on the anchor,
not directly on the popup. Setting "left" also didn't have any effect,
because it was being overridden by inline styles set by the new
PopupWidget/FloatableElement code.
Bug: T159999
Change-Id: I7738edee7ae096fcc116a79e71a591a2287ea34f
We still need overflow-x set to a non-visible value, so that
the overflow-y: visible rule doesn't take effect. If it does
take effect, it breaks clipping.
This reverts commit 97bde4d21a.
Bug: T159888
Change-Id: Id834d9cf9615a8d2dad27faf2eb89743ad95da9d
This time we actually get to *remove* a hack that overrides OOUI,
which is always nice. Also add our new dependency on future-magic
forthcoming MediaWiki version.
Change-Id: Icef086e6b19dffb34eefe7b5658b57e020c5de8b
Before, secondary icons, such as linked, changes, thanks, and
userSpeechBubble were loaded in mw.echo.ui.icons.less. Now, an
extra icons attribute is passed when the module is loaded, allowing
RLEIM to know which icons to load. If this attribute is left out,
an MWException will be thrown.
Bug: T159394
Change-Id: I9b36a74bcf1da0d1c698845bd067b226fb81ac96
T130153 is now fixed in oojs-ui. However, we can't set
overflow-x to visible because that breaks clipping.
Partially reverts 02252d0531. Depends on I22f2ca72cf7c2f in oojs-ui.
Change-Id: I726aada60238d17227e4475637bd3d9befa1b4c3
This z-index rule isn't needed for the floating toolbar, and it
causes the notificationInboxWidget to be on top of MobileFrontend's
semi-transparent cloaking overlay, which makes it look weird.
Change-Id: Ie9d10e4193d15b72ce0199ff9b4e45742afec132
Replacing colors with ones from the overhauled WCAG 2.0 level AA
compliant color palette https://phabricator.wikimedia.org/M82
Applying Less variables where possible for better flexibility
in future design maintenance.
Also introducing some variables from WikimediaUI Base.
Bug: T147365
Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699
Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
Introducing stylelint with configuration rules compliant to
Wikimedia CSS Coding Standards 'stylelint-config-wikimedia', nullifying
some for now and making majority pass.
Change-Id: I2c4acee41c9b56d9b00e2a2c5b7ab0ab5de454ce
Unfortunately there's no generic support for using colors for icons in
OOUI yet, so we have to copy what OutlineOptionWidget does and
override setPressed()/setSelected() to add/clear the progressive flag.
Also reintroducing colors for text which are aligned with icons on
the different states and use transitions.
Change-Id: I07cf4011d28c1db4eefb451367e29c271b5efaeb
After Id1312fee5bb of OOjs UI got merged, we have to reintroduce
`highlighted` and `selected` states background color manually as
it caused issues on simple OptionWidgets.
Change-Id: I3fe7a4d2577bd1bc0fd258bc977b3539e268a84e
Replacing standard `box-sizing` with MediaWiki's Less mixin, which also
features prefixed properties for older browsers like Firefox 28 and below.
Change-Id: Iafb88b192045fb7df6bbe6954a166a198d04c5cf
Due to pixel rounding errors when relying on `em` as base size unit,
the circle isn't always perfectly round and as a result /not/ a circle.
Adding `min-width` and `min-height` ensures the intended layout similar
to Ie61e7303e446 in OOjs UI's ToggleSwitchWidget.
Also aligning `:hover` unread color to OOjs UI progressive button's
`:hover`.
Bug: T141504
Change-Id: Idf130947e8e61a68819e3ac9ba3cb1e105e65370
In order for the special page to be responsive, the descriptions can't
be truncated in the JS. If they are, they take a bigger portion
of the screen, sometimes going out of its confines.
The popup should still truncate descriptions.
Change-Id: I533f29c00482f6cfbb7b1c9c7417715e3c5809bf
We already took away the truncation of header text, the body should
follow for narrow screens and wrap, instead of using the ellipses
truncation.
Change-Id: I3504599044e1c94ccec55c420d455b9370dae474
Have the page hide the sidebar at 982px, when there is
not enough room for both (and when vector switches down to SD).
Make inbox responsive when resizing.
Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
Mainly used for mobile actions, and should be appended to the
overlay - this widget assumes it should appear and then fade out
with some confirmation message.
Also moved 'doubleCheck' icon to the ooui definitions, including
an inverted icon that is necessary for this widget.
Bug: T141404
Change-Id: I67a44962eaee6b7bd8cac26dcb5277177fa5d224
Add word-break: break-word; so we make sure even long names or titles
without spaces are broken/wrapped where they need to.
Bug: T142662
Change-Id: I166e834495972ec49eb98e301ab9be85f40f5a5e
p-personal links have a white background on hover, and links
inside the notifications popup were inheriting that CSS rule.
Bug: T144063
Change-Id: I3868e418ab8cce8e5ff6f7cc10e042907cb1e8df
Allow extensions to add dynamic actions that perform some
API request and display a confirmation message.
Bug: T132975
Change-Id: Ib16d57c3f1a11a9749564c6e2112bf1ca32c55e8
Work around new styles introduced in oojs-ui in I77cd5212c.
Bonus: remove useless styles targeting the dotdotdot popup
in NotificationItemWidget.less: it's not even a popupWidget
any more and it's located in an overlay anyway, so these
styles didn't do anything.
Change-Id: Ifb16b7bb0b01c1eb2551ba4c173042cc759e9b02
Just like we do in the mobile popup, the menu should be accessible
in mobile clicks/taps by being "stuck" at the bottom of the screen.
Bug: T142013
Change-Id: I730216e717c2a02ad98bbcc28f66b13c1cbe29ed
In the unseen notifications case, Monobook used badges with
black text on a light red/blue, even though the text
is white on grey in the non-unseen case. Change the unseen style
to white on dark red/blue like Vector, and also make the colors
exactly the same as Vector.
Change-Id: I9d2d1a2614ac1130e027fb952c9288588d25d495
We have to override a CSS rule that tries to make all <a>s blue,
but not override it so powerfully that the real link in the footer
notice isn't blue.
Change-Id: I5a91419aab7cf6d6fe10c8e707168b52c2451cd8
The color: transparent; hack was being overridden by a color rule
that's only in effect after the popup is opened.
Change-Id: I2f415619603ccadb625ed2482c25fde78765fee4
Now that we have the cog menu, it should be placed correctly in
mobile and the "preferences" link should be hidden.
Since MobileFrontend doesn't have the personal toolbar, and we
can't cheat by using jQuery and grabbing the url of preferences,
we have to get SpecialNotifications.php to output the urls
to a wg variable and reading it from there.
Bug: T115528
Change-Id: I6a69823d6f75c376c04e9a21d79916321e417178
Bundles only have a header, no body, so when we include excerpts
in bundle headers, we wrap them in <em> tags. This change
makes these excerpts the same color as the excerpts in the
non-bundled case.
Bug: T139960
Bug: T141034
Change-Id: I6a14274b42ba672ab1366c0dd106ea0847db6404
And change all CSS and JS dependent calls/tags based on the new
tooltip message and ID of the personal tool <li> item.
Change-Id: I136fabe5710f90da10eb8d4afe92acdb77571eec
Add a global-wiki 'mark all as read' to the Special:Notifications page.
The 'mark all as read' will makr all notifications in the given
wiki. The context of the wiki changes when filters are chosen,
and so the message of the button changes as well.
Bug: T115528
Change-Id: Ibd9dcdf7072d6cbc1a268c18e558e6d0df28f929
As a first step for mobile support, make the page responsive,
hide the sidebar, and slightly adjust button/title positions and
sizes so they fit in a small screen.
Bug: T140687
Change-Id: I98f264948a57924f6370a861381456ce9c82f8d8
We need a fixed-width CSS table with a number of fixed-width
cells and one cell that takes up the remaining width, with
text truncation. This is a pain to do with CSS tables,
but this trick I found on StackOverflow[1] works well:
wrap the contents of the cell in a div that's position: relative;,
containing another div that's position: absolute; width: 100%;
[1] http://stackoverflow.com/questions/7569436/css-constrain-a-table-with-long-cell-contents-to-page-width
Bug: T140349
Change-Id: I507f915f06185c767d7a5c8edbff6c341e07b6e2
Following up on setting max-width, this actually should be strict
width for the moment (until we decide on more responsive design)
since without restricting width, the notification view becomes really
thin and compact if the list contains notifications that have short
titles and descriptions.
Bug: T138433
Change-Id: Ia663f7968033b01f3553a326f70736cc6a6a54a9
This is to make sure that concatenation of text inside items works
properly given CSS table-layout.
Bug: T138433
Change-Id: Iae32cbf82cdb91880c7ccd7df14d167eb75527cf
This rule ensures that long human-readable wiki names
don't cause horizontal scroll bars in the notifications
popup.
Change-Id: Id0c954d2059aeed875fa2eea7a45537aac4e2e58
The bounding box of where this cursor effect is applied isn't
quite the same as with bundled notifications (which in turn isn't
the same as with normal notifications), but to fix that we need
to normalize the DOM structures of the three types. They
currently differ in the presence/absence of the <a> wrapper
and in how padding and margins are used.
Bug: T138913
Change-Id: I1ed32e0a9deca62b68d08acd0699431ddda8ca44
Also add border-box to prevent the circle from appearing
to grow when a border appears.
Bug: T126214
Change-Id: Id5e89ff87759c4ae44851d5ad3061230a0e59ff0
Add a sidebar with cross-wiki sources and pages of unread notifications.
The filter allows the user to fetch notifications from a foreign source
and specific pages if those exist.
Bug: T129366
Change-Id: I57d827a47f80274d75364c2099a9624049a26834
Allow for mark read and mark unread through the side button, and
change its style according to spec in the ticket.
Bug: T126214
Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
The "Mark all as read" button had margins that made it just a little
bit taller than the header would otherwise be. This pushed the
bottom border of the header and the top border of the first notification
away from each other.
We only need top and right margins on this button, so drop the
bottom and left margins.
Bug: T137778
Change-Id: I8d47d84c79cbdad707b8cbaa8d43187c054755b3
Add a pagination widget with events and separate the logic for
organization. Let the widget listen to events from the pagination
model so it always keeps itself updated.
Change-Id: Id1df112cbb0d90195217e88fbee97a59170b99c5
The items should resemble the popup items, but the styles clashed
with the popup's cross-wiki notification item, so the image size
was smaller and the border was incomplete.
Bug: T136572
Change-Id: I3c3f825d469ccee1e711da21f627eeb9491e9480
Change the pending element to be the notifications list rather than
the whole inbox widget in the Special:Notifications page.
Bug: T136581
Change-Id: I82b073c9cd628f30c13305510d6604e3ef636c2a
* Use `margin: A` with `padding: B` rather than `padding: calc(A + B)`.
* Remove a `display: inline-block` which necessitated `width: 100%`.
I think this results in the same rendering, but please test carefully,
as I didn't check it for all the possible notifications.
(There is one more calc() in mw.echo.badge.less that can't be avoided.)
Bug: T135936
Change-Id: Ic01f16c8469c3b9d45d2885108ec6260e967731a
Allow for the widget to have a mark-as-read button to its individual
groups, as well as change the event listening from 'remove' to 'discard'
The problem with 'remove' event is that it is triggered when an item
is either intentionally removed from the list *and* when an item is
changing its position in the list (move event includes 'remove' and
then 'add' event)
If we listen to 'remove' events we will get both cases, which is
unhelpful. Instead, a new event - 'discard' - was introduced so
we are certain it is used with the clear intention of removing the
item completely.
Change-Id: Ia08720bf4c547fa41edf62331eeb1a45ff4965b7
We have to make sure that any notifications wrapper has the css
term overflow-y: auto; so that the popup menus behave properly.
Change-Id: I14a1a9f1c3610ef27fe04aa4b1e7197c08d1dfd4
Changing the way Echo's front-end architecture works to work with
model-view-controller methodology.
Change-Id: I97862402c41bc04dd41cd08d79f19ff677340249
