mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 10:21:40 +00:00
Update UserLinks and SearchBox storybook stories to match prod
- Update UserLinks data to wrap link content with spans and other markup changes - Use UserLinks__login.mustache and UserLinks__logout.mustache for rendering UserLink stories - Add new SearchBox story to account for search collapse behavior in modern Vector Change-Id: Ib0abce31db60a0c5c88dea17085e2974ac5112b5
This commit is contained in:
parent
5d944a6300
commit
d1f1f32418
|
@ -56,11 +56,18 @@
|
|||
}
|
||||
|
||||
.mw-ui-icon-wikimedia-ellipsis:before {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eellipsis%3C/title%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/svg%3E%0A") !important;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eellipsis%3C/title%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.mw-ui-icon-wikimedia-userAvatar:before,
|
||||
#pt-anonuserpage,
|
||||
.mw-ui-icon-wikimedia-search:before {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3Esearch%3C%2Ftitle%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.2%2013.6a7%207%200%20111.4-1.4l5.4%205.4-1.4%201.4-5.4-5.4zM13%208A5%205%200%20113%208a5%205%200%200110%200z%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.mw-ui-icon-wikimedia-userAvatar:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Euser avatar%3C/title%3E%3Cpath d='M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z'/%3E%3Ccircle cx='10' cy='5.5' r='4.5'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.vector-user-menu-legacy #pt-anonuserpage,
|
||||
.vector-user-menu-legacy #pt-userpage a {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg==") !important;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// Extends the common MenuDropdown, but allows it to be opened via hover.
|
||||
|
||||
.vector-menu-dropdown {
|
||||
.vector-menu-dropdown:not( .vector-user-menu ) {
|
||||
li {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
|
|
@ -5,12 +5,10 @@
|
|||
import searchBoxTemplate from '!!raw-loader!../includes/templates/SearchBox.mustache';
|
||||
import { htmlUserLanguageAttributes } from './utils';
|
||||
|
||||
export { searchBoxTemplate };
|
||||
|
||||
/**
|
||||
* @type {SearchData}
|
||||
*/
|
||||
export const searchBoxData = {
|
||||
const legacySearchBoxData = {
|
||||
'form-action': '/w/index.php',
|
||||
class: 'vector-search-box vector-search-show-thumbnail',
|
||||
'html-user-language-attributes': htmlUserLanguageAttributes,
|
||||
|
@ -20,3 +18,18 @@ export const searchBoxData = {
|
|||
'html-button-search-fallback': '<input type="submit" name="fulltext" value="Search" title="Search pages for this text" id="mw-searchButton" class="searchButton mw-fallbackSearchButton"/>',
|
||||
'html-button-search': '<input type="submit" name="go" value="Go" title="Go to a page with this exact name if it exists" id="searchButton" class="searchButton">'
|
||||
};
|
||||
|
||||
/**
|
||||
* @type {SearchData}
|
||||
*/
|
||||
const searchBoxData = Object.assign( {}, legacySearchBoxData, {
|
||||
class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses',
|
||||
'is-collapsible': true,
|
||||
'href-search': '/wiki/Special:Search'
|
||||
} );
|
||||
|
||||
export {
|
||||
searchBoxTemplate,
|
||||
legacySearchBoxData,
|
||||
searchBoxData
|
||||
};
|
||||
|
|
|
@ -1,9 +1,18 @@
|
|||
import mustache from 'mustache';
|
||||
import '../resources/skins.vector.styles/SearchBox.less';
|
||||
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
|
||||
import '../resources/skins.vector.styles/layouts/screen.less';
|
||||
import { searchBoxData, legacySearchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
|
||||
|
||||
export default {
|
||||
title: 'SearchBox'
|
||||
};
|
||||
|
||||
export const simpleSearch = () => mustache.render( searchBoxTemplate, searchBoxData );
|
||||
export const legacySimpleSearch = () => `
|
||||
${mustache.render( searchBoxTemplate, legacySearchBoxData )}
|
||||
`;
|
||||
|
||||
export const simpleSearch = () => `
|
||||
<div class="skin-vector-consolidated-user-links">
|
||||
${mustache.render( searchBoxTemplate, searchBoxData )}
|
||||
</div>
|
||||
`;
|
||||
|
|
|
@ -7,8 +7,20 @@ 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 userLinksMoreTemplate from '!!raw-loader!../includes/templates/UserLinks__more.mustache';
|
||||
import userLinksLogoutTemplate from '!!raw-loader!../includes/templates/UserLinks__logout.mustache';
|
||||
import userLinksLoginTemplate from '!!raw-loader!../includes/templates/UserLinks__login.mustache';
|
||||
import { helperClassName, helperMakeMenuData } from './utils';
|
||||
|
||||
/**
|
||||
* Legacy User Links
|
||||
*/
|
||||
|
||||
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&returnto=Main+Page&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}
|
||||
*/
|
||||
|
@ -18,24 +30,6 @@ const loggedOut = helperMakeMenuData(
|
|||
helperClassName( '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&returnto=Main+Page&returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`;
|
||||
const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>';
|
||||
|
||||
const USER_LINKS_ITEMS = `
|
||||
<li id="pt-mytalk"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userTalk" href="/wiki/User_talk:WikiUser" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li>
|
||||
<li id="pt-sandbox"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-markup" href="/wiki/User:WikiUser/sandbox" title="Your sandbox">Sandbox</a></li>
|
||||
<li id="pt-preferences"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-settings" href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li>
|
||||
<li id="pt-watchlist"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-unStar" 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 class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userContributions" href="/wiki/Special:Contributions/WikiUser" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li>
|
||||
`;
|
||||
const ANON_USER_LINKS_ITEMS = `
|
||||
<li id="pt-mytalk"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userTalk" href="/wiki/User_talk:WikiUser" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li>
|
||||
<li id="pt-mycontris"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userContributions" href="/wiki/Special:Contributions/WikiUser" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li>
|
||||
`;
|
||||
|
||||
/**
|
||||
* @type {MenuDefinition}
|
||||
*/
|
||||
|
@ -63,46 +57,61 @@ const PERSONAL_MENU_TEMPLATE_DATA = {
|
|||
loggedInWithULS
|
||||
};
|
||||
|
||||
/**
|
||||
* Modern User Links
|
||||
*/
|
||||
|
||||
const LOGGED_IN_ITEMS = `
|
||||
<li id="pt-userpage" class="user-links-collapsible-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userAvatar" href="/wiki/User:Test" dir="auto" title="Your user page [ctrl-option-.]" accesskey="."><span>Test</span></a></li>
|
||||
<li id="pt-mytalk"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userTalk" href="/wiki/User_talk:WikiUser" title="Your talk page [⌃⌥n]" accesskey="n"><span>Talk</span></a></li>
|
||||
<li id="pt-sandbox"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-markup" href="/wiki/User:WikiUser/sandbox" title="Your sandbox"><span>Sandbox</span></a></li>
|
||||
<li id="pt-preferences"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-settings" href="/wiki/Special:Preferences" title="Your preferences"><span>Preferences</span></a></li>
|
||||
<li id="pt-watchlist"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-unStar" href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l"><span>Watchlist</span></a></li>
|
||||
<li id="pt-mycontris"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userContributions" href="/wiki/Special:Contributions/WikiUser" title="A list of your contributions [⌃⌥y]" accesskey="y"><span>Contributions</span></a></li>
|
||||
`;
|
||||
const LOGGED_OUT_ITEMS = `
|
||||
<li id="pt-anontalk"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [ctrl-option-n]" accesskey="n"><span>Talk</span></a></li>
|
||||
<li id="pt-anoncontribs"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [ctrl-option-y]" accesskey="y"><span>Contributions</span></a></li>
|
||||
`;
|
||||
|
||||
const additionalUserMoreData = {
|
||||
class: 'vector-menu vector-user-menu-more',
|
||||
"heading-class": 'vector-menu-heading',
|
||||
"is-dropdown": false
|
||||
'heading-class': 'vector-menu-heading',
|
||||
'is-dropdown': false
|
||||
};
|
||||
|
||||
const userMoreHtmlItems = ( isAnon = true ) => mustache.render( userLinksMoreTemplate, {
|
||||
'is-anon': isAnon,
|
||||
'html-create-account': `<a href="/w/index.php?title=Special:CreateAccount&returnto=Main+Page" class="mw-ui-button mw-ui-quiet" title="You are encouraged to create an account and log in; however, it is not mandatory">Create account</a>`,
|
||||
'data-user-page': helperMakeMenuData( 'user-page', USERNAME_ITEM ),
|
||||
'data-user-page': helperMakeMenuData( 'user-page', `
|
||||
<li id="pt-userpage-2" class="user-links-collapsible-item">
|
||||
<a href="/wiki/User:WikiUser" dir="auto" title="Your user page [⌃⌥.]" accesskey="." class="mw-ui-button mw-ui-quiet"><span>WikiUser</span></a>
|
||||
</li>
|
||||
` ),
|
||||
'data-notifications': helperMakeMenuData( 'notifications', ECHO_ITEMS )
|
||||
} );
|
||||
|
||||
const loggedInData = {
|
||||
class: 'vector-user-menu vector-menu-dropdown vector-user-menu-logged-in',
|
||||
'is-dropdown': true,
|
||||
'heading-class': 'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-userAvatar',
|
||||
'is-anon': false,
|
||||
'html-after-portal': `
|
||||
<div id="pt-logout" class="vector-user-menu-login">
|
||||
<a class="vector-menu-content-item mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logOut" data-mw="interface" href="/w/index.php?title=Special:UserLogout&returnto=Main+Page">Log out</a>
|
||||
</div>
|
||||
`,
|
||||
'is-dropdown': true
|
||||
'html-after-portal': mustache.render( userLinksLogoutTemplate, {
|
||||
htmlLogout: `<a class="vector-menu-content-item vector-menu-content-item-logout mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logOut" data-mw="interface" href="/w/index.php?title=Special:UserLogout&returnto=Main+Page"><span>Log out</span></a>`
|
||||
} )
|
||||
};
|
||||
|
||||
const loggedOutData = {
|
||||
class: 'vector-user-menu vector-menu-dropdown vector-user-menu-logged-out',
|
||||
'is-dropdown': true,
|
||||
'heading-class': 'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis',
|
||||
'is-anon': true,
|
||||
'html-before-portal': `
|
||||
<div class="vector-user-menu-login">
|
||||
<a class="vector-menu-content-item mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logIn" href="/w/index.php?title=Special:UserLogin&returnto=Main+Page" title="You are encouraged to log in; however, it is not mandatory [ctrl-option-o]" accesskey="o">Log in</a>
|
||||
</div>
|
||||
<div class="vector-user-menu-anon-editor">
|
||||
<p>
|
||||
Pages for logged out editors (<a href="/wiki/Help:Introduction">learn more</a>):
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
'is-dropdown': true
|
||||
'html-before-portal': mustache.render( userLinksLoginTemplate, {
|
||||
htmlCreateAccount: `<a href="/w/index.php?title=Special:CreateAccount&returnto=Special%3AUserLogout" icon="userAvatar" class="user-links-collapsible-item vector-menu-content-item mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userAvatar" title="You are encouraged to create an account and log in; however, it is not mandatory"><span>Create account</span></a>`,
|
||||
htmlLogin: `<a class="vector-menu-content-item vector-menu-content-item-login mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logIn" href="/w/index.php?title=Special:UserLogin&returnto=Main+Page" title="You are encouraged to log in; however, it is not mandatory [ctrl-option-o]" accesskey="o"><span>Log in</span></a>`,
|
||||
msgLearnMore: `Pages for logged out editors `,
|
||||
htmlLearnMoreLink: `(<a href="/wiki/Help:Introduction"><span>learn more</span></a>):`
|
||||
} )
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -110,7 +119,7 @@ const loggedOutData = {
|
|||
*/
|
||||
const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = {
|
||||
'data-user-more': helperMakeMenuData( 'personal-more', userMoreHtmlItems( false ), additionalUserMoreData ),
|
||||
'data-user-menu': helperMakeMenuData( 'new-personal', USER_LINKS_ITEMS, loggedInData )
|
||||
'data-user-menu': helperMakeMenuData( 'new-personal', LOGGED_IN_ITEMS, loggedInData )
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -118,7 +127,7 @@ const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = {
|
|||
*/
|
||||
const USER_LINKS_LOGGED_OUT_TEMPLATE_DATA = {
|
||||
'data-user-more': helperMakeMenuData( 'personal-more', userMoreHtmlItems( true ), additionalUserMoreData ),
|
||||
'data-user-menu': helperMakeMenuData( 'new-personal', ANON_USER_LINKS_ITEMS, loggedOutData )
|
||||
'data-user-menu': helperMakeMenuData( 'new-personal', LOGGED_OUT_ITEMS, loggedOutData )
|
||||
};
|
||||
|
||||
export {
|
||||
|
|
|
@ -42,13 +42,14 @@
|
|||
* @property {string} [html-user-language-attributes]
|
||||
* @property {string} form-action URL
|
||||
* @property {string|null} html-input
|
||||
* @property {boolean} [is-collapsible]
|
||||
* @property {string|null} [class] of the menu
|
||||
* @property {string|null} page-title the title of the search page
|
||||
* @property {string|null} html-button-search-fallback
|
||||
* @property {string|null} html-button-search
|
||||
* @property {string} [input-location] An identifier corresponding the position of the search
|
||||
* widget on the page, e.g. "header-navigation"
|
||||
* @property {boolean} [is-collapsible]
|
||||
* @property {string} [href-search]
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue