Santhosh has uploaded a new change for review.
https://gerrit.wikimedia.org/r/106684
Change subject: Progress bar for translation
......................................................................
Progress bar for translation
Listens for the event mw.cx.progress
Example: mw.hook( 'mw.cx.progress').fire(50)
Change-Id: I70f91b174660303268be7b6d5a8594705c3af7a0
---
M Resources.php
D modules/base/styles/ext.cx.header.less
R modules/header/ext.cx.header.js
A modules/header/ext.cx.progressbar.js
R modules/header/images/wikipedia-logo-landscape.png
A modules/header/styles/ext.cx.header.less
A modules/header/styles/ext.cx.progressbar.less
7 files changed, 150 insertions(+), 14 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/84/106684/1
diff --git a/Resources.php b/Resources.php
index f6c717f..50f41e7 100644
--- a/Resources.php
+++ b/Resources.php
@@ -29,10 +29,14 @@
) + $resourcePaths;
$wgResourceModules['ext.cx.header'] = array(
- 'scripts' => 'base/ext.cx.header.js',
+ 'scripts' => 'header/ext.cx.header.js',
'styles' => array(
- 'base/styles/ext.cx.header.less',
+ 'header/styles/ext.cx.header.less',
),
+ 'dependencies' => array(
+ 'ext.cx.progressbar',
+ ),
+
) + $resourcePaths;
$wgResourceModules['ext.cx.source'] = array(
@@ -49,3 +53,11 @@
$wgResourceModules['ext.cx.tool'] = array(
'scripts' => 'tools/ext.cx.tools.js',
) + $resourcePaths;
+
+
+$wgResourceModules['ext.cx.progressbar'] = array(
+ 'scripts' => 'header/ext.cx.progressbar.js',
+ 'styles' => array(
+ 'header/styles/ext.cx.progressbar.less',
+ ),
+) + $resourcePaths;
\ No newline at end of file
diff --git a/modules/base/styles/ext.cx.header.less
b/modules/base/styles/ext.cx.header.less
deleted file mode 100644
index e2cf04d..0000000
--- a/modules/base/styles/ext.cx.header.less
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "grid/agora-grid";
-
-.header {
- .logo {
- .mw-ui-one-third;
- height: 100px;
- background-size: 50%;
- background-image: url(../images/wikipedia-logo-landscape.png);
- background-repeat: no-repeat;
- background-position: left top;
- }
-}
diff --git a/modules/base/ext.cx.header.js b/modules/header/ext.cx.header.js
similarity index 78%
rename from modules/base/ext.cx.header.js
rename to modules/header/ext.cx.header.js
index 0511d18..90ff9f5 100644
--- a/modules/base/ext.cx.header.js
+++ b/modules/header/ext.cx.header.js
@@ -30,6 +30,19 @@
this.$container.append( $( '<div>' )
.addClass( 'logo')
);
+
+ this.$container.append( $( '<div>' )
+ .addClass( 'translation-bar' )
+ .append(
+ $( '<a>' )
+ .addClass(
'translation-center-link' )
+ .text( 'Translation center' )
+ .attr( 'href', '#' ),
+ $( '<div>' )
+ .addClass(
'translation-progress' )
+ .cxProgressBar()
+ )
+ );
};
$.fn.cxHeader = function ( options ) {
diff --git a/modules/header/ext.cx.progressbar.js
b/modules/header/ext.cx.progressbar.js
new file mode 100644
index 0000000..84b8edf
--- /dev/null
+++ b/modules/header/ext.cx.progressbar.js
@@ -0,0 +1,68 @@
+/**
+ * ContentTranslation Progress Indicator
+ * A tool that allows editors to translate pages from one language
+ * to another with the help of machine translation and other translation aids
+ *
+ * @file
+ * @ingroup Extensions
+ * @copyright See AUTHORS.txt
+ * @license GPL-2.0+
+ */
+( function ( $, mw ) {
+ 'use strict';
+
+ /**
+ * ProgressBar
+ *
+ * @class
+ */
+ function ProgressBar( element, options ) {
+ this.$container = $( element );
+ this.options = $.extend( true, {}, $.fn.cxProgressBar.defaults,
options );
+ this.init();
+ }
+
+ ProgressBar.prototype.init = function () {
+ this.render();
+ this.listen();
+ };
+
+ ProgressBar.prototype.render = function () {
+ this.$container.append(
+ $( '<div>' ).addClass( 'progressbar' )
+ .append( $( '<span>')
+ .addClass( 'status' )
+ .css( 'width', '0' )
+ // TODO: Add a textual status indicator
here
+ )
+ );
+ };
+
+ ProgressBar.prototype.listen = function () {
+ mw.hook( 'mw.cx.progress' ).add( $.proxy( this.update, this ) );
+ };
+
+ ProgressBar.prototype.update = function ( percentage ) {
+ this.$container.find( '.status' )
+ .css( 'width', percentage + '%' );
+ };
+
+
+ $.fn.cxProgressBar = function ( options ) {
+ return this.each( function () {
+ var $this = $( this ),
+ data = $this.data( 'cxProgressBar' );
+
+ if ( !data ) {
+ $this.data( 'cxProgressBar',
+ ( data = new ProgressBar( this, options
) )
+ );
+ }
+
+ if ( typeof options === 'string' ) {
+ data[options].call( $this );
+ }
+ } );
+ };
+ $.fn.cxProgressBar.defaults = {};
+}( jQuery, mediaWiki ) );
diff --git a/modules/base/images/wikipedia-logo-landscape.png
b/modules/header/images/wikipedia-logo-landscape.png
similarity index 100%
rename from modules/base/images/wikipedia-logo-landscape.png
rename to modules/header/images/wikipedia-logo-landscape.png
Binary files differ
diff --git a/modules/header/styles/ext.cx.header.less
b/modules/header/styles/ext.cx.header.less
new file mode 100644
index 0000000..1afbbc5
--- /dev/null
+++ b/modules/header/styles/ext.cx.header.less
@@ -0,0 +1,33 @@
+@import "../../base/styles/grid/agora-grid";
+
+.header {
+ .logo {
+ .mw-ui-one-third;
+ height: 100px;
+ background-size: 50%;
+ background-image: url(../images/wikipedia-logo-landscape.png);
+ background-repeat: no-repeat;
+ background-position: left top;
+ }
+
+ .translation-bar {
+ .mw-ui-item;
+ .mw-ui-one-whole;
+ .translation-center-link {
+ .mw-ui-item;
+ .mw-ui-one-third;
+ &:before {
+ content: "";
+ display: inline-block;
+ border: 4px solid transparent;
+ border-right-color: #555;
+ margin: 0 8px 0 0;
+ }
+ }
+
+ .translation-progress {
+ .mw-ui-item;
+ .mw-ui-one-third;
+ }
+ }
+}
diff --git a/modules/header/styles/ext.cx.progressbar.less
b/modules/header/styles/ext.cx.progressbar.less
new file mode 100644
index 0000000..4753c96
--- /dev/null
+++ b/modules/header/styles/ext.cx.progressbar.less
@@ -0,0 +1,22 @@
+@import "../../base/styles/grid/agora-grid";
+
+.progressbar {
+ .mw-ui-item;
+ .mw-ui-one-third;
+ height: 10px;
+ border-radius: 10px;
+ border: 1px solid #ddd;
+ background: #fbfbfb;
+ vertical-align: middle;
+ position: absolute;
+ .status {
+ .mw-ui-one-whole;
+ background: #3892E3;
+ display: inline-block;
+ height: 10px;
+ border-radius: 10px;
+ position: absolute;
+ left: 0;
+ transition: width 1s;
+ }
+}
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/106684
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I70f91b174660303268be7b6d5a8594705c3af7a0
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
