wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 10:21:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create dark mode launch banner for Vector 2022

Browse source 
Creates a dark mode launch banner, (copied from the MinervaNue skin) to
announce the launch of dark-mode for Vector 2022.

The banner itself is not invoked anywhere by default, but will be
invoked through CentralNotice as a banner as part of a launch campaign.

To invoke the banner manually, execute the following in the dev console:

```
mw.loader.using( 'skins.vector.DarkModeLaunchBanner', function( require ) {
    require( 'skins.vector.DarkModeLaunchBanner')();
} );
```

Bug: T370303
Change-Id: I1ca4aab8c302ef418bc1d12dde0d80c96c3b8d4f
(cherry picked from commit 7b35e6b1e8)
This commit is contained in:
Jdrewniak 2024-07-19 00:10:18 -04:00
parent b50deeabd6
commit a458e1dbec
7 changed files with 175 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
i18n/en.json
View file

@ -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": "<!--\nInstructions\nPlease describe how the dark mode colors are making Wikipedia difficult to read.\nPlease include the section of the article where you found the issue.\n-->\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"
}

6
i18n/qqq.json
View file

@ -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 \"<nowiki>[https://en.wikipedia.org/wiki/Songhai_Empire Songhai Empire]</nowiki>\".",
"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"
}

3
jest.config.js
View file

@ -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

74
resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.js Normal file
View file

@ -0,0 +1,74 @@
const makeTemplate = function () {
const templateString = `<div class="cdx-dialog-backdrop">
<div tabindex="0"></div>
<div class="cdx-dialog cdx-dialog--horizontal-actions" role="dialog" aria-labelledby="cdx-dialog-label-0" aria-modal="true">
<header class="cdx-dialog__header cdx-dialog__header--default">
<div class="cdx-dialog__header__title-group">
<h2 id="cdx-dialog-label-0" class="cdx-dialog__header__title">
${ mw.message( 'vector-night-mode-launch-title' ).escaped() }
</h2>
</div>
<button class="cdx-button cdx-button--action-default cdx-button--weight-quiet cdx-button--size-medium cdx-button--icon-only cdx-dialog__header__close-button" type="button" aria-label="${ mw.message( 'vector-night-mode-launch-close-label' ).escaped() }">
<span class="cdx-icon cdx-icon--medium">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><title>Close</title><g><path d="m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z"></path><path d="M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z"></path></g></svg>
</span>
</button>
</header>
<div class="cdx-dialog-focus-trap" tabindex="-1"></div>
<div class="cdx-dialog__body">
<div class="skin-vector-launch-image"></div>
<h3>
${ mw.message( 'vector-night-mode-launch-subtitle' ).escaped() }
</h3>
<p>
${ mw.message( 'vector-night-mode-launch-description-day' ).escaped() }
</p>
</div>
<footer class="cdx-dialog__footer cdx-dialog__footer--default"></footer>
</div>
<div tabindex="0"></div>
</div>`;
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;

9
resources/skins.vector.DarkModeLaunchBanner/DarkModeLaunchBanner.less Normal file
View file

@ -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;
}

58
resources/skins.vector.DarkModeLaunchBanner/dark-mode-banner.svg Normal file
View file

