Commit graph

19 commits

Author SHA1 Message Date
Ed Sanders 219b3d8b28 Separate skin specific styles and improve Monobook appearance
Bug: T112290
Change-Id: I1e73c92c69cf6df7c4d08b27a392f9c9bc19446f
2015-11-10 17:57:44 -08: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 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
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
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
Ed Sanders e77d088499 Let action buttons center align
Bug: T112188
Change-Id: I98cee8f70c05dc82e574e5867107975cfec37a19
2015-09-11 12:32:23 +01: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
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
Moriel Schottlender 1ac72cc01a Split alerts and messages in Echo
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
2015-09-02 15:36:37 -07:00