Commit graph

53 commits

Author SHA1 Message Date
Roan Kattouw b80af26409 Set opacity:0.8; on the buttons in the footer of the notification popup too
Bug: T119378
Change-Id: I061d06dc13886618434b7022fc84f59feeaa426e
2016-01-18 14:28:19 -08:00
jenkins-bot a5e2466db4 Merge "Avoid pure black icons in Notification Panel" 2016-01-18 22:08:16 +00:00
Roan Kattouw c345bef598 Add icon to "View changes" secondary links
Bug: T121736
Change-Id: I7dda877c26c99392c17702265380f4ea2a6e8049
2016-01-14 22:53:51 -08:00
haritha28 ddc3280c9d Avoid pure black icons in Notification Panel
The pure black icons which drew too much
attention when they are next to a lighter
text is changed by controlling the opacity
of the icons.

Bug: T119378
Change-Id: I2e6c8d47187621607a915e49cfe5380c744efe56
2016-01-14 18:53:28 +05:30
Stephane Bisson 60ddc76880 Update page-linked notification text
Bug: T121812
Change-Id: Ie875f105230c8364291a918b869b9c26dbdf1e83
2016-01-12 10:11:31 -08:00
mhutti1 033cba15c6 Resized notification panel footer to be the same size as header
Changed footer buttons height to match the headers height.

Bug: T119375
Change-Id: If215f109b74f2a645615fd89b7cbde6b2e6566d3
2015-12-28 13:24:34 +01:00
jenkins-bot 97f64ee855 Merge "Display readable API error message" 2015-12-23 20:18:34 +00:00
Moriel Schottlender c387ac2a63 Add space between notification item buttons
Bug: T121955
Change-Id: Ica5123193ee6fc5252e27cdf3214072c6b9c3624
2015-12-23 09:32:22 -08:00
Moriel Schottlender 4b7520af90 Display readable API error message
If an error has occurred while fetching from the API, the
placeholder item should display the API error information.

If the error is specifically a login issue, a specific
error message is displayed.

