Commit graph

101 commits

Author SHA1 Message Date
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
Volker E 6d2e560c1e Introduce stylelint
Introducing stylelint with configuration rules compliant to
Wikimedia CSS Coding Standards 'stylelint-config-wikimedia', nullifying
some for now and making majority pass.

Change-Id: I2c4acee41c9b56d9b00e2a2c5b7ab0ab5de454ce
2016-10-04 18:15:02 -07:00
jenkins-bot 32e8a8c845 Merge "Add confirmation popup widget" 2016-09-02 23:28:09 +00:00
jenkins-bot 05d05d2c56 Merge "Fix notification page width responsiveness issues" 2016-09-02 17:22:00 +00:00
Ed Sanders b54576564b Fix notification page width responsiveness issues
Have the page hide the sidebar at 982px, when there is
not enough room for both (and when vector switches down to SD).

Make inbox responsive when resizing.

Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
2016-09-01 18:02:06 -07:00
Ed Sanders 0271cdd52d Remove unused CSS and icon for old preferences button
Change-Id: I0ba1d1322c4c53fe7fefd92be85fd595198a63c9
2016-09-01 17:30:50 -07:00
Moriel Schottlender 97a7d44190 Clean up Special:Notifications output
Transform the php output to OOUI widgets.

Bug: T129172
Change-Id: I65cb5f2a016fc2a3c33a0b1cd2f3f88ed963ab02
2016-09-01 13:38:06 -07:00
Moriel Schottlender f449c68780 Add confirmation popup widget
Mainly used for mobile actions, and should be appended to the
overlay - this widget assumes it should appear and then fade out
with some confirmation message.

Also moved 'doubleCheck' icon to the ooui definitions, including
an inverted icon that is necessary for this widget.

Bug: T141404
Change-Id: I67a44962eaee6b7bd8cac26dcb5277177fa5d224
2016-08-31 14:47:59 -07:00
jenkins-bot d51d1ebc23 Merge "Make Monobook use the same badge color scheme as Vector" 2016-08-19 21:58:30 +00:00
Roan Kattouw 383f424576 Move the badges down a bit in Monobook
So that they don't touch the top of the screen.

Change-Id: I0ebfce76522540c879cc1440ea333143ce1855d9
2016-08-19 14:33:48 -07:00
Roan Kattouw f9ac794133 Make Monobook use the same badge color scheme as Vector
In the unseen notifications case, Monobook used badges with
black text on a light red/blue, even though the text
is white on grey in the non-unseen case. Change the unseen style
to white on dark red/blue like Vector, and also make the colors
exactly the same as Vector.

Change-Id: I9d2d1a2614ac1130e027fb952c9288588d25d495
2016-08-16 17:38:46 -07:00
Roan Kattouw 7b71d734e1 Tweak badge styles
Bug: T141923
Bug: T142454
Change-Id: Id82681369ffcb41b18ea408fc8bdc7fdd7d65ec6
2016-08-15 11:12:24 -07:00
jenkins-bot 6886c18c03 Merge "Revert "Hack around browser bug in IE breaking badge alignment in Monobook"" 2016-08-11 23:27:25 +00:00
Catrope 092c4c64fb Revert "Hack around browser bug in IE breaking badge alignment in Monobook"
Seems to be fixed by different changes, and now this change
is causing trouble, moving the badges up off-screen.

This reverts commit 0b7f8712a9.

Change-Id: Ia5a0a6b6be3698436a043aee111f251709c22f20
2016-08-11 23:15:15 +00:00