Santhosh has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/341996 )
Change subject: WIP: Infobar rewrite using OOjs UI
......................................................................
WIP: Infobar rewrite using OOjs UI
The translationview will provide the method to show any message to
user.
Change-Id: Ief04cf2962ab80645ddda44cb323cefa441e2287
TODO: Styling not done, Messages are not dismissible
---
M modules/ui/mw.cx.ui.Header.js
M modules/ui/mw.cx.ui.Infobar.js
M modules/ui/mw.cx.ui.TranslationView.js
M modules/ui/styles/mw.cx.ui.Infobar.less
4 files changed, 19 insertions(+), 33 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/96/341996/1
diff --git a/modules/ui/mw.cx.ui.Header.js b/modules/ui/mw.cx.ui.Header.js
index 847d084..534e0d7 100644
--- a/modules/ui/mw.cx.ui.Header.js
+++ b/modules/ui/mw.cx.ui.Header.js
@@ -11,7 +11,7 @@
// Configuration initialization
this.config = config || {};
this.$headerBar = null;
- this.$infobar = null;
+ this.infobar = null;
// Parent constructor
mw.cx.ui.Header.parent.call( this, $.extend( {}, this.config, {
continuous: true,
@@ -59,7 +59,7 @@
.append( $translationCenter, this.$draftStatus );
this.infobar = new mw.cx.ui.Infobar( this.config );
- return $( '<div>' ).append( $headerTitle, this.$headerBar,
this.infobar.$infobar );
+ return $( '<div>' ).append( $headerTitle, this.$headerBar,
this.infobar.$element );
};
mw.cx.ui.Header.prototype.listen = function () {
diff --git a/modules/ui/mw.cx.ui.Infobar.js b/modules/ui/mw.cx.ui.Infobar.js
index 72fcf23..f0a1977 100644
--- a/modules/ui/mw.cx.ui.Infobar.js
+++ b/modules/ui/mw.cx.ui.Infobar.js
@@ -5,13 +5,12 @@
* @param {Object} [config] Configuration object
*/
mw.cx.ui.Infobar = function ( config ) {
- this.$infobar = null;
// Configuration initialization
this.config = $.extend( {}, config, {
continuous: true,
- expanded: true,
+ expanded: false,
$content: this.getContent(),
- classes: [ 'cx-header__infobar' ]
+ classes: [ 'cx-header-infobar' ]
} );
// Parent constructor
mw.cx.ui.Infobar.parent.call( this, this.config );
@@ -23,13 +22,8 @@
OO.inheritClass( mw.cx.ui.Infobar, OO.ui.PanelLayout );
mw.cx.ui.Infobar.prototype.getContent = function () {
- this.$infobar = $( '<div>' )
- .addClass( 'cx-header__infobar' )
- .append( $( '<span>' ).addClass( 'text' ) )
- .append( $( '<span>' ).addClass( 'remove' ) )
- .append( $( '<div>' ).addClass( 'details' ) )
- .hide();
- return this.$infobar;
+ this.messageLayout = new OO.ui.FieldsetLayout();
+ return this.messageLayout.$element;
};
mw.cx.ui.Infobar.prototype.listen = function () {
@@ -38,11 +32,6 @@
mw.hook( 'mw.cx.success' ).add( $.proxy( this.showSuccess, this ) );
mw.hook( 'mw.cx.error.anonuser' ).add( $.proxy( this.showLoginMessage,
this ) );
mw.hook( 'mw.cx.translation.title.change' ).add( $.proxy(
this.clearMessages, this ) );
-
- // Click handler for remove icon in info bar.
- this.$infobar.on( 'click', '.remove', function () {
- $( this ).parent().hide();
- } );
};
mw.cx.ui.Infobar.prototype.showSuccess = function ( message, details ) {
@@ -67,18 +56,14 @@
* @param {string} details The details of error in HTML.
*/
mw.cx.ui.Infobar.prototype.showMessage = function ( type, message, details ) {
- if ( message instanceof mw.Message ) {
- this.$infobar.find( '.text' ).html( message.parse() );
- } else {
- this.$infobar.find( '.text' ).text( message );
- }
- if ( details ) {
- this.$infobar.find( '.details' ).html( details ).show();
- } else {
- this.$infobar.find( '.details' ).empty().hide();
- }
+ var message;
+
+ message = new OO.ui.LabelWidget( {
+ label: message,
+ icon: type
+ } );
this.clearMessages();
- this.$infobar.addClass( 'cx-' + type ).show();
+ this.messageLayout.addItems( [ message ] );
};
/**
@@ -104,7 +89,5 @@
};
mw.cx.ui.Infobar.prototype.clearMessages = function () {
- this.$infobar
- .removeClass( 'cx-success cx-error cx-warning' )
- .hide();
+ this.messageLayout.clearItems();
};
diff --git a/modules/ui/mw.cx.ui.TranslationView.js
b/modules/ui/mw.cx.ui.TranslationView.js
index c73177d..2f39722 100644
--- a/modules/ui/mw.cx.ui.TranslationView.js
+++ b/modules/ui/mw.cx.ui.TranslationView.js
@@ -168,3 +168,7 @@
// Translation title change is a change trigger for translation.
this.emit( 'change' );
};
+
+mw.cx.ui.TranslationView.prototype.showMessage = function ( message, type ) {
+ this.header.infobar.showMessage( message, type );
+};
diff --git a/modules/ui/styles/mw.cx.ui.Infobar.less
b/modules/ui/styles/mw.cx.ui.Infobar.less
index 513e788..afd9c4d 100644
--- a/modules/ui/styles/mw.cx.ui.Infobar.less
+++ b/modules/ui/styles/mw.cx.ui.Infobar.less
@@ -1,9 +1,8 @@
@import '../../widgets/common/ext.cx.common.less';
-.cx-header__infobar {
+.cx-header-infobar {
.mw-ui-item;
.mw-ui-one-whole;
- padding: 10px;
&.cx-error {
border: 1px solid #fac5c5;
--
To view, visit https://gerrit.wikimedia.org/r/341996
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ief04cf2962ab80645ddda44cb323cefa441e2287
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
