Commit graph

1143 commits

Author SHA1 Message Date
Jon Robson ddc11bfe8e Drop badge styles for Vector
These have been moved to the Vector skin

Bug: T257143
Depends-On: If52986fe56b65479adabe8233b0fc6df164b5376
Change-Id: Ibf11821e863d3089d60cf5c0959c4c5ddc5ce4f2
2022-09-23 10:55:00 -07:00
Jon Robson e9d656e1cd Add icon definitions to Echo badges
This should result in no visual change to Echo, but allows
us to change the Vector implementation here.

Removes all styling when vectorvisualenhancementnext=1
is enabled.

Bug: T257143
Change-Id: Ice602ba246b51252ff0527a531aa4d5d3baee64e
2022-09-23 17:34:13 +00:00
Jon Robson 2e58065ddf Echo should fire onInitialize event after rendering of badge
This allows skins to make modifications to the final output.
This will be used in Vector to make the Echo icon consistent with
other icons.

Bug: T257143
Change-Id: I9fe8c921956ede164d93cb1f42647cf4b80ca976
2022-09-22 08:49:44 -07:00
Volker E 2abf220e58 styles: Remove IE 8-9 special way
`background-color: transparent` is the way to go.

Change-Id: I34598d0e543cda3dd711fca88986a663a3a7519b
2022-09-15 19:20:33 -07:00
jenkins-bot f6f1968429 Merge "Echo mobile: add CSS media query class - bug fix" 2022-08-25 15:07:02 +00:00
Bartosz Dziewoński 54c27e5763 Fix notification dynamic actions outside of the dropdown
* Event handler was not registered for the non-dropdown version
* Clicks would be handled by both the action and by the default link

Also remove returning false to prevent default and stop propagation,
this is not supported by OOUI events and did nothing. Handling a
'click' event always returns false to jQuery (so this was not needed),
handling 'choose' event never does (hence my other fix was needed).

Change-Id: Ia8a21749a8edc20f34b2a3e445278ea6922b9109
2022-08-24 00:28:54 +02:00
Bartosz Dziewoński 84843d3619 Standardize dynamic action notification styling
* Remove custom light grey color on the body, on mobile the
  notifications are shown on dark grey background, making them
  unreadable
* Remove increased font size for the title, it looks weird,
  particularly on mobile

Change-Id: I08651d2eab19904c19072f186cd2a96fb44e93ec
2022-08-23 23:42:48 +02:00
essexigyan 0659331111 Echo mobile: add CSS media query class - bug fix
Bug: T280839
Change-Id: Id2b26aab650fbb48c9fe8310e96dae12b354849e
2022-08-17 00:33:47 +00:00
suecarmol f83acdf5d3 Echo mobile: add CSS media query class
Added a new media query to fix an error in the Special:Notification preferences button.

Bug: T280839
Change-Id: I1a4cdc9111c6ada3c79f6ec1f1fa2e40dc240238
2022-07-20 17:51:03 -05:00
Jon Robson a7dd4a9d5c Drop SkinMinervaReplaceNotificationsBadge hook
This is now dead code that was removed in
Id611cc07aebfb94e50bde8902cbc0627393fa926

Bug: T309748
Change-Id: Ic4f9881301aa313e7c380d602c6742aff1a886db
2022-06-22 15:36:11 +00:00
Jon Robson 6767e52d8c Pass Echo configuration to mobile
When Echo moved to packageFiles it broke the mobile
unread counter behaviour

Follow up to I03f9a3953aa97ead1a29c13a992a02404a6d0b68
which presumably happened when Minerva's Echo code was
in a different code repository.

