mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor
synced 2024-11-24 08:14:33 +00:00
Merge "Realtime Preview onboarding popup"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
111185fb56
|
|
@ -307,6 +307,12 @@
|
||||||
"images": {
|
"images": {
|
||||||
"realtimepreview-error": {
|
"realtimepreview-error": {
|
||||||
"file": "realtimepreview/error.svg"
|
"file": "realtimepreview/error.svg"
|
||||||
|
},
|
||||||
|
"realtimepreview-onboarding": {
|
||||||
|
"file": {
|
||||||
|
"ltr": "realtimepreview/OnboardingPopup_ltr.svg",
|
||||||
|
"rtl": "realtimepreview/OnboardingPopup_rtl.svg"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -314,6 +320,7 @@
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"ext.wikiEditor",
|
"ext.wikiEditor",
|
||||||
"mediawiki.page.preview",
|
"mediawiki.page.preview",
|
||||||
|
"mediawiki.pulsatingdot",
|
||||||
"ext.wikiEditor.images",
|
"ext.wikiEditor.images",
|
||||||
"oojs-ui.styles.icons-interactions"
|
"oojs-ui.styles.icons-interactions"
|
||||||
],
|
],
|
||||||
|
|
@ -323,7 +330,10 @@
|
||||||
"wikieditor-realtimepreview-reload",
|
"wikieditor-realtimepreview-reload",
|
||||||
"wikieditor-realtimepreview-reload-title",
|
"wikieditor-realtimepreview-reload-title",
|
||||||
"accesskey-wikieditor-realtimepreview",
|
"accesskey-wikieditor-realtimepreview",
|
||||||
"wikieditor-realtimepreview-manual"
|
"wikieditor-realtimepreview-manual",
|
||||||
|
"wikieditor-realtimepreview-onboarding-title",
|
||||||
|
"wikieditor-realtimepreview-onboarding-body",
|
||||||
|
"wikieditor-realtimepreview-onboarding-button"
|
||||||
],
|
],
|
||||||
"packageFiles": [
|
"packageFiles": [
|
||||||
"realtimepreview/init.js",
|
"realtimepreview/init.js",
|
||||||
|
|
@ -331,14 +341,16 @@
|
||||||
"realtimepreview/ResizingDragBar.js",
|
"realtimepreview/ResizingDragBar.js",
|
||||||
"realtimepreview/TwoPaneLayout.js",
|
"realtimepreview/TwoPaneLayout.js",
|
||||||
"realtimepreview/ErrorLayout.js",
|
"realtimepreview/ErrorLayout.js",
|
||||||
"realtimepreview/ManualWidget.js"
|
"realtimepreview/ManualWidget.js",
|
||||||
|
"realtimepreview/OnboardingPopup.js"
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
"realtimepreview/RealtimePreview.less",
|
"realtimepreview/RealtimePreview.less",
|
||||||
"realtimepreview/ResizingDragBar.less",
|
"realtimepreview/ResizingDragBar.less",
|
||||||
"realtimepreview/TwoPaneLayout.less",
|
"realtimepreview/TwoPaneLayout.less",
|
||||||
"realtimepreview/ErrorLayout.less",
|
"realtimepreview/ErrorLayout.less",
|
||||||
"realtimepreview/ManualWidget.less"
|
"realtimepreview/ManualWidget.less",
|
||||||
|
"realtimepreview/OnboardingPopup.less"
|
||||||
],
|
],
|
||||||
"skinStyles": {
|
"skinStyles": {
|
||||||
"monobook": [
|
"monobook": [
|
||||||
|
|
|
||||||
|
|
@ -204,5 +204,8 @@
|
||||||
"wikieditor-realtimepreview-beta-desc": "See how wikitext changes will appear to readers inside the [[mw:Special:MyLanguage/Extension:WikiEditor|2010 editor]].",
|
"wikieditor-realtimepreview-beta-desc": "See how wikitext changes will appear to readers inside the [[mw:Special:MyLanguage/Extension:WikiEditor|2010 editor]].",
|
||||||
"wikieditor-realtimepreview-reload-title": "Reload the realtime preview pane",
|
"wikieditor-realtimepreview-reload-title": "Reload the realtime preview pane",
|
||||||
"accesskey-wikieditor-realtimepreview": ")",
|
"accesskey-wikieditor-realtimepreview": ")",
|
||||||
"wikieditor-realtimepreview-manual": "Please reload now to manually preview your edits."
|
"wikieditor-realtimepreview-manual": "Please reload now to manually preview your edits.",
|
||||||
|
"wikieditor-realtimepreview-onboarding-title": "Realtime Preview",
|
||||||
|
"wikieditor-realtimepreview-onboarding-body": "See what your edits will look like to readers by previewing them in realtime.",
|
||||||
|
"wikieditor-realtimepreview-onboarding-button": "Okay, got it"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -235,5 +235,8 @@
|
||||||
"wikieditor-realtimepreview-beta-desc": "Used in [[Special:Preferences]].\n\nUsed as description for the checkbox to enable Realtime Preview as a Beta Feature.\n\nThe label for this checkbox is {{msg-mw|wikieditor-realtimepreview-beta-label}}.",
|
"wikieditor-realtimepreview-beta-desc": "Used in [[Special:Preferences]].\n\nUsed as description for the checkbox to enable Realtime Preview as a Beta Feature.\n\nThe label for this checkbox is {{msg-mw|wikieditor-realtimepreview-beta-label}}.",
|
||||||
"wikieditor-realtimepreview-reload-title": "Tooltip text for the manual reload button.",
|
"wikieditor-realtimepreview-reload-title": "Tooltip text for the manual reload button.",
|
||||||
"accesskey-wikieditor-realtimepreview": "{{doc-accesskey}}\nAccesskey for the manual reload button.",
|
"accesskey-wikieditor-realtimepreview": "{{doc-accesskey}}\nAccesskey for the manual reload button.",
|
||||||
"wikieditor-realtimepreview-manual": "Message displayed when realtime preview is in 'manual' mode."
|
"wikieditor-realtimepreview-manual": "Message displayed when realtime preview is in 'manual' mode.",
|
||||||
|
"wikieditor-realtimepreview-onboarding-title": "Title label shown in the Realtime Preview onboarding popup.",
|
||||||
|
"wikieditor-realtimepreview-onboarding-body": "Description of Realtime Preview shown in the onboarding popup.",
|
||||||
|
"wikieditor-realtimepreview-onboarding-button": "Dismissing button for the Realtime Preview onboarding popup."
|
||||||
}
|
}
|
||||||
|
|
|
||||||
102
modules/realtimepreview/OnboardingPopup.js
Normal file
102
modules/realtimepreview/OnboardingPopup.js
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
var localStorage = require( 'mediawiki.storage' ).local;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The OnboardingPopup is the pulsating dot and the popup widget.
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @class
|
||||||
|
*/
|
||||||
|
function OnboardingPopup() {
|
||||||
|
this.localStorageName = 'WikiEditor-RealtimePreview-onboarding-dismissed';
|
||||||
|
if ( localStorage.get( this.localStorageName ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Okay button.
|
||||||
|
var okayButton = new OO.ui.ButtonWidget( {
|
||||||
|
label: mw.msg( 'wikieditor-realtimepreview-onboarding-button' ),
|
||||||
|
flags: [ 'progressive', 'primary' ]
|
||||||
|
} );
|
||||||
|
okayButton.connect( this, { click: 'onPopupButtonClick' } );
|
||||||
|
|
||||||
|
// Pulsating dot.
|
||||||
|
var $pulsatingDot = $( '<a>' ).addClass( 'ext-WikiEditor-realtimepreview-onboarding-dot mw-pulsating-dot' );
|
||||||
|
|
||||||
|
// Popup.
|
||||||
|
var $popupContent = $( '<div>' ).append(
|
||||||
|
$( '<div>' ).addClass( 'ext-WikiEditor-image-realtimepreview-onboarding' ),
|
||||||
|
$( '<h3>' ).text( mw.msg( 'wikieditor-realtimepreview-onboarding-title' ) ),
|
||||||
|
$( '<p>' ).text( mw.msg( 'wikieditor-realtimepreview-onboarding-body' ) ),
|
||||||
|
$( '<div>' ).addClass( 'ext-WikiEditor-realtimepreview-onboarding-button' )
|
||||||
|
.append( okayButton.$element )
|
||||||
|
);
|
||||||
|
var popup = new OO.ui.PopupWidget( {
|
||||||
|
classes: [ 'ext-WikiEditor-realtimepreview-onboarding-popup' ],
|
||||||
|
$floatableContainer: $pulsatingDot,
|
||||||
|
$content: $popupContent,
|
||||||
|
padded: true,
|
||||||
|
width: 300,
|
||||||
|
align: 'backwards'
|
||||||
|
} );
|
||||||
|
this.popup = popup;
|
||||||
|
|
||||||
|
// Toggle the popup when the dot is clicked.
|
||||||
|
$pulsatingDot.on( 'click', function () {
|
||||||
|
popup.toggle();
|
||||||
|
} );
|
||||||
|
// Close the popup when clicking anywhere outside it or the dot.
|
||||||
|
$( 'html' ).on( 'click', function ( event ) {
|
||||||
|
var $parents = $( event.target ).closest( '.ext-WikiEditor-realtimepreview-onboarding-popup, .ext-WikiEditor-realtimepreview-onboarding-dot' );
|
||||||
|
if ( $parents.length === 0 && popup.isVisible() ) {
|
||||||
|
popup.toggle( false );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
// Add the dot and popup to this widget.
|
||||||
|
this.$element = $( '<div>' )
|
||||||
|
.addClass( 'ext-WikiEditor-realtimepreview-onboarding' )
|
||||||
|
.append( $pulsatingDot, popup.$element );
|
||||||
|
}
|
||||||
|
|
||||||
|
OO.inheritClass( OnboardingPopup, OO.ui.Widget );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Function} callback
|
||||||
|
*/
|
||||||
|
OnboardingPopup.prototype.setNextCloseAction = function ( callback ) {
|
||||||
|
// Only register a next-action if the onboarding popup is not currently shown.
|
||||||
|
// For example, if someone clicks the options button, gets the onboarding popup,
|
||||||
|
// but then clicks the toolbar button, we don't want to register another next-action.
|
||||||
|
if ( this.popup.isVisible() ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.nextCloseAction = callback;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* When clicking the 'okay, got it' button, hide and remove the popup
|
||||||
|
* and record the fact that it shouldn't ever open again.
|
||||||
|
*/
|
||||||
|
OnboardingPopup.prototype.onPopupButtonClick = function () {
|
||||||
|
// First run any close-action that's been registered.
|
||||||
|
if ( this.nextCloseAction instanceof Function ) {
|
||||||
|
this.nextCloseAction.call();
|
||||||
|
}
|
||||||
|
// Hide the popup now and forever.
|
||||||
|
this.$element.remove();
|
||||||
|
this.popup.$element.remove();
|
||||||
|
this.popup = false;
|
||||||
|
localStorage.set( this.localStorageName, true );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* When the Realtime Preview button is clicked, show the onboarding popup (if it's not been dismissed).
|
||||||
|
*/
|
||||||
|
OnboardingPopup.prototype.onPreviewButtonClick = function () {
|
||||||
|
if ( !this.popup ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.popup.toggle( true );
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = OnboardingPopup;
|
||||||
22
modules/realtimepreview/OnboardingPopup.less
Normal file
22
modules/realtimepreview/OnboardingPopup.less
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
.ext-WikiEditor-realtimepreview-onboarding-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ext-WikiEditor-realtimepreview-onboarding-popup {
|
||||||
|
.oo-ui-popupWidget-body-padded {
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ext-WikiEditor-image-realtimepreview-onboarding {
|
||||||
|
// Height to match the SVG's.
|
||||||
|
height: 164px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ext-WikiEditor-realtimepreview-onboarding-button {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
33
modules/realtimepreview/OnboardingPopup_ltr.svg
Normal file
33
modules/realtimepreview/OnboardingPopup_ltr.svg
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="296" height="164" fill="none">
|
||||||
|
<path fill="#fff" d="M0 0h296v164H0z"/>
|
||||||
|
<path fill="#A2A9B1" d="M111.192 62.572H77.475c-.262 0-.475.24-.475.536 0 .296.213.536.475.536h33.717c.262 0 .475-.24.475-.536 0-.296-.213-.536-.475-.536ZM89.84 80H77.16c-.088 0-.16.224-.16.5s.072.5.16.5h12.68c.088 0 .16-.224.16-.5s-.072-.5-.16-.5Zm-4.683 10.43H77.51a.522.522 0 0 0-.51.535c0 .296.228.536.51.536h7.647c.281 0 .51-.24.51-.536a.523.523 0 0 0-.51-.536Zm0 10.713H77.51c-.282 0-.51.24-.51.536 0 .296.228.536.51.536h7.647c.281 0 .51-.24.51-.536a.523.523 0 0 0-.51-.536ZM128.49 90.43h-7.647a.523.523 0 0 0-.51.535c0 .296.229.536.51.536h7.647c.282 0 .51-.24.51-.536a.523.523 0 0 0-.51-.536Zm0 10.713h-7.647c-.281 0-.51.24-.51.536 0 .296.229.536.51.536h7.647c.282 0 .51-.24.51-.536a.523.523 0 0 0-.51-.536Zm-9.868-10.713H87.378c-.261 0-.473.239-.473.535 0 .296.212.536.473.536h31.244c.261 0 .473-.24.473-.536 0-.296-.212-.536-.473-.536Zm0 10.713H87.378c-.261 0-.473.24-.473.536 0 .296.212.536.473.536h31.244c.261 0 .473-.24.473-.536 0-.296-.212-.536-.473-.536ZM115.583 80h12.834c.322 0 .583.224.583.5s-.261.5-.583.5h-12.834c-.322 0-.583-.224-.583-.5s.261-.5.583-.5Zm13.12-4h-10.406c-.164 0-.297.224-.297.5s.133.5.297.5h10.406c.164 0 .297-.224.297-.5s-.133-.5-.297-.5Zm-40.919 0H77.216c-.12 0-.216.224-.216.5s.097.5.216.5h10.568c.12 0 .216-.224.216-.5s-.097-.5-.216-.5Zm40.735 19.787H77.481c-.265 0-.481.24-.481.535 0 .296.216.536.481.536h51.038c.265 0 .481-.24.481-.536 0-.296-.216-.535-.481-.535Zm0 10.713H77.481c-.265 0-.481.24-.481.536 0 .296.216.536.481.536h51.038c.265 0 .481-.24.481-.536 0-.296-.216-.536-.481-.536Zm0-21.428H77.481c-.265 0-.481.24-.481.536 0 .296.216.536.481.536h51.038c.265 0 .481-.24.481-.536 0-.296-.216-.536-.481-.536Zm-27.243-27.857h-23.79c-.269 0-.486.24-.486.535 0 .296.217.536.486.536h23.79c.269 0 .486-.24.486-.535 0-.296-.217-.536-.486-.536Z"/>
|
||||||
|
<path fill="#72777D" d="m93 76.121 6.372 2.529v-1.652l-4.304-1.558v-.073l4.304-1.558v-1.652L93 74.686v1.435ZM105.323 70h-1.661l-2.986 10h1.66l2.987-10ZM113 76.121v-1.435l-6.372-2.529v1.652l4.304 1.558v.073l-4.304 1.558v1.652L113 76.121Z"/>
|
||||||
|
<g filter="url(#filter0_d_658_7101)">
|
||||||
|
<path fill="#000" d="m167 81.685.119-31.257a.713.713 0 0 1 .715-.713h39.39v5.876c0 .392.319.71.71.71h5.804v56.775c0 .393-.193.46-.452.167 0 0-.543-.897-1.59-.897-1.048 0-.953.825-1.878 1.083-.926.257-.928-1.083-1.919-1.083-.992 0-1.046 1.083-1.99 1.083s-.882-1.083-1.914-1.083-1.132 1.083-2.038 1.083c-.906 0-.878-1.083-1.939-1.083s-1.056 1.083-1.994 1.083-.873-1.083-1.865-1.083-.954.826-1.913 1.083c-.958.257-1.129-1.083-2.087-1.083-.958 0-1.03 1.083-1.953 1.083-.924 0-.775-1.083-1.8-1.083-1.024 0-1.139 1.083-2.096 1.083-.958 0-1.04-1.083-2.037-1.083-.997 0-.889 1.083-1.872 1.083-.983 0-1.019-1.083-1.998-1.083-.978 0-.962 1.083-1.925 1.083-.962 0-.918-1.083-1.95-1.083-1.033 0-1.072 1.083-2.039 1.083-.967 0-.882-1.083-1.728-1.083s-1.199 1.372-2.122 1.083c-.923-.289-.817-1.083-1.848-1.083-1.03 0-1.395.855-1.395.855-.219.324-.396.266-.396-.124V81.685Z"/>
|
||||||
|
<path stroke="#72777D" stroke-width="1.082" d="M167.541 81.686v-.001l.118-31.255a.177.177 0 0 1 .174-.174h38.85v5.335c0 .69.561 1.252 1.251 1.252h5.263v55.509a2.361 2.361 0 0 0-1.501-.546c-.338 0-.618.067-.86.196-.234.124-.399.29-.52.42a4.358 4.358 0 0 0-.071.076c-.2.216-.312.337-.572.41-.093.025-.111.007-.123-.001-.052-.031-.114-.097-.243-.259l-.038-.049c-.22-.281-.621-.793-1.37-.793-.736 0-1.139.426-1.395.698l-.011.012c-.269.284-.371.372-.584.372-.197 0-.27-.068-.513-.352l-.003-.004c-.112-.131-.274-.321-.499-.468a1.586 1.586 0 0 0-.899-.258c-.754 0-1.176.423-1.451.702-.293.296-.392.38-.587.38-.176 0-.243-.061-.506-.358a2.425 2.425 0 0 0-.521-.472 1.665 1.665 0 0 0-.912-.252c-.775 0-1.178.429-1.441.715-.267.29-.351.367-.553.367-.191 0-.263-.065-.496-.346l-.007-.009c-.107-.128-.264-.317-.478-.464a1.523 1.523 0 0 0-.884-.263c-.329 0-.602.07-.839.197a2.17 2.17 0 0 0-.515.409 2.725 2.725 0 0 0-.054.055c-.218.223-.353.361-.645.439-.102.028-.151.012-.198-.014-.078-.042-.165-.121-.31-.277a2.001 2.001 0 0 1-.057-.063c-.248-.271-.682-.746-1.382-.746-.719 0-1.119.428-1.369.695l-.016.017c-.267.286-.368.37-.568.37-.11 0-.158-.027-.197-.057-.064-.049-.119-.119-.235-.271l-.002-.004c-.1-.131-.251-.329-.471-.483a1.515 1.515 0 0 0-.895-.267c-.741 0-1.165.414-1.443.687l-.009.008c-.292.286-.413.387-.644.387-.227 0-.341-.096-.618-.379l-.014-.014c-.264-.27-.674-.689-1.405-.689-.36 0-.648.101-.885.266a2.315 2.315 0 0 0-.464.46l-.012.014c-.119.146-.183.22-.256.272a.406.406 0 0 1-.255.07c-.238 0-.349-.096-.606-.371l-.021-.021c-.25-.268-.647-.69-1.371-.69-.736 0-1.12.435-1.359.707l-.015.017c-.243.276-.335.358-.551.358-.213 0-.296-.078-.543-.358l-.005-.006a2.441 2.441 0 0 0-.503-.462 1.605 1.605 0 0 0-.899-.256c-.755 0-1.163.424-1.428.701l-.006.006c-.271.282-.377.375-.605.375a.38.38 0 0 1-.244-.068 1.218 1.218 0 0 1-.235-.259 2.41 2.41 0 0 0-.033-.045c-.188-.251-.531-.71-1.216-.71-.37 0-.662.153-.882.316a4.389 4.389 0 0 0-.461.419l-.07.071c-.325.322-.423.34-.547.301l-.001-.001c-.265-.083-.379-.207-.571-.417l-.077-.084a1.915 1.915 0 0 0-.514-.414 1.763 1.763 0 0 0-.847-.191c-.54 0-.953.181-1.25.401V81.686Z"/>
|
||||||
|
</g>
|
||||||
|
<path fill="#fff" stroke="#72777D" stroke-linecap="round" stroke-width="1.082" d="m167 81.685.119-31.257a.713.713 0 0 1 .715-.713h39.39v5.876c0 .392.319.71.71.71h5.804v56.775c0 .393-.193.46-.452.167 0 0-.543-.897-1.59-.897-1.048 0-.953.825-1.878 1.083-.926.257-.928-1.083-1.919-1.083-.992 0-1.046 1.083-1.99 1.083s-.882-1.083-1.914-1.083-1.132 1.083-2.038 1.083c-.906 0-.878-1.083-1.939-1.083s-1.056 1.083-1.994 1.083-.873-1.083-1.865-1.083-.954.826-1.913 1.083c-.958.257-1.129-1.083-2.087-1.083-.958 0-1.03 1.083-1.953 1.083-.924 0-.775-1.083-1.8-1.083-1.024 0-1.139 1.083-2.096 1.083-.958 0-1.04-1.083-2.037-1.083-.997 0-.889 1.083-1.872 1.083-.983 0-1.019-1.083-1.998-1.083-.978 0-.962 1.083-1.925 1.083-.962 0-.918-1.083-1.95-1.083-1.033 0-1.072 1.083-2.039 1.083-.967 0-.882-1.083-1.728-1.083s-1.199 1.372-2.122 1.083c-.923-.289-.817-1.083-1.848-1.083-1.03 0-1.395.855-1.395.855-.219.324-.396.266-.396-.124V81.685v0Z"/>
|
||||||
|
<path fill="#C8CCD1" fill-rule="evenodd" stroke="#72777D" stroke-width="1.082" d="M207.584 56.479h5.736c.027-.001.037-.002.066 0 .194 0 .356-.168.356-.383a.389.389 0 0 0-.154-.315l-.046-.04-5.711-5.919a.336.336 0 0 0-.38-.08.385.385 0 0 0-.224.355v6c0 .214.162.382.357.382Z" clip-rule="evenodd"/>
|
||||||
|
<g opacity=".35">
|
||||||
|
<path fill="#A2A9B1" d="M173.849 61.107c1.786 0 3.234-1.435 3.234-3.204 0-1.77-1.448-3.204-3.234-3.204s-3.234 1.434-3.234 3.204c0 1.77 1.448 3.204 3.234 3.204Z"/>
|
||||||
|
<path fill="#A2A9B1" fill-rule="evenodd" d="M198.051 62.175s7.795 5.25 9.549 3.32c1.754-1.933 0 2.803 0 2.803h-15.391m-24.829-3.276s6.212 4.34 14.869 4.34 2.118 2.78 2.118 2.78h-16.969" clip-rule="evenodd"/>
|
||||||
|
<path fill="#C8CCD1" fill-rule="evenodd" d="M168.366 72.184s34.027-16.222 29.763-8.057c-4.263 8.164 15.271-1.918 15.271-1.918v9.975" clip-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
<path fill="#F5F5F5" fill-rule="evenodd" d="M167.38 71.787h45.96v.712h-45.96v-.712Z" clip-rule="evenodd"/>
|
||||||
|
<path fill="#A2A9B1" d="M196.929 78.55h-25.276a.356.356 0 0 0 0 .712h25.276a.356.356 0 1 0 0-.712Zm2.848 8.544h-28.124a.356.356 0 0 0 0 .712h28.124a.356.356 0 1 0 0-.712Zm-17.444 19.224h-10.68a.357.357 0 0 0 0 .712h10.68a.356.356 0 1 0 0-.712Zm27.054 0h-25.276a.357.357 0 0 0 0 .712h25.276a.356.356 0 1 0 0-.712Zm-32.394-14.24h-5.34a.356.356 0 0 0 0 .712h5.34a.356.356 0 1 0 0-.712Zm32.396 0h-5.34a.356.356 0 1 0 0 .712h5.34a.356.356 0 0 0 0-.712Zm-7.121 0h-23.496a.356.356 0 0 0 0 .712h23.496a.356.356 0 1 0 0-.712Zm-25.275 11.748h-5.34a.357.357 0 0 0 0 .712h5.34a.356.356 0 1 0 0-.712Zm32.754 0h-12.46a.357.357 0 0 0 0 .712h12.46a.356.356 0 1 0 0-.712Zm-14.243 0h-16.732a.357.357 0 0 0 0 .712h16.732a.356.356 0 1 0 0-.712Zm6.053-16.732h7.832a.356.356 0 1 1 0 .712h-7.832a.356.356 0 0 1 0-.712Zm-1.78 12.46h-28.124a.356.356 0 0 0 0 .712h28.124a.356.356 0 1 0 0-.712Zm-4.629-14.952h-4.272a.356.356 0 0 0 0 .712h4.272a.356.356 0 1 0 0-.712Zm14.241 0h-12.46a.356.356 0 0 0 0 .712h12.46a.356.356 0 1 0 0-.712Zm-20.292 0h-17.444a.356.356 0 0 0 0 .712h17.444a.356.356 0 1 0 0-.712Zm20.292 12.46h-37.736a.356.356 0 0 0 0 .712h37.736a.356.356 0 1 0 0-.712Zm0-2.492h-37.736a.356.356 0 0 0 0 .712h37.736a.356.356 0 1 0 0-.712Zm0 14.24h-37.736a.356.356 0 0 0 0 .712h37.736a.356.356 0 0 0 0-.712Zm0-19.224h-37.736a.356.356 0 0 0 0 .712h37.736a.356.356 0 1 0 0-.712Zm-20.29-13.528h-17.444a.356.356 0 1 0 0 .712h17.444a.356.356 0 0 0 0-.712Z"/>
|
||||||
|
<path stroke="#36C" stroke-linecap="round" stroke-width="1.071" d="M148 34v35m0 28v36"/>
|
||||||
|
<rect width="178.929" height="115.714" x="58.536" y="24.536" stroke="#C8CCD1" stroke-width="1.071" rx="3.75"/>
|
||||||
|
<path fill="#36C" fill-rule="evenodd" d="M147 91V75h-2v16h2Zm4 0V75h-2v16h2Zm-11-8 3-3v6l-3-3Zm16 0-3 3v-6l3 3Z" clip-rule="evenodd"/>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_658_7101" width="51.043" height="68.059" x="164.847" y="47.562" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||||
|
<feOffset/>
|
||||||
|
<feGaussianBlur stdDeviation="1.076"/>
|
||||||
|
<feColorMatrix values="0 0 0 0 0.961 0 0 0 0 0.961 0 0 0 0 0.961 0 0 0 1 0"/>
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_658_7101"/>
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_658_7101" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.3 KiB |
33
modules/realtimepreview/OnboardingPopup_rtl.svg
Normal file
33
modules/realtimepreview/OnboardingPopup_rtl.svg
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="296" height="164" fill="none" viewBox="0 0 296 164">
|
||||||
|
<path fill="#fff" d="M0 0h296v164H0z"/>
|
||||||
|
<path fill="#A2A9B1" d="M184.808 62.572h33.717c.262 0 .475.24.475.536 0 .296-.213.536-.475.536h-33.717c-.262 0-.475-.24-.475-.536 0-.296.213-.536.475-.536ZM206.16 80h12.68c.088 0 .16.224.16.5s-.072.5-.16.5h-12.68c-.088 0-.16-.224-.16-.5s.072-.5.16-.5Zm4.683 10.43h7.647c.282 0 .51.239.51.535a.523.523 0 0 1-.51.536h-7.647a.524.524 0 0 1-.51-.536c0-.296.229-.536.51-.536Zm0 10.713h7.647c.282 0 .51.24.51.536a.523.523 0 0 1-.51.536h-7.647a.524.524 0 0 1-.51-.536c0-.296.229-.536.51-.536ZM167.51 90.43h7.647c.281 0 .51.239.51.535a.524.524 0 0 1-.51.536h-7.647a.523.523 0 0 1-.51-.536c0-.296.228-.536.51-.536Zm0 10.713h7.647c.281 0 .51.24.51.536a.524.524 0 0 1-.51.536h-7.647a.523.523 0 0 1-.51-.536c0-.296.228-.536.51-.536Zm9.868-10.713h31.244c.261 0 .473.239.473.535 0 .296-.212.536-.473.536h-31.244c-.261 0-.473-.24-.473-.536 0-.296.212-.536.473-.536Zm0 10.713h31.244c.261 0 .473.24.473.536 0 .296-.212.536-.473.536h-31.244c-.261 0-.473-.24-.473-.536 0-.296.212-.536.473-.536ZM180.417 80h-12.834c-.322 0-.583.224-.583.5s.261.5.583.5h12.834c.322 0 .583-.224.583-.5s-.261-.5-.583-.5Zm-13.12-4h10.406c.164 0 .297.224.297.5s-.133.5-.297.5h-10.406c-.164 0-.297-.224-.297-.5s.133-.5.297-.5Zm40.919 0h10.568c.119 0 .216.224.216.5s-.097.5-.216.5h-10.568c-.119 0-.216-.224-.216-.5s.097-.5.216-.5Zm-40.735 19.787h51.038c.265 0 .481.24.481.535 0 .296-.216.536-.481.536h-51.038c-.265 0-.481-.24-.481-.536 0-.296.216-.535.481-.535Zm0 10.713h51.038c.265 0 .481.24.481.536 0 .296-.216.536-.481.536h-51.038c-.265 0-.481-.24-.481-.536 0-.296.216-.536.481-.536Zm0-21.428h51.038c.265 0 .481.24.481.536 0 .296-.216.536-.481.536h-51.038c-.265 0-.481-.24-.481-.536 0-.296.216-.536.481-.536Zm27.243-27.857h23.79c.269 0 .486.24.486.535 0 .296-.217.536-.486.536h-23.79c-.269 0-.486-.24-.486-.535 0-.296.217-.536.486-.536Z"/>
|
||||||
|
<path fill="#72777D" d="m183 76.121 6.372 2.529v-1.652l-4.304-1.558v-.073l4.304-1.558v-1.652L183 74.686v1.435ZM195.323 70h-1.661l-2.986 10h1.66l2.987-10ZM203 76.121v-1.435l-6.372-2.529v1.652l4.304 1.558v.073l-4.304 1.558v1.652L203 76.121Z"/>
|
||||||
|
<g filter="url(#filter0_d_1709_33104)">
|
||||||
|
<path fill="#000" d="m129 81.685-.119-31.257a.713.713 0 0 0-.715-.713h-39.39v5.876a.71.71 0 0 1-.71.71h-5.804v56.775c0 .393.193.46.452.167 0 0 .543-.897 1.59-.897 1.048 0 .953.825 1.878 1.083.926.257.927-1.083 1.92-1.083.991 0 1.045 1.083 1.989 1.083.944 0 .882-1.083 1.914-1.083s1.132 1.083 2.038 1.083c.906 0 .878-1.083 1.939-1.083 1.06 0 1.056 1.083 1.994 1.083.939 0 .873-1.083 1.865-1.083s.954.826 1.913 1.083c.958.257 1.129-1.083 2.087-1.083.958 0 1.03 1.083 1.953 1.083.924 0 .775-1.083 1.8-1.083 1.024 0 1.139 1.083 2.096 1.083.958 0 1.04-1.083 2.037-1.083.997 0 .889 1.083 1.872 1.083.983 0 1.019-1.083 1.998-1.083.978 0 .962 1.083 1.925 1.083.962 0 .918-1.083 1.95-1.083 1.033 0 1.072 1.083 2.039 1.083.967 0 .882-1.083 1.728-1.083s1.199 1.372 2.122 1.083c.923-.289.817-1.083 1.848-1.083 1.03 0 1.395.855 1.395.855.219.324.396.266.396-.124V81.685Z"/>
|
||||||
|
<path stroke="#72777D" stroke-width="1.082" d="M128.459 81.686v-.001l-.118-31.255a.177.177 0 0 0-.174-.174H89.316v5.335c0 .69-.56 1.252-1.25 1.252h-5.263v55.509c.332-.27.837-.546 1.501-.546.338 0 .618.067.86.196.234.124.399.29.52.42l.072.076c.2.216.31.337.571.41.093.025.11.007.123-.001.052-.031.114-.097.243-.259l.038-.049c.22-.281.621-.793 1.37-.793.736 0 1.139.426 1.395.698l.011.012c.269.284.37.372.584.372.197 0 .27-.068.513-.352l.003-.004c.112-.131.274-.321.499-.468a1.59 1.59 0 0 1 .899-.258c.754 0 1.176.423 1.45.702.294.296.393.38.588.38.176 0 .243-.061.506-.358.119-.135.288-.325.521-.472.248-.156.545-.252.912-.252.775 0 1.178.429 1.441.715.267.29.35.367.553.367.191 0 .263-.065.496-.346l.007-.009c.107-.128.264-.317.478-.464.237-.162.525-.263.884-.263.329 0 .602.07.839.197.227.123.392.284.515.409l.054.055c.218.223.353.361.645.439.102.028.151.012.198-.014.078-.042.165-.121.31-.277l.057-.063c.248-.271.682-.746 1.382-.746.719 0 1.119.428 1.369.695l.016.017c.267.286.368.37.568.37.11 0 .158-.027.197-.057.064-.049.119-.119.235-.271l.002-.004c.1-.131.251-.329.471-.483.24-.168.532-.267.895-.267.741 0 1.165.414 1.443.687l.009.008c.292.286.413.387.644.387.227 0 .341-.096.618-.379l.014-.014c.264-.27.674-.689 1.405-.689.36 0 .648.101.885.266.209.146.361.333.464.46l.012.014c.119.146.183.22.256.272.053.037.122.07.255.07.238 0 .349-.096.606-.371l.021-.021c.25-.268.647-.69 1.371-.69.736 0 1.12.435 1.359.707l.015.017c.243.276.335.358.551.358.213 0 .296-.078.543-.358l.005-.006c.114-.13.279-.317.503-.462.243-.158.536-.256.899-.256.755 0 1.163.424 1.428.701l.006.006c.271.282.377.375.605.375a.38.38 0 0 0 .244-.068c.067-.048.13-.121.235-.259a2.41 2.41 0 0 1 .033-.045c.188-.251.531-.71 1.216-.71.37 0 .662.153.882.316.172.129.335.292.461.419l.07.071c.325.322.423.34.547.301l.001-.001c.265-.083.379-.207.571-.417l.077-.084c.12-.129.282-.292.514-.414.239-.127.515-.191.847-.191.54 0 .953.181 1.25.401V81.686Z"/>
|
||||||
|
</g>
|
||||||
|
<path fill="#fff" stroke="#72777D" stroke-linecap="round" stroke-width="1.082" d="m129 81.685-.119-31.257a.713.713 0 0 0-.715-.713h-39.39v5.876a.71.71 0 0 1-.71.71h-5.804v56.775c0 .393.193.46.452.167 0 0 .543-.897 1.59-.897 1.048 0 .953.825 1.878 1.083.926.257.927-1.083 1.92-1.083.991 0 1.045 1.083 1.989 1.083.944 0 .882-1.083 1.914-1.083s1.132 1.083 2.038 1.083c.906 0 .878-1.083 1.939-1.083 1.06 0 1.056 1.083 1.994 1.083.939 0 .873-1.083 1.865-1.083s.954.826 1.913 1.083c.958.257 1.129-1.083 2.087-1.083.958 0 1.03 1.083 1.953 1.083.924 0 .775-1.083 1.8-1.083 1.024 0 1.139 1.083 2.096 1.083.958 0 1.04-1.083 2.037-1.083.997 0 .889 1.083 1.872 1.083.983 0 1.019-1.083 1.998-1.083.978 0 .962 1.083 1.925 1.083.962 0 .918-1.083 1.95-1.083 1.033 0 1.072 1.083 2.039 1.083.967 0 .882-1.083 1.728-1.083s1.199 1.372 2.122 1.083c.923-.289.817-1.083 1.848-1.083 1.03 0 1.395.855 1.395.855.219.324.396.266.396-.124V81.685v0Z"/>
|
||||||
|
<path fill="#C8CCD1" fill-rule="evenodd" stroke="#72777D" stroke-width="1.082" d="M88.416 56.479H82.68c-.027-.001-.037-.002-.066 0-.194 0-.356-.168-.356-.383 0-.13.059-.245.154-.315l.046-.04 5.71-5.919a.339.339 0 0 1 .381-.08.384.384 0 0 1 .224.355v6c0 .214-.162.382-.357.382Z" clip-rule="evenodd"/>
|
||||||
|
<g opacity=".35">
|
||||||
|
<path fill="#A2A9B1" d="M122.151 61.107c-1.786 0-3.234-1.435-3.234-3.204 0-1.77 1.448-3.204 3.234-3.204s3.234 1.434 3.234 3.204c0 1.77-1.448 3.204-3.234 3.204Z"/>
|
||||||
|
<path fill="#A2A9B1" fill-rule="evenodd" d="M97.949 62.175s-7.795 5.25-9.55 3.32c-1.753-1.933 0 2.803 0 2.803h15.392m24.829-3.276s-6.212 4.34-14.869 4.34-2.118 2.78-2.118 2.78h16.969" clip-rule="evenodd"/>
|
||||||
|
<path fill="#C8CCD1" fill-rule="evenodd" d="M127.634 72.184s-34.027-16.222-29.763-8.057c4.263 8.164-15.271-1.918-15.271-1.918v9.975" clip-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
<path fill="#F5F5F5" fill-rule="evenodd" d="M128.62 71.787H82.66v.712h45.96v-.712Z" clip-rule="evenodd"/>
|
||||||
|
<path fill="#A2A9B1" d="M99.07 78.55h25.277a.356.356 0 0 1 0 .712H99.071a.356.356 0 1 1 0-.712Zm-2.848 8.544h28.125a.356.356 0 0 1 0 .712H96.223a.356.356 0 1 1 0-.712Zm17.445 19.224h10.68a.357.357 0 0 1 0 .712h-10.68a.356.356 0 1 1 0-.712Zm-27.054 0h25.276a.357.357 0 0 1 0 .712H86.613a.356.356 0 1 1 0-.712Zm32.394-14.24h5.34a.356.356 0 0 1 0 .712h-5.34a.356.356 0 1 1 0-.712Zm-32.395 0h5.34a.356.356 0 0 1 0 .712h-5.34a.356.356 0 0 1 0-.712Zm7.12 0h23.496a.356.356 0 0 1 0 .712H93.732a.356.356 0 1 1 0-.712Zm25.275 11.748h5.34a.357.357 0 0 1 0 .712h-5.34a.356.356 0 1 1 0-.712Zm-32.754 0h12.46a.356.356 0 0 1 0 .712h-12.46a.356.356 0 1 1 0-.712Zm14.243 0h16.732a.357.357 0 0 1 0 .712h-16.732a.356.356 0 1 1 0-.712Zm-6.053-16.732H86.61a.356.356 0 0 0 0 .712h7.832a.356.356 0 1 0 0-.712Zm1.779 12.46h28.125a.356.356 0 0 1 0 .712H96.223a.356.356 0 1 1 0-.712Zm4.63-14.952h4.272a.356.356 0 0 1 0 .712h-4.272a.356.356 0 1 1 0-.712Zm-14.242 0h12.46a.356.356 0 0 1 0 .712H86.61a.356.356 0 1 1 0-.712Zm20.293 0h17.444a.356.356 0 0 1 0 .712h-17.444a.356.356 0 1 1 0-.712ZM86.61 97.062h37.737a.356.356 0 0 1 0 .712H86.611a.356.356 0 0 1 0-.712Zm0-2.492h37.737a.356.356 0 0 1 0 .712H86.611a.356.356 0 0 1 0-.712Zm0 14.24h37.737a.356.356 0 0 1 0 .712H86.611a.356.356 0 0 1 0-.712Zm0-19.224h37.737a.356.356 0 0 1 0 .712H86.611a.356.356 0 0 1 0-.712Zm20.291-13.528h17.444a.356.356 0 1 1 0 .712h-17.444a.356.356 0 0 1 0-.712Z"/>
|
||||||
|
<path stroke="#36C" stroke-linecap="round" stroke-width="1.071" d="M148 34v35m0 28v36"/>
|
||||||
|
<rect width="178.929" height="115.714" x="-.536" y=".536" stroke="#C8CCD1" stroke-width="1.071" rx="3.75" transform="matrix(-1 0 0 1 236.929 24)"/>
|
||||||
|
<path fill="#36C" fill-rule="evenodd" d="M149 91V75h2v16h-2Zm-4 0V75h2v16h-2Zm11-8-3-3v6l3-3Zm-16 0 3 3v-6l-3 3Z" clip-rule="evenodd"/>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_1709_33104" width="51.043" height="68.059" x="80.109" y="47.562" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||||
|
<feOffset/>
|
||||||
|
<feGaussianBlur stdDeviation="1.076"/>
|
||||||
|
<feColorMatrix values="0 0 0 0 0.961 0 0 0 0 0.961 0 0 0 0 0.961 0 0 0 1 0"/>
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1709_33104"/>
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_1709_33104" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -2,6 +2,7 @@ var ResizingDragBar = require( './ResizingDragBar.js' );
|
||||||
var TwoPaneLayout = require( './TwoPaneLayout.js' );
|
var TwoPaneLayout = require( './TwoPaneLayout.js' );
|
||||||
var ErrorLayout = require( './ErrorLayout.js' );
|
var ErrorLayout = require( './ErrorLayout.js' );
|
||||||
var ManualWidget = require( './ManualWidget.js' );
|
var ManualWidget = require( './ManualWidget.js' );
|
||||||
|
var OnboardingPopup = require( './OnboardingPopup.js' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class
|
* @class
|
||||||
|
|
@ -73,7 +74,7 @@ function RealtimePreview() {
|
||||||
/**
|
/**
|
||||||
* @public
|
* @public
|
||||||
* @param {Object} context The WikiEditor context.
|
* @param {Object} context The WikiEditor context.
|
||||||
* @return {OO.ui.ToggleButtonWidget}
|
* @return {jQuery}
|
||||||
*/
|
*/
|
||||||
RealtimePreview.prototype.getToolbarButton = function ( context ) {
|
RealtimePreview.prototype.getToolbarButton = function ( context ) {
|
||||||
this.context = context;
|
this.context = context;
|
||||||
|
|
@ -98,11 +99,15 @@ RealtimePreview.prototype.getToolbarButton = function ( context ) {
|
||||||
classes: [ 'tool', 'ext-WikiEditor-realtimepreview-button' ]
|
classes: [ 'tool', 'ext-WikiEditor-realtimepreview-button' ]
|
||||||
} );
|
} );
|
||||||
this.button.connect( this, { change: [ this.toggle, true ] } );
|
this.button.connect( this, { change: [ this.toggle, true ] } );
|
||||||
|
|
||||||
if ( !this.isScreenWideEnough() ) {
|
if ( !this.isScreenWideEnough() ) {
|
||||||
this.button.toggle( false );
|
this.button.toggle( false );
|
||||||
}
|
}
|
||||||
return this.button;
|
|
||||||
|
// Add the onboarding popup.
|
||||||
|
var onboardingPopup = new OnboardingPopup();
|
||||||
|
this.button.connect( onboardingPopup, { change: onboardingPopup.onPreviewButtonClick } );
|
||||||
|
|
||||||
|
return $( '<div>' ).append( this.button.$element, onboardingPopup.$element );
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ mw.hook( 'wikiEditor.toolbarReady' ).add( function ( $textarea ) {
|
||||||
realtimepreview: {
|
realtimepreview: {
|
||||||
type: 'element',
|
type: 'element',
|
||||||
element: function ( context ) {
|
element: function ( context ) {
|
||||||
return realtimePreview.getToolbarButton( context ).$element;
|
return realtimePreview.getToolbarButton( context );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue