From: WMDE-Fisch <christoph.jauera@wikimedia.de>
Date: Wed, 25 Oct 2017 13:41:53 +0000 (+0200)
Subject: Add render moved paragraphs marker in diff view
X-Git-Tag: 1.31.0-rc.0~1586^2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/exercices/?a=commitdiff_plain;h=110d7b695a05952a09a4da48a7b75170dcf55dbc;p=lhc%2Fweb%2Fwiklou.git

Add render moved paragraphs marker in diff view

This overwrites the generic marker from the wikidiff2 lib and adds
simple RTL aware arrows that indicate movement of the paragraphs.

Bug:T176486
Change-Id: I3554785772a091c3813e41071efcb7bb9a26a951
---

diff --git a/docs/uidesign/mediawiki.diff.html b/docs/uidesign/mediawiki.diff.html
index 0372595ce9..cd13dbac20 100644
--- a/docs/uidesign/mediawiki.diff.html
+++ b/docs/uidesign/mediawiki.diff.html
@@ -88,5 +88,54 @@
 	<tr><td class="diff-deletedline"><del class="diffchange">Deleted line + diffchange</del></td></tr>
 </table>
 
+<p>Here an example for the diff output when a whole paragraph was moved:</p>
+
+<table class="diff diff-contentalign-left">
+	<colgroup><col class="diff-marker">
+		<col class="diff-content">
+		<col class="diff-marker">
+		<col class="diff-content">
+	</colgroup><tbody>
+<tr>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"></td>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"></td>
+</tr>
+<tr>
+	<td class="diff-marker"><a class="mw-diff-movedpara-left" href="#movedpara_3_1_rhs">⚫</a></td>
+	<td class="diff-deletedline"><div><a name="movedpara_1_1_lhs"></a>Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.</div></td>
+	<td colspan="2" class="diff-empty">&nbsp;</td>
+</tr>
+<tr>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"></td>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"></td>
+</tr>
+<tr>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"><div>Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.</div></td>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"><div>Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.</div></td>
+</tr>
+<tr>
+	<td colspan="2" class="diff-empty">&nbsp;</td>
+	<td class="diff-marker">+</td>
+	<td class="diff-addedline"></td>
+</tr>
+<tr>
+	<td colspan="2" class="diff-empty">&nbsp;</td>
+	<td class="diff-marker"><a class="mw-diff-movedpara-right" href="#movedpara_1_1_lhs">⚫</a></td>
+	<td class="diff-addedline"><div><a name="movedpara_3_1_rhs"></a>Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.</div></td>
+</tr>
+<tr>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"></td>
+	<td class="diff-marker">&nbsp;</td>
+	<td class="diff-context"></td>
+</tr>
+</tbody></table>
+
 </body>
 </html>
diff --git a/resources/src/mediawiki/mediawiki.diff.styles.css b/resources/src/mediawiki/mediawiki.diff.styles.css
index 634502087f..1f6e54c010 100644
--- a/resources/src/mediawiki/mediawiki.diff.styles.css
+++ b/resources/src/mediawiki/mediawiki.diff.styles.css
@@ -119,3 +119,39 @@ td.diff-marker {
 	direction: ltr !important; /* stylelint-disable-line declaration-no-important */
 	unicode-bidi: embed;
 }
+
+/*!
+ * Wikidiff2 rendering for moved paragraphs
+ */
+
+.mw-diff-movedpara-left,
+.mw-diff-movedpara-right,
+.mw-diff-movedpara-left:visited,
+.mw-diff-movedpara-right:visited,
+.mw-diff-movedpara-left:active,
+.mw-diff-movedpara-right:active {
+	display: block;
+	color: transparent;
+}
+
+.mw-diff-movedpara-left:hover,
+.mw-diff-movedpara-right:hover {
+	text-decoration: none;
+}
+
+.mw-diff-movedpara-left:after,
+.mw-diff-movedpara-right:after {
+	display: block;
+	color: #222;
+	margin-top: -1.25em;
+}
+
+.mw-diff-movedpara-left:after,
+.rtl .mw-diff-movedpara-right:after {
+	content: '↪';
+}
+
+.mw-diff-movedpara-right:after,
+.rtl .mw-diff-movedpara-left:after {
+	content: '↩';
+}