Santhosh has uploaded a new change for review.
https://gerrit.wikimedia.org/r/240032
Change subject: Dashboard: Use ULS for language selection
......................................................................
Dashboard: Use ULS for language selection
Bug: T112051
Change-Id: I5ee3bdb25d8716641d88550ee1f5e85c1e384b0d
---
M extension.json
M modules/dashboard/ext.cx.dashboard.js
M modules/dashboard/styles/ext.cx.dashboard.less
3 files changed, 71 insertions(+), 96 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/32/240032/1
diff --git a/extension.json b/extension.json
index f1ad542..f2d5f99 100644
--- a/extension.json
+++ b/extension.json
@@ -221,7 +221,8 @@
"ext.cx.translationlist",
"ext.cx.suggestionlist",
"mediawiki.Uri",
- "mediawiki.ui.button"
+ "mediawiki.ui.button",
+ "ext.uls.mediawiki"
],
"messages": [
"cx-create-new-translation",
diff --git a/modules/dashboard/ext.cx.dashboard.js
b/modules/dashboard/ext.cx.dashboard.js
index 5e53115..6935e9a 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,28 @@
}
} );
- 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 () {
+ 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 +293,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/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index cc9ca65..102c163 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -8,7 +8,6 @@
.cx-cta {
.mw-ui-item;
.mw-ui-one-whole;
-
padding: 20px 0;
float: left;
font-size: 16px;
@@ -43,6 +42,7 @@
position: fixed;
top: 0;
right: 0;
+
.cx-sidebar {
min-height: 100vh;
}
@@ -55,6 +55,7 @@
min-height: 85vh;
width: 100%;
margin-right: 50px;
+
ul {
margin: 0;
padding: 0;
@@ -93,6 +94,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');
}
@@ -116,7 +118,6 @@
.cx-translationlist-container {
.mw-ui-item;
.mw-ui-two-thirds;
-
padding: 0 10px 0 0;
background-color: #f0f0f0;
}
@@ -125,7 +126,7 @@
position: fixed;
top: 0;
left: 0;
- z-index: 1000;
+ z-index: 100;
width: 66%;
padding-left: 50px;
}
@@ -134,6 +135,7 @@
.translation-target-language-filter {
background-color: #fff;
font-size: 1em;
+
option {
font-size: 1em;
}
@@ -141,9 +143,8 @@
.translation-filter {
.mw-ui-one-whole;
-
background-color: #f0f0f0;
- padding: 0px;
+ padding: 0;
margin-bottom: 20px;
.cx-filters {
@@ -153,7 +154,7 @@
overflow: hidden;
padding: 0;
- :last-child {
+ :last-child {
border-right: 1px solid #656565;
}
@@ -178,63 +179,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 {
@@ -267,7 +245,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: newchange
Gerrit-Change-Id: I5ee3bdb25d8716641d88550ee1f5e85c1e384b0d
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
