Commit graph

114 commits

Author SHA1 Message Date
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
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
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
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
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
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
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
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 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
jdlrobson 4a62746f87 Echo badges should have transparent text
While working on the new Vector, it exposed some issues with
the label due to the change in position of the personal tools.
This change should be safe in legacy version since the label is
never displayed to end users visually.

Change-Id: I5aaac22af689ce74b9d9214453681c0250dade7f
2020-07-07 15:43:02 -07:00
Ed Sanders ffe3363d09 build: Update eslint-config-wikimedia to 0.16.1
Change-Id: I2ce14429f9440e69e36fa349847f58fb32862f2a
2020-06-15 16:19:00 +01:00
Volker E 9ee48977f1 Use '.text-overflow()' mixin from 'mediawiki.mixins'
And remove Echo's own mixin.

Depends-On: Ia8d6e7229b49598b0f4cb19dff463ffe2f11a43d
Change-Id: I68d5726f01484ef5b94a606de9669207944dff54
2020-04-23 18:16:01 -07:00
Volker E e85d881817 Replace static border radius value with var
In a distant future those might be replaced by core WikimediaUI Base
and this is a sane preparation for it.

Change-Id: I8907c8908f3b775be36b16a6782d7e9719e30c4c
2020-04-15 18:09:48 -07:00
Volker E 32c1c8e5f1 Amend Base10 color, add and amend WikimediaUI Base variables notation
Amending Base10 to slightly darker `#202122` to fulfill WCAG
requirements in connection to Accent50.
Also adding and amending WikimediaUI Base variables where in connection
with the color change.

Bug: T248393
Change-Id: I3b0c1666f7f883908a3778aa9e3fcbf51b57fefe
2020-04-15 18:02:21 -07:00
jdlrobson d7cc28fbcb Properly scoped style improvements to Echo OOUI dialog in desktop Minerva
This reverts commit ca5e5c85af and then
scopes the rules.

Bug: T241090
Bug: T242493
Change-Id: I0e6a4f6d235f34dc8f05a5e7ea5272d6465b80aa
2020-02-11 07:41:23 +08:00
Esanders ca5e5c85af Revert "Style improvements to Echo OOUI dialog in desktop Minerva"
This reverts commit 5b628b5109.

Bug: T241090
Bug: T242493
Change-Id: Id4a7ac9748ed7f934e9c47f4ade0c2f87da4488d
2020-02-10 20:24:17 +00:00
jdlrobson 5b628b5109 Style improvements to Echo OOUI dialog in desktop Minerva
* Make sure the badge for desktop when initialised points to the
right thing
* Make sure the dialog takes up the full screen and the Clippable bug
does not interfere with the display of the pane

Bug: T241090
Change-Id: I6c5588ee689633cef413ef27449aeeea341d7a97
2019-12-20 20:38:36 +00:00
Volker E 415b7b9851 hygiene: Make LESS imports non-ambigious
Some LESS parsers will get confused with the lack of file extension.
It's better to be explicit and in alignment with recent change in core
I379334d7729e587a2a00.
It was already weirdly mixed in this repo with some imports featuring
extension and some not.

Change-Id: Ib208607c850fa2492b13cd3d449c04ebc2c21a01
2019-10-25 13:53:39 -07:00
jdlrobson d3c0494a17 Dormant mobile notifications overlay lives in Echo
This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f
relinquishes the responsibility for rendering the Echo notification badge
and wiring up of the related JS.

It makes 3 assumptions:
1) Minerva will expose a VERSION property on the skins.minerva.scripts module
to tell Echo it can begin control of the functionality
2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side
allowing Echo extension to render the Notifications badge in Minerva.
3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or
closed.

All code relating to Echo inside MobileFrontend and Minerva is
moved here.
CSS for the modules is kept in Minerva as skinStyles

This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands.
It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that
substitutes the Minerva badge.

It also watches the export value of skins.minerva.scripts for a VERSION value - when
this appears it will take the signal that it should manage the frontend code.

In the new system the mobile specific code is limited to the mobile version of
Minerva. The desktop version of Echo loads on Minerva desktop - presenting an
opportunity in future to consolidate both implementations to use the same component.
The mobile version of Vector and Timeless for example will load the mobile overlay
(with existing styling issues that we don't need to worry about right now given
we don't officially support skins other than Minerva as mobile)

Testers:
* Check require( 'ext.echo.mobile' )(); inside initMobile
inside ext.echo.init does not fire until
Iba1d7863171268066bf7597182c57a0a2041497f is checked out.

Depends-On:  I1a66939d2b596094b419de40b370e79f09c85581
Bug: T221007
Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-09 12:36:11 -07:00
Volker E dce5173703 Remove IE 6 & 7 hacks
Bug: T234582
Change-Id: I5208a57ab3b1b95e97ca8a0d3d9c1df6c57ebc3b
2019-10-03 19:05:38 -07:00
Isarra 0c0c0e596f MonoBook: Remove outdated skin styles and clean up some
Due to using ooui, and a lot of the styles being a lot more generic
in general these days for wider skin support, most of the skin
styles still included with Echo are no longer necessary or may even
be actively breaking things.

Remove a bunch of that, including some of the stuff for T226594 etc,
as we now have a more elegant solution in the skin itself.

Bug: T226684
Bug: T226594
Depends-On: I0ed21a78feb1b1298c30b969a1c80a4323e74043
Change-Id: Id3193a07f023eb0abc30fa24afe10da042fea876
2019-06-28 03:18:24 +00:00
Isarra 28dd2e0413 Modern: Remove outdated skin styles
Due to using ooui, and a lot of the styles being a lot more generic
in general these days for wider skin support, most of the skin
styles still included with Echo are no longer necessary or may even
be actively breaking things.

For Modern, basically just remove everything; nothing here seems to
apply anymore. Also frees us up to just fix the badge positioning
in the skin itself, and leave future maintenance up to the skin
maintainers, if anyone cares.

Bug: T226684
Change-Id: Id28bbc01b3b344dfeb39be1380a64c1368924289
2019-06-28 02:40:10 +00:00
Roan Kattouw d3653c649a Follow-up ea856105f2: fix horizontal scrollbars in Monobook
A positive text-indent causes horizontal scrollbars, so just hide the
screenreader text by making it transparent, and accept that we're going
to have the hover tooltip issue (T161302) in Monobook.

Bug: T226594
Change-Id: I6cb9ec146c2b469cbfb1fdc57937794d237e46db
2019-06-26 15:48:58 -07:00
Roan Kattouw ea856105f2 Fix badge icons in Monobook
In c86a1a5cf, the structure of the badge was changed, and the hack for
hiding the screenreader text in the badge was updated accordingly.
However, the Monobook styles were not updated, and this caused the badge
icons to be positioned off-screen.

Update the Monobook styles for the new badge structure, and use a
different hack for hiding the screenreader text because the one used for
other skins doesn't work in Monobook.

Bug: T226503
Change-Id: I190d2719addfbe50a7108193848bf23eef54bccf
2019-06-25 13:41:58 -07:00
manoj 0db743477d Provide visual focus feedback for notification badges
Provide visual feedback when focus is set on notification badges.
Also removing outdated `-moz-outline-style` property, which is applied
only in Firefox <= 3.6.

Bug: T186553
Change-Id: Ia523be0f74beb8fc52f8f04a9a7f59d88c7d2082
2019-06-10 12:31:45 -07:00
shivanshbindal9 c86a1a5cf3 Remove badgeicon module, use OOUI icon instead.
Now that OOUI's "alerts" icon pack includes all the icons we need, we can use it and get rid of the badgeicons module.

Bug: T139779
Change-Id: I8218530ed2cdd2d81c1fc24509f36ea2b6742bd9
2019-06-05 12:29:17 +05:30
Shivanshbindal9 a09db3ea59 Add visible help link for Special:Notifications
Bug: T200184
Change-Id: Iaf321f88322e8a9686be62eb9b055c6544cf0ad6
2019-04-09 10:27:40 -04:00
Isarra 91cd3b3b98 Apply unseen notifications colours to all skins by default
Colours were previously defined only in the monobook- and vector-specific
styles, but with the same styles in each, and appear to work consistently
accross all tested skins (modern, timeless, cologneblue, anisa,
hassomecolours...). Given the UX importance of these colours, better to
apply them as the default for all skins and leave it to any others for
which this doesn't work to resolve any issues on their end.

bug: T181142
Change-Id: Idc22881d6c51aa12adc9a053ce08adfdf0fad2b0
2019-02-20 15:04:35 +00:00
Volker E c2dba98a9d build: Update 'stylelint-config-wikimedia' to v0.5.0 and make pass
Change-Id: I2789e3b93d1fc5743ea94b946fcd3e3ba8798e5e
2019-01-09 18:42:06 -08:00
Volker E 39db100cbc Streamline opacity on personal tool icons
Selector was set on the element's class, not the icon carrying
pseudo class, resulting in a hard to predict
double opacity application. Also changing default opacity to
WikimediaUI Base values.

Bug: T207542
Change-Id: I1f45e721ee30acfd6261edcbc9d81cf92c7217a3
2018-11-07 21:19:57 -08:00
Volker E ee01b6db89 Replacing fallback color for code hygiene
For sanity when grepping. See also T148708.

Bug: T177723
Change-Id: I4f8bed119231a45c9148fbe341d40dccced4fcb5
2018-06-06 17:49:06 +00:00
Moriel Schottlender 5a42e71171 Add extra margin for the badge when count is 99+
Bug: T183539
Change-Id: I57060bc9c442d4fc030608f9f6de98b77f5e1133
2018-03-28 19:44:38 +03:00
Ed Sanders 52cd0f9b05 Prevent FOUC when loading OOUI notification badges
Change-Id: I216d1f7ff90380040742e6c78df830a9dcb0b261
2018-03-27 13:54:27 +01:00
Ed Sanders 15a3443384 Use updated bell/tray icons from OOUI 0.26
As these are smaller canvases, fix positioning
hacks accordingly.

Change-Id: I472f8cdd5887243c3fd86ab1431532a99dba1ce9
2018-03-24 15:06:47 +00:00
mdew192837 e88185c54e Add 'Mark all as read' button
Currently, the 'Mark all as read' button exists only for JS users.
This patch adds the button for no-JS users as well.

Bug: T96061
Change-Id: I1a62c56306597209540ffd694c8fb7b2a92885c9
2017-08-13 10:55:46 -05:00
Mooeypoo 84d34a3901 Revert "Do not use fancy styled badge on Modern and CologneBlue"
This reverts commit 08d224e955.

Causes bugs in Vector when displaying the badges.

Bug: T162173
Change-Id: I9e92c304b47ce9204d7a7d2fba67118e67b1bdc9
2017-04-04 18:40:09 +00:00
Bartosz Dziewoński 08d224e955 Do not use fancy styled badge on Modern and CologneBlue
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
2017-04-01 14:57:34 +02:00
Bartosz Dziewoński f0875de9f3 Stop badge hacks from messing up the entire page on IE 11 on MonoBook
Looks like we're hitting an edge case where positioning with negative
offsets inside an inline-block element results in incorrect rendering.
We're accidentally rendering an invisible overlay over nearly the
entire page. Twiddle the styles until we no longer hit that case.

Minimal example of the IE 11 bug: https://jsfiddle.net/50v6m0kb/3/

Bug: T161869
Change-Id: Id4b6ccc1ec6a11b455d6ab45c5aaa0e8544385f7
2017-03-31 20:41:00 +02:00
Bartosz Dziewoński 945fccf009 Make the invisible text in badges really invisible
Bug: T161302
Change-Id: I5c7a5bcb7a096b69c28651c6fe1e4017654997ad
2017-03-28 18:26:26 +02:00
James D. Forrester 988eea9da4 build: Bump stylelint and make pass
grunt-stylelint              0.6.0  →   0.7.0
 stylelint-config-wikimedia   0.3.0  →   0.4.1

Change-Id: Id87b8df04d415e1f1058a4042a31408236402037
2017-02-17 15:41:15 -08:00
Stephane Bisson 01a1924187 Adjust unread counter position based on length
Move unread counter to the left (or right, in RTL)
when it's longuer than 2 characters so as to
have harmonious spacing between the counters and
the next link on the toolbar.

Bug: T142454
Change-Id: Ib8aa673cf9e60ade80490ea0eccb7453d3747cd0
2016-12-20 13:40:54 -05:00
Amir Sarabadani 7ac77d8538 Make mw.echo.alert text darker to pass WCAG test
Going from #54595d to #222 (both from the color palette)

Bug: T153506
Change-Id: I7e844f63a743ff8791ab76149147e9e9c71df7d2
2016-12-17 02:42:51 +03:30
Amir Sarabadani 550dc4ee88 Align echo alert colors to WikimediaUI color palette
Change-Id: I4a6d53f7a5407838ce43f12b3a8ec6dde365ce4c
2016-12-01 07:30:01 +00:00
Volker E 33655c75e7 Follow overhauled color palette
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
2016-11-01 22:31:28 +00:00
Volker E 675d454bad build: Extend stylelint to further rules
Extending stylelint to include further general rules
and remove obsolete .csslintrc file.

Change-Id: I6957cc3731c39f495e985c9dbd40363102e2e6f0
2016-10-05 14:52:29 -07:00