Santhosh has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/335196 )
Change subject: Use OOJS UI widgets for language label and link in colum
subheadings
......................................................................
Use OOJS UI widgets for language label and link in colum subheadings
Change-Id: Ie894b2a8b2e8cf96f9b45caf1465960240ef4a83
---
M modules/ui/mw.cx.ui.SourceColumn.js
M modules/ui/mw.cx.ui.TranslationColumn.js
M modules/ui/styles/mw.cx.ui.Columns.less
3 files changed, 41 insertions(+), 54 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/96/335196/1
diff --git a/modules/ui/mw.cx.ui.SourceColumn.js
b/modules/ui/mw.cx.ui.SourceColumn.js
index 3ed5acd..c9f3b4f 100644
--- a/modules/ui/mw.cx.ui.SourceColumn.js
+++ b/modules/ui/mw.cx.ui.SourceColumn.js
@@ -39,8 +39,8 @@
};
mw.cx.ui.SourceColumn.prototype.render = function () {
- var sourceLanguageDir, $languageLabel, $articleLink,
- userLanguage, $subHeading;
+ var sourceLanguageDir, languageLabel, articleLink,
+ subHeading;
sourceLanguageDir = $.uls.data.getDir( this.config.sourceLanguage );
this.$element.prop( {
@@ -53,39 +53,30 @@
editable: false
} );
- $languageLabel = $( '<span>' )
- .prop( {
- lang: mw.cx.sourceLanguage,
- dir: sourceLanguageDir
- } )
- .addClass( 'cx-column__language-label' )
- .text( $.uls.data.getAutonym( mw.cx.sourceLanguage ) );
+ languageLabel = new OO.ui.LabelWidget( {
+ label: $.uls.data.getAutonym( this.config.sourceLanguage ),
+ dir: sourceLanguageDir,
+ classes: [ 'cx-column-language-label' ]
+ } );
- $articleLink = $( '<span>' )
- .addClass( 'cx-column__sub-heading__view-page' )
- .append( $( '<a>' )
- .prop( {
- href: this.config.siteMapper.getPageUrl(
this.config.sourceLanguage, this.config.sourceTitle ),
- target: '_blank'
- } )
- .text( mw.msg( 'cx-source-view-page' ) )
- );
+ articleLink = new OO.ui.ButtonWidget( {
+ label: mw.msg( 'cx-source-view-page' ),
+ href: this.config.siteMapper.getPageUrl(
this.config.sourceLanguage, this.config.sourceTitle ),
+ target: '_blank',
+ classes: [ 'cx-column-sub-heading-view-page' ],
+ framed: false,
+ flags: [ 'constructive' ]
+ } );
- userLanguage = mw.config.get( 'wgUserLanguage' );
- $subHeading = $( '<div>' )
- .prop( {
- lang: userLanguage,
- dir: $.uls.data.getDir( userLanguage )
- } )
- .addClass( 'cx-column__sub-heading' )
- .append( $languageLabel, $articleLink );
-
+ subHeading = new OO.ui.HorizontalLayout( {
+ classes: [ 'cx-column-sub-heading' ],
+ items: [ languageLabel, articleLink ]
+ } );
+ this.addItems( [ this.titleWidget, subHeading ] );
this.$content = $( '<div>' )
.addClass( 'cx-column__content' );
this.$element.append(
- this.titleWidget.$element,
- $subHeading,
this.$content
);
this.showLoadingIndicator();
diff --git a/modules/ui/mw.cx.ui.TranslationColumn.js
b/modules/ui/mw.cx.ui.TranslationColumn.js
index 40c6b13..18d20ca 100644
--- a/modules/ui/mw.cx.ui.TranslationColumn.js
+++ b/modules/ui/mw.cx.ui.TranslationColumn.js
@@ -39,7 +39,7 @@
};
mw.cx.ui.TranslationColumn.prototype.render = function () {
- var $languageLabel, userLanguage, $subHeading;
+ var languageLabel, subHeading;
this.titleWidget = new mw.cx.widgets.PageTitleWidget( {
value: this.config.targetTitle,
@@ -52,26 +52,17 @@
this.emit( 'titleChange', this.titleWidget.getValue() );
}.bind( this ) );
- $languageLabel = $( '<span>' )
- .prop( {
- lang: this.config.targetLanguage,
- dir: this.direction
- } )
- .addClass( 'cx-column__language-label' )
- .text( $.uls.data.getAutonym( this.config.targetLanguage ) );
+ languageLabel = new OO.ui.LabelWidget( {
+ label: $.uls.data.getAutonym( this.config.targetLanguage ),
+ dir: this.direction,
+ classes: [ 'cx-column-language-label' ]
+ } );
- // This is UI, and the UI language is not necessarily
- // the same as the target language
- userLanguage = mw.config.get( 'wgUserLanguage' );
- $subHeading = $( '<div>' )
- .prop( {
- lang: userLanguage,
- dir: $.uls.data.getDir( userLanguage )
- } )
- .addClass( 'cx-column__sub-heading' )
- .append( $languageLabel );
-
- this.$element.append( $subHeading );
+ subHeading = new OO.ui.HorizontalLayout( {
+ classes: [ 'cx-column-sub-heading' ],
+ items: [ languageLabel ]
+ } );
+ this.addItems( [ subHeading ] );
this.$content = $( '<div>' ).addClass( 'cx-column__content' );
this.$element.append( this.$content );
diff --git a/modules/ui/styles/mw.cx.ui.Columns.less
b/modules/ui/styles/mw.cx.ui.Columns.less
index d22fa7b..cd69a3d 100644
--- a/modules/ui/styles/mw.cx.ui.Columns.less
+++ b/modules/ui/styles/mw.cx.ui.Columns.less
@@ -16,7 +16,8 @@
.mw-ui-one-third;
}
-.cx-column__sub-heading {
+.cx-column__sub-heading,
+.cx-column-sub-heading {
.mw-ui-item;
.mw-ui-one-whole;
padding: 5px 0;
@@ -36,17 +37,21 @@
}
}
-.cx-column__language-label,
-.cx-column__sub-heading__view-page {
- .mw-ui-one-half;
+.cx-column-language-label,
+.cx-column--language-label,
+.cx-column--sub-heading__view-page,
+.cx-column-sub-heading-view-page {
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 3em;
+ font-weight: normal;
}
-.cx-column__language-label {
+.cx-column--language-label,
+.cx-column-language-label {
+ .mw-ui-one-half;
text-align: left;
color: @gray-dark;
}
--
To view, visit https://gerrit.wikimedia.org/r/335196
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie894b2a8b2e8cf96f9b45caf1465960240ef4a83
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
