Use upstream OOUI icons for WikiEditor toolbar

Also uses upstream tool-active styling, which was
based on cm-on.svg.

Depends-On: I3e6f65f6f290778d3fbfa22f5d212c26fee12a86
Change-Id: Ib42be9f8b87efe1387eb5c77698fd2f0af0a673d
This commit is contained in:
Ed Sanders 2018-03-22 14:52:27 +00:00
parent 0e4bb8feb6
commit 6d92dd818d
9 changed files with 18 additions and 57 deletions

View file

@ -34,7 +34,8 @@
"user.options",
"oojs-ui-widgets",
"mediawiki.storage",
"jquery.ui.resizable"
"jquery.ui.resizable",
"oojs-ui.styles.icons-editing-styling"
],
"scripts": [
"ext.CodeMirror.js"

View file

@ -94,7 +94,7 @@
* @param {boolean} prefValue True, if CodeMirror should be enabled by default, otherwise false.
*/
function setCodeEditorPreference( prefValue ) {
useCodeMirror = prefValue; // Save state for function updateToolbarIcon()
useCodeMirror = prefValue; // Save state for function updateToolbarButton()
if ( mw.user.isAnon() ) { // Skip it for anon users
return;
@ -182,9 +182,13 @@
* Updates CodeMirror button on the toolbar according to the current state (on/off)
*/
function updateToolbarButton() {
$( '#mw-editbutton-codemirror' )
.toggleClass( 'mw-editbutton-codemirror-on', !!useCodeMirror )
.toggleClass( 'mw-editbutton-codemirror-off', !useCodeMirror );
var $button = $( '#mw-editbutton-codemirror' );
$button
// Classic toolbar
.toggleClass( 'mw-editbutton-codemirror-active', !!useCodeMirror )
// WikiEditor toolbar
.data( 'setActive' )( !!useCodeMirror );
}
/**
@ -240,6 +244,7 @@
CodeMirror: {
label: mw.msg( 'codemirror-toggle-label' ),
type: 'button',
oouiIcon: 'highlight',
action: {
type: 'callback',
execute: function () {
@ -253,7 +258,7 @@
}
);
$codeMirrorButton = $( '#wpTextbox1' ).data( 'wikiEditor-context' ).modules.toolbar.$toolbar.find( 'a.tool[rel=CodeMirror]' );
$codeMirrorButton = $( '#wpTextbox1' ).data( 'wikiEditor-context' ).modules.toolbar.$toolbar.find( '.tool[rel=CodeMirror]' );
$codeMirrorButton.attr( 'id', 'mw-editbutton-codemirror' );
updateToolbarButton();

View file

@ -18,28 +18,18 @@
padding: 0;
}
.mw-editbutton-codemirror-on {
// WikiEditor toolbar
&.tool-button {
.background-image-svg( 'images/cm-on.svg', 'images/cm-on.png' );
}
// Classic toolbar
&.mw-toolbar-editbutton {
.background-image-svg( 'images/old-cm-off.svg', 'images/old-cm-off.png' );
}
.mw-editbutton-codemirror-active {
// Classic toolbar
&.mw-toolbar-editbutton {
.background-image-svg( 'images/old-cm-on.svg', 'images/old-cm-on.png' );
}
}
.mw-editbutton-codemirror-off {
// WikiEditor toolbar
&.tool-button {
.background-image-svg( 'images/cm-off.svg', 'images/cm-off.png' );
}
// Classic toolbar
&.mw-toolbar-editbutton {
.background-image-svg( 'images/old-cm-off.svg', 'images/old-cm-off.png' );
}
}
.wikiEditor-ui-toolbar,
.oo-ui-popupWidget.ve-init-mw-switchPopupWidget {
// Increase z-index to above scrollbar

Binary file not shown.

Before

Width:  |  Height:  |  Size: 477 B

View file

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"
viewBox="0 0 24 24">
<g fill="#333" transform="translate(2.2,1.8)">
<path id="a"
d="M 18.29 6.29 14.71 2.71 a 1 1 0 0 0 -1.41 0 L 3.71 12.29 a 1 1 0 0 0 0 1.41 L 4 14 1 18 H 6
l 1 -1 .29 .29 a 1 1 0 0 0 1.41 0 l 9.59 -9.59 A 1 1 0 0 0 18.29 6.29 Z M 7 15 5 13 l 9 -9 2 2 Z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 498 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 465 B

View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1" width="22" height="22">
<g fill="#333" transform="translate(2.2,1.8)">
<path id="a"
d="M 18.29 6.29 14.71 2.71 a 1 1 0 0 0 -1.41 0 L 3.71 12.29 a 1 1 0 0 0 0 1.41 L 4 14 1 18 H 6
l 1 -1 .29 .29 a 1 1 0 0 0 1.41 0 l 9.59 -9.59 A 1 1 0 0 0 18.29 6.29 Z M 7 15 5 13 l 9 -9 2 2 Z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 484 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 680 B

View file

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="22" width="22" version="1">
<defs>
<clipPath id="a">
<path transform="scale(-1)" opacity=".546" fill="none" stroke-width="1.417" d="M0 0h22v22H0z"/>
</clipPath>
</defs>
<image clip-path="url(#a)" transform="scale(-1)" width="45.28" height="33" preserveAspectRatio="none"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAhCAIAAACX21boAAAAOklEQVR4AUxMhRVAQQjy3f4L/zjs bgXOBQ4RdTJnt52jx50bg8Rcbm7ne3ntqeE6nFzuO7TLvr5+CgCX2x/ak7EiEwAAAABJRU5ErkJg gg=="
x="-32.428" y="-27.5" fill="none" image-rendering="optimizeSpeed"/>
<g fill="#36c" transform="translate(2.2,1.8)">
<path id="b"
d="M 18.29 6.29 14.71 2.71 a 1 1 0 0 0 -1.41 0 L 3.71 12.29 a 1 1 0 0 0 0 1.41 L 4 14 1 18 H 6
l 1 -1 .29 .29 a 1 1 0 0 0 1.41 0 l 9.59 -9.59 A 1 1 0 0 0 18.29 6.29 Z M 7 15 5 13 l 9 -9 2 2 Z"/>
</g>
<path fill="none" stroke="#dae5ec" d="M.5.5h21v21H.5z"/>
<path fill="none" stroke="#eef2f6" d="M.976 1.024h20v20h-20z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB