Commit graph

53 commits

Author SHA1 Message Date
bwang 781d532180 Enable dark mode for echo overlay
Bug: T366322
Depends-on: I01cdde979b2ddf64d54013466a3fe51a493860cc
Change-Id: I90f2c3c5098a418a7e40204c9b2384711b6ddce3
2024-06-20 14:40:17 -08:00
Bartosz Dziewoński 00d6928144 Simplify notification widget border styles
Change-Id: I86362ffc4649146cb6e25e4493c37731c5915677
2023-11-17 13:42:31 +01:00
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
jenkins-bot a85ab8b7e8 Merge "Fix opacity of focus styles" 2023-02-06 23:42:54 +00:00
jenkins-bot 1d7657f130 Merge "Improve focus styles" 2023-02-06 23:41:39 +00:00
Volker E 608b4e7266 styles: Replace deprecated Less mixins with CSS unprefixed property
Also remove obsolete vendor prefixes.

Bug: T306486
Bug: T308351
Change-Id: Ie63d2b9d4c9883c2106b74daa03c6c244b32cc78
2023-02-02 14:26:12 -08:00
Ed Sanders 5289d1e8f2 Fix opacity of focus styles
Ensure buttons have full opacity when focused, as when hovered.

Change-Id: Id16e9e3691b7d9b0ebb03ac78bbe86c80568a00b
2023-02-02 17:06:55 +00:00
Ed Sanders 6b0268a758 Improve focus styles
Ensure there is always a 2px outline, and have that
outline cover the outer border where possible.

Change-Id: I3667d01e112f40663bc370ecd5bd6c3bb71ed219
2023-02-02 16:56:25 +00:00
Bartosz Dziewoński 84843d3619 Standardize dynamic action notification styling
* Remove custom light grey color on the body, on mobile the
  notifications are shown on dark grey background, making them
  unreadable
* Remove increased font size for the title, it looks weird,
  particularly on mobile

Change-Id: I08651d2eab19904c19072f186cd2a96fb44e93ec
2022-08-23 23:42:48 +02: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
Sergio Gimeno c815bc64e4 Prevent welcome message partially truncated
Bug: T291100
Change-Id: Ia7d349bd81b45c99eb421b8e69ccdadb3135a67f
2022-01-24 21:44:47 +01:00
Ed Sanders 2bbae62aa3 Set icon size in bundle to exactly 20x20
1.5em would render as 21px in Vector and 19.05px in monobook.

Bug: T276114
Change-Id: Ie31f83e849ae5a4b17f28dfe6ccabc8a2005c919
2021-03-03 23:19:44 +00:00
jenkins-bot 6eee04f614 Merge "Fix layout of action buttons use display:flex" 2020-08-04 05:17:04 +00:00
Ed Sanders ee65e8b426 Remove text decoration on whole item widget when focused
Change-Id: I910b4cf3ef5503a4e38195cd588f327870e87d5e
2020-08-03 15:14:36 +01:00
Ed Sanders 5161a2c40e Fix layout of action buttons use display:flex
Bug: T258990
Change-Id: If0ece6e7ff6fef9abfcd4996a9158e86a5ffece0
2020-07-29 14:13:02 +01:00
Ed Sanders 2faa1fe512 Fix hover styles, remove link underline on special page
Change-Id: Ie144eed5295a8c8fa6239c28f7f2a15d493fd775
2020-07-24 20:34:43 +01:00
Ed Sanders ec87876f59 Set min-width on action buttons
Bug: T130109
Change-Id: I0a763aa7d73a84854daf43696d5751c58b3d067d
2020-07-23 18:19:34 +01:00
Ed Sanders 42e2e5efbc Make NotificationItemWidget an <a> tag to fix focus issues
Bug: T258705
Change-Id: Ib44e04dd08e2818eb99ffb0cba73c775256d66d5
2020-07-23 15:27:01 +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 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
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
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 d0d222cc3a Fix two layout regressions from OOUI ButtonSelectWidget change
Fix the regressions from being able to wrap items on narrow screens
in I2102f6d33979b. We don't want wrapping in affected cases.

Bug: T208930
Change-Id: I748d5b455bef15067205b49824386d2ab5dfdc07
2018-11-07 04:06:02 +00:00
Ed Sanders 0fd6d64a29 Fix DOM structure of mw.echo.ui.MenuItemWidget
* Inherit from DecoratedOptionWidget as it comes with
  an icon mixin.
* Keep the DOM structure as similar to its parent as
  possible, to avoid breaking upstream child selectors.
* To this end, replace <a> wrapping hack with override
  of getTagName to set this.$element to <a>.

