From b35ebdb1f568c2dea5dd504d7748116a68849e11 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Tue, 18 Nov 2014 13:32:11 +0100 Subject: [PATCH] mediawiki.action.history.diff: Rework print styles * Remove extremely old print styles for diffs from commonPrint.css, added back in r6970. These were created for the old yellow-green-red diff styles and look terrible now. * Add new, minimal print styles, that replace background colors with text decoration (underline for inserted text, line-through for deleted). Motivation is the same as in r6970: light colored backgrounds work great on displays, but not very well in black-and-white print. * Fixed diff styles demo (mediawiki.action.history.diff.html), updated with print styles and better example. Bug: 73544 Change-Id: Ibf08fa11f84ac0cf8c7ed4da8af2b8804de6ab6f --- .../mediawiki.action.history.diff.html | 106 ++++++++++++------ resources/Resources.php | 5 +- .../mediawiki.action.history.diff.css | 6 +- .../mediawiki.action.history.diff.print.css | 16 +++ .../src/mediawiki.legacy/commonPrint.css | 38 ------- 5 files changed, 93 insertions(+), 78 deletions(-) create mode 100644 resources/src/mediawiki.action/mediawiki.action.history.diff.print.css diff --git a/docs/uidesign/mediawiki.action.history.diff.html b/docs/uidesign/mediawiki.action.history.diff.html index 5edcfb86c6..615558f206 100644 --- a/docs/uidesign/mediawiki.action.history.diff.html +++ b/docs/uidesign/mediawiki.action.history.diff.html @@ -1,57 +1,91 @@ - + + + - -

-This show various styles for our diff action, the background being hardcoded to gray (#C0C0C0) The reference style sheet is:

-resources/mediawiki.action/mediawiki.action.history.diff.css. -

-This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.

- -

-First, show the diff mostly like it would be chown on a wiki

- + + +

This show various styles for our diff action. Style sheet: resources/src/mediawiki.action/mediawiki.action.history.diff.css.

This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.

Try it out in print mode, too. Style sheet: resources/src/mediawiki.action/mediawiki.action.history.diff.print.css.

+ +

Practical example copied from MediaWiki's HTML output:

+ + + + + + + + - - + + - + - - + + â + + + + + â +

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ + + + + + + + + + +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+ + + + + + + + + â +

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim ~~id est laborum~~.

+ + +

Excepteur sint occaecat cupidatat non proident, sunt reprehenderit in voluptate in culpa qui officia deserunt mollit anim.

+ + + + + + + + + + + +

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ + -

-Below are some basic lines being applied one or two classes. Mainly for debugging purposes

Below are some basic lines being applied one or two classes. Mainly for debugging purposes.

- - - + - - - + +

 Diff
+diff-addedline: added line
-diff-deletedline: deleted line
 diff-context: context
 Same as above with a <span> child element having the diffchange class
 Same as above with a <ins> or <del> child element having the diffchange class:
 Diffchange
+-		Added line + diffchange
-
--		Deleted line + diffchange
-
 -		Context + diffchange
-
+Added line + diffchange
-Deleted line + diffchange

diff --git a/resources/Resources.php b/resources/Resources.php index cfac8a9c7c..c39ba3bf41 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1053,7 +1053,10 @@ return array( 'group' => 'mediawiki.action.history', ), 'mediawiki.action.history.diff' => array( - 'styles' => 'resources/src/mediawiki.action/mediawiki.action.history.diff.css', + 'styles' => array( + 'resources/src/mediawiki.action/mediawiki.action.history.diff.css', + 'resources/src/mediawiki.action/mediawiki.action.history.diff.print.css' => array( 'media' => 'print' ), + ), 'group' => 'mediawiki.action.history', 'targets' => array( 'desktop', 'mobile' ), ), diff --git a/resources/src/mediawiki.action/mediawiki.action.history.diff.css b/resources/src/mediawiki.action/mediawiki.action.history.diff.css index 092a59768e..0887476e42 100644 --- a/resources/src/mediawiki.action/mediawiki.action.history.diff.css +++ b/resources/src/mediawiki.action/mediawiki.action.history.diff.css @@ -1,6 +1,6 @@ -/* -** Diff rendering -*/ +/*! + * Diff rendering + */ table.diff { border: none; border-spacing: 4px; diff --git a/resources/src/mediawiki.action/mediawiki.action.history.diff.print.css b/resources/src/mediawiki.action/mediawiki.action.history.diff.print.css new file mode 100644 index 0000000000..76b5c9b7ae --- /dev/null +++ b/resources/src/mediawiki.action/mediawiki.action.history.diff.print.css @@ -0,0 +1,16 @@ +/*! + * Diff rendering + */ +td.diff-context, +td.diff-addedline .diffchange, +td.diff-deletedline .diffchange { + background-color: transparent; +} + +td.diff-addedline .diffchange { + text-decoration: underline; +} + +td.diff-deletedline .diffchange { + text-decoration: line-through; +} diff --git a/resources/src/mediawiki.legacy/commonPrint.css b/resources/src/mediawiki.legacy/commonPrint.css index 9405719f96..a52ccb67fa 100644 --- a/resources/src/mediawiki.legacy/commonPrint.css +++ b/resources/src/mediawiki.legacy/commonPrint.css @@ -323,44 +323,6 @@ div.gallerytext { word-wrap: break-word; } -/** - * Diff rendering - */ -table.diff { - background: white; -} - -td.diff-otitle { - background: #ffffff; -} - -td.diff-ntitle { - background: #ffffff; -} - -td.diff-addedline { - background: #ccffcc; - font-size: smaller; - border: solid 2px black; -} - -td.diff-deletedline { - background: #ffffaa; - font-size: smaller; - border: dotted 2px black; -} - -td.diff-context { - background: #eeeeee; - font-size: smaller; -} - -.diffchange { - color: silver; - font-weight: bold; - text-decoration: underline; -} - /** * Table rendering * As on shared.css but with white background. -- 2.20.1