diff --git a/i18n/en.json b/i18n/en.json index 71cf4ae77..ee7e50130 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -91,5 +91,9 @@ "vector-night-mode-issue-reporting-link-notification": "Report received!", "vector-night-mode-issue-reporting-preload-title": "$1 dark mode error", "vector-night-mode-issue-reporting-preload-content": "\n'''Issue Description'''", - "vector-night-mode-beta-tag": "(beta)" + "vector-night-mode-beta-tag": "(beta)", + "vector-night-mode-launch-title": "Wikipedia's new colors", + "vector-night-mode-launch-subtitle": "Try dark mode today", + "vector-night-mode-launch-description-day": "Wikipedia is now available in dark mode. Try it out by clicking \"Dark\" in the \"Color\" section of the Appearance menu on the right.", + "vector-night-mode-launch-close-label": "Close" } diff --git a/i18n/qqq.json b/i18n/qqq.json index 448265945..17d3606e2 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -108,5 +108,9 @@ "vector-night-mode-issue-reporting-link-notification": "Notification that shows after clicking link.", "vector-night-mode-issue-reporting-preload-title": "The prefilled title of the form used to submit dark mode errors. $1 is a link to the current page, formatted as a wikitext external link, for example \"[https://en.wikipedia.org/wiki/Songhai_Empire Songhai Empire]\".", "vector-night-mode-issue-reporting-preload-content": "The prefilled content of the form used to submit dark mode errors", - "vector-night-mode-beta-tag": "A tag appearing in the Appearance menu informing users that this feature is in beta." + "vector-night-mode-beta-tag": "A tag appearing in the Appearance menu informing users that this feature is in beta.", + "vector-night-mode-launch-title": "Title of a modal that appears informing users of the new dark mode feature", + "vector-night-mode-launch-subtitle": "Subtitle of a modal that appears informing users of the new dark mode feature. \"Dark\" should be translated consistently with {{msg-mw|Skin-theme-night-label}}.", + "vector-night-mode-launch-description-day": "Text in the dark mode launch modal describing the dark mode feature, when dark mode is disabled. \"Settings\" is {{msg-mw|Mobile-frontend-main-menu-settings-heading}}.", + "vector-night-mode-launch-close-label": "Label for button to close the dark-mode launch modal" } diff --git a/jest.config.js b/jest.config.js index eee486d91..21cb7b039 100644 --- a/jest.config.js +++ b/jest.config.js @@ -26,7 +26,8 @@ module.exports = { // An array of regexp pattern strings used to skip coverage collection coveragePathIgnorePatterns: [ - '/node_modules/' + '/node_modules/', + 'DarkModeLaunchBanner.js' ], // An object that configures minimum threshold enforcement for coverage results diff --git a/resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.js b/resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.js new file mode 100644 index 000000000..c5ab6d2ab --- /dev/null +++ b/resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.js @@ -0,0 +1,74 @@ +const makeTemplate = function () { + const templateString = `
+
+ +
+
`; + + const templateElement = document.createElement( 'div' ); + templateElement.id = 'vector-dark-mode-launch-banner'; + templateElement.innerHTML = templateString; + return templateElement; +}; + +function closeModal() { + const modal = document.getElementById( 'vector-dark-mode-launch-banner' ); + if ( modal ) { + modal.remove(); + } +} + +function init() { + const mountElement = document.getElementById( 'mw-teleport-target' ), + isNotSkinVector2022 = mw.config.get( 'skin' ) !== 'vector-2022', + templateElement = makeTemplate(), + dialogOverlay = templateElement.querySelector( '.cdx-dialog-backdrop' ), + dialogCloseButton = templateElement.querySelector( '.cdx-dialog__header__close-button' ); + + // since this can module can run via centralNotice, ensuring the currect skin is Vector 2022 + if ( isNotSkinVector2022 ) { + return; + } + + if ( dialogOverlay ) { + dialogOverlay.addEventListener( 'click', ( e ) => { + if ( e.target === dialogOverlay ) { + closeModal(); + } + } ); + } + + if ( dialogCloseButton ) { + dialogCloseButton.addEventListener( 'click', closeModal ); + } + + if ( mountElement ) { + mountElement.appendChild( templateElement ); + } +} + +module.exports = init; diff --git a/resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.less b/resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.less new file mode 100644 index 000000000..cfedabd41 --- /dev/null +++ b/resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.less @@ -0,0 +1,9 @@ +@import 'mediawiki.skin.variables.less'; + +.skin-vector-launch-image { + background: url( dark-mode-banner.svg ) no-repeat 0 0; + background-size: 100%; + width: ~'calc(100% + @{spacing-300})'; + margin: -@spacing-100 -@spacing-150 0 -@spacing-150; + aspect-ratio: 2 / 1; +} diff --git a/resources/skins.vector.DarkModeLaunchBanner/dark-mode-banner.svg b/resources/skins.vector.DarkModeLaunchBanner/dark-mode-banner.svg new file mode 100644 index 000000000..8a3898f2c --- /dev/null +++ b/resources/skins.vector.DarkModeLaunchBanner/dark-mode-banner.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/skin.json b/skin.json index 93a041321..834b88463 100644 --- a/skin.json +++ b/skin.json @@ -495,6 +495,28 @@ "vector-night-mode-gadget-warning" ] }, + "skins.vector.DarkModeLaunchBanner": { + "packageFiles": [ + "resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.js" + ], + "styles": [ + "resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.less" + ], + "dependencies": [ "skins.vector.DarkModeLaunchBanner.codexModules" ], + "messages": [ + "vector-night-mode-launch-title", + "vector-night-mode-launch-subtitle", + "vector-night-mode-launch-description-day", + "vector-night-mode-launch-close-label" + ] + }, + "skins.vector.DarkModeLaunchBanner.codexModules": { + "class": "MediaWiki\\ResourceLoader\\CodexModule", + "codexStyleOnly": true, + "codexComponents": [ + "CdxDialog" + ] + }, "skins.vector.legacy.js": { "packageFiles": [ "resources/skins.vector.legacy.js/skin-legacy.js",