Bug: T310358
Change-Id: Ife6705d69d248bcd4efde1a996dbcc0353c7f40d
2022-06-13 16:01:05 +00:00
jenkins-bot 8ae621f8d3 Merge "Don't change width of Vector when more than 0 notifications" 2022-05-16 20:04:30 +00:00
Jon Robson 287c59be44 Don't change width of Vector when more than 0 notifications
Bug: T307134
Change-Id: I133162d06166bc2c3cabd58b61fc8437fdb3db1f
2022-05-16 12:18:48 -07:00
Kosta Harlan 0abeb2bfeb
Use watchlist-progressive icon for WatchlistChangePresentationModel
Bug: T203941
Change-Id: I8c252c5a48296fd47f0e30462a9771baf7fd7804
2022-05-11 13:57:09 +02:00
Ed Sanders 2af0c6d816 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I60f34cb3c3c5c12cf1f9f38426a56c76dcf063fd
2022-05-09 14:05:59 +01:00
Jon Robson 5752542981 Prepare for removal of SkinMinervaReplaceNotificationsBadge hook
Bug: T301263
Change-Id: I7b9cf401936be2421d0ad4efe963486404d50e6a
2022-05-06 14:26:16 +00:00
jenkins-bot cfd9dbf9ca Merge "Replace deprecated Less .box-sizing() mixin with standard CSS" 2022-04-26 11:12:58 +00:00
Volker E fe766f04ea Replace deprecated Less .box-sizing() mixin with standard CSS
Also remove 'mediawiki.mixins' includes where unused.

Bug: T306488
Change-Id: Ia9a5a1ce1e47c1de2c2197885237f9355f9cc4f2
2022-04-20 17:14:37 +00:00
lens0021 5943b13b5b
Handle the missing 'all' type as specified in the doc
The text for 'type' in the documentation of the parent describes the
notification type can be 'all', following 'message' and 'alert'. That is
actually used, for instance inside of
mw.echo.Controller.markLocalNotificationsRead() function. The gap
between doc and implementation results in bugs. This resolves the gap.

Bug: T270879
Change-Id: I546aa42e927a05a5426db90153901ae632b97e36
2022-04-20 21:57:12 +09:00
Jon Robson 5350bba546 Drop unused zero class
Not used anywhere.

Change-Id: I848650e4e3497664d712537437d8a10b22d6afb1
2022-04-04 18:20:27 +00:00
Ed Sanders e7ac2a8966 Set all icons used in EchoNotificationIcons to 30x30
This will cause them to be rasterized as the correct size
when used in emails. When used on the web (as SVGs) they have
their dimensions set by CSS.

Bug: T275936
Change-Id: Id7b76cf13bf9ebb88776d9c7eebc3944732ae743
2022-03-25 13:18:07 +00:00
jenkins-bot 586e1291bf Merge "Clicking Echo badge should close ULS dialog" 2022-03-05 06:09:41 +00:00
Jon Robson 0c074ec91a Clicking Echo badge should close ULS dialog
Bug: T295796
Change-Id: I3a7f33cad4e08ce22b6e640901c965d764c9156b
2022-03-04 22:47:23 +00:00
Timo Tijhof 5a76489be0 tests: Fix QUnit warnings and resolve complex test_NotificationBadge
== Problem 1 ==

As of I09c27a084100b223,  tests/qunit/index.js or equiv was used to
load test files asynchronously from a using() callback. This was
untracked by RL or QUnit, and thus sometimes ended up finishing after
the test runner was already done executing all tests. In CI this
means the tests are sometimes never loaded and the browser (or Node)
process already killed before they even have a chance to arrive.

Prior to QUnit 2.17, this was no way of detecting this. As of
QUnit 2.17 (core upgraded last week) when running tests manually
the following helpful warnings appear in the console:

> [warning] Unexpected test after runEnd.
> [warning] This is unstable and will fail in QUnit 3.0.
> test	@	qunit.js
> tests/qunit/model/test_mw.echo.dm.SeenTimeModel.js
> require

There were about 1072 instances of this warning, all from Echo.

Fix this problem by removing the async callbacks and specifying the
two modules as normal dependencies instead.

== Problem 2 ==

Class NotificationBadge was being loaded in a strange way out of
bound. This was a violation of module boundaries and should not be
needed other than for a temporary hack or other tech debt. More
generally when a test uses `packageFiles` this is a likely sign of
tech debt or misunderstandings.

Instead, depend on `ext.echo.mobile` and export/import the class
as normal.

After this, the test module can use `scripts` instead.

== Problem 3 ==

The `ext.echo.mobile` uses a Mustache template which the test
was also duplicating a reference to. This is no longer needed now.