Change-Id: Ifde70785a1bc996eb09e581b06ed30708323e9f7
2018-03-27 12:33:40 +01: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 4b3782a46a Replace subtle greys with WikimediaUI color palette ones
Bug: T177723
Change-Id: Iceafe2f3e702667e0ee68b79ddcb6aa4d8fd0010
2017-10-08 10:26:43 -07:00
Roan Kattouw 2691d94e0f Don't truncate notification header messages in bundles
Bug: T163518
Change-Id: I569aeba7b8f87ca46a81ffb5a56c241342dc3d21
2017-05-02 10:50:13 -07: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
Volker E 819545ed7e Add box-sizing mixin
Replacing standard `box-sizing` with MediaWiki's Less mixin, which also
features prefixed properties for older browsers like Firefox 28 and below.

Change-Id: Iafb88b192045fb7df6bbe6954a166a198d04c5cf
2016-10-03 13:21:54 -07:00
jenkins-bot c01b053025 Merge "Remove js-truncation of descriptions in Special:Notifications desktop" 2016-09-10 02:49:02 +00:00
Moriel Schottlender a834420533 Remove js-truncation of descriptions in Special:Notifications desktop
In order for the special page to be responsive, the descriptions can't
be truncated in the JS. If they are, they take a bigger portion
of the screen, sometimes going out of its confines.

The popup should still truncate descriptions.

Change-Id: I533f29c00482f6cfbb7b1c9c7417715e3c5809bf
2016-09-09 12:44:03 -07:00
Moriel Schottlender 22d83568f7 Break more rules in break-word so long words can wrap in notifications
Change-Id: Ib0cde96438175f2bc136bd89d4a2717785cecba0
2016-09-07 16:32:37 -07:00
Moriel Schottlender df38f142ef Followup I3daae156d: Don't truncate body text for small screens
We already took away the truncation of header text, the body should
follow for narrow screens and wrap, instead of using the ellipses
truncation.

Change-Id: I3504599044e1c94ccec55c420d455b9370dae474
2016-09-02 11:27:56 -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
jenkins-bot ac62a9361c Merge "Fix line-height for notification item text" 2016-08-31 02:41:02 +00:00
Moriel Schottlender a4aa79fa50 Add the best CSS rule to notifications: word-break: break-word;
Add word-break: break-word; so we make sure even long names or titles
without spaces are broken/wrapped where they need to.

Bug: T142662
Change-Id: I166e834495972ec49eb98e301ab9be85f40f5a5e
2016-08-30 17:23:32 -07:00
Moriel Schottlender 07dde93247 Fix line-height for notification item text
Bug: T140523
Change-Id: I6a1a174ed70324da50970ecfb35ebba21ea703dd
2016-08-30 15:12:07 -07:00
jenkins-bot 4e99a5095f Merge "Add dynamic secondary actions to notification items" 2016-08-23 17:43:08 +00:00
Moriel Schottlender 480ce92bd8 Add dynamic secondary actions to notification items
Allow extensions to add dynamic actions that perform some
API request and display a confirmation message.

Bug: T132975
Change-Id: Ib16d57c3f1a11a9749564c6e2112bf1ca32c55e8
2016-08-22 16:04:48 -07:00
Roan Kattouw b9b1363ca6 Make dotdotdot menu not be extremely wide
Work around new styles introduced in oojs-ui in I77cd5212c.

Bonus: remove useless styles targeting the dotdotdot popup
in NotificationItemWidget.less: it's not even a popupWidget
any more and it's located in an overlay anyway, so these
styles didn't do anything.

Change-Id: Ifb16b7bb0b01c1eb2551ba4c173042cc759e9b02
2016-08-19 14:48:29 -07:00
Roan Kattouw 3cbddb546b Make excerpts in bundles not italic, but still grey
Bug: T141034
Change-Id: I34c376a97e222257ae660149e0fb8172128eb8c0
2016-08-16 11:48:01 -07:00
Moriel Schottlender 9468ff0e1d Don't truncate bundled item content in mobile view
Bug: T140523
Change-Id: I8223d5596825bdd80c3c961576b46c7f2d4654cd
2016-08-04 13:03:35 -07:00
Roan Kattouw ebd995072f Use body color (gray) for <em>s in bundle headers
Bundles only have a header, no body, so when we include excerpts
in bundle headers, we wrap them in <em> tags. This change
makes these excerpts the same color as the excerpts in the
non-bundled case.

Bug: T139960
Bug: T141034
Change-Id: I6a14274b42ba672ab1366c0dd106ea0847db6404
2016-07-22 16:58:39 -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 984441f8d9 Pad the content so it doesn't stretch beyond the markread button
Bug: T136572
Change-Id: I1db8289722526184b64dbb3e92827988a0e04afc
2016-06-30 15:45:34 -07:00
Roan Kattouw 4ca406e4e8 NotificationItemWidget: Apply hover colors
Also remove OptionWidget-related styles that no longer apply.

Bug: T138917
Change-Id: I9e748549bcfa5aac5a68f0c51cbbe4c0a4537676
2016-06-29 11:55:30 +02:00
Moriel Schottlender f84808b83a Change mark as read buttons to circles
Allow for mark read and mark unread through the side button, and
change its style according to spec in the ticket.

Bug: T126214
Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-21 11:54:00 -07:00