wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-26 16:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/common/components/Menu.less

28 lines
663 B
Plaintext
Raw Normal View History

Reorganize LESS files to match ResourceLoader conventions Separating most LESS files into 2 ResourceLoader modules and a common folder: - skins.vector.styles - skins.vector.styles.legacy - common This changes aims to clearly separate the old (“legacy”), the new (“modern”) and the common styles which were previously all placed under `skins.vector.styles/`. Inside each directory are separate folders for `layouts` and `components`. The entry files, `skin.less` and `skin-legacy.less` are moved into the specific folders and a third, `common.less` entry file is created that contains the common imports for both old and new Vector. Aliases have been added to the Storybook Webpack config to avoid adding the story file changes to this patch. Images coming from CSS `url()`'s have also been temporarily disabled in Storybook until Storybook can be upgraded to use Webpack 5, and use array values for aliases, in a follow-up patch. This patch also slightly changes a footer layout specific rule so that existing `padding` remains unchanged in rendering due to new common and component structure. Bug: T264309 Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-02-02 10:04:37 +00:00
@import '../variables.less';
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
@import 'mediawiki.mixins.less';
Drop unsupported skin CSS classes Drop support for vectorMenu, vectorTabs and vectorMenuCheckbox, body, menu selectors in preference for standard selectors. This change will impact a large amount of user scripts/styles but should not impact any gadgets. These classes were kept around for user scripts and styles however are not needed internally. As we transition to a more maintainable skin menu system, it is time to lose these selectors even though this will cause disruption. Vector now will use the mw-portlet class rather than the vector-menu class in its own CSS styling, however it keeps the other classes to allow differentiation of the different types of menu. Changes to test: Previously the tests assumed all portlets were empty when checking the classes. This is very rare, so its better to check the classes of non-empty portlets, so several tests are updated accordingly to drop the emptyPortlet class. Bug: T262092 Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101
2020-09-04 19:34:05 +00:00
.mw-portlet {
Refactor: Simplify and standardize menu definitions * Standardise the menu markup. This means all menus in Vector will now be wrapped in a div and will have a heading. * All menus now have the vector-menu class. Styles specific to personal tools are moved to layout since these are concerned with placement. * The ul class will always have menu class. * emptyPortal class is generalised into vector-menu-empty for consistency with other classes and moved from common.less into Menu.less * Standardise hooks - BaseTemplateAfterPortlet can now be run on any menu. Changes to HTML: * lang and dir attributes are moved from the h3 up to the div element .vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3 * for non portals ul.menu" is now wrapped in a div.vector-menu-content This change does impact the following CSS selectors which will need to be updated: I see no matches for these selectors in code search. ``` #p-variants > ul #p-namespaces > ul #p-personal > ul #p-views > ul #p-cactions > ul ``` Using global-search.toolforge.org I see one match for p-variants, 26 for p-namespaces, 30 for p-personal, 36 for p-views and 7 for p-cactions. I see this as acceptable breakage provided a user notice is sent out which it has been (T252447) Bug: T249372 Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145
2020-04-16 18:40:39 +00:00
// Hidden by default, but displayed by certain menus
// e.g. MenuPortal
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
h3 {
display: none;
}
ul {
Use `list-style` shorthand with x-browser compatible values Change-Id: I6e47cb2dc406b9cfa3e2ca9b63f8cecce7c59ce1
2018-10-16 02:13:07 +00:00
list-style: none none;
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
margin: 0;
}
Fix padding/positioning of the user menu orange talk message notification The padding-top of the orange notification set in ext.echo.styles.alert.less was being overriden by the `padding-top: 0` set in UserLinks.less which was intended to only override the padding set in Menu.less. This commit: * Scopes the li styles in Menu.less to apply only to the legacy user menu (found in both legacy and modern vector with the consolidated user links feature off) which appears to be the only menus that needs these rules. * The padding-top previously in UserLinks is no longer needed as a result of the above point. * Adjusts/cleans up the positioning of the orange notification by removing an unneeded margin/padding-top and setting the top to 100% (the previous `calc` statement was unintentionally resulting in 112%). Bug: T287633 Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
2021-07-28 19:42:30 +00:00
}
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
Fix padding/positioning of the user menu orange talk message notification The padding-top of the orange notification set in ext.echo.styles.alert.less was being overriden by the `padding-top: 0` set in UserLinks.less which was intended to only override the padding set in Menu.less. This commit: * Scopes the li styles in Menu.less to apply only to the legacy user menu (found in both legacy and modern vector with the consolidated user links feature off) which appears to be the only menus that needs these rules. * The padding-top previously in UserLinks is no longer needed as a result of the above point. * Adjusts/cleans up the positioning of the orange notification by removing an unneeded margin/padding-top and setting the top to 100% (the previous `calc` statement was unintentionally resulting in 112%). Bug: T287633 Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
2021-07-28 19:42:30 +00:00
// FIXME: Move these rules to the #p-personal li selector in
// skins.vector.styles.legacy/layouts/screen.less when modern Vector no longer
// uses the legacy user menu and only uses the new consolidated user links
// menu.
.vector-user-menu-legacy li {
margin-left: 0.75em;
// `padding-top` instead of `margin-top` necessary for
// anonymous user icon position below
padding-top: 0.5em;
line-height: @line-height-nav-personal;
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
}
Reference in a new issue Copy permalink