[MediaWiki-commits] [Gerrit] Show "edit source" section edit links in addition to VE ones - change (mediawiki...VisualEditor)

2013-06-26 Thread jenkins-bot (Code Review)
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-separa

[MediaWiki-commits] [Gerrit] Show "edit source" section edit links in addition to VE ones - change (mediawiki...VisualEditor)

2013-06-22 Thread Matmarex (Code Review)
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 000..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;
+   trans

[MediaWiki-commits] [Gerrit] Show "edit source" section edit links in addition to VE ones - change (mediawiki...VisualEditor)

2013-06-15 Thread Matmarex (Code Review)
Matmarex has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/68868


Change subject: Show "edit source" section edit links in addition to VE ones
..

Show "edit source" section edit links in addition to VE ones

Handled similarly to the article tabs - switch the function of
standard ones to VE-editing, add new ones allowing the user to select
the source editor.

Bug: 48429
Change-Id: I13bbb9549c999bb7301bbcf530706a813184425d
---
M VisualEditor.i18n.php
M VisualEditor.php
M modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
3 files changed, 15 insertions(+), 3 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor 
refs/changes/68/68868/1

diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php
index 2bace7b..4ce7a558 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',
@@ -169,6 +170,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 b3bcfd6..e16eca5 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -156,6 +156,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/targets/ve.init.mw.ViewPageTarget.js 
b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
index acd1984..230eb9b 100644
--- a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
@@ -986,11 +986,19 @@
  */
 ve.init.mw.ViewPageTarget.prototype.setupSectionEditLinks = function () {
var veEditUri = this.veEditUri,
-   $links = $( '#mw-content-text .mw-editsection a' );
+   $editsections = $( '#mw-content-text .mw-editsection' ),
+   handler = ve.bind( this.onEditSectionLinkClick, this );
if ( this.isViewPage ) {
-   $links.click( ve.bind( this.onEditSectionLinkClick, this ) );
+   $editsections.each( function () {
+   var $this = $(this);
+   // Double the links; attach events to the "edit" ones,
+   // change text of the "edit source" ones
+   $this.append( ' ', $( this.childNodes ).clone() );
+   $this.find( 'a:first' ).click( handler );
+   $this.find( 'a:last' ).text( mw.msg( 
'visualeditor-ca-editsource-section' ) );
+   } );
} else {
-   $links.each( function () {
+   $editsections.find( 'a' ).each( function () {
var veSectionEditUri = new mw.Uri( veEditUri.toString() 
),
sectionEditUri = new mw.Uri( $(this).attr( 
'href' ) );
veSectionEditUri.extend( { 'vesection': 
sectionEditUri.query.section } );

-- 
To view, visit https://gerrit.wikimedia.org/r/68868
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I13bbb9549c999bb7301bbcf530706a813184425d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Matmarex 

___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits