wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-12-18 02:40:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Echo/modules/styles/mw.echo.ui.SubGroupListWidget.less

31 lines
635 B
Plaintext
Raw Normal View History

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-03 19:44:38 +00:00
@import 'mediawiki.skin.variables.less';
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 20:53:39 +00:00
@import '../echo.variables.less';
Adjust group bundle styles Bug: T128069 Change-Id: If1e5d9811f4569e93ab9ba3064699ce6a6d907f7
2016-02-26 22:27:14 +00:00
Refactoring Echo's front end for MVC Changing the way Echo's front-end architecture works to work with model-view-controller methodology. Change-Id: I97862402c41bc04dd41cd08d79f19ff677340249
2016-04-10 13:31:02 +00:00
.mw-echo-ui-subGroupListWidget {
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 23:41:15 +00:00
&:not( :first-child ) {
Use padding instead of margin to separate cross-wiki sections from each other So that margin collapsing doesn't eat up the extra space we wanted to create. Bug: T128069 Change-Id: Ib3b96c54c2ace52cf28047a5f9f012fcc56ccb9c
2016-03-04 00:19:45 +00:00
padding-top: @bundle-group-padding;
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-10-16 23:18:25 +00:00
}
Generalize the SubGroupListWidget Allow for the widget to have a mark-as-read button to its individual groups, as well as change the event listening from 'remove' to 'discard' The problem with 'remove' event is that it is triggered when an item is either intentionally removed from the list *and* when an item is changing its position in the list (move event includes 'remove' and then 'add' event) If we listen to 'remove' events we will get both cases, which is unhelpful. Instead, a new event - 'discard' - was introduced so we are certain it is used with the clear intention of removing the item completely. Change-Id: Ia08720bf4c547fa41edf62331eeb1a45ff4965b7
2016-05-19 20:55:21 +00:00
&-header {
&-row {
Simplify Special:Notifications layout using flexbox Compared to the previous approach using table layouts, it is much easier to control which elements are allowed to extend to maximum available width, and to provide alternative layouts for mobile. There should be no visual changes. It doesn't require using `white-space: nowrap` to prevent elements from being squished, which will help with T237244. (These styles are only loaded on Special:Notifications, they don't apply to the flyout.) Bug: T237244 Change-Id: I09e692e427f61fabd53b3824a1ed7e4f8e76fad4
2024-05-15 20:31:21 +00:00
display: flex;
align-items: center;
Special:Notifications: Add additional wrapping Bug: T337954 Change-Id: Ia34e68eff3bcd52bd4ba0017bd5b8b271fd528c6
2024-05-29 21:27:56 +00:00
flex-wrap: wrap;
Conditionally rearrange date and button in notif list When there isn't enough space for both date and button, separate them each on its own line. Bug: T146288 Change-Id: I7ad022da82503f35ae630d171faeed1815c97f7a
2018-03-25 13:47:46 +00:00
&-title {
Simplify Special:Notifications layout using flexbox Compared to the previous approach using table layouts, it is much easier to control which elements are allowed to extend to maximum available width, and to provide alternative layouts for mobile. There should be no visual changes. It doesn't require using `white-space: nowrap` to prevent elements from being squished, which will help with T237244. (These styles are only loaded on Special:Notifications, they don't apply to the flyout.) Bug: T237244 Change-Id: I09e692e427f61fabd53b3824a1ed7e4f8e76fad4
2024-05-15 20:31:21 +00:00
flex-grow: 1;
align-self: end;
Generalize the SubGroupListWidget Allow for the widget to have a mark-as-read button to its individual groups, as well as change the event listening from 'remove' to 'discard' The problem with 'remove' event is that it is triggered when an item is either intentionally removed from the list *and* when an item is changing its position in the list (move event includes 'remove' and then 'add' event) If we listen to 'remove' events we will get both cases, which is unhelpful. Instead, a new event - 'discard' - was introduced so we are certain it is used with the clear intention of removing the item completely. Change-Id: Ia08720bf4c547fa41edf62331eeb1a45ff4965b7
2016-05-19 20:55:21 +00:00
}
}
Adjust group bundle styles Bug: T128069 Change-Id: If1e5d9811f4569e93ab9ba3064699ce6a6d907f7
2016-02-26 22:27:14 +00:00
}
Fix borders of bundled notifications inside a bundle Follow-up to 00d6928144e12d8f873fddf93e492b74995af121. I simplified the styles too much :( They worked for cross-wiki notifications, but not regular bundled notifications. I didn't realize they were styled differently… * Add the border to bundled non-cross-wiki notifs (this requires changes in SortedListWidget.js to add a wrapper) * Hide the border until the list loads * Remove unnecessary margin Change-Id: I30c5bec11ddb49defa5957f0917f01057a3c21e7
2023-12-16 01:48:00 +00:00
}
Adjust group bundle styles Bug: T128069 Change-Id: If1e5d9811f4569e93ab9ba3064699ce6a6d907f7
2016-02-26 22:27:14 +00:00
Fix borders of bundled notifications inside a bundle Follow-up to 00d6928144e12d8f873fddf93e492b74995af121. I simplified the styles too much :( They worked for cross-wiki notifications, but not regular bundled notifications. I didn't realize they were styled differently… * Add the border to bundled non-cross-wiki notifs (this requires changes in SortedListWidget.js to add a wrapper) * Hide the border until the list loads * Remove unnecessary margin Change-Id: I30c5bec11ddb49defa5957f0917f01057a3c21e7
2023-12-16 01:48:00 +00:00
/* stylelint-disable no-descending-specificity */
.mw-echo-ui-subGroupListWidget,
.mw-echo-ui-bundleNotificationItemWidget-group {
.mw-echo-ui-sortedListWidget-group:not( :empty ) {
Simplify notification widget border styles Change-Id: I86362ffc4649146cb6e25e4493c37731c5915677
2023-11-17 12:36:31 +00:00
border: @border-width-base @border-style-base @border-color-subtle;
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-10-16 23:18:25 +00:00
}
}
Fix borders of bundled notifications inside a bundle Follow-up to 00d6928144e12d8f873fddf93e492b74995af121. I simplified the styles too much :( They worked for cross-wiki notifications, but not regular bundled notifications. I didn't realize they were styled differently… * Add the border to bundled non-cross-wiki notifs (this requires changes in SortedListWidget.js to add a wrapper) * Hide the border until the list loads * Remove unnecessary margin Change-Id: I30c5bec11ddb49defa5957f0917f01057a3c21e7
2023-12-16 01:48:00 +00:00
/* stylelint-enable no-descending-specificity */
Reference in a new issue Copy permalink