mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/userMenu.less

44 lines
1 KiB
Plaintext
Raw Normal View History

Echo uses Button template Changes * Update FIXME in userMenu.less to merge selectors * We replace minerva-user-notifications class with minerva-notifications to short-circuit Echo's code so that it no longer replaces the Minerva notification badge with its own. * We update resources/skins.minerva.scripts/initMobile.js to introduce our own wire up code - this is responsible for opening Echo overlay and reseting the counter. The code in Echo will be removed in a follow up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>) * We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022 so that Minerva desktop remains consistent with desktop Vector 2022 experience. * We clearly mark technical debt relating to the special mobile version. Testing: * Pixel.js has a group echo that covers all the different variants. Make sure to update to latest main branch before running these. * Desktop should behave the same for Minerva as Echo. * On mobile only when a user has unseen notifications a red circle is shown. Otherwise a bell icon is shown, never with number. * On mobile a single button is visible that combines alert and count numbers. * With Echo disabled a bell shows that links to the user talk page Visual changes: * Previously the red circle became a transparent/gray circle on click. Now it will always be red. * Minor aligment changes to red circle and bell icon are expected as the change prevents MobileFrontend/Echo updating the icon to use Codex. Bug: T342907 Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-01 00:12:59 +00:00
@import 'mediawiki.skin.variables.less';
@import '../../minerva.less/minerva.variables.less';
// stylelint-disable selector-max-id
[UI] [new] add user menu Add new user menu. The changes required include: - Break up AuthMenuEntry into reusable components. They're now simple, independent, static functions in AuthUtil that are easy to reason about and compose. There's lots of verbose code because of the builder and director patterns. That is, most of the code is for building the thing we actually want to build instead of just building it. It's easy to write but no fun to read--even simple configurations are extremely verbose expressions that must be threaded through the system. These builders are also single purpose and unlikely to be reusable unlike a URI builder, for example. As objects, they're not especially composable either. - Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban inheritance. Inheritance has not worked well on the frontend of MobileFrontend. I don't think it's going to work well here. E.g., I could have made changes to the base class' getPersonalTools() method such that the client passes a parameter for the advanced config or maybe I just override it in the subclass. In either case, I think it makes the whole hierarchy nuanced and harder to reason about for something that should be simple. - Add ProfileMenuEntry and LogOutMenuEntry for the user menu. - Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches the entry name, AuthMenuEntry. - Extension:SandboxLink is needed to display the sandbox link in the user menu. - Performance note: the toolbar is now processed in MinervaTemplate, which corresponds to removing the buildPersonalUrls() override. - To mimic the design of main menu, the following steps would be necessary: 1. Create a user/Default and user/Advanced user menu builder and also a user/IBuilder interface. 2. Create a user/Director. 3. Create a service entry for Minerva.Menu.UserDirector in ServiceWiring. The Director is actually powerless and doesn't get to make any decisions--the appropriate builder is passed in from ServiceWiring which checks the mode. 4. Access the service in SkinMinerva to set a userMenuHTML data member on the Minerva QuickTemplate. 5. In MinervaTemplate, access the userMenuHTML QuickTemplate member and do the usual song and dance of inflating a Mustache template. This patch does everything except add a service, which was agreed to be unnecessary, so that logic is now in SkinMinerva. - Wrap the existing echo user notifications button and new user menu button in a nav element. This seems like a semantic improvement. - The existing styling and logic for the search bar and search overlay are pretty messy and delicate. Changes made to that LESS endeavored to be surgical. There's lots of room for improvement in the toolbar but it's out of scope. - Rename logout icon to logOut. Bug: T214540 Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
2019-06-25 20:12:58 +00:00
// The top level user account button in the upper right near the notifications button.
.minerva-user-navigation {
display: flex;
Echo uses Button template Changes * Update FIXME in userMenu.less to merge selectors * We replace minerva-user-notifications class with minerva-notifications to short-circuit Echo's code so that it no longer replaces the Minerva notification badge with its own. * We update resources/skins.minerva.scripts/initMobile.js to introduce our own wire up code - this is responsible for opening Echo overlay and reseting the counter. The code in Echo will be removed in a follow up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>) * We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022 so that Minerva desktop remains consistent with desktop Vector 2022 experience. * We clearly mark technical debt relating to the special mobile version. Testing: * Pixel.js has a group echo that covers all the different variants. Make sure to update to latest main branch before running these. * Desktop should behave the same for Minerva as Echo. * On mobile only when a user has unseen notifications a red circle is shown. Otherwise a bell icon is shown, never with number. * On mobile a single button is visible that combines alert and count numbers. * With Echo disabled a bell shows that links to the user talk page Visual changes: * Previously the red circle became a transparent/gray circle on click. Now it will always be red. * Minor aligment changes to red circle and bell icon are expected as the change prevents MobileFrontend/Echo updating the icon to use Codex. Bug: T342907 Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-01 00:12:59 +00:00
min-width: auto;
// Support Firefox: Needs `min-height` to vertically align icons in menu. See T233517.
min-height: @height-site-header;
height: 100%;
Echo uses Button template Changes * Update FIXME in userMenu.less to merge selectors * We replace minerva-user-notifications class with minerva-notifications to short-circuit Echo's code so that it no longer replaces the Minerva notification badge with its own. * We update resources/skins.minerva.scripts/initMobile.js to introduce our own wire up code - this is responsible for opening Echo overlay and reseting the counter. The code in Echo will be removed in a follow up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>) * We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022 so that Minerva desktop remains consistent with desktop Vector 2022 experience. * We clearly mark technical debt relating to the special mobile version. Testing: * Pixel.js has a group echo that covers all the different variants. Make sure to update to latest main branch before running these. * Desktop should behave the same for Minerva as Echo. * On mobile only when a user has unseen notifications a red circle is shown. Otherwise a bell icon is shown, never with number. * On mobile a single button is visible that combines alert and count numbers. * With Echo disabled a bell shows that links to the user talk page Visual changes: * Previously the red circle became a transparent/gray circle on click. Now it will always be red. * Minor aligment changes to red circle and bell icon are expected as the change prevents MobileFrontend/Echo updating the icon to use Codex. Bug: T342907 Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-01 00:12:59 +00:00
width: auto;
[UI] [new] add user menu Add new user menu. The changes required include: - Break up AuthMenuEntry into reusable components. They're now simple, independent, static functions in AuthUtil that are easy to reason about and compose. There's lots of verbose code because of the builder and director patterns. That is, most of the code is for building the thing we actually want to build instead of just building it. It's easy to write but no fun to read--even simple configurations are extremely verbose expressions that must be threaded through the system. These builders are also single purpose and unlikely to be reusable unlike a URI builder, for example. As objects, they're not especially composable either. - Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban inheritance. Inheritance has not worked well on the frontend of MobileFrontend. I don't think it's going to work well here. E.g., I could have made changes to the base class' getPersonalTools() method such that the client passes a parameter for the advanced config or maybe I just override it in the subclass. In either case, I think it makes the whole hierarchy nuanced and harder to reason about for something that should be simple. - Add ProfileMenuEntry and LogOutMenuEntry for the user menu. - Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches the entry name, AuthMenuEntry. - Extension:SandboxLink is needed to display the sandbox link in the user menu. - Performance note: the toolbar is now processed in MinervaTemplate, which corresponds to removing the buildPersonalUrls() override. - To mimic the design of main menu, the following steps would be necessary: 1. Create a user/Default and user/Advanced user menu builder and also a user/IBuilder interface. 2. Create a user/Director. 3. Create a service entry for Minerva.Menu.UserDirector in ServiceWiring. The Director is actually powerless and doesn't get to make any decisions--the appropriate builder is passed in from ServiceWiring which checks the mode. 4. Access the service in SkinMinerva to set a userMenuHTML data member on the Minerva QuickTemplate. 5. In MinervaTemplate, access the userMenuHTML QuickTemplate member and do the usual song and dance of inflating a Mustache template. This patch does everything except add a service, which was agreed to be unnecessary, so that logic is now in SkinMinerva. - Wrap the existing echo user notifications button and new user menu button in a nav element. This seems like a semantic improvement. - The existing styling and logic for the search bar and search overlay are pretty messy and delicate. Changes made to that LESS endeavored to be surgical. There's lots of room for improvement in the toolbar but it's out of scope. - Rename logout icon to logOut. Bug: T214540 Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
2019-06-25 20:12:58 +00:00
// Center vertically.
align-items: center;
// Layout from right / end.
justify-content: flex-end;
// Show the list relative the button.
position: relative;
// align the last icon (i.e. notification or use menu) with the container edge.
& > *:last-child {
.cdx-mixin-button-layout-flush( 'end', true, 'large' );
}
Echo uses Button template Changes * Update FIXME in userMenu.less to merge selectors * We replace minerva-user-notifications class with minerva-notifications to short-circuit Echo's code so that it no longer replaces the Minerva notification badge with its own. * We update resources/skins.minerva.scripts/initMobile.js to introduce our own wire up code - this is responsible for opening Echo overlay and reseting the counter. The code in Echo will be removed in a follow up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>) * We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022 so that Minerva desktop remains consistent with desktop Vector 2022 experience. * We clearly mark technical debt relating to the special mobile version. Testing: * Pixel.js has a group echo that covers all the different variants. Make sure to update to latest main branch before running these. * Desktop should behave the same for Minerva as Echo. * On mobile only when a user has unseen notifications a red circle is shown. Otherwise a bell icon is shown, never with number. * On mobile a single button is visible that combines alert and count numbers. * With Echo disabled a bell shows that links to the user talk page Visual changes: * Previously the red circle became a transparent/gray circle on click. Now it will always be red. * Minor aligment changes to red circle and bell icon are expected as the change prevents MobileFrontend/Echo updating the icon to use Codex. Bug: T342907 Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-01 00:12:59 +00:00
.minerva-notifications {
ul {
list-style: none;
display: flex;
align-items: center;
}
Echo uses Button template Changes * Update FIXME in userMenu.less to merge selectors * We replace minerva-user-notifications class with minerva-notifications to short-circuit Echo's code so that it no longer replaces the Minerva notification badge with its own. * We update resources/skins.minerva.scripts/initMobile.js to introduce our own wire up code - this is responsible for opening Echo overlay and reseting the counter. The code in Echo will be removed in a follow up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>) * We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022 so that Minerva desktop remains consistent with desktop Vector 2022 experience. * We clearly mark technical debt relating to the special mobile version. Testing: * Pixel.js has a group echo that covers all the different variants. Make sure to update to latest main branch before running these. * Desktop should behave the same for Minerva as Echo. * On mobile only when a user has unseen notifications a red circle is shown. Otherwise a bell icon is shown, never with number. * On mobile a single button is visible that combines alert and count numbers. * With Echo disabled a bell shows that links to the user talk page Visual changes: * Previously the red circle became a transparent/gray circle on click. Now it will always be red. * Minor aligment changes to red circle and bell icon are expected as the change prevents MobileFrontend/Echo updating the icon to use Codex. Bug: T342907 Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-01 00:12:59 +00:00
/* Will be leveraged by future Echo version. */
li {
position: relative;
}
Echo uses Button template Changes * Update FIXME in userMenu.less to merge selectors * We replace minerva-user-notifications class with minerva-notifications to short-circuit Echo's code so that it no longer replaces the Minerva notification badge with its own. * We update resources/skins.minerva.scripts/initMobile.js to introduce our own wire up code - this is responsible for opening Echo overlay and reseting the counter. The code in Echo will be removed in a follow up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>) * We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022 so that Minerva desktop remains consistent with desktop Vector 2022 experience. * We clearly mark technical debt relating to the special mobile version. Testing: * Pixel.js has a group echo that covers all the different variants. Make sure to update to latest main branch before running these. * Desktop should behave the same for Minerva as Echo. * On mobile only when a user has unseen notifications a red circle is shown. Otherwise a bell icon is shown, never with number. * On mobile a single button is visible that combines alert and count numbers. * With Echo disabled a bell shows that links to the user talk page Visual changes: * Previously the red circle became a transparent/gray circle on click. Now it will always be red. * Minor aligment changes to red circle and bell icon are expected as the change prevents MobileFrontend/Echo updating the icon to use Codex. Bug: T342907 Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-01 00:12:59 +00:00
// Hide notices for Minerva mobile mode.
#pt-notifications-notice {
.mw-mf & {
display: none;
}
}
}
}