From 92567bb46a740a4f76e010df0ce81a3b14e3bb0a Mon Sep 17 00:00:00 2001 From: MusikAnimal Date: Tue, 12 Dec 2023 22:24:21 -0500 Subject: [PATCH] Use mw.util.addPortlet and fix Vector-2022 styles Bug: T353214 --- .babelrc | 2 +- dist/MoreMenu.js | 18 ++++++++----- dist/MoreMenu.messages.en.js | 2 +- dist/MoreMenu.page.js | 2 +- dist/MoreMenu.user.js | 2 +- package.json | 2 +- src/MoreMenu.js | 52 ++++++++++++++++++++++++------------ 7 files changed, 52 insertions(+), 28 deletions(-) diff --git a/.babelrc b/.babelrc index 8303473..395408d 100644 --- a/.babelrc +++ b/.babelrc @@ -11,7 +11,7 @@ "Want to add custom links? See [[meta:MoreMenu#Customization]].", "", "Script: MoreMenu.js", - "Version: 5.1.23", + "Version: 5.1.24", "Author: MusikAnimal", "License: MIT", "Documentation: [[meta:MoreMenu]]", diff --git a/dist/MoreMenu.js b/dist/MoreMenu.js index d2d77b2..cb613ba 100644 --- a/dist/MoreMenu.js +++ b/dist/MoreMenu.js @@ -6,7 +6,7 @@ * Want to add custom links? See [[meta:MoreMenu#Customization]]. * * Script: MoreMenu.js -* Version: 5.1.23 +* Version: 5.1.24 * Author: MusikAnimal * License: MIT * Documentation: [[meta:MoreMenu]] @@ -364,10 +364,9 @@ $(function () { function addCSS() { switch (config.currentUser.skin) { case 'vector': + return mw.util.addCSS("\n .mm-tab .vector-menu-content {\n height: initial;\n overflow: initial !important;\n }\n .mm-menu .mw-list-item {\n white-space: nowrap;\n }\n .mm-submenu {\n background: #ffffff;\n border: 1px solid #a2a9b1;\n min-width: 120px !important;\n ".concat(rightKey, ": inherit !important;\n top: -1px !important;\n }\n #p-views {\n padding-left: inherit !important;\n padding-right: inherit !important;\n }\n #p-views .vector-menu-content::after {\n display: none !important;\n }\n .rtl #p-views .vector-menu-content::before {\n display: none !important;\n }\n .mm-submenu .mm-item {\n font-size: inherit !important;\n }\n ")); case 'vector-2022': - // FIXME: first ruleset is a hotfix for T315418 / T319358 - // FIXME: last two rulesets are for T337893 - return mw.util.addCSS("\n .mm-tab .vector-menu-content {\n height: initial;\n overflow: initial !important;\n }\n .mm-menu .mw-list-item {\n white-space: nowrap;\n }\n .mm-submenu {\n background: #ffffff;\n border: 1px solid #a2a9b1;\n min-width: 120px !important;\n ".concat(rightKey, ": inherit !important;\n top: -1px !important;\n }\n #p-views {\n padding-left: inherit !important;\n padding-right: inherit !important;\n }\n #p-views .vector-menu-content::after {\n display: none !important;\n }\n .rtl #p-views .vector-menu-content::before {\n display: none !important;\n }\n .mm-submenu .mm-item {\n font-size: inherit !important;\n }\n .vector-feature-zebra-design-enabled .mm-menu {\n background: white;\n border: 1px solid #a2a9b1;\n }\n .vector-feature-zebra-design-enabled .mm-menu .mw-list-item {\n padding: 8px;\n }\n ")); + return mw.util.addCSS("\n #p-page-dropdown .vector-dropdown-content,\n #p-user-dropdown .vector-dropdown-content {\n height: initial;\n overflow-x: initial !important;\n overflow-y: initial !important;\n top: 35px !important;\n }\n #p-page-dropdown .vector-dropdown-content::after,\n #p-user-dropdown .vector-dropdown-content::after {\n display: none !important;\n }\n .mm-menu .mw-list-item {\n white-space: nowrap;\n }\n .mm-submenu {\n background: #ffffff;\n box-shadow: 0 2px 6px -1px rgba(0,0,0,0.2);\n min-width: 120px !important;\n padding: 1px 10px;\n top: -1px !important;\n }\n #p-views {\n padding-left: inherit !important;\n padding-right: inherit !important;\n }\n "); case 'timeless': return mw.util.addCSS("\n .mm-submenu-wrapper {\n cursor: default;\n }\n .mm-submenu {\n background: #f8f9fa;\n border: 1px solid rgb(200, 204, 209);\n box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);\n padding: 1.2em 1.5em !important;\n top: -1.2em;\n white-space: nowrap;\n z-index: 95;\n }\n .mm-submenu::after {\n border-bottom: 8px solid transparent;\n border-top: 8px solid transparent;\n border-".concat(leftKey, ": 8px solid rgb(200, 204, 209);\n content: '';\n height: 0;\n padding-").concat(rightKey, ": 4px;\n position: absolute;\n top: 20px;\n width: 0;\n ").concat(rightKey, ": -13px;\n }\n @media screen and (max-width: 1339px) and (min-width: 1100px) {\n .mm-submenu::after {\n border-").concat(leftKey, ": none;\n border-").concat(rightKey, ": 8px solid rgb(200, 204, 209);\n padding-").concat(leftKey, ": 4px;\n padding-").concat(rightKey, ": inherit;\n ").concat(rightKey, ": inherit;\n ").concat(leftKey, ": -35px;\n }\n }\n @media screen and (max-width: 850px) {\n .mm-submenu {\n top: -2.2em;\n }\n }\n ")); case 'monobook': @@ -519,8 +518,15 @@ $(function () { * @param {String} html As generated by getMenuHtml(). */ function drawMenuVector(parentKey, html) { - html = "
") + "") + "") + '
' + "
    ".concat(html, "
") + '
'; - $(html).insertAfter($('#p-views, .mm-page').last()); + var menu = mw.util.addPortlet("p-".concat(parentKey), msg(parentKey), '#p-cactions'); + menu.classList.add("mm-".concat(parentKey)); + menu.classList.add('mm-tab'); + // Temporarily add and then remove an entry, so that mw.util.addPortletLink() does its thing. + mw.util.addPortletLink("p-".concat(parentKey), '#', 'temp'); + // Now replace with our custom HTML, and add missing classes. + var menuContent = menu.querySelector('ul'); + menuContent.innerHTML = html; + menuContent.classList.add('mm-menu'); } /** diff --git a/dist/MoreMenu.messages.en.js b/dist/MoreMenu.messages.en.js index 1a3190e..3830591 100644 --- a/dist/MoreMenu.messages.en.js +++ b/dist/MoreMenu.messages.en.js @@ -6,7 +6,7 @@ * Want to add custom links? See [[meta:MoreMenu#Customization]]. * * Script: MoreMenu.js -* Version: 5.1.23 +* Version: 5.1.24 * Author: MusikAnimal * License: MIT * Documentation: [[meta:MoreMenu]] diff --git a/dist/MoreMenu.page.js b/dist/MoreMenu.page.js index f2ef957..67fc5c2 100644 --- a/dist/MoreMenu.page.js +++ b/dist/MoreMenu.page.js @@ -6,7 +6,7 @@ * Want to add custom links? See [[meta:MoreMenu#Customization]]. * * Script: MoreMenu.js -* Version: 5.1.23 +* Version: 5.1.24 * Author: MusikAnimal * License: MIT * Documentation: [[meta:MoreMenu]] diff --git a/dist/MoreMenu.user.js b/dist/MoreMenu.user.js index 995af93..a117322 100644 --- a/dist/MoreMenu.user.js +++ b/dist/MoreMenu.user.js @@ -6,7 +6,7 @@ * Want to add custom links? See [[meta:MoreMenu#Customization]]. * * Script: MoreMenu.js -* Version: 5.1.23 +* Version: 5.1.24 * Author: MusikAnimal * License: MIT * Documentation: [[meta:MoreMenu]] diff --git a/package.json b/package.json index ce7ff3c..a2ed6cd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "moremenu", - "version": "5.1.23", + "version": "5.1.24", "description": "Dropdown menus with links to common tasks, user and page analytic tools and logs.", "private": true, "scripts": { diff --git a/src/MoreMenu.js b/src/MoreMenu.js index 081ad8e..114e443 100644 --- a/src/MoreMenu.js +++ b/src/MoreMenu.js @@ -375,9 +375,6 @@ $(() => { function addCSS() { switch (config.currentUser.skin) { case 'vector': - case 'vector-2022': - // FIXME: first ruleset is a hotfix for T315418 / T319358 - // FIXME: last two rulesets are for T337893 return mw.util.addCSS(` .mm-tab .vector-menu-content { height: initial; @@ -406,12 +403,33 @@ $(() => { .mm-submenu .mm-item { font-size: inherit !important; } - .vector-feature-zebra-design-enabled .mm-menu { - background: white; - border: 1px solid #a2a9b1; + `); + case 'vector-2022': + return mw.util.addCSS(` + #p-page-dropdown .vector-dropdown-content, + #p-user-dropdown .vector-dropdown-content { + height: initial; + overflow-x: initial !important; + overflow-y: initial !important; + top: 35px !important; + } + #p-page-dropdown .vector-dropdown-content::after, + #p-user-dropdown .vector-dropdown-content::after { + display: none !important; } - .vector-feature-zebra-design-enabled .mm-menu .mw-list-item { - padding: 8px; + .mm-menu .mw-list-item { + white-space: nowrap; + } + .mm-submenu { + background: #ffffff; + box-shadow: 0 2px 6px -1px rgba(0,0,0,0.2); + min-width: 120px !important; + padding: 1px 10px; + top: -1px !important; + } + #p-views { + padding-left: inherit !important; + padding-right: inherit !important; } `); case 'timeless': @@ -697,15 +715,15 @@ $(() => { * @param {String} html As generated by getMenuHtml(). */ function drawMenuVector(parentKey, html) { - html = `
` - + `` - + `` - + '
' - + `
    ${html}
` - + '
'; - - $(html).insertAfter($('#p-views, .mm-page').last()); + const menu = mw.util.addPortlet(`p-${parentKey}`, msg(parentKey), '#p-cactions'); + menu.classList.add(`mm-${parentKey}`); + menu.classList.add('mm-tab'); + // Temporarily add and then remove an entry, so that mw.util.addPortletLink() does its thing. + mw.util.addPortletLink(`p-${parentKey}`, '#', 'temp'); + // Now replace with our custom HTML, and add missing classes. + const menuContent = menu.querySelector('ul'); + menuContent.innerHTML = html; + menuContent.classList.add('mm-menu'); } /**