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