diff --git a/.storybook/icons.less b/.storybook/icons.less
index e7c9e1f..4c1c710 100644
--- a/.storybook/icons.less
+++ b/.storybook/icons.less
@@ -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;
}
diff --git a/resources/skins.vector.styles.legacy/components/MenuDropdown.less b/resources/skins.vector.styles.legacy/components/MenuDropdown.less
index d0ec78b..894b8fb 100644
--- a/resources/skins.vector.styles.legacy/components/MenuDropdown.less
+++ b/resources/skins.vector.styles.legacy/components/MenuDropdown.less
@@ -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;
}
diff --git a/stories/SearchBox.stories.data.js b/stories/SearchBox.stories.data.js
index 3b944bf..4fe8f56 100644
--- a/stories/SearchBox.stories.data.js
+++ b/stories/SearchBox.stories.data.js
@@ -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': '',
'html-button-search': ''
};
+
+/**
+ * @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
+};
diff --git a/stories/SearchBox.stories.js b/stories/SearchBox.stories.js
index d1ab7f9..4dccfa7 100644
--- a/stories/SearchBox.stories.js
+++ b/stories/SearchBox.stories.js
@@ -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 = () => `
+
+ ${mustache.render( searchBoxTemplate, searchBoxData )}
+
+`;
diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js
index b5b239a..fa699c9 100644
--- a/stories/UserLinks.stories.data.js
+++ b/stories/UserLinks.stories.data.js
@@ -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 = `Alerts (0)Notices (3)`;
+const USERNAME_ITEM = `WikiUser`;
+const REST_ITEMS = `TalkSandboxPreferencesBetaWatchlistContributions`;
+const LOGOUT_ITEM = `Log out`;
+const ULS_LANGUAGE_SELECTOR = 'English';
+
/**
* @type {MenuDefinition}
*/
@@ -18,24 +30,6 @@ const loggedOut = helperMakeMenuData(
helperClassName( 'vector-user-menu-legacy' )
);
-const ECHO_ITEMS = `Alerts (0)Notices (3)`;
-const USERNAME_ITEM = `WikiUser`;
-const REST_ITEMS = `TalkSandboxPreferencesBetaWatchlistContributions`;
-const LOGOUT_ITEM = `Log out`;
-const ULS_LANGUAGE_SELECTOR = 'English';
-
-const USER_LINKS_ITEMS = `
- Talk
- Sandbox
- Preferences
- Watchlist
- Contributions
-`;
-const ANON_USER_LINKS_ITEMS = `
- Talk
- Contributions
-`;
-
/**
* @type {MenuDefinition}
*/
@@ -63,46 +57,61 @@ const PERSONAL_MENU_TEMPLATE_DATA = {
loggedInWithULS
};
+/**
+ * Modern User Links
+ */
+
+const LOGGED_IN_ITEMS = `
+ Test
+ Talk
+ Sandbox
+ Preferences
+ Watchlist
+ Contributions
+`;
+const LOGGED_OUT_ITEMS = `
+Talk
+ Contributions
+`;
+
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': `Create account`,
- 'data-user-page': helperMakeMenuData( 'user-page', USERNAME_ITEM ),
+ 'data-user-page': helperMakeMenuData( 'user-page', `
+
+ WikiUser
+
+ ` ),
'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': `
-
- `,
- 'is-dropdown': true
+ 'html-after-portal': mustache.render( userLinksLogoutTemplate, {
+ htmlLogout: ``
+ } )
};
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': `
-
-
- `,
- 'is-dropdown': true
+ 'html-before-portal': mustache.render( userLinksLoginTemplate, {
+ htmlCreateAccount: ``,
+ htmlLogin: ``,
+ msgLearnMore: `Pages for logged out editors `,
+ htmlLearnMoreLink: `(learn more):`
+ } )
};
/**
@@ -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 {
diff --git a/stories/types.js b/stories/types.js
index 00f10a6..c5167c0 100644
--- a/stories/types.js
+++ b/stories/types.js
@@ -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]
*/
/**