jenkins-bot has submitted this change and it was merged. Change subject: Show "edit source" section edit links in addition to VE ones ......................................................................
Show "edit source" section edit links in addition to VE ones Objective: * Provide quick access to section edit links for both source and visual editing Story: After using this prototype of my mockup, I realized how bad my mockup was. Hooray for prototyping! The issues were twofold: 1. Adding down-arrows to the edit links made the page look worse, and was sure to incite rage and panic throughout the community. 2. The menu was just too heavy. Matmarex made an observation early on after seeing it, that it wasn't very "Vector", and while I agreed, at the time I didn't have any better ideas. Thank you to Matma Rex for prototyping this feature. Aparently there was also a previous attempt (I13bbb9549). We appreciate your help. The new design is simple. * Section edit links look normal * On hover or focus, the edit source link also appears next to it To make the two links look separate, we needed a divider. To make the divider look good we needed to add space around it. To balance the space, we needed to add space to the brackets. To avoid changing the view, we needed to only add space to the brackets on hover. To avoid the text moving around, we needed to make the brackets move away from the text, rather than the text move away from the brackets. To make this change smooth, we needed to use transitions. To make the links not force the heading to wrap in one state but not the other, we needed to reserve the space, using visibility rather than display. To reserve the space we had to use closing brackets as spacers, hiding/showing one of them on mouse enter/leave and leaving the other always hidden. To avoid the right bracket from getting clipped by the edge of the screen when in expanded mode, we needed to add a bit of padding to the right side of the section edit link top level span. To prevent the extra links from flashing as you move your mouse down the page, we needed to wait 100ms before showing or hiding them due to mouse enter/leave. We use negative margins to move the brackets. Animation implemented using CSS transitions. We bring the pipe divider in from the core 'pipe-separator' message. To style the brackets independently we needed to wrap them in spans and add classes to them. Change Id27555c6 in core will make the wrapping unnecessary, but the two should still get along just fine. Interestingly, we needed to @noflip the bracket styles because CSS Janus flipping is triggered on UI language, but the brackets need to be styled according to the content language. Changes: ve.init.mw.ViewPageTarget.css * Add styles for extra section edit link components ve.init.mw.ViewPageTarget.js * Add edit source link, and make it visible when the mouse is over the heading or either section edit link is focused *.php * Links to new messages Bug: 48429 Change-Id: I4b9c47fd65a700a81c880144247fec524edff7e5 --- M VisualEditor.i18n.php M VisualEditor.php M modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css M modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js 4 files changed, 115 insertions(+), 11 deletions(-) Approvals: Catrope: Looks good to me, approved jenkins-bot: Verified diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php index 5450a98..26221b6 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', @@ -176,6 +177,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 fdad5e5..9967d47 100644 --- a/VisualEditor.php +++ b/VisualEditor.php @@ -163,8 +163,10 @@ 'tooltip-ca-createsource', 'tooltip-ca-editsource', 'tooltip-ca-ve-edit', + 'pipe-separator', '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/ve.init.mw.ViewPageTarget.css b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css index badffaa..e23e583 100644 --- a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css +++ b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css @@ -308,6 +308,41 @@ outline: none; } +/* Section edit links */ + +.mw-editsection { + white-space: nowrap; + padding-right: 0.25em; +} + +.mw-editsection-divider { + color: #ccc; +} + +.mw-editsection-bracket { + -webkit-transition: color 100ms ease-out, margin 100ms ease-out; + -moz-transition: color 100ms ease-out, margin 100ms ease-out; + -ms-transition: color 100ms ease-out, margin 100ms ease-out; + -o-transition: color 100ms ease-out, margin 100ms ease-out; + transition: color 100ms ease-out, margin 100ms ease-out; +} + +/* @noflip */ +.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:first-of-type, +.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) { + margin-left: -0.25em; + margin-right: 0.25em; + color: #ccc; +} + +/* @noflip */ +.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:first-of-type, +.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) { + margin-right: -0.25em; + margin-left: 0.25em; + color: #ccc; +} + /* Images */ .ve-init-mw-viewPageTarget-loading, 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 3c10afa..ffd276e 100644 --- a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js +++ b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js @@ -1056,18 +1056,82 @@ if ( mw.user.options.get( 'visualeditor-nosectionedit' ) ) { return; } + 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' ) ); - veSectionEditUri.extend( { 'vesection': sectionEditUri.query.section } ); - $( this ).attr( 'href', veSectionEditUri ); - } ); - } + $editsections = $( '#mw-content-text .mw-editsection' ), + handler = ve.bind( this.onEditSectionLinkClick, this ); + + $editsections.each( function () { + var $brackets, $expandedOnly, $middleBracket, $hiddenBracket, closingBracketSymbol, + expandTimeout, contractTimeout, + $this = $( this ), + $heading = $this.closest( 'h1,h2,h3,h4,h5,h6' ), + $edit = $this.find( 'a' ).eq( 0 ), + $editSource = $edit.clone(), + $links = $edit.add( $editSource ), + $divider = $( '<span>' ), + dividerSymbol = $.trim( ve.msg( 'pipe-separator' ) ), + veSectionEditUri = new mw.Uri( veEditUri.toString() ), + sectionEditUri = new mw.Uri( $edit.attr( 'href' ) ); + + function expandSoon() { + clearTimeout( contractTimeout ); + expandTimeout = setTimeout( expand, 100 ); + } + + function contractSoon() { + clearTimeout( expandTimeout ); + contractTimeout = setTimeout( contract, 100 ); + } + + function expand() { + clearTimeout( contractTimeout ); + $middleBracket.css( 'visibility', 'hidden' ); + $expandedOnly.css( 'visibility', 'visible' ); + $heading.addClass( 'mw-editsection-expanded' ); + } + + function contract() { + clearTimeout( expandTimeout ); + if ( !$links.is( ':focus' ) ) { + $middleBracket.css( 'visibility', 'visible' ); + $expandedOnly.css( 'visibility', 'hidden' ); + $heading.removeClass( 'mw-editsection-expanded' ); + } + } + + $brackets = $( [ this.firstChild, this.lastChild ] ); + // @until Id27555c6 - essentially does this for us + if ( !$brackets.hasClass( 'mw-editsection-bracket' ) ) { + $brackets = $brackets + .wrap( $( '<span>' ).addClass( 'mw-editsection-bracket' ) ) + .parent(); + } + closingBracketSymbol = $brackets.eq( 1 ).text(); + $expandedOnly = $divider.add( $editSource ).add( $brackets.last() ); + $middleBracket = $brackets.last().clone(); + $hiddenBracket = $brackets.last().clone().css( 'visibility', 'hidden' ); + + // Events + $heading.on( { 'mouseenter': expandSoon, 'mouseleave': contractSoon } ); + $links.on( { 'focus': expand, 'blur': contract } ); + $edit.attr( 'href', veSectionEditUri.extend( { + 'vesection': sectionEditUri.query.section + } ) ); + $edit.click( handler ); + + // Initialization + $expandedOnly.css( 'visibility', 'hidden' ); + $editSource + .addClass( 'mw-editsection-link-secondary' ) + .text( mw.msg( 'visualeditor-ca-editsource-section' ) ); + $divider + .addClass( 'mw-editsection-divider' ) + .text( dividerSymbol ); + $edit + .addClass( 'mw-editsection-link-primary' ) + .after( $middleBracket, $divider, $hiddenBracket, $editSource ); + } ); }; /** -- To view, visit https://gerrit.wikimedia.org/r/69984 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I4b9c47fd65a700a81c880144247fec524edff7e5 Gerrit-PatchSet: 14 Gerrit-Project: mediawiki/extensions/VisualEditor Gerrit-Branch: master Gerrit-Owner: Matmarex <matma....@gmail.com> Gerrit-Reviewer: Catrope <roan.katt...@gmail.com> Gerrit-Reviewer: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Isarra <zhoris...@gmail.com> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Krinkle <krinklem...@gmail.com> Gerrit-Reviewer: Matmarex <matma....@gmail.com> Gerrit-Reviewer: Siebrand <siebr...@wikimedia.org> Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org> Gerrit-Reviewer: jenkins-bot _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits