M4tx has uploaded a new change for review.
https://gerrit.wikimedia.org/r/184753
Change subject: Improve error messages UI for Media Viewer
......................................................................
Improve error messages UI for Media Viewer
Bug: T77272
Change-Id: I97ffa70903da32c66697c52969cfec2df03c1d57
---
M MultimediaViewer.php
M i18n/en.json
M i18n/qqq.json
M resources/mmv/mmv.js
A resources/mmv/ui/img/error-media-icon.svg
D resources/mmv/ui/img/error.svg
M resources/mmv/ui/mmv.ui.canvas.js
M resources/mmv/ui/mmv.ui.canvas.less
M resources/mmv/ui/mmv.ui.metadataPanel.js
9 files changed, 66 insertions(+), 60 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer
refs/changes/53/184753/1
diff --git a/MultimediaViewer.php b/MultimediaViewer.php
index 90949e6..586d660 100644
--- a/MultimediaViewer.php
+++ b/MultimediaViewer.php
@@ -371,6 +371,7 @@
'messages' => array(
'multimediaviewer-thumbnail-error',
+ 'multimediaviewer-thumbnail-error-description',
),
'dependencies' => array(
diff --git a/i18n/en.json b/i18n/en.json
index 1f09e3b..00957ab 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -17,8 +17,9 @@
"multimediaviewer-credit-fallback": "View author information",
"multimediaviewer-multiple-authors": "{{PLURAL:$1|one more author|$1
more authors}}",
"multimediaviewer-multiple-authors-combine": "$1 and $2",
- "multimediaviewer-metadata-error": "Error: Could not load image data.
$1",
- "multimediaviewer-thumbnail-error": "Error: Could not load thumbnail
data. $1",
+ "multimediaviewer-metadata-error": "Could not load image details",
+ "multimediaviewer-thumbnail-error": "Sorry, the file cannot be
displayed",
+ "multimediaviewer-thumbnail-error-description": "There seems to be a
technical issue. You can retry or
[https://phabricator.wikimedia.org/maniphest/task/create/?projects=PHID-PROJ-cabyqp5sf4hyvauln3sq
report the issue] if it persists.",
"multimediaviewer-license-cc-by-1.0": "CC BY 1.0",
"multimediaviewer-license-cc-sa-1.0": "CC SA 1.0",
"multimediaviewer-license-cc-by-sa-1.0": "CC BY-SA 1.0",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index d849f7b..9c42502 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -24,8 +24,9 @@
"multimediaviewer-credit-fallback": "Text shown in place of the credit
line ({{msg-mw|multimediaviewer-credit}}) when neither author nor source
information is available.",
"multimediaviewer-multiple-authors": "Text shown after the author name
when there are multiple authors. The text will link to the file description
page.\n* $1 - number of additional authors.",
"multimediaviewer-multiple-authors-combine": "Combines the author name
and the message about other authors.\n* $1 - author name, parsed from the file
page\n* $2 - {{msg-mw|multimediaviewer-multiple-authors}} wrapped in a link.",
- "multimediaviewer-metadata-error": "Text shown when the information on
the metadata panel could not be loaded.\n\nParameters:\n* $1 - the error
message (not localized)\nSee also:\n*
{{msg-mw|Multimediaviewer-thumbnail-error}}",
- "multimediaviewer-thumbnail-error": "Text shown when the image could
not be loaded. Parameters:\n* $1 - the error message (not localized)\nSee
also:\n* {{msg-mw|Multimediaviewer-metadata-error}}",
+ "multimediaviewer-metadata-error": "Text shown when the information on
the metadata panel could not be loaded.\nSee also:\n*
{{msg-mw|multimediaviewer-thumbnail-error}}",
+ "multimediaviewer-thumbnail-error": "Text shown when the image could
not be loaded. Followed by
{{msg-mw|multimediaviewer-thumbnail-error-description}}.\nSee also:\n*
{{msg-mw|multimediaviewer-thumbnail-error-description}}\n*
{{msg-mw|multimediaviewer-metadata-error}}",
+ "multimediaviewer-thumbnail-error-description": "Text shown when the
image could not be loaded. Follows
{{msg-mw|multimediaviewer-thumbnail-error}}.\nSee also:\n*
{{msg-mw|multimediaviewer-thumbnail-error}}",
"multimediaviewer-license-cc-by-1.0": "Very short label for the
Creative Commons Attribution license, version 1.0, used in a link to the file
information page that has more licensing information.\n{{Identical|CC BY}}",
"multimediaviewer-license-cc-sa-1.0": "Very short label for the
Creative Commons ShareAlike license, version 1.0, used in a link to the file
information page that has more licensing information.",
"multimediaviewer-license-cc-by-sa-1.0": "Very short label for the
Creative Commons Attribution ShareAlike license, version 1.0, used in a link to
the file information page that has more licensing information.\n{{Identical|CC
BY-SA}}",
diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js
index cba79a6..ca94446 100644
--- a/resources/mmv/mmv.js
+++ b/resources/mmv/mmv.js
@@ -345,7 +345,7 @@
return;
}
- viewer.ui.panel.showError( error );
+ viewer.ui.panel.showError( image.caption );
} );
$.when( imagePromise, metadataPromise ).then( function() {
diff --git a/resources/mmv/ui/img/error-media-icon.svg
b/resources/mmv/ui/img/error-media-icon.svg
new file mode 100644
index 0000000..f60535f
--- /dev/null
+++ b/resources/mmv/ui/img/error-media-icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ viewBox="0 0 67.684 79.813" enable-background="new 0 0 67.684 79.813"
xml:space="preserve">
+<g>
+ <polygon fill="#CCCCCC" points="67.255,0 3.26,0.816 3.795,42.813
19.141,27.07 31.175,38.801 46.482,23.098 62.634,38.843
+ 67.684,33.663 "/>
+ <polygon fill="#F2F2F2" points="61.357,8.076 8.361,8.752 8.731,37.749
19.141,27.07 22.889,30.724 25.905,26.552 34.771,35.111
+ 46.482,23.098 61.738,37.97 "/>
+ <polygon fill="#CCCCCC" points="61.638,50.217 47.461,32.673
30.405,46.457 19.842,33.387 2.743,47.205 0,73.06 63.643,79.813
+ 67.265,45.669 "/>
+ <polygon fill="#F2F2F2" points="60.852,49.244 47.461,32.673
34.412,43.219 37.562,47.078 44.773,42.369 53.543,54.606
+ 11.447,50.14 23.131,37.458 19.842,33.387 8.243,42.761
7.082,53.7 59.786,59.291 "/>
+</g>
+</svg>
diff --git a/resources/mmv/ui/img/error.svg b/resources/mmv/ui/img/error.svg
deleted file mode 100644
index ccd7efe..0000000
--- a/resources/mmv/ui/img/error.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- version="1.1"
- width="22.86124"
- height="22.83745"
- id="svg2">
- <defs
- id="defs4" />
- <metadata
- id="metadata7">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title></dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <path
- d="M 19.649385,5.0026555e-4 C 19.552285,0.00551027 19.446485,0.04710027
19.368135,0.12549977 L 11.336883,8.1254979 3.4931325,0.28174747 c
-0.1567,-0.1566899 -0.390229,-0.1722696 -0.53125,-0.0312 L 0.27438252,2.9380477
c -0.14103,0.14103 -0.125449,0.3745605 0.0312,0.5312505 L 8.1493325,11.313049
0.12795552,19.334426 c -0.1567,0.1567 -0.17228,0.42148 -0.0312,0.562499 l
2.68749998,2.65625 c 0.141021,0.141031 0.374551,0.125451 0.531251,-0.0312 l
8.0213775,-8.021377 8.208895,8.208896 c 0.15669,0.1567 0.39022,0.17228
0.53125,0.0312 l 2.6875,-2.6875 c 0.14102,-0.14102 0.12544,-0.37455
-0.0312,-0.53125 l -8.208895,-8.208896 8.031249,-8.0312499 c 0.15669,-0.1566899
0.17227,-0.3902197 0.0312,-0.53125 L 19.899381,0.09430007 c -0.0705,-0.070499
-0.152868,-0.098902 -0.250001,-0.0937000044 z"
- id="rect3107-3-4-1-1-0-9-5-7"
- style="fill:#ff0000;fill-opacity:1;stroke:none" />
-</svg>
diff --git a/resources/mmv/ui/mmv.ui.canvas.js
b/resources/mmv/ui/mmv.ui.canvas.js
index c8b5622..d6a725e 100644
--- a/resources/mmv/ui/mmv.ui.canvas.js
+++ b/resources/mmv/ui/mmv.ui.canvas.js
@@ -349,14 +349,19 @@
/**
* Displays a message and error icon when loading the image fails.
- * @param {string} error error message
*/
- C.showError = function ( error ) {
+ C.showError = function() {
this.$imageDiv.empty()
.addClass( 'error' )
.append(
- $( '<div>' ).addClass( 'mw-mmv-error-text'
).text(
- mw.message(
'multimediaviewer-thumbnail-error', error ).text()
+ $( '<div>' ).addClass( 'error-box' ).append(
+ $( '<div>' ).addClass(
'mw-mmv-error-text' ).text(
+ mw.message(
'multimediaviewer-thumbnail-error' ).text()
+ )
+ ).append(
+ $( '<div>' ).addClass(
'mw-mmv-error-description' ).append(
+ mw.message(
'multimediaviewer-thumbnail-error-description' ).parse()
+ )
)
);
};
diff --git a/resources/mmv/ui/mmv.ui.canvas.less
b/resources/mmv/ui/mmv.ui.canvas.less
index af17765..68320fe 100644
--- a/resources/mmv/ui/mmv.ui.canvas.less
+++ b/resources/mmv/ui/mmv.ui.canvas.less
@@ -11,23 +11,37 @@
display: none;
}
&.error {
- /* @embed */
- background-image: url(img/error.svg);
- background-repeat: no-repeat;
- background-position: 50% 50%;
+ background-color: #333;
}
- .mw-mmv-error-text {
- position: absolute;
- left: 10%;
- right: 10%;
- top: 20%;
- padding: 6px 20px;
- .box-round(15px);
- background-color: #ff4f4d;
- text-align: center;
- font-size: normal;
- color: #000;
+ &.error a:visited {
+ color: #3472e5;
+ }
+
+ .error-box {
+ /* @embed */
+ background: url(img/error-media-icon.svg) no-repeat 0 0;
+ background-size: 110px 110px;
+
+ position: absolute;
+ left: 50%;
+ margin-left: -350px;
+ top: 50%;
+ margin-top: -100px;
+
+ padding: 0 20px 0 160px;
+ color: #fff;
+
+ max-width: 520px;
+
+ .mw-mmv-error-text {
+ font-size: 48px;
+ }
+
+ .mw-mmv-error-description {
+ margin-top: 30px;
+ font-size: 22px;
+ }
}
}
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js
b/resources/mmv/ui/mmv.ui.metadataPanel.js
index d43c61d..db08bd6 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -772,11 +772,11 @@
/**
* Show an error message, in case the data could not be loaded
- * @param {string} error
+ * @param {string} title image title
*/
- MPP.showError = function ( error ) {
- this.$title.addClass( 'error' )
- .text( mw.message( 'multimediaviewer-metadata-error',
error ).text() );
+ MPP.showError = function ( title ) {
+ this.$credit.text( mw.message(
'multimediaviewer-metadata-error' ).text() );
+ this.$title.html( title );
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/184753
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I97ffa70903da32c66697c52969cfec2df03c1d57
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: M4tx <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
