[MediaWiki-commits] [Gerrit] Add loading indicator spinner for the source article - change (mediawiki...ContentTranslation)

[Santhosh (Code Review)]

Santhosh has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/144873

Change subject: Add loading indicator spinner for the source article
......................................................................

Add loading indicator spinner for the source article

Change-Id: I5f2f57749fa7fb376675be38cb28e30a7fb11d52
---
M Resources.php
M modules/source/ext.cx.source.js
M modules/source/styles/ext.cx.source.less
3 files changed, 32 insertions(+), 10 deletions(-)


  git pull 
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation 
refs/changes/73/144873/1

diff --git a/Resources.php b/Resources.php
index 0674416..6d52b89 100644
--- a/Resources.php
+++ b/Resources.php
@@ -62,6 +62,7 @@
        ),
        'styles' => array(
                'source/styles/ext.cx.source.less',
+               'base/styles/ext.cx.spinner.less',
        ),
        'dependencies' => array(
                'mediawiki.jqueryMsg',
diff --git a/modules/source/ext.cx.source.js b/modules/source/ext.cx.source.js
index c2fe6f5..8c7bfb9 100644
--- a/modules/source/ext.cx.source.js
+++ b/modules/source/ext.cx.source.js
@@ -82,7 +82,7 @@
                        mw.cx.sourceTitle = title.getPrefixedText();
                }
 
-               $heading = $( '<h2>' )
+               this.$title = $( '<h2>' )
                        .addClass( 'cx-column__title' )
                        .text( mw.cx.sourceTitle );
 
@@ -104,14 +104,11 @@
                        .addClass( 'cx-column__sub-heading' )
                        .append( $languageLabel, $articleLink );
 
-               $loader = $( '<div>' )
-                       .addClass( 'cx-column__content' )
-                       .text( mw.msg( 'cx-source-loading', mw.cx.sourceTitle ) 
);
+               this.$content = $( '<div>' )
+                       .addClass( 'cx-column__content' );
 
-               this.$container.append( $heading, $subHeading, $loader );
-
-               this.$title = this.$container.find( '.cx-column__title' );
-               this.$content = this.$container.find( '.cx-column__content' );
+               this.$container.append( this.$title, $subHeading, this.$content 
);
+               this.showLoadingIndicator();
        };
 
        ContentTranslationSource.prototype.load = function () {
@@ -123,6 +120,23 @@
                mw.hook( 'mw.cx.source.ready' ).fire();
        };
 
+       ContentTranslationSource.prototype.showLoadingIndicator = function () {
+               var $loadingIndicator, $loadingIndicatorText, 
$loadingIndicatorSpinner;
+               $loadingIndicator = $( '<div>' )
+                       .addClass( 'cx-column__loading-indicator' );
+               $loadingIndicatorText = $( '<div>' )
+                       .addClass( 'cx-column__loading-indicator--text' )
+                       .text( mw.msg( 'cx-source-loading', mw.cx.sourceTitle ) 
);
+               $loadingIndicatorSpinner = $( '<div>' )
+                       .addClass( 'cx-spinner' )
+                       .append(
+                               $( '<div>' ).addClass( 'bounce1' ),
+                               $( '<div>' ).addClass( 'bounce2' ),
+                               $( '<div>' ).addClass( 'bounce3' ) );
+               $loadingIndicator.append( $loadingIndicatorSpinner, 
$loadingIndicatorText );
+               this.$content.append( $loadingIndicator );
+       };
+
        ContentTranslationSource.prototype.listen = function () {
                mw.hook( 'mw.cx.source.loaded' ).add( $.proxy( this.load, this 
) );
 
diff --git a/modules/source/styles/ext.cx.source.less 
b/modules/source/styles/ext.cx.source.less
index bc0dbd3..ef51428 100644
--- a/modules/source/styles/ext.cx.source.less
+++ b/modules/source/styles/ext.cx.source.less
@@ -6,12 +6,10 @@
                .mw-ui-one-whole;
                padding-bottom: 10px;
        }
-
        .cx-column__language-label {
                .mw-ui-item;
                .mw-ui-one-third;
        }
-
        .cx-column__sub-heading__view-page {
                .mw-ui-item;
                .mw-ui-one-third;
@@ -23,3 +21,12 @@
                background-color: #A9A9F5;
        }
 }
+
+.cx-column__loading-indicator {
+       margin-top: 100px;
+}
+
+.cx-column__loading-indicator--text {
+       padding-top: 20px;
+       text-align: center
+}

-- 
To view, visit https://gerrit.wikimedia.org/r/144873
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I5f2f57749fa7fb376675be38cb28e30a7fb11d52
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits