jenkins-bot has submitted this change and it was merged.
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, 68 insertions(+), 60 deletions(-)
Approvals:
Gergő Tisza: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MultimediaViewer.php b/MultimediaViewer.php
index 90949e6..665b47e 100644
--- a/MultimediaViewer.php
+++ b/MultimediaViewer.php
@@ -371,6 +371,9 @@
'messages' => array(
'multimediaviewer-thumbnail-error',
+ 'multimediaviewer-thumbnail-error-description',
+ 'multimediaviewer-thumbnail-error-retry',
+ 'multimediaviewer-report-issue-url',
),
'dependencies' => array(
diff --git a/i18n/en.json b/i18n/en.json
index 1f09e3b..0e6e919 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -17,8 +17,11 @@
"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
(error: $1)",
+ "multimediaviewer-thumbnail-error": "Sorry, the file cannot be
displayed",
+ "multimediaviewer-thumbnail-error-description": "There seems to be a
technical issue. You can $1 or [{{int:multimediaviewer-report-issue-url}}
report the issue] if it persists. Error: $2",
+ "multimediaviewer-thumbnail-error-retry": "retry",
+ "multimediaviewer-report-issue-url":
"https://phabricator.wikimedia.org/maniphest/task/create/?projects=PHID-PROJ-cabyqp5sf4hyvauln3sq";,
"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..ebbbf77 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -24,8 +24,11 @@
"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. Parameters:\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. 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}}.
Parameters:\n* $1 - \"retry\" link (see
{{msg-wm|multimediaviewer-thumbnail-error-retry}})\n* $2 - the error message
(not localized)\nSee also:\n* {{msg-mw|multimediaviewer-thumbnail-error}}",
+ "multimediaviewer-thumbnail-error-retry": "Used as a part of
{{msg-mw|multimediaviewer-thumbnail-error-description}} (as a link text).",
+ "multimediaviewer-report-issue-url": "{{ignored}}URL to the report issue
website",
"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..6368a95 100644
--- a/resources/mmv/mmv.js
+++ b/resources/mmv/mmv.js
@@ -345,7 +345,9 @@
return;
}
- viewer.ui.panel.showError( error );
+ // Set title to caption or file name if caption is not
available;
+ // see setTitle() in mmv.ui.metadataPanel for extended
caption fallback
+ viewer.ui.panel.showError( image.caption ||
image.filePageTitle.getNameText(), error );
} );
$.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..2fd4984
--- /dev/null
+++ b/resources/mmv/ui/img/error-media-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 67.684 79.813" enable-background="new 0 0 67.684 79.813"><path
fill="#ccc" d="M67.255 0L3.26.816l.535 41.997L19.14 27.07 31.176 38.8 46.482
23.1l16.152 15.745 5.05-5.18z"/><path fill="#F2F2F2" d="M61.357 8.076L8.36
8.752l.37 28.997 10.41-10.68 3.75 3.654 3.015-4.172 8.866 8.56
11.712-12.014L61.738 37.97z"/><path fill="#ccc" d="M61.638 50.217L47.46 32.673
30.406 46.457l-10.563-13.07-17.1 13.818L0 73.06l63.643 6.753
3.622-34.144z"/><path fill="#F2F2F2" d="M60.852 49.244l-13.39-16.57-13.05
10.545 3.15 3.858 7.21-4.71 8.77 12.238-42.095-4.466L23.13
37.458l-3.288-4.07-11.6 9.373-1.16 10.94 52.704 5.59z"/></svg>
\ No newline at end of file
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..07ed90f 100644
--- a/resources/mmv/ui/mmv.ui.canvas.js
+++ b/resources/mmv/ui/mmv.ui.canvas.js
@@ -351,14 +351,26 @@
* Displays a message and error icon when loading the image fails.
* @param {string} error error message
*/
- C.showError = function ( error ) {
+ C.showError = function( error ) {
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',
+ $( '<a>' ).addClass(
'mw-mmv-retry-link' ).text(
+ mw.message(
'multimediaviewer-thumbnail-error-retry' ).text() ),
+ error ).parse()
+ )
)
);
+ this.$imageDiv.find( '.mw-mmv-retry-link' ).click( function () {
+ location.reload();
+ } );
};
/**
diff --git a/resources/mmv/ui/mmv.ui.canvas.less
b/resources/mmv/ui/mmv.ui.canvas.less
index af17765..e9ec862 100644
--- a/resources/mmv/ui/mmv.ui.canvas.less
+++ b/resources/mmv/ui/mmv.ui.canvas.less
@@ -11,23 +11,38 @@
display: none;
}
&.error {
- /* @embed */
- background-image: url(img/error.svg);
- background-repeat: no-repeat;
- background-position: 50% 50%;
- }
- .mw-mmv-error-text {
- position: absolute;
- left: 10%;
- right: 10%;
- top: 20%;
+ background-color: #333;
- padding: 6px 20px;
- .box-round(15px);
- background-color: #ff4f4d;
- text-align: center;
- font-size: normal;
- color: #000;
+ a, a:visited {
+ cursor: pointer;
+ 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..413b63f 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -772,11 +772,12 @@
/**
* Show an error message, in case the data could not be loaded
- * @param {string} error
+ * @param {string} title image title
+ * @param {string} error error message
*/
- MPP.showError = function ( error ) {
- this.$title.addClass( 'error' )
- .text( mw.message( 'multimediaviewer-metadata-error',
error ).text() );
+ MPP.showError = function ( title, error ) {
+ this.$credit.text( mw.message(
'multimediaviewer-metadata-error', 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: merged
Gerrit-Change-Id: I97ffa70903da32c66697c52969cfec2df03c1d57
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: M4tx <[email protected]>
Gerrit-Reviewer: Gergő Tisza <[email protected]>
Gerrit-Reviewer: M4tx <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
