Commit graph

34 commits

Author SHA1 Message Date
Volker E 7f6f792a3a styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' `@import`
with new skin-aware 'mediawiki.skin.variables.less' standard.
Also replacing and removing scattered WikimediaUI Base v0.15.0 variables
with new skin variables.

Also
- replacing several static values with new Codex design tokens featuring
  skin variables for following properties:
  - background-color
  - color
  - border-width, border-style, border-color and border shorthand
  - border-radius
  - box-shadow colors
  - outline-width, outline-style, outline-color and outline shorthand
  - opacity
- replacing equal-value Echo variables with new skin variables
- replacing `opacity: 0` with `opacity: 1px solid transparent`, which
  improves accessibility in Windows High Contrast mode

Bump required MediaWiki core version to >= v1.41.0.

Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06
Change-Id: If3863f07d7c3a8b58808fb03401c1060a92bc2ab
2023-04-04 01:26:11 -07:00
Bartosz Dziewoński ed76ff596f Avoid hardcoded width for the popup's footer buttons
Hardcoded width interferes with OOUI's attempts to make the popup
narrower on narrow screens.

Minerva low resolution styles are now applied to all skins at
mobile/tablet breakpoints

Bug: T287132
Change-Id: Ifffe8c6330385356d35b7950ce9803f3a9f01b6f
2023-02-03 11:58:35 -08: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
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
Albert221 c6388532c0 Better color to represent read notifications
Replace color of read notification background
in notifications list with Base 80, also
slightly increase opacity of timestamp to
be more visible.

Bug: T78594
Change-Id: I93e26a9eb7e01a8b46bcac8b7ed72ddf06a63f30
2017-12-09 02:11:08 +01:00
Volker E 537708ce76 Update Red50 'destructive' color
'Destructive' color was updated in WikimediaUI color palette to
ensure WCAG 2.0 level AA conformance with both, white and black.
Due to WikimediaUI Base not in central place we still have to care about
this manually.

Change-Id: I7402ef64b1aa28c2cffeb9bca2804b1dfbecec42
2017-08-21 16:06:06 -07: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
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 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
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
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
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 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
Roan Kattouw d36c0ab123 Fix truncation of notification headers
We need a fixed-width CSS table with a number of fixed-width
cells and one cell that takes up the remaining width, with
text truncation. This is a pain to do with CSS tables,
but this trick I found on StackOverflow[1] works well:
wrap the contents of the cell in a div that's position: relative;,
containing another div that's position: absolute; width: 100%;

[1] http://stackoverflow.com/questions/7569436/css-constrain-a-table-with-long-cell-contents-to-page-width

Bug: T140349
Change-Id: I507f915f06185c767d7a5c8edbff6c341e07b6e2
2016-07-18 17:06:48 -07:00
Stephane Bisson db838e42ce Keep bundled notification compact header on one line
Bug: T139321
Change-Id: I4b0a7173bc06a0760efff544bcc28a59ba72ce7f
2016-07-06 20:44:00 +00:00
Moriel Schottlender 0340611b72 Set a fixed max-width to the Special:Notifications page
This is to make sure that concatenation of text inside items works
properly given CSS table-layout.

Bug: T138433
Change-Id: Iae32cbf82cdb91880c7ccd7df14d167eb75527cf
2016-07-05 11:23:01 -07:00
Moriel Schottlender 820d2b0fa7 Add a cross-wiki sidebar to the Special:Notifications page
Add a sidebar with cross-wiki sources and pages of unread notifications.
The filter allows the user to fetch notifications from a foreign source
and specific pages if those exist.

Bug: T129366
Change-Id: I57d827a47f80274d75364c2099a9624049a26834
2016-06-21 14:49:42 -07:00
Moriel Schottlender fd45db9eb2 Styling changes to Special:Notifications headers and toolbar
Bug: T136580
Bug: T136568
Change-Id: I1a7f08cca8884ada42eca50ba802b4d1e0b788e0
2016-05-31 00:40:07 +00:00
Moriel Schottlender b62185bf81 Adjust group bundle styles
Bug: T128069
Change-Id: If1e5d9811f4569e93ab9ba3064699ce6a6d907f7
2016-02-29 20:16:42 +00:00
Stephane Bisson f969250b27 Increase contrast between header and body text in notifications
Bug: T125964
Change-Id: Id597f10a624e8b4e92bfc1c1c8c79857f23b598c
2016-02-15 15:45:43 -05:00
jenkins-bot ff5c8b4172 Merge "Revert "Follow-up 88d6f01c33: postpone greying out notification bodies for now"" 2016-01-21 19:57:14 +00:00
Sbisson d2158aa70d Revert "Follow-up 88d6f01c33: postpone greying out notification bodies for now"
T121950 is merged.

This reverts commit 1b1fb5b9c7.

