Commit graph

17 commits

Author SHA1 Message Date
Bartosz Dziewoński de795bdbc5 mw.echo.badge: Use 'color: transparent' rather than 'font-size: 0' to hide text
It's a lot easier to set 'color' back to the desired value than 'font-size'.

As an amusing side-effect, the hidden text will appear when selected, and
it will be possible to copy it.

Change-Id: I7a7ef8e60f514743c9cb65bcef3ba4e869f5b7b7
2016-08-05 21:41:41 +00:00
Bartosz Dziewoński 3656c74fd1 mw.echo.badge: Use 'background-image' rather than 'content'
I think everything works the same. Some older browsers (IE 10-11,
Opera 12) have funny issues with SVGs in 'content'.

.mw-echo-notifications-badge now has 'height: 24px', as it must be
at least as high as the background to display it. We no longer need
.oo-ui-popupWidget to have 'margin-top: 7px', that was a workaround
for the badge having smaller dimensions in CSS than in reality.

This also allows us to significantly reduce the amount of Monobook-
specific CSS, because we now use the background-image approach for
all skins.

Bug: T142042
Bug: T142248
Change-Id: Iaa22202dbd5b5eb7a9b1ef47d068e80764ed982f
2016-08-05 14:34:08 -07:00
Roan Kattouw 59db7844e4 Prevent IE from rendering the badge SVGs ridiculously big
Not sure why it's doing that, because the SVG has explicit 24x24
dimensions, but adding these (theoretically unnecessary) CSS rules helps.
In Chrome/FF (as well as more modern IE versions), this is a no-op.

Bug: T142042
Change-Id: Ibb293f453dc79de90690ab48f522e43d3e66b8e8
2016-08-03 15:18:21 -07:00
Moriel Schottlender 9ab351352f Redo the notification badges
Bug: T115845
Bug: T140900
Depends-On: Ic666540d70de52f
Change-Id: I34e2736490319989a3a251a43fbe8080ab960b00
2016-07-27 11:51:05 -07:00
Moriel Schottlender 35a5384900 Change 'pt-notification-message' to 'pt-notification-notice'
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
2016-07-21 11:19:17 -07:00
Roan Kattouw 6c49d3edda Update OOUI hacks for I8987dade5ed
min-width and min-height are now set on icons. This breaks the ability
to scale icons down, so override these rules.

Change-Id: I6372f0fe17ccfd853bde497730c49cbcf9f89a41
2016-04-19 15:57:11 -07: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
Siebrand Mazeland 33126b69aa Update formatting
In preparation of Code Sniffer based updates.

Change-Id: Id5d43332b44a37665d57dc24ef8c432bc65b2f6a
2015-10-03 23:28:54 -04: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
Roan Kattouw 0c5869c216 Use math to compute badge padding in nojs
More clearly indicates how those numbers get there, and fixes
a discrepancy of 0.02em.

Change-Id: Idbc33878953fda85185cada5550f99a1076b9036
2015-09-14 18:47:29 +02:00
Roan Kattouw b046a1062d Don't load oojs-ui.styles on every page
We don't really need it to render the no-JS version
of the notification badges (the only rule we were missing
was background-repeat: no-repeat;) and it significantly
increased the amount of render-blocking CSS.

This means we do need to call setupOOUI() ourselves
in order for our get_class( OOUI\Theme::singleton() ) hack
to keep working.

Bug: T112401
Change-Id: I148f8ac19dfe62cc84abe03e1a2ff00683d515c1
2015-09-14 12:38:44 +02: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 73e3ed3717 Add a tooltip to the notification badges
Since the nojs "base" version uses the automatic title creation
of the personal tools, the message keys were adjusted accordingly,
and the old unified message was removed.

Bug: T108190
Change-Id: I1f242f530aa68562aa4dc885156586c22c4df618
2015-09-08 14:03:34 -07:00
Moriel Schottlender 327466a2d3 Align notification badge higher on the personal navigation bar
Bug: T108190
Change-Id: Id25213689c2ec9a6031bd120020c0b5ebde6e14f
2015-09-07 16:32:57 -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