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
