Commit graph

88 commits

Author SHA1 Message Date
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
Roan Kattouw 68479f7442 Reduce the amount of space between the badges a bit
What this really does is:
* Change the forced width of the <a> to the width of the icon
  (rather than 1.25x the width of the icon)
* Change the alignment of the :before from 40% to 50% so it
  stays in the middle (1.25*40=50)

Change-Id: I0399a20fc84e59fcbcf69da509a4d8bfa9b54a08
2016-08-05 18:01:48 -07:00
Moriel Schottlender adab7f087b Fix top position of badges in monobook
Change-Id: Ie2638445d020baf1be79ac1689b446ac1abc2f63
2016-08-05 16:00:49 -07:00
jenkins-bot c9f48a80bb Merge "mw.echo.badge: Use 'color: transparent' rather than 'font-size: 0' to hide text" 2016-08-05 21:58:02 +00:00
jenkins-bot af3d0a4b0f Merge "mw.echo.badge: Use 'background-image' rather than 'content'" 2016-08-05 21:58:00 +00:00
jenkins-bot e86a21e1eb Merge "Hack around browser bug in IE breaking badge alignment in Monobook" 2016-08-05 21:53:03 +00:00
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 300c64ae1f Don't use a smaller font size for the badge numbers in Monobook
Bug: T142149
Change-Id: I1456581625f405512f448c2793c194c5ba199302
2016-08-04 16:04:25 -07:00
Roan Kattouw 0b7f8712a9 Hack around browser bug in IE breaking badge alignment in Monobook
A browser bug causes the badges to be pushed down by 1em in IE11
and below, but not in Edge. The only way I could find to work
around this was to add top:-1em; in IE browsers using CSS hacks.

Bug: T142053
Change-Id: If240f7281dd795085c003af524da294d5bf5ff76
2016-08-03 17:08:58 -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 c1e7fc2208 Adjust notification badges for monobook
Make everything a little smaller, decrease spacing. In order to
make the icons smaller, we had to override the content: url(...)
into using background-image with sizing.

Bug: T141923
Change-Id: Icacb15871c824ae845acc937973fb230b05b489a
2016-08-02 16:41:33 -07:00
jenkins-bot d80e2a5896 Merge "Remove fixed width from notifications heading" 2016-07-30 00:29:39 +00:00
Ed Sanders 72a1f292cf Remove fixed width from notifications heading
Bug: T141627
Change-Id: I7828cf8289baf04718233e8f8f1670670669ecf3
2016-07-29 16:38:50 +01:00