Due to the `qunit/index.js` file carefully splitting the operations
between template assignment and file loading, I wondered whether
it was meaning to replace or mock it with something else, but it
simply refers to the same file and only does this because it wasn't
using the module directly. This is now resolved.

If you do need to mock in the future, this can simply be done
by assigning `NotificationBadge.prototype.template` from a
beforeEach() callback in the test suite, or by supporting it
property as a constructor option in NotificationBadge.js and
assigning `this.template` there, which is supported by the
mobile `View` class already it seems and would follow DI patterns
more effectively.

== Problem 4 ==

Most of the Echo tests were ignored sometimes and executed other
times.

The test for `ext.echo.mobile` in particular though was never
executed in CI specifically because:

> Undefined module: 'mobile.startup'

This became a hard error with this patch, which is fixed by
the CI config change with Ie9dabe3269c56fa76db8e51.

Bug: T299780
Change-Id: Ie4a87f3b8085fd6ae53ec586c1782cc266d5288a
2022-03-02 12:52:06 +00:00
Timo Tijhof 1ae60e5977 ext.echo.mobile: Name init function as such for clarity
It is common for internal files to export a single value, e.g.
when a file exports a single class or other special value.

However, this is uncommon for a module's overall export.

* It can create the misunderstanding that the init code is immediately
  executed, when it is in fact delayed.

* This leads to the obscure `require()()` statement that is easy to
  misunderstand.

* The least-effort way to expand this is by adding a statement
  like `module.exports.Foo = Foo` after `module.exports = init`
  which has the sublte behaviour that 1) it only works in this
  order, not reversed as then Foo would be de-referenced by the
  second assignment, and 2) it has the subtle effect of attaching
  Foo to the `init` function as `init.Foo` which is non-obvious,
  and 3) makes the init function unsafe to pass around, wrap,
  stub or otherwise treat as a regular function.

Remedy by naming it as "init" on a regular module export object.

Change-Id: I51065e00f9dcaec075578a46df4de32c7a427df3
2022-03-01 23:11:40 +00:00
Ed Sanders ba38b57c83 eslint: Lint Gruntile.js using server rules
Change-Id: Ic7d67098492558fdd6cec292afd22aaf8693a594
2022-02-07 16:30:24 +00:00
Sergio Gimeno c815bc64e4 Prevent welcome message partially truncated
Bug: T291100
Change-Id: Ia7d349bd81b45c99eb421b8e69ccdadb3135a67f
2022-01-24 21:44:47 +01:00
DannyS712 93ccaa71f1 Remove unused empty mw.echo.js file
Follow-up: Iaed7cf0e47479ce8ce76aee1bfe479d82b4f61ed
Change-Id: I778918d62405d07f76210aa40df730eda631d51b
2021-10-07 21:32:41 +00:00
Kosta Harlan d21f8d2bb7 Remove uses of .box-shadow() mixin
The .box-shadow() LESS mixin is now obsolete as box-shadow is supported
without any vendor prefix fallbacks, and planned to be removed by the
next MediaWiki release.

Bug: T283352
Change-Id: I3a4f5299b1d6b12e4dbfa68864613f5923957607
2021-09-03 19:21:39 +00:00
bwang a64b97a620 Override opacity styles for all read badges for vector user links
- Addresses this issue https://phabricator.wikimedia.org/T285259#7231489

Bug: T285259
Change-Id: I58345c84efa129aae56c5ae1be3bcf5117589647
2021-07-23 14:47:14 +00:00
bwang b0aaa2e4ec Update vector badge styles
- Override echo icon styles for modern vector
- Reverts https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/+/704862

Bug: T285259
Change-Id: Id71d3e248dc6d0ee24278e0ecfbcf8691e1da24b
2021-07-22 11:53:36 -05:00
jdlrobson 088697a73d Echo notification oo-ui-popupWidget-anchor should point to icon
In Vector, these rules result in the anchor pointing to the wrong
place. They seem to be improve things in Minerva, so these are restricted
to that skin.

Bug: T276566
Change-Id: If871ab59fea519b48568781ffd9ddf6640006385
2021-06-23 08:47:09 -07:00
Bartosz Dziewoński f2da1ff813 Fix MonoBook orange banner hover styles
Follow-up to 2583f803c3.

