jenkins-bot has submitted this change and it was merged.
Change subject: Dashboard: Use ULS for language selection
......................................................................
Dashboard: Use ULS for language selection
Bug: T112051
Bug: T113722
Bug: T113715
Bug: T113723
Change-Id: I5ee3bdb25d8716641d88550ee1f5e85c1e384b0d
---
M extension.json
M modules/dashboard/ext.cx.dashboard.js
M modules/dashboard/ext.cx.suggestionlist.js
M modules/dashboard/ext.cx.translationlist.js
M modules/dashboard/styles/ext.cx.dashboard.less
5 files changed, 74 insertions(+), 108 deletions(-)
Approvals:
Amire80: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index f8799b1..4e7045c 100644
--- a/extension.json
+++ b/extension.json
@@ -220,6 +220,7 @@
"ext.cx.source.selector",
"ext.cx.translationlist",
"ext.cx.suggestionlist",
+ "ext.uls.mediawiki",
"mediawiki.Uri",
"mediawiki.ui.button"
],
diff --git a/modules/dashboard/ext.cx.dashboard.js
b/modules/dashboard/ext.cx.dashboard.js
index 5e53115..b8acc7e 100644
--- a/modules/dashboard/ext.cx.dashboard.js
+++ b/modules/dashboard/ext.cx.dashboard.js
@@ -50,36 +50,23 @@
};
/**
- * Populate the language filter
+ * Set the language filter label
*
- * @param {jQuery} $filter Source filter or target filter to fill
- * @param {String[]} languages Array of language codes
+ * @param {jQuery} $filter Source filter or target filter
* @param {String} selected Selected language code
*/
- CXDashboard.prototype.populateLanguageFilter = function ( $filter,
languages, selected ) {
- var i, label, $options = [];
+ CXDashboard.prototype.setLanguageFilterLabel = function ( $filter,
selected ) {
+ var label;
- $filter.empty();
-
- if ( $filter.is( '.translation-source-language-filter' ) ) {
+ if ( selected ) {
+ label = $.uls.data.getAutonym( selected );
+ } else if ( $filter.is( '.translation-source-language-filter' )
) {
label = mw.msg(
'cx-translation-filter-from-any-language' );
} else {
label = mw.msg( 'cx-translation-filter-to-any-language'
);
}
- $options.push( $( '<option>' )
- .text( label )
- .attr( 'value', '' )
- );
- for ( i = 0; i < languages.length; i++ ) {
- $options.push( $( '<option>' )
- // Todo: use translated language name
- .text( $.uls.data.getAutonym( languages[ i ] ) )
- .prop( 'selected', selected === languages[ i ] )
- .attr( 'value', languages[ i ] )
- );
- }
- $filter.append( $options ).show();
+ $filter.text( label );
};
/**
@@ -201,22 +188,19 @@
.addClass( 'cx-filters' )
.append( $filterTabs );
- this.$sourceLanguageFilter = $( '<select>' ).addClass(
'translation-source-language-filter' );
- this.$targetLanguageFilter = $( '<select>' ).addClass(
'translation-target-language-filter' );
+ this.$sourceLanguageFilter = $( '<div>' )
+ .addClass( 'translation-source-language-filter' );
+ this.$targetLanguageFilter = $( '<div>' )
+ .addClass( 'translation-target-language-filter' );
+ this.setLanguageFilterLabel( this.$sourceLanguageFilter );
+ this.setLanguageFilterLabel( this.$targetLanguageFilter );
$sourceLanguageContainer = $( '<div>' )
.addClass( 'translation-language-source-container' )
- .append(
- this.$sourceLanguageFilter,
- $( '<div>' )
- .addClass( 'translation-language-select-arrow' )
- );
+ .append( this.$sourceLanguageFilter );
$targetLanguageContainer = $( '<div>' )
.addClass( 'translation-language-target-container' )
- .append(
- this.$targetLanguageFilter,
- $( '<div>' ).addClass(
'translation-language-select-arrow' )
- );
+ .append( this.$targetLanguageFilter );
this.$listHeader.append(
this.$filter,
@@ -239,10 +223,8 @@
$.each( this.lists, function ( name, list ) {
if ( name === type ) {
list.show();
- list.getLanguages().done( function ( languages
) {
- self.populateLanguageFilter(
self.$sourceLanguageFilter, languages, list.filters.sourceLanguage );
- self.populateLanguageFilter(
self.$targetLanguageFilter, languages, list.filters.targetLanguage );
- } );
+ self.setLanguageFilterLabel(
self.$sourceLanguageFilter, list.filters.sourceLanguage );
+ self.setLanguageFilterLabel(
self.$targetLanguageFilter, list.filters.targetLanguage );
} else {
list.hide();
}
@@ -278,16 +260,30 @@
}
} );
- this.$sourceLanguageFilter.on( 'change', function () {
- var code = $( this ).val();
-
- setFilter( 'sourceLanguage', code );
+ this.$sourceLanguageFilter.uls( {
+ onSelect: function ( language ) {
+ setFilter( 'sourceLanguage', language );
+ },
+ menuWidth: 'medium',
+ left: this.$sourceLanguageFilter.offset().left,
+ quickList: function () {
+ // TODO: We might need a smarter list here
including previous translation
+ // languages.
+ return mw.uls.getFrequentLanguageList();
+ },
+ compact: true
} );
- this.$targetLanguageFilter.on( 'change', function () {
- var code = $( this ).val();
-
- setFilter( 'targetLanguage', code );
+ this.$targetLanguageFilter.uls( {
+ onSelect: function ( language ) {
+ setFilter( 'targetLanguage', language );
+ },
+ menuWidth: 'medium',
+ left: this.$targetLanguageFilter.offset().left,
+ quickList: function () {
+ return mw.uls.getFrequentLanguageList();
+ },
+ compact: true
} );
this.initSourceSelector();
@@ -299,6 +295,8 @@
var list = this.lists[ this.activeList ];
list.filters[ type ] = value;
list.applyFilters( list.filters );
+ this.setLanguageFilterLabel( this.$sourceLanguageFilter,
list.filters.sourceLanguage );
+ this.setLanguageFilterLabel( this.$targetLanguageFilter,
list.filters.targetLanguage );
};
CXDashboard.prototype.initSourceSelector = function () {
diff --git a/modules/dashboard/ext.cx.suggestionlist.js
b/modules/dashboard/ext.cx.suggestionlist.js
index e924e3a..0cbfc8c 100644
--- a/modules/dashboard/ext.cx.suggestionlist.js
+++ b/modules/dashboard/ext.cx.suggestionlist.js
@@ -50,10 +50,6 @@
this.initLanguages();
};
- CXSuggestionList.prototype.getLanguages = function () {
- return $.Deferred().resolve( this.languages );
- };
-
CXSuggestionList.prototype.initLanguages = function () {
var storedTargetLanguage, storedSourceLanguage;
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index 09683d7..ad21ad7 100644
--- a/modules/dashboard/ext.cx.translationlist.js
+++ b/modules/dashboard/ext.cx.translationlist.js
@@ -87,18 +87,6 @@
this.$container.append( this.$translationsList );
};
- CXTranslationList.prototype.getLanguages = function () {
- var self = this;
-
- if ( this.languages ) {
- return $.Deferred().resolve( this.languages );
- }
-
- return this.loadItems().then( function () {
- return self.languages;
- } );
- };
-
CXTranslationList.prototype.loadItems = function () {
var promise, self = this;
diff --git a/modules/dashboard/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index b9d663e..6ba7071 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -43,6 +43,7 @@
position: fixed;
top: 0;
right: 0;
+
.cx-sidebar {
min-height: 100vh;
}
@@ -55,6 +56,7 @@
min-height: 85vh;
width: 100%;
margin-right: 50px;
+
ul {
margin: 0;
padding: 0;
@@ -93,6 +95,7 @@
.cx-sidebar__link--feedback {
.background-image-svg('../images/cx-discuss.svg',
'../images/cx-discuss.png');
}
+
.cx-sidebar__link--magnus {
.background-image-svg('../images/cx-find-missing.svg',
'../images/cx-find-missing.png');
}
@@ -125,9 +128,13 @@
position: fixed;
top: 0;
left: 0;
- z-index: 1000;
+
+ // .cx-tlitem__actions__trigger has a zindex of 100 and the ULS from
language filters
+ // has a z-index of 1000. So a number in between is chosen.
+ z-index: 200;
width: 66%;
padding-left: 50px;
+ padding-right: 15px;
}
.cx-translationlist-container.sticky {
@@ -140,7 +147,6 @@
.translation-target-language-filter {
background-color: #fff;
font-size: 1em;
- padding-right: 23px;
option {
font-size: 1em;
@@ -151,7 +157,7 @@
.mw-ui-one-whole;
background-color: #f0f0f0;
- padding: 0px;
+ padding: 0;
.cx-filters {
.mw-ui-one-half;
@@ -185,63 +191,40 @@
.translation-language-filter {
.mw-ui-one-half;
float: right;
- border: 1px solid #9D9D9D;
+ border: 1px solid #9d9d9d;
border-radius: 2px;
background: #fff;
padding: 0;
+ .translation-source-language-filter,
+ .translation-target-language-filter {
+ padding: 10px;
+ line-height: 1em;
+ }
+
.translation-language-source-container,
.translation-language-target-container {
- height: 37px;
position: relative;
width: 45%;
- select {
- // The border is necessary to adjust height
- border: 1px solid transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- height: 37px;
- position: absolute;
- cursor: pointer;
- }
-
- .translation-language-select-arrow {
- position: relative;
- float: right;
- width: 0;
- top: 50%;
- margin-right: 23px;
-
- &:after,
- &:before {
- border: 7px solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
-
- &:after {
- border-top-color: #fff;
- top: -6px
- }
-
- &:before {
- border-top-color: #888888;
- top: -2px;
- }
- }
+ cursor: pointer;
}
- .translation-language-source-container {
- float: left;
+ .translation-language-source-container:after,
+ .translation-language-target-container:after {
+
.background-image-svg('../../tools/images/dropdown.svg',
'../../tools/images/dropdown.png');
+ content: "";
+ display: inline-block;
+ width: 20px;
+ height: 12px;
+ right: 2px;
+ position: absolute;
+ bottom: 50%;
+ margin-bottom: -6px;
}
+ .translation-language-source-container,
.translation-language-target-container {
- float: right;
+ float: left;
}
.translation-language-arrow {
@@ -274,7 +257,7 @@
.translation-language-arrow:before {
border-color: rgba(157,157,157, 0);
- border-left-color: #9D9D9D;
+ border-left-color: #9d9d9d;
border-width: 19px;
border-left-width: 13px;
margin-top: -19px;
--
To view, visit https://gerrit.wikimedia.org/r/240032
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5ee3bdb25d8716641d88550ee1f5e85c1e384b0d
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: Amire80 <amir.ahar...@mail.huji.ac.il>
Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