Change-Id: I8a02d485be2f54762fc32b3a82ef2cae16d371c5
2016-01-21 14:55:02 +00:00
Justin Du 7b5cf41e37 Adjust layout for new notification panel designs
Bug: T122646
Change-Id: I6cb6d121eb7e32737b1d73743061e1435e869c93
2016-01-18 18:00:14 -08:00
Moriel Schottlender 3472070b2b Organize items in bundles with CSS table layout
This will make the "flat" positioning of the bundle items a lot
more consistent and organized.

Bug: T121933
Bug: T123762
Change-Id: I472fcc89e540f1a886168069c547c6dc7e5ce613
2016-01-18 16:59:29 -08:00
Roan Kattouw b80af26409 Set opacity:0.8; on the buttons in the footer of the notification popup too
Bug: T119378
Change-Id: I061d06dc13886618434b7022fc84f59feeaa426e
2016-01-18 14:28:19 -08:00
Roan Kattouw 1b1fb5b9c7 Follow-up 88d6f01c33: postpone greying out notification bodies for now
We want to wait until we have done T121950.

Change-Id: I46d37e2c4c9fb719e236ae6af4e2b15dbac7b1ba
2016-01-12 14:38:15 -08:00
Roan Kattouw 88d6f01c33 Make notification body text lighter
Use #888 instead of #666 to match secondary link text
(which is #000 with 50% opacity), both in the flyout and
on the special page.

Bonus: use LESS variables for these colors.

Change-Id: Ifc1182a001e9b25f6ff7c213b6fcde3dc2f0acd2
2015-12-18 13:13:22 -08:00
Moriel Schottlender a4659baec5 Add OOUI widgets for cross-wiki bundled notifications
* Add the ability to use bundled expandable
  notification groups
* Display bundled cross-wiki notifications following
  the design

Bug: T115419
Bug: T115423
Bug: T115422
Change-Id: I8c3eba6d627c3f06d51d74fc9774e3fc2d02915d
2015-12-14 17:22:34 -08:00
Ed Sanders 219b3d8b28 Separate skin specific styles and improve Monobook appearance
Bug: T112290
Change-Id: I1e73c92c69cf6df7c4d08b27a392f9c9bc19446f
2015-11-10 17:57:44 -08:00
jenkins-bot d36f940f06 Merge "Align popup footer buttons to take 50% width each" 2015-09-09 20:47:50 +00:00
Moriel Schottlender a37e764d3d Align popup footer buttons to take 50% width each
The alignment of the buttons was done haphazadly before, using
padding. This should be done better; we should calculate the buttons
width to be 50% of the width of the popup.

Since the popup accepts a width config, we know what its value is,
and can calculate the proper width. The width was added to the
variables.less file for continued use.

* Added popupWidth config variable to the badge widget
* Added OO.ui.ButtonGroupWidget to place the buttons in for
  consistency and styling
* Added calculated width styles to both footer buttons
* Added corrections for MonoBook

Change-Id: Iad2c947da06241e9303cf1f35574177a0f602bbb
2015-09-09 13:37:24 -07:00
Pau Giner b6712be9a3 Reduce distance between notification badges
Notification badges are conceptually closer together than the rest of toolbar elements.
So it makes sense to move them closer visually too.

This is just a small CSS adjustment to compensate for the default margin
that items in the menu get. If there is a cleanner way to achieve the same,
feel free to refactor.

Bug: T108190
Change-Id: I06403f67c24f045c125c505dca2101f9eed79594
2015-09-09 11:36:18 -07:00
Moriel Schottlender 1ac72cc01a Split alerts and messages in Echo
Split the notifications into 'alert' and 'message' badget with two
different flyouts. Also clean up styling and module behavior.

** Depends on ooui change Id4bbe14ba0bf6c for footers in popups.
** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in
   inverted icons.

** MobileFrontend must also be updated to support the new modules
   in this patch  I168f485d6e54cb4067

In this change:
* Split notifcations into alert and messages and display those in
  two different badges.
* Create two separate flyout/popups for each category with their
  notifications.
* Create a view-model to control notification state and emit events
  for both the popup and the badge to intercept and react to.
* Clean up module load and distribution:
  * Create an ext.echo.ui module for javascript-ui support and ooui
    widgets.
  * Create an ext.echo.nojs module that unifies all base classes that
    are needed for both nojs and js support, that the js version
    builds upon.
  * Create a separate ext.echo.logger module as a singleton that can
    be called to perform all logging.
* Clean up style uses
  * Move the special page LESS file into nojs module so all styles
    load properly even in nojs mode.
  * Transfer some of the styling from JS to LESS for consistency.
  * Make the 'read more' button load already with the styles it
    needs to look like a button, since its behavior is similar in
    nojs and js vesions, but before its classes were applied only
    by the js, making it inconsistent and also making its appearance
    'jump' from a link to a button.
* Delete and clean up all old and unused files.
* Moved 'Help.png' icon from modules/overlay to modules/icons for
  later use.

Bug: T108190
Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-09-02 15:36:37 -07:00