Petar.petkovic has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/393258 )
Change subject: Add loading indicator to CX stats card
......................................................................
Add loading indicator to CX stats card
- Change appearance behavior of CX stats card. Old behavior displayes
empty stats card in CX dashboard, which is populated or removed after
user statistics are loaded.
- Always show stats card in CX dashboard, with loading indicator showing
user statistics are being loaded from server.
- Display message when user does not have any translations so far,
instead of removing the card completely.
Bug: T179747
Change-Id: I49515304fc0e65159da3e5b6565924fb45a0ce75
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M modules/widgets/translator/ext.cx.translator.js
M modules/widgets/translator/ext.cx.translator.less
5 files changed, 88 insertions(+), 15 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/58/393258/1
diff --git a/extension.json b/extension.json
index 6c16fd2..d1fd405 100644
--- a/extension.json
+++ b/extension.json
@@ -1208,10 +1208,12 @@
"messages": [
"cx-translator-header",
"cx-translator-month-stats-label",
+ "cx-translator-no-stats",
"cx-translator-total-translations-label"
],
"dependencies": [
"ext.cx.model",
+ "ext.cx.widgets.spinner",
"mediawiki.api",
"mediawiki.language"
]
diff --git a/i18n/en.json b/i18n/en.json
index a1e10fd..4468fe3 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -210,6 +210,7 @@
"cx-tools-linter-view-details": "View details",
"cx-tools-linter-hide-details": "Hide details",
"cx-translator-header": "Your statistics",
+ "cx-translator-no-stats": "You don't have any translations yet",
"cx-translator-month-stats-label": "This month",
"cx-translator-total-translations-label": "Total",
"cx-page-old-revision-loaded": "This translation is based on an older
version of the content. The source page may have [$1 changed significantly].
You can continue this translation or start it again to use the updated
content.",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index de67707..5d2d93b 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -219,6 +219,7 @@
"cx-tools-linter-view-details": "Label for abusefilter error
hide/collapse link in linter card",
"cx-tools-linter-hide-details": "Label for abusefilter error
hide/collapse link in linter card",
"cx-translator-header": "Shown in sidebar menu in the Content
Translation dashboard. Represents card header for translation statistics of
current user.",
+ "cx-translator-no-stats": "Shown in sidebar menu in the Content
Translation dashboard. Shown when user doesn't have any translation to display
in the statistics card.",
"cx-translator-month-stats-label": "Label displayed in the translation
statistics of current user.",
"cx-translator-total-translations-label": "Label displayed in the
translation statistics of current user.\n{{Identical|Total}}",
"cx-page-old-revision-loaded": "Warning message shown when the older
revision of source page loaded",
diff --git a/modules/widgets/translator/ext.cx.translator.js
b/modules/widgets/translator/ext.cx.translator.js
index 74ee041..02a64ae 100644
--- a/modules/widgets/translator/ext.cx.translator.js
+++ b/modules/widgets/translator/ext.cx.translator.js
@@ -22,18 +22,26 @@
this.max = -1;
this.$lastMonthButton = null;
+ this.$monthStats = null;
+ this.$total = null;
+ this.$statsContainer = null;
this.$widget = null;
this.$canvas = null;
this.render();
+ this.loadStats();
};
mw.cx.widgets.CXTranslator.prototype.render = function () {
- var $header, $monthStats, $total,
- api = new mw.Api(),
- self = this;
+ var $overlay, $loadingIndicator, $noStatsMessage, $header;
- $header = $( '<div>' ).addClass( 'cx-translator__header' );
+ $overlay = $( '<div>' ).addClass( 'cx-translator__overlay' );
+ $loadingIndicator = $( '<div>' )
+ .addClass( 'cx-translator__loading-indicator' )
+ .append( mw.cx.widgets.spinner() );
+ $noStatsMessage = $( '<span>' )
+ .addClass( 'cx-translator__no-stats-msg' )
+ .text( mw.msg( 'cx-translator-no-stats' ) );
this.$lastMonthButton = $( '<div>' )
.addClass( 'cx-translator__month-stats-button' )
.append(
@@ -43,10 +51,10 @@
.addClass(
'cx-translator__month-stats-label' )
.text( mw.msg(
'cx-translator-month-stats-label' ) )
);
- $monthStats = $( '<div>' )
+ this.$monthStats = $( '<div>' )
.addClass( 'cx-translator__month-stats' )
.append( this.$lastMonthButton );
- $total = $( '<div>' ).addClass(
'cx-translator__total-translations' ).append(
+ this.$total = $( '<div>' ).addClass(
'cx-translator__total-translations' ).append(
$( '<div>' )
.addClass(
'cx-translator__total-translations-count' ),
$( '<div>' )
@@ -56,14 +64,30 @@
this.$canvas = $( '<canvas>' )
.addClass( 'cx-translatorstats' )
.prop( 'height', '50' );
+
+ $header = $( '<div>' )
+ .addClass( 'cx-translator__header' )
+ .text( mw.msg( 'cx-translator-header' ) );
+ this.$statsContainer = $( '<div>' )
+ .addClass( 'cx-translator__stats' )
+ .append( $overlay, $loadingIndicator, $noStatsMessage,
+ this.$monthStats, this.$total, this.$canvas
+ );
+
+ this.$widget = $( '<div>' )
+ .addClass( 'cx-translator' )
+ .append( $header, this.$statsContainer );
+ };
+
+ mw.cx.widgets.CXTranslator.prototype.loadStats = function () {
+ var api = new mw.Api(), self = this;
+
statsRequest = statsRequest || api.get( {
action: 'query',
list: 'cxtranslatorstats',
translator: this.translatorName
} );
- this.$widget = $( '<div>' )
- .addClass( 'cx-translator' )
- .append( $header, $monthStats, $total, this.$canvas );
+
statsRequest.then( function ( stats ) {
var total, thisMonthStats,
publishTrend =
stats.cxtranslatorstats.publishTrend,
@@ -76,14 +100,13 @@
// Don't display statistics if there are no
translations yet
if ( total === 0 ) {
- self.$widget.remove();
+ self.$statsContainer.addClass(
'cx-translator__stats--failed' );
return;
}
- $header.text( mw.msg( 'cx-translator-header' ) );
- $total.find( '.cx-translator__total-translations-count'
)
+ self.$total.find(
'.cx-translator__total-translations-count' )
.text( mw.language.convertNumber( total ) );
- $monthStats.find( '.cx-translator__month-stats-count' )
+ self.$monthStats.find(
'.cx-translator__month-stats-count' )
.text( mw.language.convertNumber(
thisMonthStats ) );
$.each( monthKeys, function ( i, month ) {
@@ -93,8 +116,10 @@
self.$canvas.prop( 'width', self.$widget.width() );
self.draw();
+
+ self.$statsContainer.addClass(
'cx-translator__stats--loaded' );
} ).fail( function () {
- self.$widget.remove();
+ self.$statsContainer.addClass(
'cx-translator__stats--failed' );
} );
};
diff --git a/modules/widgets/translator/ext.cx.translator.less
b/modules/widgets/translator/ext.cx.translator.less
index 3baad07..1cada84 100644
--- a/modules/widgets/translator/ext.cx.translator.less
+++ b/modules/widgets/translator/ext.cx.translator.less
@@ -4,7 +4,7 @@
.cx-translator {
.mw-ui-one-whole;
- background-color: #fff;
+ background-color: @white;
margin-bottom: 1em;
border-radius: @borderRadius;
padding: 1em;
@@ -16,6 +16,50 @@
}
}
+.cx-translator__stats {
+ position: relative;
+
+ &--loaded,
+ &--failed {
+ .cx-translator__loading-indicator {
+ display: none;
+ }
+ }
+
+ &--loaded > .cx-translator__overlay {
+ display: none;
+ }
+
+ &--failed > .cx-translator__no-stats-msg {
+ color: @colorGray5;
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ text-align: center;
+ .transform( translate( -50%, -50% ) );
+ }
+}
+
+.cx-translator__overlay {
+ background-color: @white;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+
+.cx-translator__loading-indicator {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ .transform( translate( -50%, -50% ) );
+}
+
+.cx-translator__no-stats-msg {
+ display: none;
+}
+
.cx-translator__header {
color: @gray-dark;
margin-bottom: 1em;
--
To view, visit https://gerrit.wikimedia.org/r/393258
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I49515304fc0e65159da3e5b6565924fb45a0ce75
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
