Matmarex has uploaded a new change for review.
https://gerrit.wikimedia.org/r/69984
Change subject: Show "edit source" section edit links in addition to VE ones
......................................................................
Show "edit source" section edit links in addition to VE ones
Per Trevor Parscal's mockup. Previous attempt: I13bbb9549.
Initially, only a small down-arrow is shown to the right (in LTR
environments) of the "edit" link (within brackets). On hover (or
focus) a small box encompassing the "edit" link is faded in, showing
the "edit source" link below, hiding the brackets.
Animation implemented using CSS transitions. The arrow image was
copied from MediaWiki core.
A workaround was used to be able to style the brackets; change
Id27555c6 in core will render it unnecessary.
Bug: 48429
Change-Id: I4b9c47fd65a700a81c880144247fec524edff7e5
---
M VisualEditor.i18n.php
M VisualEditor.php
A modules/ve/init/mw/styles/images/arrow-expanded.png
M modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
M modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
5 files changed, 89 insertions(+), 11 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/84/69984/1
diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php
index 645af1c..ca4dcb0 100644
--- a/VisualEditor.i18n.php
+++ b/VisualEditor.i18n.php
@@ -22,6 +22,7 @@
'visualeditor-browserwarning' => 'You are using a browser which is not
officially supported by VisualEditor.',
'visualeditor-ca-createsource' => 'Create source',
'visualeditor-ca-editsource' => 'Edit source',
+ 'visualeditor-ca-editsource-section' => 'edit source',
'visualeditor-ca-ve-create' => 'VisualEditor',
'visualeditor-ca-ve-edit' => 'VisualEditor',
'visualeditor-clearbutton-tooltip' => 'Clear formatting',
@@ -173,6 +174,8 @@
'visualeditor-ca-editsource' => 'Text for the "Edit source" tab, if the
page exists.
If the page doesn\'t exist, the following link text is used:
{{msg-mw|Visualeditor-ca-createsource}}',
+ 'visualeditor-ca-editsource-section' => 'Text for "edit source" mode of
section edit links.
+Corresponds to the {{msg-mw|editsection}} message for default mode.',
'visualeditor-ca-ve-create' => 'Link text of the dedicated VisualEditor
"Create" tab.',
'visualeditor-ca-ve-edit' => 'Link text of the dedicated VisualEditor
"Edit" tab.',
'visualeditor-clearbutton-tooltip' => 'Tooltip text for the clear
formatting button',
diff --git a/VisualEditor.php b/VisualEditor.php
index 8124bd7..263c62c 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -165,6 +165,7 @@
'tooltip-ca-ve-edit',
'visualeditor-ca-createsource',
'visualeditor-ca-editsource',
+ 'visualeditor-ca-editsource-section',
'visualeditor-ca-ve-create',
'visualeditor-ca-ve-edit',
'visualeditor-loadwarning',
diff --git a/modules/ve/init/mw/styles/images/arrow-expanded.png
b/modules/ve/init/mw/styles/images/arrow-expanded.png
new file mode 100644
index 0000000..fa4bf26
--- /dev/null
+++ b/modules/ve/init/mw/styles/images/arrow-expanded.png
Binary files differ
diff --git a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
index badffaa..81bcd17 100644
--- a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
+++ b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
@@ -315,3 +315,59 @@
/* @embed */
background-image: url(images/loading.gif);
}
+
+/* Section edit links */
+
+/* Show expand arrow and hide all links but the first one */
+.mw-editsection:not(:hover):not(:focus) .mw-editsection-container {
+ padding-right: 18px;
+ /* @embed */
+ background: url(images/arrow-expanded.png) right center no-repeat;
+}
+.mw-editsection:not(:hover):not(:focus) a:not(:first-of-type) {
+ /* Using a non-orthodox hiding method to ensure opacity transition
occurs */
+ /* (Simply using display: none / block voids it)
*/
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+}
+
+.mw-editsection:hover .mw-editsection-container,
+.mw-editsection:focus .mw-editsection-container {
+ position: absolute;
+ outline: 1px solid #CACCCB;
+ background: white;
+ box-shadow: 2px 2px 4px rgba(0,0,0,.3);
+ /* Negate margin of .mw-editsection a (below) */
+ margin-left: -0.5em;
+ margin-top: -0.5em;
+ /* Only transition when hovering in, hover-out outline transition
behaves funnily */
+ transition: outline, background-color, box-shadow;
+ transition-duration: 400ms;
+}
+
+.mw-editsection:hover a,
+.mw-editsection:focus a {
+ display: block;
+ margin: 0.5em;
+ opacity: 1;
+ transition: opacity 400ms;
+}
+
+/* Some meaningless base styles to make the transition look good */
+.mw-editsection-container {
+ display: inline-block;
+ outline: 1px solid transparent;
+}
+
+/* Handle the brackets. The first one has to keep its space occupied, */
+/* the second has to disappear completely */
+.mw-editsection:hover .mw-editsection-brackets:first-of-type,
+.mw-editsection:focus .mw-editsection-brackets:first-of-type {
+ visibility: hidden;
+}
+
+.mw-editsection:hover .mw-editsection-brackets:last-of-type,
+.mw-editsection:focus .mw-editsection-brackets:last-of-type {
+ display: none;
+}
diff --git a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
index 174b343..663dbce 100644
--- a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
@@ -1051,18 +1051,36 @@
* @method
*/
ve.init.mw.ViewPageTarget.prototype.setupSectionEditLinks = function () {
- var veEditUri = this.veEditUri,
- $links = $( '#mw-content-text .mw-editsection a' );
- if ( this.isViewPage ) {
- $links.click( ve.bind( this.onEditSectionLinkClick, this ) );
- } else {
- $links.each( function () {
- var veSectionEditUri = new mw.Uri( veEditUri.toString()
),
- sectionEditUri = new mw.Uri( $(this).attr(
'href' ) );
+ var that = this,
+ veEditUri = this.veEditUri,
+ $editsections = $( '#mw-content-text .mw-editsection' ),
+ handler = ve.bind( this.onEditSectionLinkClick, this );
+
+ $editsections.each( function () {
+ var $edit, $editSource,
+ veSectionEditUri = new mw.Uri( veEditUri.toString() ),
+ sectionEditUri = new mw.Uri( $(this).attr( 'href' ) );
+
+ $edit = $( this ).find( 'a' ).eq( 0 );
+ $editSource = $edit
+ .clone( true )
+ .text( mw.msg( 'visualeditor-ca-editsource-section' ) );
+
+ if ( that.isViewPage ) {
+ $edit.click( handler );
+ } else {
veSectionEditUri.extend( { 'vesection':
sectionEditUri.query.section } );
- $(this).attr( 'href', veSectionEditUri );
- } );
- }
+ $edit.attr( 'href', veSectionEditUri );
+ }
+
+ $( this ).wrapInner( $( '<span>' ).addClass(
'mw-editsection-container' ) );
+ $edit.after( ' ', $editSource );
+
+ // Wrap the [ ] brackets in <span>s to be able to style them
+ // Workaround, can be removed when Id27555c6 in core is merged
+ $( this.firstChild ).wrap( $( '<span>' ).addClass(
'mw-editsection-bracket' ) );
+ $( this.lastChild ).wrap( $( '<span>' ).addClass(
'mw-editsection-bracket' ) );
+ } );
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/69984
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4b9c47fd65a700a81c880144247fec524edff7e5
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Matmarex <matma....@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
