jenkins-bot has submitted this change and it was merged.
Change subject: Create the editor switcher buttons using oojs-ui
......................................................................
Create the editor switcher buttons using oojs-ui
Bug: T87051
Change-Id: I837297df3db23d24991f58897f83b53774bc3de7
---
M includes/Resources.php
M javascripts/modules/editor/EditorOverlay.js
M javascripts/modules/editor/EditorOverlayBase.js
M javascripts/modules/editor/VisualEditorOverlay.js
M less/modules/editor/editor.less
M less/modules/editor/images/editToggle.svg
6 files changed, 176 insertions(+), 115 deletions(-)
Approvals:
Florianschmidtwelzow: Looks good to me, but someone else must approve
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index c7ebcee..8568b36 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -431,6 +431,7 @@
'mobile.editor.common' => $wgMFResourceParsedMessageModuleBoilerplate +
array(
'dependencies' => array(
+ 'oojs-ui',
'mobile.stable',
'mobile.templates',
'mobile.editor.api',
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index 1dd5248..6570307 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -81,12 +81,8 @@
options.isVisualEditor = false;
options.previewingMsg = mw.msg(
'mobile-frontend-editor-previewing-page', options.title );
EditorOverlayBase.prototype.initialize.apply( this,
arguments );
- if ( this.isVisualEditorEnabled() ) {
- this.initializeSwitcher();
- }
},
events: $.extend( {}, EditorOverlayBase.prototype.events, {
- 'click .visual-editor': 'onClickVisualEditor',
'input .wikitext-editor': 'onInputWikitextEditor'
} ),
/**
@@ -114,24 +110,29 @@
EditorOverlayBase.prototype.onClickBack.apply( this,
arguments );
this._hidePreview();
},
- /**
- * Visual editor click handler
- */
- onClickVisualEditor: function () {
- // If the user tries to switch to the VisualEditor,
check if any changes have
- // been made, and if so, tell the user they have to
save first.
- if ( this.isVisualEditorEnabled() ) {
- if ( !this.api.hasChanged ) {
- this._switchToVisualEditor(
this.options );
- } else {
- if ( window.confirm( mw.msg(
'mobile-frontend-editor-switch-confirm' ) ) ) {
- this.onStageChanges();
- }
- }
- }
- },
/** @inheritdoc **/
postRender: function ( options ) {
+ var self = this;
+
+ if ( this.isVisualEditorEnabled() ) {
+ this.initializeSwitcher();
+
this.switcherToolbar.tools.editSource.setActive( true );
+ /**
+ * 'Edit' button handler
+ */
+ this.switcherToolbar.tools.editVe.onSelect =
function () {
+ // If the user tries to switch to the
VisualEditor, check if any changes have
+ // been made, and if so, tell the user
they have to save first.
+ if ( !self.api.hasChanged ) {
+ self._switchToVisualEditor(
self.options );
+ } else {
+ if ( window.confirm( mw.msg(
'mobile-frontend-editor-switch-confirm' ) ) ) {
+ self.onStageChanges();
+ }
+ }
+ };
+ }
+
EditorOverlayBase.prototype.postRender.apply( this,
arguments );
this.$preview = this.$( '.preview' );
diff --git a/javascripts/modules/editor/EditorOverlayBase.js
b/javascripts/modules/editor/EditorOverlayBase.js
index 4f83f20..5d00f30 100644
--- a/javascripts/modules/editor/EditorOverlayBase.js
+++ b/javascripts/modules/editor/EditorOverlayBase.js
@@ -291,23 +291,71 @@
* @method
*/
initializeSwitcher: function () {
- this.$( '.editor-switcher' ).on( 'click', function ( ev
) {
- var $self = $( this );
- ev.preventDefault();
- // Prevent double toggling
- ev.stopPropagation();
- // Exit early if switcher is disabled
- if ( $self.hasClass( 'disabled' ) ) {
- return false;
+ var toolFactory = new OO.ui.ToolFactory(),
+ toolGroupFactory = new OO.ui.ToolGroupFactory(),
+ toolbar;
+
+ /**
+ * 'Edit' button
+ * @param {OO.ui.ToolGroup} toolGroup
+ * @param {Object} config
+ * @constructor
+ */
+ function EditVeTool( toolGroup, config ) {
+ EditVeTool.super.call( this, toolGroup, config
);
+ }
+ OO.inheritClass( EditVeTool, OO.ui.Tool );
+
+ EditVeTool.static.name = 'editVe';
+ EditVeTool.static.icon = 'edit-ve';
+ EditVeTool.static.group = 'editorSwitcher';
+ EditVeTool.static.title = mw.msg(
'mobile-frontend-editor-visual-editor' );
+ /**
+ * click handler
+ */
+ EditVeTool.prototype.onSelect = function () {
+ // will be overridden later
+ };
+
+ /**
+ * 'Edit source' button
+ * @param {OO.ui.ToolGroup} toolGroup
+ * @param {Object} config
+ * @constructor
+ */
+ function EditSourceTool( toolGroup, config ) {
+ EditSourceTool.super.call( this, toolGroup,
config );
+ }
+
+ OO.inheritClass( EditSourceTool, OO.ui.Tool );
+
+ EditSourceTool.static.name = 'editSource';
+ EditSourceTool.static.icon = 'edit-source';
+ EditSourceTool.static.group = 'editorSwitcher';
+ EditSourceTool.static.title = mw.msg(
'mobile-frontend-editor-source-editor' );
+ /**
+ * click handler
+ */
+ EditSourceTool.prototype.onSelect = function () {
+ // will be overridden later
+ };
+
+ toolbar = new OO.ui.Toolbar( toolFactory,
toolGroupFactory );
+ toolFactory.register( EditVeTool );
+ toolFactory.register( EditSourceTool );
+
+ toolbar.setup( [
+ {
+ icon: 'editor-switcher',
+ type: 'list',
+ include: [ {
+ group: 'editorSwitcher'
+ } ]
}
- $self.toggleClass( 'selected' );
- $( '.switcher-drop-down' ).toggle();
- // If you click outside the drop-down, hide the
drop-down
- $( document ).one( 'click', function () {
- $( '.switcher-drop-down' ).hide();
- $self.removeClass( 'selected' );
- } );
- } );
+ ] );
+
+ this.$el.find( '.switcher-container' ).html(
toolbar.$element );
+ this.switcherToolbar = toolbar;
},
/**
* Allow prompts user to confirm before closing and losing edit.
diff --git a/javascripts/modules/editor/VisualEditorOverlay.js
b/javascripts/modules/editor/VisualEditorOverlay.js
index 58be999..cc1a155 100644
--- a/javascripts/modules/editor/VisualEditorOverlay.js
+++ b/javascripts/modules/editor/VisualEditorOverlay.js
@@ -17,9 +17,6 @@
/** @inheritdoc **/
className: 'overlay editor-overlay editor-overlay-ve',
editor: 'VisualEditor',
- events: $.extend( {}, EditorOverlayBase.prototype.events, {
- 'click .source-editor': 'onClickSourceEditor'
- } ),
/**
* Set options that apply specifically to VisualEditorOverlay
but not
* EditorOverlay so that an EditorOverlay instance can be
created effortlessly.
@@ -48,7 +45,6 @@
skipPreview: false
} );
this.$continueBtn = self.$( '.continue' ).prop(
'disabled', true );
- this.initializeSwitcher();
// FIXME: This should be done by manipulating className
this.$el.removeClass( 'view-border-box' );
},
@@ -109,6 +105,24 @@
},
/** @inheritdoc **/
postRender: function () {
+ var self = this;
+
+ this.initializeSwitcher();
+ this.switcherToolbar.tools.editVe.setActive( true );
+ /**
+ * 'Edit source' button handler
+ */
+ this.switcherToolbar.tools.editSource.onSelect =
function () {
+ // If changes have been made tell the user they
have to save first
+ if ( !self.hasChanged() ) {
+ self.switchToSourceEditor( self.options
);
+ } else {
+ if ( window.confirm( mw.msg(
'mobile-frontend-editor-switch-confirm' ) ) ) {
+ self.onStageChanges();
+ }
+ }
+ };
+
this.$( '.surface' ).hide();
EditorOverlayBase.prototype.postRender.apply( this,
arguments );
},
@@ -118,19 +132,6 @@
onClickBack: function () {
EditorOverlayBase.prototype.onClickBack.apply( this,
arguments );
this.switchToEditor();
- },
- /**
- * Source Editor click handler
- */
- onClickSourceEditor: function () {
- // If changes have been made tell the user they have to
save first
- if ( !this.hasChanged() ) {
- this.switchToSourceEditor( this.options );
- } else {
- if ( window.confirm( mw.msg(
'mobile-frontend-editor-switch-confirm' ) ) ) {
- this.onStageChanges();
- }
- }
},
/**
* Reveal the editing interface.
diff --git a/less/modules/editor/editor.less b/less/modules/editor/editor.less
index b674cb4..1c84ccf 100644
--- a/less/modules/editor/editor.less
+++ b/less/modules/editor/editor.less
@@ -45,71 +45,17 @@
}
.overlay-header {
- .switcher-container {
- // Have to set an explicit width since we're using
display:table-cell
- width: @headerHeight;
- vertical-align: middle;
- position: relative;
+ .oo-ui-toolbar-bar {
+ border-bottom: none;
}
-
- .icon.editor-switcher {
- margin: 0;
+ .oo-ui-icon-editor-switcher {
.background-image( 'images/editToggle.svg' );
- background-size: 44px 32px;
- margin-right: 1em;
}
-
- .icon.editor-switcher:focus {
- outline: none;
+ .oo-ui-icon-edit-source {
+ .background-image( 'images/editSourceNormal.svg' );
}
-
- .switcher-drop-down {
- display: none;
- position: absolute;
- top: @headerHeight;
- right: -1px;
- // Needs to float above any elements in the toolbar
- z-index: @z-indexContent;
- box-shadow: 0 .1em .2em rgba(0, 0, 0, .2);
- border: 1px solid @grayLight;
- white-space: nowrap;
-
- // FIXME: change class when mediawiki.ui has proper
tabs/toggle buttons
- > .mw-ui-button {
- display: block;
- border: none;
- border-radius: 0;
- text-align: left;
-
- // FIXME: Remove when mw-ui-icon in stable
- .icon {
- padding-left: 3.35em;
- vertical-align: middle;
- }
-
- &.selected {
- background: @selectedBackgroundColor;
- }
-
- // FIXME: Remove when mw-ui-icon in stable
- &:not(.mw-ui-icon) {
- padding: 0 1.5em 0 .5em;
- }
- }
-
- > div {
- line-height: 3.35em;
-
- &:last-child {
- border-right: none;
- }
- }
-
- // FIXME: Move to rule (> div) when mw-ui-icon in stable
- .mw-ui-icon {
- height: 3.35em;
- padding-right: 3.35em;
- }
+ .oo-ui-icon-edit-ve {
+ .background-image( 'images/editVeNormal.svg' );
}
}
}
diff --git a/less/modules/editor/images/editToggle.svg
b/less/modules/editor/images/editToggle.svg
index 69de380..5ba65cf 100644
--- a/less/modules/editor/images/editToggle.svg
+++ b/less/modules/editor/images/editToggle.svg
@@ -1 +1,65 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg";
width="850" height="606.667" viewBox="2.5 791.5 850.00001 606.667"
enable-background="new 2.5 791.5 606.667 606.667"><path d="M513.5
1135.041v-76.082l-46.687-7.782c-3.46-12.536-8.646-24.64-14.699-35.447l27.235-38.474-53.604-54.037-38.475
27.235c-11.238-6.053-22.911-11.24-35.447-14.699l-7.782-46.255h-76.082l-7.782
46.688c-12.536 3.458-24.64 8.646-35.447 14.698l-38.474-27.234-54.037 53.604
27.235 38.474c-6.053 11.239-11.24 22.911-14.699 35.88l-46.255
7.35v76.082l46.255 7.782c3.458 12.536 8.646 24.64 14.699 35.88l-27.235 38.474
53.604 53.605 38.474-27.235c11.24 6.052 22.911 11.239 35.88 14.697l7.782
46.256h76.082l7.782-46.687c12.536-3.46 24.64-8.646 35.447-14.699l38.475 27.235
53.604-53.604-27.235-38.475c6.053-11.238 11.239-22.911
14.699-35.88l46.687-7.35zm-207.5 41.5c-44.094 0-79.541-35.879-79.541-79.541
0-44.094 35.879-79.541 79.541-79.541s79.541 35.447 79.541 79.541c0
44.095-35.446 79.541-79.541 79.541z" fill="#555"/><path fill-rule="evenodd"
d="M670.97 1157.195l67.144-114.595h-134.307z" fill="#414141"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="24"
+ height="15.571919"
+ viewBox="2.5 791.5 24 15.571919"
+ enable-background="new 2.5 791.5 606.667 606.667"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="editToggle.svg">
+ <metadata
+ id="metadata12">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs10" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1280"
+ inkscape:window-height="751"
+ id="namedview8"
+ showgrid="false"
+ inkscape:zoom="12.348235"
+ inkscape:cx="11.892736"
+ inkscape:cy="4.9315231"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
+ <path
+ d="m 18.071889,800.71332 v -2.85478 l -1.751816,-0.292 c
-0.129831,-0.47038 -0.324422,-0.92456 -0.551545,-1.33006 l 1.021928,-1.44365
-2.011362,-2.02761 -1.443686,1.02193 c -0.421675,-0.22712 -0.85968,-0.42175
-1.330064,-0.55155 L 11.713345,791.5 H 8.8585505 l -0.292006,1.75185 c
-0.470383,0.12975 -0.924557,0.32442 -1.330064,0.55151 l -1.443641,-1.02189
-2.027614,2.01136 1.021927,1.44365 c -0.227123,0.42172 -0.421752,0.85968
-0.551544,1.34631 L 2.5,797.85858 v 2.85481 l 1.7356085,0.29197 c
0.129753,0.4704 0.324421,0.92458 0.551544,1.34632 l -1.021927,1.44365
2.011361,2.01138 1.443648,-1.02191 c 0.421753,0.22709 0.859681,0.42174
1.34631,0.5515 l 0.292006,1.73562 h 2.8547945 l 0.291999,-1.75184 c
0.470383,-0.12983 0.924558,-0.32441 1.330064,-0.5515 l 1.443686,1.0219
2.011362,-2.01137 -1.021928,-1.44365 c 0.227123,-0.42167 0.421714,-0.8597
0.551545,-1.34632 l 1.751816,-0.27582 z m -7.785945,1.55719 c -1.6545235,0
-2.9845865,-1.34625 -2.9845865,-2.98457 0,-1.65452 1.346278,-2.98459
2.9845865,-2.98459 1.638316,0 2.984587,1.33007 2.984587,2.98459 0,1.65454
-1.330024,2.98457 -2.984587,2.98457 z"
+ id="path4"
+ inkscape:connector-curvature="0"
+ style="fill:#555555" />
+ <path
+ d="M 23.980579,801.5446 26.5,797.24471 h -5.039556 z"
+ id="path6"
+ inkscape:connector-curvature="0"
+ style="fill:#414141;fill-rule:evenodd" />
+</svg>
--
To view, visit https://gerrit.wikimedia.org/r/188695
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I837297df3db23d24991f58897f83b53774bc3de7
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