Bug: T284496
Change-Id: Ib476d28fc2a89a7722b6218a5fe557157c863d7d
2021-06-08 17:54:09 +00:00
Nicholas Ray 2583f803c3 Add talk notification instead of transforming the talk link
Note: This change would potentially affect all skins including modern
and legacy Vector and others.

The status quo when a talk notification is present is to transform the
talk link into an orange notification message. One option is to leave
the talk link and **add** a notification instead of transforming it.

This will result in two elements #pt-mytalk and #pt-talk-alert
This will interfere with styles targeting #pt-mytalk .mw-echo-alert
This impacts user styles but not anything in production.

Bug: T283811
Change-Id: I3e4be1381f9a2e9986b94b3b13df5ed64d09a59d
2021-06-04 09:33:50 -07:00
Volker E 67bf58a489 build: Update SVGO to latest v2.3.0 and re-crush SVGs
SVGO v2.x changed configuration to JS, amending configuration.
Adding new 'minify-svg' npm script.
Also re-crushing SVGs.

Bug: T278656
Change-Id: I5b150cce300e764afb0a40d402479db22cfcea99
2021-05-27 11:47:02 -07:00
Nicholas Ray 3a351cfb4f Move talk page notification data from 'user-menu' to 'notifications'
**Note**: This change will affect the order of the yellow talk page
message notification on legacy Vector/other skins by moving it from
after the `#pt-notifications-notice` element to before the
`#pt-notifications-alert` element. This was done because the
notification is related to the list of messages that appear when the
bell icon is clicked so having it in close proximity to that icon is
hopefully more intuitive than having it next to the unrelated inbox
icon. [1]

Per T274428, we need this notification to be inside the `notifications`
array instead of inside the `user-menu` array.

Additionally:

* Per T274428, update the notifications message copy to "You have a new
Talk page message"

* Remove the `onPersonalUrls` hook method inside EchoHooks,
unregister its use as a hook in extension.json, and update its
references in Echo.

[1] T274428#7113896

Bug: T274428
Change-Id: I5ae0ec089bcf0eec1ec7ac13f60e811f54e1d8e1
2021-05-25 18:24:29 -06:00
Volker E a9f495db13 Unify list-style CSS
`list-style: none none` was a workaround for an IE 6 & 7 rendering issue.
Same goes for `list-style-image: none; list-style-type: none;` combination.
Let's unify to shorthand `list-style: none` for any non-ancient browser.

Change-Id: Ibdfb9a3cbd868d439504b59fa029e8da9a13f70a
2021-05-03 01:41:54 -07:00
libraryupgrader cefce8b8fa build: Updating eslint-config-wikimedia to 0.20.0
Change-Id: If1eaa61aefc93426217f675fca27873dd9db6dc1
2021-04-16 14:24:33 +00:00
Ed Sanders 2bbae62aa3 Set icon size in bundle to exactly 20x20
1.5em would render as 21px in Vector and 19.05px in monobook.

Bug: T276114
Change-Id: Ie31f83e849ae5a4b17f28dfe6ccabc8a2005c919
2021-03-03 23:19:44 +00:00
Ed Sanders bb1bd02bd6 eslint: Fix warnings
* Load wikimedia/jsduck rules
* Add inline disables for compat
* Fix shadowed variables

Change-Id: I42234ab74f5007c16ff3960309335e715da76c1c
2021-02-01 21:02:46 +00:00
Isarra 4ab34ada4f Move Vector-specific top:-5px badge offset to Vector style file
Essentially: force the badges, when the personal menu is displayed
inline, to align correctly with the rest of the line instead of
hovering slightly above the line for no apparent reason.

This should fix nearly every other skin that doesn't already have
its own local fix, as 20px is already pretty well-centered with
normal-sized fonts when doing sane things with padding/margins/
line-heights. (Vector is not doing sane things with padding/
margins/line-heights in the personal menu, but hopefully forking
Vector went out of vogue ten years ago and people have quit doing
this by now, yes?)

This may also not be ideal for mobile skins. Breaks Timeless,
because I just completely gave up on trying to get this to behave
there and put it in its own little timeout box. Oops.

Change-Id: I73067bbc3c930ebf20aa492b53a4a5fe4259b607
2020-12-16 19:22:40 +00:00
Ed Sanders 7170698d68 Remove padding from popup heading
Fixes regression from OOUI update.

Change-Id: I0f2cca3417a2217f350032b8aed2f517e8ed35b7
2020-12-08 22:05:08 +00:00
jdlrobson 2f020163ee Restore old Echo styling through several reverts
These dont work. Timeless provides its own skinStyles for this module:
* Revert "Timeless skinStyles should be additive not replace"
This reverts commit 98d0d296a8.
* Revert "Use skinStyles for deciding where the text-indent should apply"
This reverts commit 8adab78547.

A new implementation in Vector means these are redundant:
*  Revert "Item label can now use overflow hidden"
This reverts commit b5dd7baa08.
* Revert "Drop text indent in modern Vector"
This reverts commit 150fc7a16c.

Bug: T264339
Depends-On: I2afc12504d7184583fa8331479125474c68017dc
Change-Id: Ifd0dd5a0479588664b772fb839dbbcd8d7c47320
2020-10-29 16:59:45 +00:00
jdlrobson b5dd7baa08 Item label can now use overflow hidden
Since the icon is applied to the link element it is now possible
to apply overflow hidden to the label itself when its wrapped in
a span.

Bug: T264339
Change-Id: Ifdc1d152702c1f5338fd2969cccf07971d622fc7
2020-10-21 10:04:40 -07:00
jdlrobson 31401f9b00 Catch malformed URIs
It is documented that Uri can throw an exception so this should guard
against this case.

Bug: T261799
Change-Id: Ia45654194f853923a5b05ceff3ab2b47f6dd87d8
2020-10-20 19:42:20 +00:00
jdlrobson 8adab78547 Use skinStyles for deciding where the text-indent should apply
The code previously suggested it was only needed for Monobook and Vector
but it was also being used by timeless as discovered when 150fc7a16c
landed. This follow up applies the text-indent in the skin styles to ensure
it goes where needed.

Bug: T265806
Change-Id: I76a26a0a497f6bf7bb5f53967ea625f7e5d06ff7
2020-10-19 18:13:21 +00:00
jdlrobson 150fc7a16c Drop text indent in modern Vector
In the new version of Vector the personal tools text is aligned right
rather than left. The text-indent is redundunt.

A background-position and center directive are added in preparation for
future changes we plan to the personal tools to make this code more
resilient.

Depends-On: Ic9df8c1cea0fef82461a84190689791ce2275812
Bug: T264339
Change-Id: I6bc80c8a42425599102370e5d90b48c07d360ccb
2020-10-13 20:21:57 +00:00
Bartosz Dziewoński 121cbd6ee8 Fix incorrect use of $.extend()
$.extend() with one parameter will merge the given options into the
global `jQuery` object, which was definitely not intended here. Maybe
the `config` variable was supposed to be passed as the second
parameter, but it doesn't look like that would do anything either.

Accessing the global `jQuery` object in that way ended up generating
completely unrelated warnings about deprecated `$.trimByteLength`,
which was reported in the task.

Follow-up to 7658e151d6.

Bug: T256732
Change-Id: I5f92b6725c8abdcfb676e6a09b610ea0dc8c245f
2020-10-03 18:30:30 +00:00
arttsymbar 355e171eaa Notification: add skin specific(WikimediaApiPortal) z-index for menu overlay
Bug: T259735
Change-Id: Ib46d77a7d78107282b14e84bedb545886ba182e8
2020-09-07 11:30:26 +03:00
Thiemo Kreuz a5d35141f4 Fix notification popup header always showing a scrollbar
This issue was introduced in patch I41ad96b (T190397). The head
element is set to 44px height. However, the box-sizing is set
to border-box, which means these 44px include the 1px border at
the bottom. This leaves only 43px inside the head. The label is
meant to fit in there. Since the previous 44px don't fit, there
was always a scrollbar.

This could as well be fixed by changing the head to 45px.
However, this would make it different from the footer. I
believe both should have the same size for consistency.

Bug: T190397
Change-Id: Id0946d872a99fb8a1fbb33e6365fd78cd22eddd3
2020-08-10 14:59:06 +00:00