wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-14 11:15:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/stories/skin.stories.data.js

135 lines
6 KiB
JavaScript
Raw Normal View History

Refactor: html-userlangattributes -> html-user-language-attributes This matches the name in core and is needed in preparation for switching to SkinMustache Additional change: The JS variable htmluserlangattributes is renamed "htmlUserLanguageAttributes" Change-Id: I306ebb615f720852fb35c25ac240d6b802d05ecc
2020-07-14 21:40:28 +00:00
import { htmlUserLanguageAttributes } from './utils';
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 { placeholder } from './utils';
Storybook should include UserLinks Merge UserMenu into UserLinks for legacy and modern Add a story for the UserLinks menu Fixes: rendering of Skin (legacy) personal tools (the user icon no longer overlaps) Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
2021-05-26 23:23:53 +00:00
import { userLinksTemplateLegacy } from './UserLinks.stories.data';
import { menuTemplate } from './Menu.stories.data';
import { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
Refactor: Merge VectorTabs into Menu Bug: T249372 Change-Id: Ib6ae191b31564dc23a3b1d6aedf48cbaaad006af
2020-05-06 17:15:50 +00:00
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
Refactor: VectorMenu merged in to Menu Bug: T249372 Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a
2020-05-06 00:00:56 +00:00
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
[refactor] SearchBox uses Icon template partial Change-Id: I8ff49b85dd2151618e48251e0fc38152a50ca381
2021-09-03 19:00:45 +00:00
import { searchBoxData, searchBoxTemplate, SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data';
Separate opt out data from sidebar In preparation for using the data provided by SkinMustache class we need to separate the opt out data from the rest of the sidebar. The opt out data is specific to Vector. Change-Id: I4461da92c1787d272bbf99e6644bdb9e6c388a68
2020-10-08 21:51:27 +00:00
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, OPT_OUT_DATA,
Separate languages portal from other portals in sidebar In preparation for moving the languages out of the sidebar (T256023) and to facilitate experimentation in the Universal Language Selector extension, we should separate the data from the languages portal from other portals. Note the languages portal has traditionally appeared at the bottom of the sidebar, so this can be done safely in the same way we introduced data-portals-first Change-Id: I4be06278ec256cc55aee36c2946339fb49d21b46
2020-06-22 18:01:10 +00:00
sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
Fix storybook instance display of footer and personal menu * The classes provided on the personal menu are incorrect. Rectify these by creating a menu helper * Register the footer template partials Change-Id: I4b73be54c073f0dd350c107b18f10456c9ee1b17
2020-10-08 21:56:52 +00:00
import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS,
footerTemplate } from './Footer.stories.data';
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
import { logoTemplate } from './Logo.stories.data';
Use template partials rather than HTML strings CHANGES to index.mustache: Changes can be understood by looking at the diff of the file stories/skin.stories.js The additional changes in stories folder export the data passed to those templates. A new file is used as exporting any variable in a file suffixed stories.js will be assumed to be a story entry. The changes to index.mustache are as follows: * html-footer is replaced with data-footer and Footer component is rendered via template partial * html-navigation is replaced with data-navigation and Navigation component is rendered via template partial CHANGES to Navigation.mustache: Changes are best explained by looking at the diff to stories/navigation.stories.js and navigation.stories.data.js * html-personal-menu is replaced with data-personal-menu Bug: T245456 Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-02-17 19:49:43 +00:00
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const NAVIGATION_TEMPLATE_DATA = {
Separate opt out data from sidebar In preparation for using the data provided by SkinMustache class we need to separate the opt out data from the rest of the sidebar. The opt out data is specific to Vector. Change-Id: I4461da92c1787d272bbf99e6644bdb9e6c388a68
2020-10-08 21:51:27 +00:00
loggedInWithVariantsAndOptOut: Object.assign( {}, {
Simplify menu code SkinMustache in core provides most of what is required for Vector to generate its menus. In the interest of having a canonical source of truth for menus across all skins, Vector should use this data. To ensure the HTML generated is (mostly) the same after this patch to prior, a few modifications are necessary: * The data from core is decorated so that Vector can continue having its own custom class names on menus. This is done using the decoratePortletClass method. * There is no support for a menu having a header representing the selected menu item, as is currently the case with variants. This is achieved via an extension to getPortletData. It's assumed that later when variants are merged with languages, this can be removed. * Menus are agnostic to how they are displayed, so we must continue to add the is-dropdown template variable to drop down menus. In future we may want to rethink our Menu partial to make this unnecessary in PHP. * The portal-first class is redundant in the modern Vector as we can use the first-child selector. Previously we introduced a class to service the legacy skin where this rule doesn't apply as #p-logo is the first child. However, the legacy skin can do this using a special next sibling selector instead. Bug: T268157 Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2020-09-04 19:18:57 +00:00
'data-portlets': {
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
'data-namespaces': namespaceTabsData,
'data-views': pageActionsData,
'data-variants': variantsData
},
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
'data-search-box': searchBoxData,
Simplify menu code SkinMustache in core provides most of what is required for Vector to generate its menus. In the interest of having a canonical source of truth for menus across all skins, Vector should use this data. To ensure the HTML generated is (mostly) the same after this patch to prior, a few modifications are necessary: * The data from core is decorated so that Vector can continue having its own custom class names on menus. This is done using the decoratePortletClass method. * There is no support for a menu having a header representing the selected menu item, as is currently the case with variants. This is achieved via an extension to getPortletData. It's assumed that later when variants are merged with languages, this can be removed. * Menus are agnostic to how they are displayed, so we must continue to add the is-dropdown template variable to drop down menus. In future we may want to rethink our Menu partial to make this unnecessary in PHP. * The portal-first class is redundant in the modern Vector as we can use the first-child selector. Previously we introduced a class to service the legacy skin where this rule doesn't apply as #p-logo is the first child. However, the legacy skin can do this using a special next sibling selector instead. Bug: T268157 Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2020-09-04 19:18:57 +00:00
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
Refactor: All messages should be listed from skin.json This allows us easily to identify in templates what messages are used and where, as well as allow us an easy way to tell when messages are no longer being used. Change-Id: I610224d551ebea54ae32e9e79901befe80cfd5ce
2020-08-05 20:27:38 +00:00
'msg-navigation-heading': 'Navigation menu',
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
Separate opt out data from sidebar In preparation for using the data provided by SkinMustache class we need to separate the opt out data from the rest of the sidebar. The opt out data is specific to Vector. Change-Id: I4461da92c1787d272bbf99e6644bdb9e6c388a68
2020-10-08 21:51:27 +00:00
}, OPT_OUT_DATA ),
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
loggedOutWithVariants: {
Simplify menu code SkinMustache in core provides most of what is required for Vector to generate its menus. In the interest of having a canonical source of truth for menus across all skins, Vector should use this data. To ensure the HTML generated is (mostly) the same after this patch to prior, a few modifications are necessary: * The data from core is decorated so that Vector can continue having its own custom class names on menus. This is done using the decoratePortletClass method. * There is no support for a menu having a header representing the selected menu item, as is currently the case with variants. This is achieved via an extension to getPortletData. It's assumed that later when variants are merged with languages, this can be removed. * Menus are agnostic to how they are displayed, so we must continue to add the is-dropdown template variable to drop down menus. In future we may want to rethink our Menu partial to make this unnecessary in PHP. * The portal-first class is redundant in the modern Vector as we can use the first-child selector. Previously we introduced a class to service the legacy skin where this rule doesn't apply as #p-logo is the first child. However, the legacy skin can do this using a special next sibling selector instead. Bug: T268157 Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2020-09-04 19:18:57 +00:00
'data-portlets': {
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut,
'data-namespaces': namespaceTabsData,
'data-views': pageActionsData,
'data-variants': variantsData
},
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
'data-search-box': searchBoxData,
Simplify menu code SkinMustache in core provides most of what is required for Vector to generate its menus. In the interest of having a canonical source of truth for menus across all skins, Vector should use this data. To ensure the HTML generated is (mostly) the same after this patch to prior, a few modifications are necessary: * The data from core is decorated so that Vector can continue having its own custom class names on menus. This is done using the decoratePortletClass method. * There is no support for a menu having a header representing the selected menu item, as is currently the case with variants. This is achieved via an extension to getPortletData. It's assumed that later when variants are merged with languages, this can be removed. * Menus are agnostic to how they are displayed, so we must continue to add the is-dropdown template variable to drop down menus. In future we may want to rethink our Menu partial to make this unnecessary in PHP. * The portal-first class is redundant in the modern Vector as we can use the first-child selector. Previously we introduced a class to service the legacy skin where this rule doesn't apply as #p-logo is the first child. However, the legacy skin can do this using a special next sibling selector instead. Bug: T268157 Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2020-09-04 19:18:57 +00:00
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
Refactor: All messages should be listed from skin.json This allows us easily to identify in templates what messages are used and where, as well as allow us an easy way to tell when messages are no longer being used. Change-Id: I610224d551ebea54ae32e9e79901befe80cfd5ce
2020-08-05 20:27:38 +00:00
'msg-navigation-heading': 'Navigation menu',
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
},
loggedInWithMoreActions: {
Simplify menu code SkinMustache in core provides most of what is required for Vector to generate its menus. In the interest of having a canonical source of truth for menus across all skins, Vector should use this data. To ensure the HTML generated is (mostly) the same after this patch to prior, a few modifications are necessary: * The data from core is decorated so that Vector can continue having its own custom class names on menus. This is done using the decoratePortletClass method. * There is no support for a menu having a header representing the selected menu item, as is currently the case with variants. This is achieved via an extension to getPortletData. It's assumed that later when variants are merged with languages, this can be removed. * Menus are agnostic to how they are displayed, so we must continue to add the is-dropdown template variable to drop down menus. In future we may want to rethink our Menu partial to make this unnecessary in PHP. * The portal-first class is redundant in the modern Vector as we can use the first-child selector. Previously we introduced a class to service the legacy skin where this rule doesn't apply as #p-logo is the first child. However, the legacy skin can do this using a special next sibling selector instead. Bug: T268157 Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2020-09-04 19:18:57 +00:00
'data-portlets': {
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
'data-namespaces': namespaceTabsData,
'data-views': pageActionsData,
'data-actions': moreData
},
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
'data-search-box': searchBoxData,
Simplify menu code SkinMustache in core provides most of what is required for Vector to generate its menus. In the interest of having a canonical source of truth for menus across all skins, Vector should use this data. To ensure the HTML generated is (mostly) the same after this patch to prior, a few modifications are necessary: * The data from core is decorated so that Vector can continue having its own custom class names on menus. This is done using the decoratePortletClass method. * There is no support for a menu having a header representing the selected menu item, as is currently the case with variants. This is achieved via an extension to getPortletData. It's assumed that later when variants are merged with languages, this can be removed. * Menus are agnostic to how they are displayed, so we must continue to add the is-dropdown template variable to drop down menus. In future we may want to rethink our Menu partial to make this unnecessary in PHP. * The portal-first class is redundant in the modern Vector as we can use the first-child selector. Previously we introduced a class to service the legacy skin where this rule doesn't apply as #p-logo is the first child. However, the legacy skin can do this using a special next sibling selector instead. Bug: T268157 Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2020-09-04 19:18:57 +00:00
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
Refactor: All messages should be listed from skin.json This allows us easily to identify in templates what messages are used and where, as well as allow us an easy way to tell when messages are no longer being used. Change-Id: I610224d551ebea54ae32e9e79901befe80cfd5ce
2020-08-05 20:27:38 +00:00
'msg-navigation-heading': 'Navigation menu',
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
}
};
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Logo: logoTemplate,
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
SearchBox: searchBoxTemplate,
Separate languages portal from other portals in sidebar In preparation for moving the languages out of the sidebar (T256023) and to facilitate experimentation in the Universal Language Selector extension, we should separate the data from the languages portal from other portals. Note the languages portal has traditionally appeared at the bottom of the sidebar, so this can be done safely in the same way we introduced data-portals-first Change-Id: I4be06278ec256cc55aee36c2946339fb49d21b46
2020-06-22 18:01:10 +00:00
'legacy/Sidebar': sidebarLegacyTemplate,
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
Sidebar: sidebarTemplate,
VectorMenu: vectorMenuTemplate,
Refactor: Generalise personal menu the PersonalMenu should be generalised. In future we will use it as the template for all menus Bug: T249372 Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
2020-05-05 23:26:35 +00:00
Menu: menuTemplate,
Storybook should include UserLinks Merge UserMenu into UserLinks for legacy and modern Add a story for the UserLinks menu Fixes: rendering of Skin (legacy) personal tools (the user icon no longer overlaps) Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
2021-05-26 23:23:53 +00:00
'legacy/UserLinks': userLinksTemplateLegacy,
Use template partials rather than HTML strings CHANGES to index.mustache: Changes can be understood by looking at the diff of the file stories/skin.stories.js The additional changes in stories folder export the data passed to those templates. A new file is used as exporting any variable in a file suffixed stories.js will be assumed to be a story entry. The changes to index.mustache are as follows: * html-footer is replaced with data-footer and Footer component is rendered via template partial * html-navigation is replaced with data-navigation and Navigation component is rendered via template partial CHANGES to Navigation.mustache: Changes are best explained by looking at the diff to stories/navigation.stories.js and navigation.stories.data.js * html-personal-menu is replaced with data-personal-menu Bug: T245456 Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-02-17 19:49:43 +00:00
Footer: footerTemplate
[refactor] SearchBox uses Icon template partial Change-Id: I8ff49b85dd2151618e48251e0fc38152a50ca381
2021-09-03 19:00:45 +00:00
}, FOOTER_TEMPLATE_PARTIALS, SEARCH_TEMPLATE_PARTIALS );
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
Model indicators as their own template rather than a block of HTML This reverts commit be3843e2a323f543ec0f190d1e0afa6d5cc04b03 and makes a few corrections. Bug: T251212 Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f
2020-06-03 19:41:59 +00:00
/**
* @type {Indicator[]}
*/
const DATA_INDICATORS = [ {
id: 'mw-indicator-good-star',
class: 'mw-indicator',
html: `<a href="/wiki/Wikipedia:Good_articles"
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
title="This is a good article. Follow the link for more information.">
<img alt="This is a good article. Follow the link for more information."
src="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/19px-Symbol_support_vote.svg.png" decoding="async" width="19" height="20"
srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/29px-Symbol_support_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/39px-Symbol_support_vote.svg.png 2x" data-file-width="180" data-file-height="185" />
Model indicators as their own template rather than a block of HTML This reverts commit be3843e2a323f543ec0f190d1e0afa6d5cc04b03 and makes a few corrections. Bug: T251212 Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f
2020-06-03 19:41:59 +00:00
</a>`
},
{
id: 'mw-indicator-pp-autoreview',
class: 'mw-indicator',
html: `<a href="/wiki/Wikipedia:Protection_policy#pending"
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
title="All edits by unregistered and new users are subject to review prior to becoming visible to unregistered users">
<img alt="Page protected with pending changes" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/20px-Pending-protection-shackle.svg.png"
decoding="async" width="20" height="20" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/30px-Pending-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/40px-Pending-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" />
Model indicators as their own template rather than a block of HTML This reverts commit be3843e2a323f543ec0f190d1e0afa6d5cc04b03 and makes a few corrections. Bug: T251212 Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f
2020-06-03 19:41:59 +00:00
</a>`
} ];
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
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const LEGACY_TEMPLATE_DATA = {
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
'html-title': 'Vector 2019',
Vector uses html-title-heading The H1 is available with the correct attributes in core now, so we can use that instead of our own markup. This also means Vector will benefit from updates to the heading in core such as main page special handling. Bug: T297728 Change-Id: I4d10370678fad6455d73994bf340891760543b71
2021-12-14 17:40:37 +00:00
'html-title-heading': '<h1 id="firstHeading" class="firstHeading">Vector 2019</h1>',
Refactor: Renaming mustache variable `page-isarticle` to `is-article` Modifies this variable name to use proper hyphen-case and prioritizes the type of variable rather than it's source. This prioritization makes sense in Mustache templates because the variable is a boolean and is used exclusively in if statements, e.g. {{#is-article}} ... {{/is-article}} Change-Id: I72e9baf0a979d922b8217aabe8cf0c40699f891b
2021-05-01 09:09:02 +00:00
'is-article': true,
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
'msg-tagline': 'From Wikipedia, the free encyclopedia',
Refactor: html-userlangattributes -> html-user-language-attributes This matches the name in core and is needed in preparation for switching to SkinMustache Additional change: The JS variable htmluserlangattributes is renamed "htmlUserLanguageAttributes" Change-Id: I306ebb615f720852fb35c25ac240d6b802d05ecc
2020-07-14 21:40:28 +00:00
'html-user-language-attributes': htmlUserLanguageAttributes,
Cleanup: Standardise msg keys Keys prefixed with msg- should relate to i18n keys. Fix the existing template variables where that's not the case. Change-Id: I33587a09a9803a3667eaeea95ce3e1753439f413
2020-06-01 19:28:51 +00:00
'msg-vector-jumptonavigation': 'Jump to navigation',
'msg-vector-jumptosearch': 'Jump to search',
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
// site specific
Use template partials rather than HTML strings CHANGES to index.mustache: Changes can be understood by looking at the diff of the file stories/skin.stories.js The additional changes in stories folder export the data passed to those templates. A new file is used as exporting any variable in a file suffixed stories.js will be assumed to be a story entry. The changes to index.mustache are as follows: * html-footer is replaced with data-footer and Footer component is rendered via template partial * html-navigation is replaced with data-navigation and Navigation component is rendered via template partial CHANGES to Navigation.mustache: Changes are best explained by looking at the diff to stories/navigation.stories.js and navigation.stories.data.js * html-personal-menu is replaced with data-personal-menu Bug: T245456 Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-02-17 19:49:43 +00:00
'data-footer': FOOTER_TEMPLATE_DATA,
Rename template variables to mirror SkinMustache The renames made in this patch mirror the upstream change in I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting the SkinMustache class. Renames: * 'data-indicators => 'array-indicators' * 'html-bodycontent' => 'html-body-content' * 'html-undelete' => 'html-undelete-link' * 'html-sitenotice' => 'html-site-notice' * 'html-catlinks' => 'html-categories' * 'html-dataaftercontent' => 'html-after-content' * 'html-userlangattributes' => 'html-user-language-attributes' Adjustments * 'html-debuglog' is moved into html-printtail for consistency with SkinMustache in core * html-printfooter is now a part of html-bodycontent for consistency with SkinMustache in core Note: the activity of removing html-printtail and html-headelement from the templates will be done when we adopt SkinMustache. Bug: T257630 Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
2020-07-09 16:32:45 +00:00
'html-site-notice': placeholder( 'a site notice or central notice banner may go here', 70 ),
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
// article dependent
Rename template variables to mirror SkinMustache The renames made in this patch mirror the upstream change in I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting the SkinMustache class. Renames: * 'data-indicators => 'array-indicators' * 'html-bodycontent' => 'html-body-content' * 'html-undelete' => 'html-undelete-link' * 'html-sitenotice' => 'html-site-notice' * 'html-catlinks' => 'html-categories' * 'html-dataaftercontent' => 'html-after-content' * 'html-userlangattributes' => 'html-user-language-attributes' Adjustments * 'html-debuglog' is moved into html-printtail for consistency with SkinMustache in core * html-printfooter is now a part of html-bodycontent for consistency with SkinMustache in core Note: the activity of removing html-printtail and html-headelement from the templates will be done when we adopt SkinMustache. Bug: T257630 Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
2020-07-09 16:32:45 +00:00
'html-body-content': `${placeholder( 'Article content goes here' )}
<div class="printfooter">
Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’
</div>`,
'html-categories': placeholder( 'Category links component from mediawiki core', 50 ),
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
// extension dependent..
Rename template variables to mirror SkinMustache The renames made in this patch mirror the upstream change in I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting the SkinMustache class. Renames: * 'data-indicators => 'array-indicators' * 'html-bodycontent' => 'html-body-content' * 'html-undelete' => 'html-undelete-link' * 'html-sitenotice' => 'html-site-notice' * 'html-catlinks' => 'html-categories' * 'html-dataaftercontent' => 'html-after-content' * 'html-userlangattributes' => 'html-user-language-attributes' Adjustments * 'html-debuglog' is moved into html-printtail for consistency with SkinMustache in core * html-printfooter is now a part of html-bodycontent for consistency with SkinMustache in core Note: the activity of removing html-printtail and html-headelement from the templates will be done when we adopt SkinMustache. Bug: T257630 Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
2020-07-09 16:32:45 +00:00
'html-after-content': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
'array-indicators': DATA_INDICATORS,
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
'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
};
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions This commit is singularly focused on adding a link to the sidebar for Vector, logged-in users. It does the bare minimum to fulfill the requirements of T243281. Additionally, it will help to answer the question "Do we need to use abstractions (other than maybe different templates) to separate Legacy Vector from Vector" by intentionally leaving out any abstractions in order to make it easier to compare with a follow-up patch (Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions. It is a good thing to question whether or not we need addtional abstractions in VectorTemplate and if they will help us as unnecessary abstractions can have the opposite effect and just lead to further frustrations down the road. Therefore, I urge you, the reviewer, to let me know your thoughts! If abstractions are viewed as not making our lives any easier, the follow-up patches may be completely discarded and that's totally okay with me. :) I think it's a good think to talk about now though. Important changes: * The VectorTemplate constructor was changed to allow injecting the config, templateParser, and isLegacy boolean (only the config was allowed before this commit). According to MediaWiki's Stable Interface Policy, "Constructor signatures are generally considered unstable unless explicitly declared stable for calling" [3]. Given that VecorTemplate's constructor is not marked as stable, it is justified to do this without warning according to the policy. * Due to the above, the 'setTemplate' method is no longer needed and was marked as deprecated. * VectorTemplateTest was made to adapt to the new VectorTemplate constructor. Additionally, it now extends from MediaWikiIntegrationTestCase which my intelliphense server can pick up. I *think* MediaWikiTestCase is just an alias to MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed to MediaWikiIntegrationTestCase in [2], but I'm willing to change it back if there is pushback to this. Open questions: * What are VectorTemplate's responsibilities? To me, it acts right now as a controller (because it echos the full HTML string from the template), a model (because SkinTemplate::prepareQuickTemplate sets data on it which it later retrieves through `$this->get()`), a presenter (because it adds data tailored for a web-centric view), and a view (because it renders HTML strings instead of letting the view/template be solely responsible for that). Arguably, some business logic might be mixed in there as well (because it checks to see if a User is logged in/has necessary permissions to show x which my changes here add to). This might not be a problem if we keep VectorTemplate relatively small, but will it remain this way as we progress further in Desktop Improvements? * How do we write tests for VectorTemplate without exposing unnecessary public methods? For example, if I want to test the `getSkinData()` method to see what state will be sent to the template, how should I do this? One option might be to use `TestingAccessWrapper` to expose these private methods which is what `VectorTemplateTest::testbuildViewsProps()` does. Another option is to accept this method as public. Is there a better way? Keep in mind that even with access to this method, there might be many things to mock. [1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64 [2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76 [3] https://www.mediawiki.org/wiki/Stable_interface_policy Bug: T243281 Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const MODERN_TEMPLATE_DATA = {
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions This commit is singularly focused on adding a link to the sidebar for Vector, logged-in users. It does the bare minimum to fulfill the requirements of T243281. Additionally, it will help to answer the question "Do we need to use abstractions (other than maybe different templates) to separate Legacy Vector from Vector" by intentionally leaving out any abstractions in order to make it easier to compare with a follow-up patch (Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions. It is a good thing to question whether or not we need addtional abstractions in VectorTemplate and if they will help us as unnecessary abstractions can have the opposite effect and just lead to further frustrations down the road. Therefore, I urge you, the reviewer, to let me know your thoughts! If abstractions are viewed as not making our lives any easier, the follow-up patches may be completely discarded and that's totally okay with me. :) I think it's a good think to talk about now though. Important changes: * The VectorTemplate constructor was changed to allow injecting the config, templateParser, and isLegacy boolean (only the config was allowed before this commit). According to MediaWiki's Stable Interface Policy, "Constructor signatures are generally considered unstable unless explicitly declared stable for calling" [3]. Given that VecorTemplate's constructor is not marked as stable, it is justified to do this without warning according to the policy. * Due to the above, the 'setTemplate' method is no longer needed and was marked as deprecated. * VectorTemplateTest was made to adapt to the new VectorTemplate constructor. Additionally, it now extends from MediaWikiIntegrationTestCase which my intelliphense server can pick up. I *think* MediaWikiTestCase is just an alias to MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed to MediaWikiIntegrationTestCase in [2], but I'm willing to change it back if there is pushback to this. Open questions: * What are VectorTemplate's responsibilities? To me, it acts right now as a controller (because it echos the full HTML string from the template), a model (because SkinTemplate::prepareQuickTemplate sets data on it which it later retrieves through `$this->get()`), a presenter (because it adds data tailored for a web-centric view), and a view (because it renders HTML strings instead of letting the view/template be solely responsible for that). Arguably, some business logic might be mixed in there as well (because it checks to see if a User is logged in/has necessary permissions to show x which my changes here add to). This might not be a problem if we keep VectorTemplate relatively small, but will it remain this way as we progress further in Desktop Improvements? * How do we write tests for VectorTemplate without exposing unnecessary public methods? For example, if I want to test the `getSkinData()` method to see what state will be sent to the template, how should I do this? One option might be to use `TestingAccessWrapper` to expose these private methods which is what `VectorTemplateTest::testbuildViewsProps()` does. Another option is to accept this method as public. Is there a better way? Keep in mind that even with access to this method, there might be many things to mock. [1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64 [2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76 [3] https://www.mediawiki.org/wiki/Stable_interface_policy Bug: T243281 Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
'html-title': 'Vector 2020',
'page-isarticle': true,
'msg-tagline': 'From Wikipedia, the free encyclopedia',
Refactor: html-userlangattributes -> html-user-language-attributes This matches the name in core and is needed in preparation for switching to SkinMustache Additional change: The JS variable htmluserlangattributes is renamed "htmlUserLanguageAttributes" Change-Id: I306ebb615f720852fb35c25ac240d6b802d05ecc
2020-07-14 21:40:28 +00:00
'html-user-language-attributes': htmlUserLanguageAttributes,
Cleanup: Standardise msg keys Keys prefixed with msg- should relate to i18n keys. Fix the existing template variables where that's not the case. Change-Id: I33587a09a9803a3667eaeea95ce3e1753439f413
2020-06-01 19:28:51 +00:00
'msg-vector-jumptonavigation': 'Jump to navigation',
'msg-vector-jumptosearch': 'Jump to search',
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions This commit is singularly focused on adding a link to the sidebar for Vector, logged-in users. It does the bare minimum to fulfill the requirements of T243281. Additionally, it will help to answer the question "Do we need to use abstractions (other than maybe different templates) to separate Legacy Vector from Vector" by intentionally leaving out any abstractions in order to make it easier to compare with a follow-up patch (Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions. It is a good thing to question whether or not we need addtional abstractions in VectorTemplate and if they will help us as unnecessary abstractions can have the opposite effect and just lead to further frustrations down the road. Therefore, I urge you, the reviewer, to let me know your thoughts! If abstractions are viewed as not making our lives any easier, the follow-up patches may be completely discarded and that's totally okay with me. :) I think it's a good think to talk about now though. Important changes: * The VectorTemplate constructor was changed to allow injecting the config, templateParser, and isLegacy boolean (only the config was allowed before this commit). According to MediaWiki's Stable Interface Policy, "Constructor signatures are generally considered unstable unless explicitly declared stable for calling" [3]. Given that VecorTemplate's constructor is not marked as stable, it is justified to do this without warning according to the policy. * Due to the above, the 'setTemplate' method is no longer needed and was marked as deprecated. * VectorTemplateTest was made to adapt to the new VectorTemplate constructor. Additionally, it now extends from MediaWikiIntegrationTestCase which my intelliphense server can pick up. I *think* MediaWikiTestCase is just an alias to MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed to MediaWikiIntegrationTestCase in [2], but I'm willing to change it back if there is pushback to this. Open questions: * What are VectorTemplate's responsibilities? To me, it acts right now as a controller (because it echos the full HTML string from the template), a model (because SkinTemplate::prepareQuickTemplate sets data on it which it later retrieves through `$this->get()`), a presenter (because it adds data tailored for a web-centric view), and a view (because it renders HTML strings instead of letting the view/template be solely responsible for that). Arguably, some business logic might be mixed in there as well (because it checks to see if a User is logged in/has necessary permissions to show x which my changes here add to). This might not be a problem if we keep VectorTemplate relatively small, but will it remain this way as we progress further in Desktop Improvements? * How do we write tests for VectorTemplate without exposing unnecessary public methods? For example, if I want to test the `getSkinData()` method to see what state will be sent to the template, how should I do this? One option might be to use `TestingAccessWrapper` to expose these private methods which is what `VectorTemplateTest::testbuildViewsProps()` does. Another option is to accept this method as public. Is there a better way? Keep in mind that even with access to this method, there might be many things to mock. [1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64 [2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76 [3] https://www.mediawiki.org/wiki/Stable_interface_policy Bug: T243281 Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
// site specific
'data-footer': FOOTER_TEMPLATE_DATA,
Rename template variables to mirror SkinMustache The renames made in this patch mirror the upstream change in I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting the SkinMustache class. Renames: * 'data-indicators => 'array-indicators' * 'html-bodycontent' => 'html-body-content' * 'html-undelete' => 'html-undelete-link' * 'html-sitenotice' => 'html-site-notice' * 'html-catlinks' => 'html-categories' * 'html-dataaftercontent' => 'html-after-content' * 'html-userlangattributes' => 'html-user-language-attributes' Adjustments * 'html-debuglog' is moved into html-printtail for consistency with SkinMustache in core * html-printfooter is now a part of html-bodycontent for consistency with SkinMustache in core Note: the activity of removing html-printtail and html-headelement from the templates will be done when we adopt SkinMustache. Bug: T257630 Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
2020-07-09 16:32:45 +00:00
'html-site-notice': placeholder( 'a site notice or central notice banner may go here', 70 ),
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions This commit is singularly focused on adding a link to the sidebar for Vector, logged-in users. It does the bare minimum to fulfill the requirements of T243281. Additionally, it will help to answer the question "Do we need to use abstractions (other than maybe different templates) to separate Legacy Vector from Vector" by intentionally leaving out any abstractions in order to make it easier to compare with a follow-up patch (Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions. It is a good thing to question whether or not we need addtional abstractions in VectorTemplate and if they will help us as unnecessary abstractions can have the opposite effect and just lead to further frustrations down the road. Therefore, I urge you, the reviewer, to let me know your thoughts! If abstractions are viewed as not making our lives any easier, the follow-up patches may be completely discarded and that's totally okay with me. :) I think it's a good think to talk about now though. Important changes: * The VectorTemplate constructor was changed to allow injecting the config, templateParser, and isLegacy boolean (only the config was allowed before this commit). According to MediaWiki's Stable Interface Policy, "Constructor signatures are generally considered unstable unless explicitly declared stable for calling" [3]. Given that VecorTemplate's constructor is not marked as stable, it is justified to do this without warning according to the policy. * Due to the above, the 'setTemplate' method is no longer needed and was marked as deprecated. * VectorTemplateTest was made to adapt to the new VectorTemplate constructor. Additionally, it now extends from MediaWikiIntegrationTestCase which my intelliphense server can pick up. I *think* MediaWikiTestCase is just an alias to MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed to MediaWikiIntegrationTestCase in [2], but I'm willing to change it back if there is pushback to this. Open questions: * What are VectorTemplate's responsibilities? To me, it acts right now as a controller (because it echos the full HTML string from the template), a model (because SkinTemplate::prepareQuickTemplate sets data on it which it later retrieves through `$this->get()`), a presenter (because it adds data tailored for a web-centric view), and a view (because it renders HTML strings instead of letting the view/template be solely responsible for that). Arguably, some business logic might be mixed in there as well (because it checks to see if a User is logged in/has necessary permissions to show x which my changes here add to). This might not be a problem if we keep VectorTemplate relatively small, but will it remain this way as we progress further in Desktop Improvements? * How do we write tests for VectorTemplate without exposing unnecessary public methods? For example, if I want to test the `getSkinData()` method to see what state will be sent to the template, how should I do this? One option might be to use `TestingAccessWrapper` to expose these private methods which is what `VectorTemplateTest::testbuildViewsProps()` does. Another option is to accept this method as public. Is there a better way? Keep in mind that even with access to this method, there might be many things to mock. [1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64 [2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76 [3] https://www.mediawiki.org/wiki/Stable_interface_policy Bug: T243281 Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
// article dependent
Rename template variables to mirror SkinMustache The renames made in this patch mirror the upstream change in I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting the SkinMustache class. Renames: * 'data-indicators => 'array-indicators' * 'html-bodycontent' => 'html-body-content' * 'html-undelete' => 'html-undelete-link' * 'html-sitenotice' => 'html-site-notice' * 'html-catlinks' => 'html-categories' * 'html-dataaftercontent' => 'html-after-content' * 'html-userlangattributes' => 'html-user-language-attributes' Adjustments * 'html-debuglog' is moved into html-printtail for consistency with SkinMustache in core * html-printfooter is now a part of html-bodycontent for consistency with SkinMustache in core Note: the activity of removing html-printtail and html-headelement from the templates will be done when we adopt SkinMustache. Bug: T257630 Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
2020-07-09 16:32:45 +00:00
'array-indicators': DATA_INDICATORS,
'html-body-content': `${placeholder( 'Article content goes here' )}
<div class="printfooter">
Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’
</div>`,
'html-categories': placeholder( 'Category links component from mediawiki core', 50 )
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
};
Reference in a new issue Copy permalink