wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-12-02 19:36:48 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Echo/modules/mobile/overlay.less

56 lines
1.4 KiB
Plaintext
Raw Normal View History

Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
// FIXME: some of this could be removed if we reused .page-list styling
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';
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
@import 'mediawiki.mixins.less';
Merge in styles from Minerva Drops some no-JS styles (.mw-echo-notification) which didn't do anything useful. Bug: T258936 Change-Id: I72bedc3c3d633e8898c93d5e7d570b8ee7b6a1ff
2020-07-27 20:13:41 +00:00
@overlayHeaderHeight: 3em;
build: Update stylelint-config-wikimedia to 0.13.0 Change-Id: I60f34cb3c3c5c12cf1f9f38426a56c76dcf063fd
2022-05-09 13:05:59 +00:00
/* stylelint-disable-next-line selector-class-pattern */
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
.notifications-overlay {
// position: fixed + sliding drawer causes weird rendering bugs in Android
// Browser (tested on 4.0.4 and 4.2.1)
padding-top: 0;
&-header-markAllRead {
padding-right: 1em;
}
&-overlay {
position: absolute;
Merge in styles from Minerva Drops some no-JS styles (.mw-echo-notification) which didn't do anything useful. Bug: T258936 Change-Id: I72bedc3c3d633e8898c93d5e7d570b8ee7b6a1ff
2020-07-27 20:13:41 +00:00
bottom: @overlayHeaderHeight;
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
right: 0;
left: 0;
z-index: 1;
.mw-echo-ui-actionMenuPopupWidget-menu {
padding: 0.5em;
box-shadow: none;
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
border-color: @border-color-subtle;
border-style: @border-style-base;
border-width: @border-width-base 0 0 0;
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
// Override the positioning of the menu
// so it is "stuck" on the bottom of the
// notification overlay panel
position: static !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
top: auto !important;
}
}
build: Update stylelint-config-wikimedia to 0.13.0 Change-Id: I60f34cb3c3c5c12cf1f9f38426a56c76dcf063fd
2022-05-09 13:05:59 +00:00
/* stylelint-disable-next-line selector-class-pattern */
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
.overlay-content {
// this is needed not only on iOS, that's why we repeat it here even though
// it's in Overlay.less too
overflow-y: scroll; // has to be scroll, not auto
position: absolute;
width: 100%;
padding-top: 0;
padding-bottom: 0;
max-width: none; // T219320
Merge in styles from Minerva Drops some no-JS styles (.mw-echo-notification) which didn't do anything useful. Bug: T258936 Change-Id: I72bedc3c3d633e8898c93d5e7d570b8ee7b6a1ff
2020-07-27 20:13:41 +00:00
top: @overlayHeaderHeight;
bottom: @overlayHeaderHeight;
Dormant mobile notifications overlay lives in Echo This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
2019-10-01 20:15:25 +00:00
}
}
Reference in a new issue Copy permalink