Petar.petkovic has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/364443 )
Change subject: Make language selector more compact
......................................................................
Make language selector more compact
Change background color to Base90. Remove the chevron.
Set the maximum width of language selector to one third
of available space, and make the language labels to be cropped
with ellipsis for the exceptionally long cases.
Bug: T169967
Change-Id: I7e0fe1cef4d9d150eb3ecc92568f0e071cf09926
---
M modules/dashboard/ext.cx.dashboard.js
M modules/dashboard/ext.cx.suggestionlist.js
M modules/dashboard/styles/ext.cx.dashboard.less
M modules/dashboard/styles/ext.cx.lists.common.less
D modules/tools/images/dropdown.png
D modules/tools/images/dropdown.svg
6 files changed, 53 insertions(+), 24 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/43/364443/1
diff --git a/modules/dashboard/ext.cx.dashboard.js
b/modules/dashboard/ext.cx.dashboard.js
index d3ee47d..218add1 100644
--- a/modules/dashboard/ext.cx.dashboard.js
+++ b/modules/dashboard/ext.cx.dashboard.js
@@ -275,6 +275,7 @@
self.setLanguageFilterLabel(
list.languageFilter.$sourceLanguageFilter, list.filters.sourceLanguage );
self.setLanguageFilterLabel(
list.languageFilter.$targetLanguageFilter, list.filters.targetLanguage );
+ self.setLanguageFilterMaxWidth( list );
} else {
list.hide();
}
@@ -344,8 +345,35 @@
} );
this.initSourceSelector();
+ // May become unnecessary when responsiveness is implemented
+ $( window ).resize( function () {
+ $.each( self.lists, function ( name, list ) {
+ self.setLanguageFilterMaxWidth( list );
+ } );
+ } );
// Scroll handler
$( window ).scroll( $.throttle( 250, $.proxy( this.scroll, this
) ) );
+ };
+
+ /**
+ * Set the maximum width of source and target language filter containers
+ *
+ * @param {jQuery} $languageFilter Translation language filter
+ */
+ CXDashboard.prototype.setLanguageFilterMaxWidth = function (
$languageFilter ) {
+ var headerWidth = $languageFilter.$headerContainer.width(),
+ languageFilterWidth =
$languageFilter.languageFilter.$element.width();
+
+ if ( headerWidth !== 0 &&
+ languageFilterWidth !== 0 &&
+ headerWidth / 3 < languageFilterWidth + 1 // Added 1 to
compensate for JS arithmetic
+ ) {
+
$languageFilter.languageFilter.$sourceLanguageFilter.parent().css( 'max-width',
'50%' );
+
$languageFilter.languageFilter.$targetLanguageFilter.parent().css( 'max-width',
'50%' );
+ } else {
+
$languageFilter.languageFilter.$sourceLanguageFilter.parent().css( 'max-width',
'none' );
+
$languageFilter.languageFilter.$targetLanguageFilter.parent().css( 'max-width',
'none' );
+ }
};
CXDashboard.prototype.setFilter = function ( type, value ) {
@@ -354,6 +382,7 @@
list.applyFilters( list.filters );
this.setLanguageFilterLabel(
list.languageFilter.$sourceLanguageFilter, list.filters.sourceLanguage );
this.setLanguageFilterLabel(
list.languageFilter.$targetLanguageFilter, list.filters.targetLanguage );
+ this.setLanguageFilterMaxWidth( list );
};
CXDashboard.prototype.initSourceSelector = function () {
diff --git a/modules/dashboard/ext.cx.suggestionlist.js
b/modules/dashboard/ext.cx.suggestionlist.js
index 3d62fcc..7bc8db9 100644
--- a/modules/dashboard/ext.cx.suggestionlist.js
+++ b/modules/dashboard/ext.cx.suggestionlist.js
@@ -73,17 +73,16 @@
this.$publicCollection = null;
this.$publicCollectionContainer = null;
this.$refreshTrigger = null;
+ this.$headerContainer = null;
this.seed = null;
this.init();
this.listen();
}
CXSuggestionList.prototype.init = function () {
- var $listHeaderContainer;
-
this.seed = parseInt( Math.random() * 10000, 10 );
this.$personalCollection = $( '<div>' ).addClass(
'cx-suggestionlist__personal' );
- $listHeaderContainer = $( '<div>' )
+ this.$headerContainer = $( '<div>' )
.addClass( 'cx-suggestionlist__header' )
.append( $( '<span>' )
.text( mw.msg( 'cx-suggestionlist-title' ) )
@@ -91,7 +90,7 @@
this.languageFilter.$element );
this.$publicCollectionContainer = $( '<div>' )
.addClass( 'cx-suggestionlist__public' )
- .append( $listHeaderContainer );
+ .append( this.$headerContainer );
this.$publicCollection = $( '<div>' )
.addClass( 'cx-suggestionlist__public-items' );
this.$publicCollectionContainer.append( this.$publicCollection
).hide();
diff --git a/modules/dashboard/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index 2d6b31a..0fedd30 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -122,7 +122,7 @@
.translation-source-language-filter,
.translation-target-language-filter {
- background-color: #fff;
+ background-color: @colorGray15;
font-size: 1em;
option {
diff --git a/modules/dashboard/styles/ext.cx.lists.common.less
b/modules/dashboard/styles/ext.cx.lists.common.less
index a7477d7..db6faa2 100644
--- a/modules/dashboard/styles/ext.cx.lists.common.less
+++ b/modules/dashboard/styles/ext.cx.lists.common.less
@@ -37,37 +37,39 @@
justify-content: space-between;
.translation-language-filter {
- width: 50%;
+ max-width: 33.33%;
border: 1px solid #9d9d9d;
border-radius: @borderRadius;
- background: #fff;
+ background: @colorGray15;
padding: 0;
.translation-language-source-container,
.translation-language-target-container {
- position: relative;
- width: ~'calc(50% - 8px)';
- cursor: pointer;
float: left;
+ position: relative;
+ box-sizing: border-box;
+ cursor: pointer;
+ }
+
+ .translation-language-source-container {
+ padding-right: 8px;
+ margin-right: -8px;
+ }
+
+ .translation-language-target-container {
+ padding-left: 8px;
+ margin-left: -8px;
}
.translation-source-language-filter,
.translation-target-language-filter {
+ max-height: 34px;
padding: 8px;
line-height: 1em;
- }
- .translation-source-language-filter:after,
- .translation-target-language-filter: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;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.translation-language-arrow {
@@ -92,7 +94,7 @@
.translation-language-arrow:after {
border-color: rgba( 255, 255, 255, 0 );
- border-left-color: #fff;
+ border-left-color: @colorGray15;
border-width: 17px;
border-left-width: 12px;
margin-top: -17px;
diff --git a/modules/tools/images/dropdown.png
b/modules/tools/images/dropdown.png
deleted file mode 100644
index 3d49353..0000000
--- a/modules/tools/images/dropdown.png
+++ /dev/null
Binary files differ
diff --git a/modules/tools/images/dropdown.svg
b/modules/tools/images/dropdown.svg
deleted file mode 100644
index 6664148..0000000
--- a/modules/tools/images/dropdown.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg
xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 14.410568"><path
fill="#ababab" d="M4 4.407l2.374-2.374 5.621 5.626 5.626-5.66 2.379 2.367-7.998
8.044z"/></svg>
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/364443
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7e0fe1cef4d9d150eb3ecc92568f0e071cf09926
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
