mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 11:17:35 +00:00
Merge "Refactor: Generalise personal menu"
This commit is contained in:
commit
688ea75bfa
|
@ -463,7 +463,7 @@ class VectorTemplate extends BaseTemplate {
|
|||
$extraClasses = [
|
||||
self::MENU_TYPE_DROPDOWN => 'vectorMenu',
|
||||
self::MENU_TYPE_TABS => 'vectorTabs',
|
||||
self::MENU_TYPE_DEFAULT => '',
|
||||
self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
|
||||
];
|
||||
|
||||
$props = [
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
string html-navigation-heading heading for entire navigation that is usually hidden to screen
|
||||
readers
|
||||
LogoOptions data-logos
|
||||
MenuDefinition data-personal-menu See PersonalMenu.mustache for documentation.
|
||||
MenuDefinition data-personal-menu
|
||||
object data-namespace-tabs. See VectorTabs.mustache for documentation.
|
||||
object data-variants. See VectorMenu.mustache for documentation.
|
||||
object data-page-actions. See VectorTabs.mustache for documentation.
|
||||
|
@ -77,7 +77,7 @@
|
|||
<div id="mw-navigation">
|
||||
<h2>{{{html-navigation-heading}}}</h2>
|
||||
<div id="mw-head">
|
||||
{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
|
||||
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
|
||||
<div id="left-navigation">
|
||||
{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
|
||||
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
string html-dataAfterContent
|
||||
string html-navigation-heading heading for entire navigation that is
|
||||
usually hidden to screen readers
|
||||
MenuDefinition data-personal-menu See PersonalMenu.mustache for documentation.
|
||||
MenuDefinition data-personal-menu
|
||||
object data-namespace-tabs. See VectorTabs.mustache for documentation.
|
||||
object data-variants. See VectorMenu.mustache for documentation.
|
||||
object data-page-actions. See VectorTabs.mustache for documentation.
|
||||
|
@ -70,7 +70,7 @@
|
|||
<div id="mw-navigation">
|
||||
<h2>{{{html-navigation-heading}}}</h2>
|
||||
<div id="mw-head">
|
||||
{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
|
||||
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
|
||||
<div id="left-navigation">
|
||||
{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
|
||||
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/* Personal */
|
||||
.vectorMenu-default,
|
||||
/* FIXME: Remove p-personal selector when cache has cleared. */
|
||||
#p-personal {
|
||||
position: absolute;
|
||||
top: @top-personal-tools;
|
|
@ -6,7 +6,7 @@
|
|||
@import 'common.less';
|
||||
@import 'layout.less';
|
||||
@import 'Logo.less';
|
||||
@import 'PersonalMenu.less';
|
||||
@import 'Menu.less';
|
||||
@import 'SearchBox.less';
|
||||
@import 'VectorTabs.less';
|
||||
@import 'watchstar.less';
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
@media screen {
|
||||
@import 'common.less';
|
||||
@import 'legacy/layout.less';
|
||||
@import 'PersonalMenu.less';
|
||||
@import 'Menu.less';
|
||||
@import 'SearchBox.less';
|
||||
@import 'VectorTabs.less';
|
||||
@import 'watchstar.less';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import personalMenuTemplate from '!!raw-loader!../includes/templates/PersonalMenu.mustache';
|
||||
import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
|
||||
import { htmluserlangattributes } from './utils';
|
||||
|
||||
/**
|
||||
|
@ -6,7 +6,7 @@ import { htmluserlangattributes } from './utils';
|
|||
*/
|
||||
const loggedOut = {
|
||||
id: 'p-personal',
|
||||
class: '',
|
||||
class: 'vectorMenu-default',
|
||||
'label-id': 'p-personal-label',
|
||||
label: 'Personal tools',
|
||||
'html-userlangattributes': htmluserlangattributes,
|
||||
|
@ -18,6 +18,7 @@ const loggedOut = {
|
|||
*/
|
||||
const loggedInWithEcho = {
|
||||
id: 'p-personal',
|
||||
class: 'vectorMenu-default',
|
||||
'label-id': 'p-personal-label',
|
||||
label: 'Personal tools',
|
||||
'html-userlangattributes': htmluserlangattributes,
|
||||
|
@ -26,11 +27,26 @@ const loggedInWithEcho = {
|
|||
|
||||
const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>';
|
||||
|
||||
/**
|
||||
* @type {MenuDefinition}
|
||||
*/
|
||||
const defaultMenu = {
|
||||
id: 'p-generic',
|
||||
class: 'vectorMenu-default',
|
||||
'label-id': 'p-generic-label',
|
||||
label: 'Menu label',
|
||||
'html-userlangattributes': htmluserlangattributes,
|
||||
'html-items': `<li><a href='#'>Item 1</a></li>
|
||||
<li><a href='#'>Item 2</a></li>
|
||||
<li><a href='#'>Item 3</a></li>`
|
||||
};
|
||||
|
||||
/**
|
||||
* @type {MenuDefinition}
|
||||
*/
|
||||
const loggedInWithULS = {
|
||||
id: 'p-personal',
|
||||
class: 'vectorMenu-default',
|
||||
'label-id': 'p-personal-label',
|
||||
label: 'Personal tools',
|
||||
'html-userlangattributes': htmluserlangattributes,
|
||||
|
@ -42,8 +58,9 @@ const loggedInWithULS = {
|
|||
*/
|
||||
const PERSONAL_MENU_TEMPLATE_DATA = {
|
||||
loggedOut,
|
||||
defaultMenu,
|
||||
loggedInWithEcho,
|
||||
loggedInWithULS
|
||||
};
|
||||
|
||||
export { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate };
|
||||
export { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate };
|
22
stories/Menu.stories.js
Normal file
22
stories/Menu.stories.js
Normal file
|
@ -0,0 +1,22 @@
|
|||
import mustache from 'mustache';
|
||||
import { menuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './Menu.stories.data';
|
||||
import '../resources/skins.vector.styles/Menu.less';
|
||||
import '../.storybook/common.less';
|
||||
|
||||
export default {
|
||||
title: 'Menu'
|
||||
};
|
||||
|
||||
export const menu = () => mustache.render(
|
||||
menuTemplate,
|
||||
PERSONAL_MENU_TEMPLATE_DATA.defaultMenu
|
||||
);
|
||||
|
||||
export const loggedOut = () => mustache.render( menuTemplate,
|
||||
PERSONAL_MENU_TEMPLATE_DATA.loggedOut );
|
||||
|
||||
export const loggedInWithEcho = () => mustache.render( menuTemplate,
|
||||
PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho );
|
||||
|
||||
export const loggedInWithULS = () => mustache.render( menuTemplate,
|
||||
PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS );
|
|
@ -1,17 +0,0 @@
|
|||
import mustache from 'mustache';
|
||||
import { personalMenuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './PersonalMenu.stories.data';
|
||||
import '../resources/skins.vector.styles/PersonalMenu.less';
|
||||
import '../.storybook/common.less';
|
||||
|
||||
export default {
|
||||
title: 'Personal Menu'
|
||||
};
|
||||
|
||||
export const loggedOut = () => mustache.render( personalMenuTemplate,
|
||||
PERSONAL_MENU_TEMPLATE_DATA.loggedOut );
|
||||
|
||||
export const loggedInWithEcho = () => mustache.render( personalMenuTemplate,
|
||||
PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho );
|
||||
|
||||
export const loggedInWithULS = () => mustache.render( personalMenuTemplate,
|
||||
PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS );
|
|
@ -4,7 +4,7 @@ import '../.storybook/common.less';
|
|||
import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
|
||||
|
||||
export default {
|
||||
title: 'Menu'
|
||||
title: 'MenuDropdown'
|
||||
};
|
||||
|
||||
export const more = () => mustache.render( vectorMenuTemplate, moreData );
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { htmluserlangattributes } from './utils';
|
||||
import { placeholder } from './utils';
|
||||
|
||||
import { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate } from './PersonalMenu.stories.data';
|
||||
import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
|
||||
import { pageActionsData, namespaceTabsData, vectorTabsTemplate } from './VectorTabs.stories.data';
|
||||
import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
|
||||
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
|
||||
|
@ -48,7 +48,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
|
|||
Sidebar: sidebarTemplate,
|
||||
VectorTabs: vectorTabsTemplate,
|
||||
VectorMenu: vectorMenuTemplate,
|
||||
PersonalMenu: personalMenuTemplate,
|
||||
Menu: menuTemplate,
|
||||
Footer: footerTemplate
|
||||
} );
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@
|
|||
* @prop {string} html-items
|
||||
* @prop {string} [class] of menu
|
||||
* @prop {string} [html-userlangattributes]
|
||||
* @prop {boolean} [is-dropdown]
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
|
@ -171,7 +171,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
|
|||
$this->assertSame( $actions['class'],
|
||||
'emptyPortlet vectorMenu' );
|
||||
$this->assertSame( $props['data-personal-menu']['class'],
|
||||
'emptyPortlet' );
|
||||
'emptyPortlet vectorMenu-default' );
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue