Commit graph

81 commits

Author SHA1 Message Date
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
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 1dd3af10bb Adjust mobile view for the new settings cog menu
Now that we have the cog menu, it should be placed correctly in
mobile and the "preferences" link should be hidden.

Since MobileFrontend doesn't have the personal toolbar, and we
can't cheat by using jQuery and grabbing the url of preferences,
we have to get SpecialNotifications.php to output the urls
to a wg variable and reading it from there.

Bug: T115528
Change-Id: I6a69823d6f75c376c04e9a21d79916321e417178
2016-07-25 19:30:44 +00:00
Moriel Schottlender 4ac79a6253 Hide the 'preferences' link from Special:Notifications JS
In JS version, the preferences link is in the cog menu.

Bug: T115528
Bug: T141141
Change-Id: I18503f1deccf82c9f6580198570822e97f053f9b
2016-07-22 22:10:00 +00:00
jenkins-bot 7d29b6088e Merge "Make Special:Notifications responsive" 2016-07-21 21:07:56 +00: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
Moriel Schottlender 545d4e67ae Add a mark-all-read button and a settings menu to Special:Notifications
Add a global-wiki 'mark all as read' to the Special:Notifications page.
The 'mark all as read' will makr all notifications in the given
wiki. The context of the wiki changes when filters are chosen,
and so the message of the button changes as well.

Bug: T115528
Change-Id: Ibd9dcdf7072d6cbc1a268c18e558e6d0df28f929
2016-07-20 17:25:38 -07:00
Moriel Schottlender 8a69d86d18 Make Special:Notifications responsive
As a first step for mobile support, make the page responsive,
hide the sidebar, and slightly adjust button/title positions and
sizes so they fit in a small screen.

Bug: T140687
Change-Id: I98f264948a57924f6370a861381456ce9c82f8d8
2016-07-19 15:11:47 -07:00