@ -0,0 +1,58 @@
<svg xmlns="http://www.w3.org/2000/svg" width="287" height="129" fill="none" viewBox="0 0 287 129">
<path fill="#404244" d="M.544.875h286v128h-286z"/>
<path d="m38.545 65.256.161-42.888a2 2 0 0 1 2-1.993h53.97v7.247a2 2 0 0 0 2 2h7.089v77.091c0 1.1-1.75 1.587-2.85 1.587-1.462 0-1.329 1.158-2.62 1.519-1.292.362-1.295-1.519-2.678-1.519s-1.46 1.519-2.777 1.519-1.23-1.519-2.67-1.519-1.58 1.519-2.844 1.519S86.1 108.3 84.62 108.3s-1.474 1.519-2.783 1.519c-1.31 0-1.218-1.519-2.602-1.519s-1.332 1.159-2.67 1.519c-1.337.361-1.575-1.519-2.912-1.519s-1.437 1.519-2.726 1.519-1.081-1.519-2.511-1.519-1.59 1.519-2.926 1.519-1.451-1.519-2.842-1.519-1.24 1.519-2.613 1.519-1.422-1.519-2.786-1.519-1.344 1.519-2.687 1.519-1.282-1.519-2.722-1.519-1.495 1.519-2.845 1.519-1.231-1.519-2.411-1.519-1.674 1.925-2.962 1.519c-1.288-.405-1.14-1.519-2.577-1.519-.865 0-2.5-.469-2.5-1.333v-29.36z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#101418;stroke:#a2a9b1;stroke-width:2;stroke-linecap:round"/>
<path fill="#c8ccd1" stroke="#a2a9b1" stroke-width="2" d="m95.2 20.877.004-.001h.005l.006.005 8.187 8.31.06.06.07.05.008.01.004.023q0 .015-.003.02l-.008.011-.006.005h-8.326l-.006-.005-.008-.011-.003-.02v-8.422q0-.016.008-.026l.008-.01z"/>
<ellipse cx="48.067" cy="31.87" fill="#a2a9b1" rx="4.513" ry="4.498"/>
<path fill="#a2a9b1" fill-rule="evenodd" d="M81.841 37.867s10.877 7.371 13.325 4.66c2.447-2.713 0 3.936 0 3.936H73.689m-34.648-4.598s8.669 6.091 20.75 6.091 2.955 3.904 2.955 3.904H39.068" clip-rule="evenodd"/>
<path fill="#c8ccd1" fill-rule="evenodd" d="M40.418 51.92S87.9 29.146 81.951 40.608c-5.95 11.462 21.31-2.692 21.31-2.692V51.92" clip-rule="evenodd"/>
<path fill="#101418" d="M39.041 51.36h64.135v1H39.04z"/>
<rect width="36.265" height="1" x="44.506" y="60.856" fill="#c8ccd1" rx=".5"/>
<g fill="#a2a9b1">
<rect width="40.239" height="1" x="44.506" y="72.851" rx=".5"/>
<rect width="15.897" height="1" x="44.506" y="99.838" rx=".5"/>
<rect width="36.265" height="1" x="61.893" y="99.838" rx=".5"/>
<rect width="8.445" height="1" x="44.506" y="79.847" rx=".5"/>
<rect width="8.445" height="1" x="89.713" y="79.847" rx=".5"/>
<rect width="33.781" height="1" x="54.441" y="79.847" rx=".5"/>
<rect width="8.445" height="1" x="44.506" y="96.34" rx=".5"/>
<rect width="18.381" height="1" x="80.274" y="96.34" rx=".5"/>
<rect width="24.342" height="1" x="54.441" y="96.34" rx=".5"/>
<rect width="11.923" height="1" rx=".5" transform="matrix(-1 0 0 1 98.158 72.85)"/>
<rect width="40.239" height="1" x="44.506" y="90.343" rx=".5"/>
<rect width="6.955" height="1" x="71.332" y="69.352" rx=".5"/>
<rect width="18.381" height="1" x="79.777" y="69.352" rx=".5"/>
<rect width="25.336" height="1" x="44.506" y="69.352" rx=".5"/>
<rect width="53.652" height="1" x="44.506" y="86.844" rx=".5"/>
<rect width="53.652" height="1" x="44.506" y="83.346" rx=".5"/>
<rect width="53.652" height="1" x="44.506" y="103.337" rx=".5"/>
<rect width="53.652" height="1" x="44.506" y="76.349" rx=".5"/>
<rect width="25.336" height="1" x="44.506" y="57.358" rx=".5"/>
</g>
<path fill="#f8f9fa" d="M123.544.875h163v128h-123z"/>
<path d="m182.044 65.256.162-42.888a2 2 0 0 1 2-1.993h53.969v7.247a2 2 0 0 0 2 2h7.09v77.091c0 1.1-1.75 1.587-2.85 1.587-1.462 0-1.329 1.158-2.621 1.519-1.291.362-1.294-1.519-2.677-1.519s-1.46 1.519-2.777 1.519-1.23-1.519-2.671-1.519-1.579 1.519-2.843 1.519-1.226-1.519-2.706-1.519-1.474 1.519-2.783 1.519c-1.31 0-1.218-1.519-2.602-1.519s-1.332 1.159-2.669 1.519c-1.338.361-1.576-1.519-2.913-1.519-1.338 0-1.437 1.519-2.726 1.519s-1.081-1.519-2.511-1.519-1.589 1.519-2.926 1.519c-1.336 0-1.451-1.519-2.843-1.519s-1.24 1.519-2.612 1.519-1.422-1.519-2.786-1.519-1.344 1.519-2.687 1.519-1.282-1.519-2.722-1.519c-1.441 0-1.495 1.519-2.845 1.519s-1.231-1.519-2.412-1.519-1.673 1.925-2.961 1.519c-1.288-.405-1.139-1.519-2.577-1.519-.865 0-2.501-.469-2.501-1.333v-29.36z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff;stroke:#a2a9b1;stroke-width:2;stroke-linecap:round"/>
<path fill="#c8ccd1" stroke="#a2a9b1" stroke-width="2" d="M238.7 20.877h.001l.003-.001h.005l.006.005 8.187 8.31.06.06.07.05.008.01.004.023q0 .015-.003.02l-.008.011-.006.005h-8.326l-.006-.005-.008-.011q-.002-.006-.003-.02v-8.422q0-.016.008-.026l.008-.01z"/>
<ellipse cx="191.567" cy="31.87" fill="#a2a9b1" rx="4.513" ry="4.498"/>
<path fill="#a2a9b1" fill-rule="evenodd" d="M225.341 37.867s10.877 7.371 13.325 4.66c2.447-2.713 0 3.936 0 3.936h-21.477m-34.648-4.598s8.669 6.091 20.75 6.091 2.955 3.904 2.955 3.904h-23.678" clip-rule="evenodd"/>
<path fill="#c8ccd1" fill-rule="evenodd" d="M183.918 51.92s47.482-22.774 41.533-11.312c-5.95 11.462 21.31-2.692 21.31-2.692V51.92" clip-rule="evenodd"/>
<path fill="#fff" d="M182.541 51.36h64.134v1h-64.134z"/>
<rect width="36.265" height="1" x="188.006" y="60.856" fill="#c8ccd1" rx=".5"/>
<rect width="40.239" height="1" x="188.006" y="72.851" fill="#a2a9b1" rx=".5"/>
<rect width="15.897" height="1" x="188.006" y="99.838" fill="#a2a9b1" rx=".5"/>
<rect width="36.265" height="1" x="205.393" y="99.838" fill="#a2a9b1" rx=".5"/>
<rect width="8.445" height="1" x="188.006" y="79.847" fill="#a2a9b1" rx=".5"/>
<rect width="8.445" height="1" x="233.213" y="79.847" fill="#a2a9b1" rx=".5"/>
<rect width="33.781" height="1" x="197.941" y="79.847" fill="#a2a9b1" rx=".5"/>
<rect width="8.445" height="1" x="188.006" y="96.34" fill="#a2a9b1" rx=".5"/>
<rect width="18.381" height="1" x="223.774" y="96.34" fill="#a2a9b1" rx=".5"/>
<rect width="24.342" height="1" x="197.941" y="96.34" fill="#a2a9b1" rx=".5"/>
<rect width="11.923" height="1" fill="#a2a9b1" rx=".5" transform="matrix(-1 0 0 1 241.658 72.85)"/>
<rect width="40.239" height="1" x="188.006" y="90.343" fill="#a2a9b1" rx=".5"/>
<rect width="6.955" height="1" x="214.832" y="69.352" fill="#a2a9b1" rx=".5"/>
<rect width="18.381" height="1" x="223.277" y="69.352" fill="#a2a9b1" rx=".5"/>
<rect width="25.336" height="1" x="188.006" y="69.352" fill="#a2a9b1" rx=".5"/>
<rect width="53.652" height="1" x="188.006" y="86.844" fill="#a2a9b1" rx=".5"/>
<rect width="53.652" height="1" x="188.006" y="83.346" fill="#a2a9b1" rx=".5"/>
<rect width="53.652" height="1" x="188.006" y="103.337" fill="#a2a9b1" rx=".5"/>
<rect width="53.652" height="1" x="188.006" y="76.349" fill="#a2a9b1" rx=".5"/>
<rect width="25.336" height="1" x="188.006" y="57.358" fill="#a2a9b1" rx=".5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

22
skin.json
View file

@ -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",