Esanders has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/366568 )
Change subject: Popup: Use built-in features of PopupWidget instead of custom
CSS
......................................................................
Popup: Use built-in features of PopupWidget instead of custom CSS
* Use OOUI buttons for the actions.
* Make the widget wider to accommodate longer titles in
different languages.
* Don't show if CM already enabled
Change-Id: Ibde461a99929565c15b5e7c5ef3ad88e163fba05
---
M resources/ext.CodeMirror.js
M resources/modules/popup.less
2 files changed, 73 insertions(+), 61 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CodeMirror
refs/changes/68/366568/1
diff --git a/resources/ext.CodeMirror.js b/resources/ext.CodeMirror.js
index cf13bef..515ce10 100644
--- a/resources/ext.CodeMirror.js
+++ b/resources/ext.CodeMirror.js
@@ -388,56 +388,72 @@
/**
* Add a popup for first time users (T165003)
+ *
+ * If popup hasn't been shown before, show popup and add a localStorage
entry.
+ * check it before showing popup in future.
*/
- function addPopup() {
- var $content =
+ /**
+ */
+ function handlePopup() {
+ var yesButton, noButton, $title, $content, popup;
+
+ // If popup has previously been dismissed, don't show again.
+ if ( mw.storage.get( 'codemirror-try-popup' ) ) {
+ return;
+ }
+ mw.storage.set( 'codemirror-try-popup', 1 );
+
+ yesButton = new OO.ui.ButtonWidget( {
+ label: mw.msg( 'codemirror-popup-btn-yes' ),
+ flags: [ 'primary', 'progressive' ]
+ } );
+ noButton = new OO.ui.ButtonWidget( {
+ label: mw.msg( 'codemirror-popup-btn-no' ),
+ flags: [ 'destructive' ]
+ } );
+ $title =
+ $( '<span>' ).append(
+ '{ ',
+ $( '<span>' ).addClass(
'codemirror-popup-color-blue' ).text( mw.msg( 'codemirror-popup-syntax' ) ),
+ ' ',
+ document.createTextNode( mw.msg(
'codemirror-popup-highlighting' ) ),
+ ' }'
+ );
+ $content =
$( '<div>' ).addClass( 'codemirror-popup-div' ).append(
- $( '<div>' ).addClass( 'codemirror-popup-top'
).append(
- '{ ',
- $( '<span>' ).addClass(
'codemirror-popup-color-blue' ).text( mw.msg( 'codemirror-popup-syntax' ) ),
- ' ',
- document.createTextNode( mw.msg(
'codemirror-popup-highlighting' ) ),
- ' }'
- ),
$( '<div>' ).addClass( 'codemirror-popup-text'
).text( mw.msg( 'codemirror-popup-desc' ) ),
- $( '<div>' ).addClass( 'codemirror-popup-btn
codemirror-popup-btn-yes' ).text( mw.msg( 'codemirror-popup-btn-yes' ) ),
- $( '<div>' ).addClass( 'codemirror-popup-btn
codemirror-popup-btn-no' ).text( mw.msg( 'codemirror-popup-btn-no' ) )
+ yesButton.$element,
+ noButton.$element
);
popup = new OO.ui.PopupWidget( {
+ head: true,
+ label: $title,
+ classes: [ 'codemirror-popup' ],
$content: $content,
- containerPadding: 80,
$floatableContainer: $( '#mw-editbutton-codemirror' ),
- padded: false,
- width: 215
+ padded: true,
+ width: 300
} );
// Add our popup to the body, it will find its correct position
using $floatableContainer
$( 'body' ).append( popup.$element );
+ // Events
+ yesButton.on( 'click', function () {
+ if ( !codeMirror ) {
+ switchCodeMirror();
+ }
+ popup.toggle( false );
+ } );
+ noButton.on( 'click', function () {
+ if ( codeMirror ) {
+ switchCodeMirror();
+ }
+ popup.toggle( false );
+ } );
+
// To display the popup, toggle the visibility to 'true'
popup.toggle( true );
- }
-
- /**
- * Handle popup. If popup hasn't been shown before, show popup and add
a localStorage entry.
- * check it before showing popup in future.
- */
- function handlePopup() {
- popupStatus = mw.storage.get( 'codemirror-try-popup' );
- // If popup entry isn't in local storage, lets show them the
popup
- if ( !popupStatus ) {
- mw.storage.set( 'codemirror-try-popup', 1 );
- addPopup();
- $( '.codemirror-popup-btn-yes' ).click( function () {
- $( enableCodeMirror );
- $( setCodeEditorPreference( true ) );
- $( updateToolbarButton );
- popup.toggle( false );
- } );
- $( '.codemirror-popup-btn-no' ).click( function () {
- popup.toggle( false );
- } );
- }
}
// If view is in edit mode, add the button to the toolbar.
@@ -468,10 +484,14 @@
} );
} );
}
- // Wait for DOM before loading our popup
- $( function () {
- window.setTimeout( function () { handlePopup(); }, 500
);
- } );
+
+ // Don't show popup if CM already enabled
+ if ( !useCodeMirror ) {
+ // Wait for DOM before loading our popup
+ $( function () {
+ window.setTimeout( function () { handlePopup();
}, 500 );
+ } );
+ }
}
// enable CodeMirror
diff --git a/resources/modules/popup.less b/resources/modules/popup.less
index 2cd15ed..1b0ced5 100644
--- a/resources/modules/popup.less
+++ b/resources/modules/popup.less
@@ -1,31 +1,23 @@
-.codemirror-popup-div {
- padding: 14px;
+.codemirror-popup {
text-align: center;
- font-size: 14px;
+ font-size: 12.8px;
- .codemirror-popup-top {
- font-size: 16px;
- font-weight: bolder;
- margin-bottom: 10px;
+ .oo-ui-popupWidget-head {
+ font-weight: bold;
+ float: none;
+ display: inline-block;
+
+ > .oo-ui-labelElement-label {
+ font-size: 14px;
+ margin-left: 2.5em;
+ }
}
.codemirror-popup-color-blue {
color: #1e90ff;
}
- .codemirror-popup-btn {
- font-weight: bolder;
- margin-top: 5px;
- cursor: pointer;
-
- &-yes {
- background-color: #4169e1;
- color: #fff;
- border-radius: 5px;
- width: 80px;
- margin: auto;
- margin-top: 5px;
- padding: 5px;
- }
+ .codemirror-popup-text {
+ margin-bottom: 1em;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/366568
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ibde461a99929565c15b5e7c5ef3ad88e163fba05
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/CodeMirror
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
