Petar.petkovic has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/394492 )
Change subject: Fix no result messages on "New translation" dialog ...................................................................... Fix no result messages on "New translation" dialog - Fix "No pages found for $1 in $2", where $1 is query input and $2 is selected source language. When there are no pages for given search query, message is displayed. If source language changes, both $1 and $2 stay the same, but source language ($2) should change. - Change how no result messages are centered, without using additional DOM element to wrap centered text. Bug: T181457 Change-Id: Ib9251b2dd5c50b2464d976261d9c6e212d08ede7 --- M modules/source/ext.cx.SourcePageSelector.js M modules/source/styles/ext.cx.SourcePageSelector.less M modules/ui/widgets/mw.cx.ui.PageSelectorWidget.js 3 files changed, 58 insertions(+), 48 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation refs/changes/92/394492/1 diff --git a/modules/source/ext.cx.SourcePageSelector.js b/modules/source/ext.cx.SourcePageSelector.js index 553e57f..e5fecf3 100644 --- a/modules/source/ext.cx.SourcePageSelector.js +++ b/modules/source/ext.cx.SourcePageSelector.js @@ -73,13 +73,7 @@ this.options.sourceTitle ) { this.show(); - - this.$searchResultsMessage.text( - mw.msg( 'cx-source-page-selector-no-search-results', - this.pageSelector.getQueryValue(), - $.uls.data.getAutonym( this.languageFilter.getSourceLanguage() ) - ) - ); + this.updateNoResultsMessage(); } }; @@ -118,7 +112,7 @@ piprop: 'thumbnail', pilimit: 10, pithumbsize: 80, - lllang: self.targetLanguage, + lllang: self.languageFilter.getTargetLanguage(), wbptterms: [ 'description' ] } ); }, function ( error ) { @@ -159,6 +153,15 @@ } ); }; + SourcePageSelector.prototype.updateNoResultsMessage = function () { + var message = mw.msg( 'cx-source-page-selector-no-search-results', + this.pageSelector.getQueryValue(), + $.uls.data.getAutonym( this.languageFilter.getSourceLanguage() ) + ); + + this.$searchResultsMessage.text( message ); + }; + /** * Listen for events. */ @@ -169,12 +172,7 @@ this.$trigger.click( this.show.bind( this ) ); this.pageSelector.on( 'change', function () { - self.$searchResultsMessage.text( - mw.msg( 'cx-source-page-selector-no-search-results', - self.pageSelector.getQueryValue(), - $.uls.data.getAutonym( self.languageFilter.getSourceLanguage() ) - ) - ); + self.updateNoResultsMessage(); } ); this.discardButton.connect( this, { click: this.discardDialog } ); @@ -200,6 +198,10 @@ * @param {string} language Language code. */ SourcePageSelector.prototype.sourceLanguageChangeHandler = function ( language ) { + this.$searchResults.removeClass( 'mw-cx-ui-PageSelectorWidget--no-results' ); + this.$searchResults.removeClass( 'mw-cx-ui-PageSelectorWidget--has-recent-edits' ); + this.updateNoResultsMessage(); + this.pageSelector.setLanguage( language ); this.pageSelector.closeLookupMenu(); @@ -227,8 +229,9 @@ } this.$sourceInputs.append( this.languageFilter.$element, this.discardButton.$element ); - this.pageSelector.toggle( true ); this.overlay.show(); + this.pageSelector.populateLookupMenu(); + this.pageSelector.lookupMenu.toggle( true ); this.$container.slideDown( 'fast' ); this.pageSelector.focus(); }; @@ -242,30 +245,24 @@ }; SourcePageSelector.prototype.render = function () { - var $searchMessage, - $recentEditsMessageContainer, - $recentEditsMessage, + var $recentEditsMessage, $recentEditsHeader; this.$container.hide(); // Starts as hidden, shown on this.$trigger button click - this.$searchResultsMessage = $( '<span>' ) - .text( mw.msg( 'cx-source-page-selector-no-search-results' ) ); - $recentEditsMessage = $( '<span>' ) - .text( mw.msg( 'cx-source-page-selector-recent-edits-no-results' ) ); - - $searchMessage = $( '<div>' ) - .addClass( 'cx-source-page-selector__search-message' ) - .append( this.$searchResultsMessage ); - $recentEditsMessageContainer = $( '<div>' ) - .addClass( 'cx-source-page-selector__recent-edits-message' ) - .append( $recentEditsMessage ); $recentEditsHeader = $( '<div>' ) .addClass( 'cx-source-page-selector__recent-edits-header' ) .text( mw.msg( 'cx-source-page-selector-recent-edits-header' ) ); + $recentEditsMessage = $( '<div>' ) + .addClass( 'cx-source-page-selector__recent-edits-message' ) + .text( mw.msg( 'cx-source-page-selector-recent-edits-no-results' ) ); + + this.$searchResultsMessage = $( '<div>' ) + .addClass( 'cx-source-page-selector__search-message' ); + this.$searchResults = $( '<div>' ) .addClass( 'cx-source-page-selector__search-results' ) - .append( $recentEditsHeader, $recentEditsMessageContainer, $searchMessage ); + .append( $recentEditsHeader, $recentEditsMessage, this.$searchResultsMessage ); this.languageFilter = new mw.cx.ui.LanguageFilter( { onSourceLanguageChange: this.sourceLanguageChangeHandler.bind( this ), @@ -304,7 +301,8 @@ onDiscard: this.discardDialog.bind( this ) } ); - this.$container.append( this.$sourceInputs, + this.$container.append( + this.$sourceInputs, this.$searchResults, this.selectedSourcePage.$element ); diff --git a/modules/source/styles/ext.cx.SourcePageSelector.less b/modules/source/styles/ext.cx.SourcePageSelector.less index e928045..c6c2ad4 100644 --- a/modules/source/styles/ext.cx.SourcePageSelector.less +++ b/modules/source/styles/ext.cx.SourcePageSelector.less @@ -87,6 +87,7 @@ .cx-source-page-selector__recent-edits-message, .cx-source-page-selector__recent-edits-header { color: @colorGray7; + display: none; padding: 10px; font-size: 16px; font-weight: bold; @@ -94,28 +95,23 @@ .cx-source-page-selector__search-message, .cx-source-page-selector__recent-edits-message { - display: none; - box-sizing: border-box; - min-height: 200px; + position: absolute; + top: 50%; + left: 50%; + .transform( translate( -50%, -50% ) ); + + width: 100%; + padding: 0 1em; font-weight: normal; - line-height: 200px; text-align: center; - - & > span { - display: inline-block; - line-height: normal; - vertical-align: middle; - } } - &.mw-cx-ui-PageSelectorWidget--input, &.mw-cx-ui-PageSelectorWidget--no-results { - .cx-source-page-selector__recent-edits-header { - display: none; - } + position: relative; + min-height: 200px; } - &.mw-cx-ui-PageSelectorWidget--input.mw-cx-ui-PageSelectorWidget--no-results { + &.mw-cx-ui-PageSelectorWidget--no-results.mw-cx-ui-PageSelectorWidget--input { .cx-source-page-selector__search-message { display: block; } @@ -126,5 +122,11 @@ display: block; } } + + &.mw-cx-ui-PageSelectorWidget--has-recent-edits { + .cx-source-page-selector__recent-edits-header { + display: block; + } + } } } diff --git a/modules/ui/widgets/mw.cx.ui.PageSelectorWidget.js b/modules/ui/widgets/mw.cx.ui.PageSelectorWidget.js index 9b44878..df4cf7e 100644 --- a/modules/ui/widgets/mw.cx.ui.PageSelectorWidget.js +++ b/modules/ui/widgets/mw.cx.ui.PageSelectorWidget.js @@ -88,13 +88,19 @@ }; mw.cx.ui.PageSelectorWidget.prototype.listen = function () { - var proxied; + var proxied, self = this; // Unbind event handlers so search results don't disappear when focus is lost this.$input.off( 'blur' ); this.lookupMenu.onDocumentMouseDownHandler = function () {}; // Disable width and height calculation for search results container this.lookupMenu.setIdealSize = function () {}; + + this.on( 'change', function () { + self.$overlay.toggleClass( + 'mw-cx-ui-PageSelectorWidget--input', !!self.getQueryValue() + ); + } ); proxied = this.lookupMenu.onKeyDownHandler; this.lookupMenu.onKeyDownHandler = function ( e ) { @@ -154,7 +160,11 @@ var optionsData = mw.cx.ui.PageSelectorWidget.super.prototype.getOptionsFromData.call( this, data ); this.$overlay.toggleClass( 'mw-cx-ui-PageSelectorWidget--no-results', !optionsData.length ); - this.$overlay.toggleClass( 'mw-cx-ui-PageSelectorWidget--input', !!this.getQueryValue() ); + // This could select the same elements as using :not() CSS selector with both + // "mw-cx-ui-PageSelectorWidget--no-results" and "mw-cx-ui-PageSelectorWidget--input", + // but the timing when those classes are added is making "Recently edited by you" label + // visible until results are fetched from the server, which can take long time on slow networks + this.$overlay.toggleClass( 'mw-cx-ui-PageSelectorWidget--has-recent-edits', !this.getQueryValue() && !!optionsData.length ); return optionsData; }; -- To view, visit https://gerrit.wikimedia.org/r/394492 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ib9251b2dd5c50b2464d976261d9c6e212d08ede7 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/ContentTranslation Gerrit-Branch: master Gerrit-Owner: Petar.petkovic <ppetko...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits