wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-12 09:21:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Storybook should include UserLinks"

Browse source
This commit is contained in:
jenkins-bot 2021-06-01 16:19:02 +00:00 committed by Gerrit Code Review
parent b4f91d8e5c 6300923601
commit ca148c71f8
17 changed files with 215 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
includes/templates/legacy/UserLinks.mustache Normal file
View file

@ -0,0 +1 @@
{{#data-personal}}{{>Menu}}{{/data-personal}}

2
includes/templates/skin-legacy.mustache
View file

@ -53,7 +53,7 @@
<h2>{{msg-navigation-heading}}</h2> <h2>{{msg-navigation-heading}}</h2>
<div id="mw-head"> <div id="mw-head">
{{#data-portlets}} {{#data-portlets}}
{{#data-personal}}{{>Menu}}{{/data-personal}} {{>legacy/UserLinks}}
<div id="left-navigation"> <div id="left-navigation">
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}} {{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
{{#data-variants}}{{>Menu}}{{/data-variants}} {{#data-variants}}{{>Menu}}{{/data-variants}}

2
resources/common/common.less
View file

@ -22,7 +22,7 @@
@import './components/SearchBox.less'; @import './components/SearchBox.less';
@import './components/SidebarLogo.less'; @import './components/SidebarLogo.less';
@import './components/Footer.less'; @import './components/Footer.less';
@import './components/UserMenu.less'; @import './components/UserLinks.less';
} }
@media print { @media print {

2
resources/common/components/UserMenu.less → resources/common/components/UserLinks.less
View file

@ -1,4 +1,4 @@
// Common styles for the UserMenu component. // Common styles for the UserLinks component.
@import '../variables.less'; @import '../variables.less';
@import 'mediawiki.mixins.less'; @import 'mediawiki.mixins.less';

28
resources/skins.vector.styles.legacy/components/UserLinks.less Normal file
View file

@ -0,0 +1,28 @@
@import '../../common/variables.less';
/* Personal Menu */
.vector-user-menu-legacy {
li {
font-size: @font-size-nav-personal;
}
/* Icon for registered user names & anonymous message */
#pt-anonuserpage,
#pt-userpage a {
background-position: @background-position-nav-personal-icon;
padding-top: 0.5em;
}
#pt-userpage {
padding-top: 0;
a {
display: inline-block;
}
}
/* Show anonymous "Not logged in" text in gray */
#pt-anonuserpage {
color: #54595d;
}
}

37
resources/skins.vector.styles.legacy/components/UserMenu.less
View file

@ -1,37 +0,0 @@
@import '../../common/variables.less';
// Legacy overrides for the UserMenu
/* Personal Menu */
.vector-user-menu-legacy li,
/* FIXME: the following selector is for cached HTML. It can be removed when
I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
#p-personal li {
font-size: @font-size-nav-personal;
}
/* Icon for registered user names & anonymous message */
/* FIXME: the following selector is for cached HTML. It can be removed when
I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production */
#pt-anonuserpage,
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a {
background-position: @background-position-nav-personal-icon;
padding-top: 0.5em;
}
.vector-user-menu-legacy #pt-userpage {
padding-top: 0;
a {
display: inline-block;
}
}
/* Show anonymous "Not logged in" text in gray */
/* FIXME: the following selector is for cached HTML. It can be removed when
I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
#pt-anonuserpage,
.vector-user-menu-legacy #pt-anonuserpage {
color: #54595d;
}

2
resources/skins.vector.styles.legacy/skin-legacy.less
View file

@ -10,5 +10,5 @@
// Legacy specific components // Legacy specific components
@import './components/MenuDropdown.less'; @import './components/MenuDropdown.less';
@import './components/Sidebar.less'; @import './components/Sidebar.less';
@import './components/UserMenu.less'; @import './components/UserLinks.less';
} }

61
resources/skins.vector.styles/components/UserLinks.less
View file

@ -1,5 +1,64 @@
// This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed. @import '../../common/variables.less';
.vector-user-links { .vector-user-links {
display: flex; display: flex;
// Overrides personal menu styles for consolidated user links.
.vector-user-menu.vector-menu-dropdown {
h3:after {
padding: 0.4em 0 0.4em 0;
content: none;
}
.vector-menu-checkbox {
&:hover + h3 {
background-color: @colorGray14;
border-radius: @border-radius-base;
}
}
.vector-menu-content {
top: 100%;
left: unset;
right: 0;
}
.vector-menu-content-list {
justify-content: flex-start;
li {
// FIXME: the following font-size rule is for cached HTML. It can be removed when
// I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production.
// stylelint-disable-next-line declaration-no-important
font-size: 100% !important;
width: 100%;
&:hover {
background-color: @colorGray14;
}
}
li#pt-logout {
border-top: 1px solid @border-color-base;
}
a,
&:hover,
&:visited {
color: #000;
text-decoration: none;
}
}
}
#p-user-page {
li {
padding-bottom: 0.5em;
a {
background-position: left center;
padding-left: 1.5em;
}
}
}
} }

64
resources/skins.vector.styles/components/UserMenu.less
View file

@ -1,64 +0,0 @@
@import '../../common/variables.less';
// Overrides personal menu styles for consolidated user links.
.vector-user-menu.vector-menu-dropdown h3:after {
padding: 0.4em 0 0.4em 0;
content: none;
}
.vector-user-menu.vector-menu-dropdown {
.vector-menu-checkbox {
&:hover + h3 {
background-color: @colorGray14;
border-radius: @border-radius-base;
}
}
.vector-menu-content {
top: 100%;
left: unset;
right: 0;
}
.vector-menu-content-list {
justify-content: flex-start;
li {
// FIXME: the following font-size rule is for cached HTML. It can be removed when
// I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production.
// stylelint-disable-next-line declaration-no-important
font-size: 100% !important;
width: 100%;
&:hover {
background-color: @colorGray14;
}
}
li#pt-logout {
border-top: 1px solid @border-color-base;
}
a,
&:hover,
&:visited {
color: #000;
text-decoration: none;
}
}
}
// Since user-page is pulled out of the personal menu for modern vector,
// apply styles for the top-level user-page menu.
// FIXME: This is currently not isolated to the UserMenu component
// as it is rendered separately outside the `.vector-user-menu` class.
#p-user-page {
li {
padding-bottom: 0.5em;
a {
background-position: left center;
padding-left: 1.5em;
}
}
}

3
resources/skins.vector.styles/skin.less
View file

@ -16,8 +16,7 @@
@import './components/Sidebar.less'; @import './components/Sidebar.less';
@import './components/LanguageButton.less'; @import './components/LanguageButton.less';
// This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed. // This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed.
@import '../skins.vector.styles.legacy/components/UserMenu.less'; @import '../skins.vector.styles.legacy/components/UserLinks.less';
@import './components/UserMenu.less';
@import './components/UserLinks.less'; @import './components/UserLinks.less';
} }

44
stories/Menu.stories.data.js
View file

@ -1,29 +1,6 @@
/**
* @external MenuDefinition
*/
import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache'; import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
import { helperMakeMenuData } from './utils'; import { helperMakeMenuData } from './utils';
/**
* @type {MenuDefinition}
*/
const loggedOut = helperMakeMenuData(
'personal',
`<li id="pt-anonuserpage">Not logged in</li><li id="pt-anontalk"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-anoncontribs"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-createaccount"><a href="/w/index.php?title=Special:CreateAccount&amp;returnto=Main+Page" title="You are encouraged to create an account and log in; however, it is not mandatory">Create account</a></li><li id="pt-login"><a href="/w/index.php?title=Special:UserLogin&amp;returnto=Main+Page" title="You're encouraged to log in; however, it's not mandatory. [⌃⌥o]" accesskey="o">Log in</a></li>`,
'vector-user-menu-legacy'
);
/**
* @type {MenuDefinition}
*/
const loggedInWithEcho = helperMakeMenuData(
'personal',
`<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`,
'vector-user-menu-legacy'
);
const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>';
/** /**
* @type {MenuDefinition} * @type {MenuDefinition}
*/ */
@ -34,23 +11,4 @@ const defaultMenu = helperMakeMenuData(
<li><a href='#'>Item 3</a></li>` <li><a href='#'>Item 3</a></li>`
); );
/** export { menuTemplate, defaultMenu };
* @type {MenuDefinition}
*/
const loggedInWithULS = helperMakeMenuData(
'personal',
`${ULS_LANGUAGE_SELECTOR}<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`,
'vector-user-menu-legacy'
);
/**
* @type {Object.<string, MenuDefinition>}
*/
const PERSONAL_MENU_TEMPLATE_DATA = {
loggedOut,
defaultMenu,
loggedInWithEcho,
loggedInWithULS
};
export { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate };

13
stories/Menu.stories.js
View file

@ -1,5 +1,5 @@
import mustache from 'mustache'; import mustache from 'mustache';
import { menuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './Menu.stories.data'; import { menuTemplate, defaultMenu } from './Menu.stories.data';
import '../resources/skins.vector.styles/Menu.less'; import '../resources/skins.vector.styles/Menu.less';
export default { export default {
@ -8,14 +8,5 @@ export default {
export const menu = () => mustache.render( export const menu = () => mustache.render(
menuTemplate, menuTemplate,
PERSONAL_MENU_TEMPLATE_DATA.defaultMenu 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 );

62
stories/UserLinks.stories.data.js Normal file
View file

@ -0,0 +1,62 @@
/**
* @external MenuDefinition
*/
import { menuTemplate } from './Menu.stories.data';
import userLinksTemplateLegacy from '!!raw-loader!../includes/templates/legacy/UserLinks.mustache';
import userLinksTemplate from '!!raw-loader!../includes/templates/UserLinks.mustache';
import { helperMakeMenuData } from './utils';
/**
* @type {MenuDefinition}
*/
const loggedOut = helperMakeMenuData(
'personal',
`<li id="pt-anonuserpage">Not logged in</li><li id="pt-anontalk"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-anoncontribs"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-createaccount"><a href="/w/index.php?title=Special:CreateAccount&amp;returnto=Main+Page" title="You are encouraged to create an account and log in; however, it is not mandatory">Create account</a></li><li id="pt-login"><a href="/w/index.php?title=Special:UserLogin&amp;returnto=Main+Page" title="You're encouraged to log in; however, it's not mandatory. [⌃⌥o]" accesskey="o">Log in</a></li>`,
'vector-user-menu-legacy'
);
const ECHO_ITEMS = `<li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li>`;
const USERNAME_ITEM = `<li id="pt-userpage"><a href="/wiki/User:WikiUser" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">WikiUser</a></li>`;
const REST_ITEMS = `<li id="pt-mytalk"><a href="/wiki/User_talk:WikiUser" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:WikiUser/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/WikiUser" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li>`;
const LOGOUT_ITEM = `<li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`;
const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>';
/**
* @type {MenuDefinition}
*/
const loggedInWithEcho = helperMakeMenuData(
'personal',
`${USERNAME_ITEM}${ECHO_ITEMS}${REST_ITEMS}${LOGOUT_ITEM}`,
'vector-user-menu-legacy'
);
/**
* @type {MenuDefinition}
*/
const loggedInWithULS = helperMakeMenuData(
'personal',
`${ULS_LANGUAGE_SELECTOR}${USERNAME_ITEM}${ECHO_ITEMS}${REST_ITEMS}${LOGOUT_ITEM}`,
'vector-user-menu-legacy'
);
/**
* @type {Object.<string, MenuDefinition>}
*/
const PERSONAL_MENU_TEMPLATE_DATA = {
loggedOut,
loggedInWithEcho,
loggedInWithULS
};
/**
* @type {Object.<string, MenuDefinition|MenuDefinitions>}
*/
const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = {
'data-user-page': helperMakeMenuData( 'user-page', USERNAME_ITEM ),
'data-notifications': helperMakeMenuData( 'notifications', ECHO_ITEMS ),
'data-user-menu': helperMakeMenuData( 'personal', REST_ITEMS )
};
export { PERSONAL_MENU_TEMPLATE_DATA,
USER_LINKS_LOGGED_IN_TEMPLATE_DATA,
menuTemplate, userLinksTemplateLegacy, userLinksTemplate };

46
stories/UserLinks.stories.js Normal file
View file

@ -0,0 +1,46 @@
import mustache from 'mustache';
import { menuTemplate } from './Menu.stories.data';
import { PERSONAL_MENU_TEMPLATE_DATA, USER_LINKS_LOGGED_IN_TEMPLATE_DATA } from './UserLinks.stories.data';
import { userLinksTemplateLegacy, userLinksTemplate } from './UserLinks.stories.data';
export default {
title: 'UserLinks'
};
export const legacyLoggedOut = () => mustache.render(
userLinksTemplateLegacy,
{
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut
},
{
Menu: menuTemplate
}
);
export const legacyLoggedInWithEcho = () => mustache.render(
userLinksTemplateLegacy,
{
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho
},
{
Menu: menuTemplate
}
);
export const legacyLoggedInWithULS = () => mustache.render(
userLinksTemplateLegacy,
{
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS
},
{
Menu: menuTemplate
}
);
export const userLinks = () => mustache.render(
userLinksTemplate,
USER_LINKS_LOGGED_IN_TEMPLATE_DATA,
{
Menu: menuTemplate
}
);

3
stories/legacy.stories.js
View file

@ -1,5 +1,6 @@
import mustache from 'mustache'; import mustache from 'mustache';
import '../resources/skins.vector.styles/skin-legacy.less'; import '../resources/common/common.less';
import '../resources/skins.vector.styles.legacy/skin-legacy.less';
import legacySkinTemplate from '!!raw-loader!../includes/templates/skin-legacy.mustache'; import legacySkinTemplate from '!!raw-loader!../includes/templates/skin-legacy.mustache';
import { import {
LEGACY_TEMPLATE_DATA, LEGACY_TEMPLATE_DATA,

5
stories/skin.stories.data.js
View file

@ -5,7 +5,9 @@
import { htmlUserLanguageAttributes } from './utils'; import { htmlUserLanguageAttributes } from './utils';
import { placeholder } from './utils'; import { placeholder } from './utils';
import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data'; import { userLinksTemplateLegacy } from './UserLinks.stories.data';
import { menuTemplate } from './Menu.stories.data';
import { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data'; import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data'; import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data'; import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
@ -61,6 +63,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Sidebar: sidebarTemplate, Sidebar: sidebarTemplate,
VectorMenu: vectorMenuTemplate, VectorMenu: vectorMenuTemplate,
Menu: menuTemplate, Menu: menuTemplate,
'legacy/UserLinks': userLinksTemplateLegacy,
Footer: footerTemplate Footer: footerTemplate
}, FOOTER_TEMPLATE_PARTIALS ); }, FOOTER_TEMPLATE_PARTIALS );

4
stories/types.js
View file

@ -61,3 +61,7 @@
* @property {boolean} [is-dropdown] * @property {boolean} [is-dropdown]
* @property {string} [html-after-portal] Additional HTML specific to portal menus. * @property {string} [html-after-portal] Additional HTML specific to portal menus.
*/ */
/**
* @typedef {Object.<string, MenuDefinition>} MenuDefinitions
*/