Also, adjusted the mw.echo.ui.PlaceholderItemWidget to
accept a clickable link; when valid (currently only with
login error) the link is applied so the user can click
the notification and be taken to the login page.
For general notices (like API error or a general 'no
notifications found' message) the link does nothing.

Bug: T121923
Change-Id: I89a43c7c0eb2cf8e63d03704536e0938ab57dd4d
2015-12-22 10:34:01 -08:00
Roan Kattouw 88d6f01c33 Make notification body text lighter
Use #888 instead of #666 to match secondary link text
(which is #000 with 50% opacity), both in the flyout and
on the special page.

Bonus: use LESS variables for these colors.

Change-Id: Ifc1182a001e9b25f6ff7c213b6fcde3dc2f0acd2
2015-12-18 13:13:22 -08:00
Moriel Schottlender a4659baec5 Add OOUI widgets for cross-wiki bundled notifications
* Add the ability to use bundled expandable
  notification groups
* Display bundled cross-wiki notifications following
  the design

Bug: T115419
Bug: T115423
Bug: T115422
Change-Id: I8c3eba6d627c3f06d51d74fc9774e3fc2d02915d
2015-12-14 17:22:34 -08:00
Moriel Schottlender 7d419bd128 Add a global overlay to Echo
This is preparing for nested popups inside the master popup.

Change-Id: I3bb86acd1bf841d5b27018565f5aa8f4a3295d9d
2015-11-23 18:47:57 +00:00
Moriel Schottlender 4bbaf77c2a Change the naming of 'notification option' to 'notification item' widgets
This is in preparation of adding more item models and widget types,
and in preparation of switching the notification widget away from being
a select widget.

Change-Id: I518fb3d80f4f67d677c21ca5593638269acfa544
2015-11-19 16:52:04 -08:00
jenkins-bot b46fcf57b3 Merge "Separate skin specific styles and improve Monobook appearance" 2015-11-11 02:18:59 +00:00
Ed Sanders 219b3d8b28 Separate skin specific styles and improve Monobook appearance
Bug: T112290
Change-Id: I1e73c92c69cf6df7c4d08b27a392f9c9bc19446f
2015-11-10 17:57:44 -08:00
Moriel Schottlender 61f75f4c1e Make 'x' button in notifications bigger
Bug: T112217
Change-Id: Id645a14406accb006736df038fab667cdd9aabd1
2015-11-05 19:44:24 +00:00
jenkins-bot 8feb8212ce Merge "Override footer buttons hover color in Modern" 2015-10-09 06:29:22 +00:00
Moriel Schottlender 9f1bedda1c Override footer buttons hover color in Modern
In Modern, the hover color for links in the #p-personal bar is
white, which is unhelpful for the buttons in the popup. Override
that style for hover.

Bug: T114080
Change-Id: I8b739f2a46c3eb3ce9f61e92b5025751047a451d
2015-10-08 16:28:30 -07:00
jenkins-bot bb89634306 Merge "NotificationBadgeWidget: Fix alignment of actions buttons" 2015-10-08 21:49:24 +00:00
Ed Sanders 017ee20365 NotificationBadgeWidget: Fix alignment of actions buttons
Making padding equal on either side, and use display:block
to avoid extra space underneath.

Bug: T115052
Change-Id: Icddb755cfe8892422661712d35eda4f01441207d
2015-10-08 21:15:54 +00:00
Siebrand Mazeland 33126b69aa Update formatting
In preparation of Code Sniffer based updates.

Change-Id: Id5d43332b44a37665d57dc24ef8c432bc65b2f6a
2015-10-03 23:28:54 -04:00
Roan Kattouw 545b9c170b Fix lowercasing and bolding of text in popups in Modern skin
There was CSS trying to counteract this, but it wasn't strong
enough to override Modern's styles.

Bug: T114080
Change-Id: I96d9b32353fbabc8f720ecb869904639009c894f
2015-10-01 12:04:14 -07:00
Kunal Mehta bae6ac30b8 Also override Modern's :hover styles
Modern has duplicated styles for `#p-personal li a` and
`#p-personal li a:hover`, so duplicate our styles too to make sure they
fully override Modern.

Bug: T114080
Change-Id: Ib3da29532e9f0939379f3988a629bd6b7b1fabb8
2015-09-30 11:25:59 -07:00
Roan Kattouw 07754e8b71 NotificationBadgeWidget: Fix button icon positioning for change in OOUI
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
2015-09-29 16:23:10 -07:00
Moriel Schottlender 16ddd5c7d7 Fix Echo popup alignment in RTL
Bug: T114184
Change-Id: I2b2b8c332efbcf0e646bf77f688433559da7b628
2015-09-29 16:05:31 -07:00
jenkins-bot 61158920f8 Merge "Replace entire <li> element to produce button and popup separately" 2015-09-19 15:59:19 +00:00
Moriel Schottlender 429b11148b Replace entire <li> element to produce button and popup separately
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
2015-09-19 17:56:29 +02:00
jenkins-bot 09ba053c57 Merge "Correct unseen animation in notifications" 2015-09-18 11:10:09 +00:00
Moriel Schottlender d67e474d46 Correct unseen animation in notifications
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
2015-09-18 11:02:38 +00:00
jenkins-bot 24d83a8a32 Merge "Make the footer links readable in Modern" 2015-09-17 22:19:52 +00:00
Kunal Mehta 233da11ebd Make the footer links readable in Modern
White on white isn't readable :(

Change-Id: Ie352961048ef9788a53da4b1cfeddd5808284b68
2015-09-17 15:15:54 -07:00
Moriel Schottlender fd0aed5ae4 Handle API fetching errors
Bug: T112251
Change-Id: Ifb9c63cd056b0cc0e7076c73e98155cef445038f
2015-09-17 15:03:28 -07:00
Moriel Schottlender 8a8d1c4ff9 Adjust margins for the notification badge in MonoBook
Change-Id: Iae8c9a855fa407990548691d46974303fcc77ad9
2015-09-16 17:03:46 +00:00
Moriel Schottlender c5905962ab Only load ext.echo.ui if the user clicks the echo badge
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
2015-09-15 17:11:46 -07:00
jenkins-bot d72a235854 Merge "Fix vertical alignment of 'Mark all as read' button" 2015-09-13 19:19:34 +00:00
jenkins-bot c73d29e324 Merge "Don't clear notifications when refetching" 2015-09-12 10:51:17 +00:00
jenkins-bot 3b58c3985f Merge "Let action buttons center align" 2015-09-11 17:07:57 +00:00
jenkins-bot 158cab5c24 Merge "Wrap notifications with a link for native click behavior" 2015-09-11 17:07:54 +00:00
Moriel Schottlender bfd27ae712 Wrap notifications with a link for native click behavior
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
2015-09-11 09:48:00 -07:00
Ed Sanders e77d088499 Let action buttons center align
Bug: T112188
Change-Id: I98cee8f70c05dc82e574e5867107975cfec37a19
2015-09-11 12:32:23 +01:00
Moriel Schottlender 7ad8cc24d0 Make links non-white in the notification popup in Modern
Change-Id: Icceeb916efceb8c2395aae7b30b054b274645f02
2015-09-10 17:05:30 -07:00
jenkins-bot 0ed0f43da9 Merge "Override padding for links in personal tools in Modern skin" 2015-09-10 22:56:43 +00:00
Ed Sanders eef9cb8cf6 Fix vertical alignment of 'Mark all as read' button
Change-Id: I6292737cede797bb1c197e6b2a5092cd6554da6d
2015-09-10 23:44:25 +01:00
Moriel Schottlender b1b9b6e257 Don't clear notifications when refetching
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
2015-09-10 15:24:21 -07:00
Ed Sanders 48dc79be11 Restyle buttons to be fully clickable
Also use framed buttons (which these sort of are) as they
have hover styles.

Bug: T112188
Change-Id: I750a18a90c655cc7916e050b5e300300a4437b69
2015-09-10 23:08:33 +01:00
Ed Sanders fbd05031fc Remove unnecessary calc() from css
The expression is evaluated by the LESS compiler.

Change-Id: I7922d1ff2306ce880c6c9c011fda7576eea8e183
2015-09-10 22:53:31 +01:00
Kunal Mehta 5c49d1482b Override padding for links in personal tools in Modern skin
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
2015-09-10 13:41:18 -07:00
jenkins-bot d36f940f06 Merge "Align popup footer buttons to take 50% width each" 2015-09-09 20:47:50 +00:00
Moriel Schottlender a37e764d3d Align popup footer buttons to take 50% width each
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
2015-09-09 13:37:24 -07:00
Pau Giner b6712be9a3 Reduce distance between notification badges
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
2015-09-09 11:36:18 -07:00