From 6300923601f6a231000cc4b045a52401e4680d06 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Wed, 26 May 2021 16:23:53 -0700 Subject: [PATCH] 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 --- includes/templates/legacy/UserLinks.mustache | 1 + includes/templates/skin-legacy.mustache | 2 +- resources/common/common.less | 2 +- .../{UserMenu.less => UserLinks.less} | 2 +- .../components/UserLinks.less | 28 ++++++++ .../components/UserMenu.less | 37 ----------- .../skin-legacy.less | 2 +- .../components/UserLinks.less | 61 +++++++++++++++++- .../components/UserMenu.less | 64 ------------------- resources/skins.vector.styles/skin.less | 3 +- stories/Menu.stories.data.js | 44 +------------ stories/Menu.stories.js | 13 +--- stories/UserLinks.stories.data.js | 62 ++++++++++++++++++ stories/UserLinks.stories.js | 46 +++++++++++++ stories/legacy.stories.js | 3 +- stories/skin.stories.data.js | 5 +- stories/types.js | 4 ++ 17 files changed, 215 insertions(+), 164 deletions(-) create mode 100644 includes/templates/legacy/UserLinks.mustache rename resources/common/components/{UserMenu.less => UserLinks.less} (92%) create mode 100644 resources/skins.vector.styles.legacy/components/UserLinks.less delete mode 100644 resources/skins.vector.styles.legacy/components/UserMenu.less delete mode 100644 resources/skins.vector.styles/components/UserMenu.less create mode 100644 stories/UserLinks.stories.data.js create mode 100644 stories/UserLinks.stories.js diff --git a/includes/templates/legacy/UserLinks.mustache b/includes/templates/legacy/UserLinks.mustache new file mode 100644 index 000000000..ec11aa2d9 --- /dev/null +++ b/includes/templates/legacy/UserLinks.mustache @@ -0,0 +1 @@ +{{#data-personal}}{{>Menu}}{{/data-personal}} diff --git a/includes/templates/skin-legacy.mustache b/includes/templates/skin-legacy.mustache index d4351b094..274e8ac0d 100644 --- a/includes/templates/skin-legacy.mustache +++ b/includes/templates/skin-legacy.mustache @@ -53,7 +53,7 @@

{{msg-navigation-heading}}

{{#data-portlets}} - {{#data-personal}}{{>Menu}}{{/data-personal}} + {{>legacy/UserLinks}}
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}} {{#data-variants}}{{>Menu}}{{/data-variants}} diff --git a/resources/common/common.less b/resources/common/common.less index 71155c30d..8cd586ea9 100644 --- a/resources/common/common.less +++ b/resources/common/common.less @@ -22,7 +22,7 @@ @import './components/SearchBox.less'; @import './components/SidebarLogo.less'; @import './components/Footer.less'; - @import './components/UserMenu.less'; + @import './components/UserLinks.less'; } @media print { diff --git a/resources/common/components/UserMenu.less b/resources/common/components/UserLinks.less similarity index 92% rename from resources/common/components/UserMenu.less rename to resources/common/components/UserLinks.less index 7b69b4529..3098b3c2f 100644 --- a/resources/common/components/UserMenu.less +++ b/resources/common/components/UserLinks.less @@ -1,4 +1,4 @@ -// Common styles for the UserMenu component. +// Common styles for the UserLinks component. @import '../variables.less'; @import 'mediawiki.mixins.less'; diff --git a/resources/skins.vector.styles.legacy/components/UserLinks.less b/resources/skins.vector.styles.legacy/components/UserLinks.less new file mode 100644 index 000000000..7de2290c2 --- /dev/null +++ b/resources/skins.vector.styles.legacy/components/UserLinks.less @@ -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; + } +} diff --git a/resources/skins.vector.styles.legacy/components/UserMenu.less b/resources/skins.vector.styles.legacy/components/UserMenu.less deleted file mode 100644 index c72d33545..000000000 --- a/resources/skins.vector.styles.legacy/components/UserMenu.less +++ /dev/null @@ -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; -} diff --git a/resources/skins.vector.styles.legacy/skin-legacy.less b/resources/skins.vector.styles.legacy/skin-legacy.less index 0b24cd232..7327b20f0 100644 --- a/resources/skins.vector.styles.legacy/skin-legacy.less +++ b/resources/skins.vector.styles.legacy/skin-legacy.less @@ -10,5 +10,5 @@ // Legacy specific components @import './components/MenuDropdown.less'; @import './components/Sidebar.less'; - @import './components/UserMenu.less'; + @import './components/UserLinks.less'; } diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index b41bd186f..1742bbbea 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -1,5 +1,64 @@ -// This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed. +@import '../../common/variables.less'; .vector-user-links { 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; + } + } + } } diff --git a/resources/skins.vector.styles/components/UserMenu.less b/resources/skins.vector.styles/components/UserMenu.less deleted file mode 100644 index b5ea6b823..000000000 --- a/resources/skins.vector.styles/components/UserMenu.less +++ /dev/null @@ -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; - } - } -} diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less index d94f5d9e1..9feff0400 100644 --- a/resources/skins.vector.styles/skin.less +++ b/resources/skins.vector.styles/skin.less @@ -16,8 +16,7 @@ @import './components/Sidebar.less'; @import './components/LanguageButton.less'; // This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed. - @import '../skins.vector.styles.legacy/components/UserMenu.less'; - @import './components/UserMenu.less'; + @import '../skins.vector.styles.legacy/components/UserLinks.less'; @import './components/UserLinks.less'; } diff --git a/stories/Menu.stories.data.js b/stories/Menu.stories.data.js index ba0f6d269..847e92de9 100644 --- a/stories/Menu.stories.data.js +++ b/stories/Menu.stories.data.js @@ -1,29 +1,6 @@ -/** - * @external MenuDefinition - */ import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache'; import { helperMakeMenuData } from './utils'; -/** - * @type {MenuDefinition} - */ -const loggedOut = helperMakeMenuData( - 'personal', - `
  • Not logged in
  • Talk
  • Contributions
  • Create account
  • Log in
    • `, - 'vector-user-menu-legacy' -); - -/** - * @type {MenuDefinition} - */ -const loggedInWithEcho = helperMakeMenuData( - 'personal', - `
  • Jdlrobson
  • Alerts (0)
  • Notices (3)
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
  • Log out
    • `, - 'vector-user-menu-legacy' -); - -const ULS_LANGUAGE_SELECTOR = '
  • English
    • '; - /** * @type {MenuDefinition} */ @@ -34,23 +11,4 @@ const defaultMenu = helperMakeMenuData(
  • Item 3
    • ` ); -/** - * @type {MenuDefinition} - */ -const loggedInWithULS = helperMakeMenuData( - 'personal', - `${ULS_LANGUAGE_SELECTOR}
  • Jdlrobson
  • Alerts (0)
  • Notices (3)
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
  • Log out
    • `, - 'vector-user-menu-legacy' -); - -/** - * @type {Object.} - */ -const PERSONAL_MENU_TEMPLATE_DATA = { - loggedOut, - defaultMenu, - loggedInWithEcho, - loggedInWithULS -}; - -export { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate }; +export { menuTemplate, defaultMenu }; diff --git a/stories/Menu.stories.js b/stories/Menu.stories.js index 3913ceec4..830d346eb 100644 --- a/stories/Menu.stories.js +++ b/stories/Menu.stories.js @@ -1,5 +1,5 @@ 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'; export default { @@ -8,14 +8,5 @@ export default { export const menu = () => mustache.render( 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 ); diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js new file mode 100644 index 000000000..5bfe613e8 --- /dev/null +++ b/stories/UserLinks.stories.data.js @@ -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', + `
  • Not logged in
  • Talk
  • Contributions
  • Create account
  • Log in
    • `, + 'vector-user-menu-legacy' +); + +const ECHO_ITEMS = `
  • Alerts (0)
  • Notices (3)
    • `; +const USERNAME_ITEM = `
  • WikiUser
    • `; +const REST_ITEMS = `
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
    • `; +const LOGOUT_ITEM = `
  • Log out
    • `; +const ULS_LANGUAGE_SELECTOR = '
  • English
    • '; + +/** + * @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.} + */ +const PERSONAL_MENU_TEMPLATE_DATA = { + loggedOut, + loggedInWithEcho, + loggedInWithULS +}; + +/** + * @type {Object.} + */ +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 }; diff --git a/stories/UserLinks.stories.js b/stories/UserLinks.stories.js new file mode 100644 index 000000000..cf12857ba --- /dev/null +++ b/stories/UserLinks.stories.js @@ -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 + } +); diff --git a/stories/legacy.stories.js b/stories/legacy.stories.js index bcb81db62..d6075c27f 100644 --- a/stories/legacy.stories.js +++ b/stories/legacy.stories.js @@ -1,5 +1,6 @@ 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 { LEGACY_TEMPLATE_DATA, diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js index e2e81ea26..83a15ac84 100644 --- a/stories/skin.stories.data.js +++ b/stories/skin.stories.data.js @@ -5,7 +5,9 @@ import { htmlUserLanguageAttributes } 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 { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data'; import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data'; @@ -61,6 +63,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, { Sidebar: sidebarTemplate, VectorMenu: vectorMenuTemplate, Menu: menuTemplate, + 'legacy/UserLinks': userLinksTemplateLegacy, Footer: footerTemplate }, FOOTER_TEMPLATE_PARTIALS ); diff --git a/stories/types.js b/stories/types.js index 220931afe..733b447f4 100644 --- a/stories/types.js +++ b/stories/types.js @@ -61,3 +61,7 @@ * @property {boolean} [is-dropdown] * @property {string} [html-after-portal] Additional HTML specific to portal menus. */ + +/** + * @typedef {Object.} MenuDefinitions + */