jenkins-bot has submitted this change and it was merged.
Change subject: Refactor the dashboard and translationlist modules
......................................................................
Refactor the dashboard and translationlist modules
Translation list module was handling the rendering and event
handlers of translation status filter and language selectors.
It was also rendering the new translation button.
This commit moves all the above features to the dashboard module.
Translation list is now just a widget to list the translations.
This change is to initiate the listing of suggestion initiated by
dashboard module and provide way for suggestion list to share the
language filters.
Functionality wise nothing changed.
Change-Id: I647c4b5348e59f3c5385a08907b1953da113952e
---
M extension.json
M modules/dashboard/ext.cx.dashboard.js
M modules/dashboard/ext.cx.translationlist.js
M modules/dashboard/styles/ext.cx.dashboard.less
M modules/dashboard/styles/ext.cx.translationlist.less
5 files changed, 418 insertions(+), 421 deletions(-)
Approvals:
Amire80: Looks good to me, but someone else must approve
Nikerabbit: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index 405ff73..7ddc679 100644
--- a/extension.json
+++ b/extension.json
@@ -192,6 +192,7 @@
"ext.cx.header",
"ext.cx.model",
"ext.cx.sitemapper",
+ "ext.cx.source.selector",
"ext.cx.translationlist",
"mediawiki.Uri",
"mediawiki.ui.button"
@@ -201,7 +202,13 @@
"cx-dashboard-sidebar-title",
"cx-dashboard-sidebar-information",
"cx-dashboard-sidebar-stats",
- "cx-dashboard-sidebar-feedback"
+ "cx-dashboard-sidebar-feedback",
+ "cx-create-new-translation",
+ "cx-translation-filter-suggested-translations",
+ "cx-translation-filter-published-translations",
+ "cx-translation-filter-draft-translations",
+ "cx-translation-filter-from-any-language",
+ "cx-translation-filter-to-any-language"
]
},
"ext.cx.magnuslink": {
@@ -740,7 +747,6 @@
],
"dependencies": [
"ext.cx.progressbar",
- "ext.cx.source.selector",
"ext.cx.util",
"ext.cx.widgets.overlay",
"jquery.uls.data",
@@ -748,12 +754,6 @@
],
"messages": [
"cx-dashboard-header",
- "cx-create-new-translation",
- "cx-translation-filter-suggested-translations",
- "cx-translation-filter-published-translations",
- "cx-translation-filter-draft-translations",
- "cx-translation-filter-from-any-language",
- "cx-translation-filter-to-any-language",
"cx-discard-translation",
"cx-translation-status-draft",
"cx-translation-status-deleted",
diff --git a/modules/dashboard/ext.cx.dashboard.js
b/modules/dashboard/ext.cx.dashboard.js
index 467da96..2583557 100644
--- a/modules/dashboard/ext.cx.dashboard.js
+++ b/modules/dashboard/ext.cx.dashboard.js
@@ -20,23 +20,95 @@
this.siteMapper = siteMapper;
this.$header = null;
this.$sidebar = null;
- this.$translationList = null;
+ this.translationList = null;
+ this.$translationListContainer = null;
this.$newTranslationButton = null;
+ this.$filter = null;
+ this.$listHeader = null;
+ this.$sourceLanguageFilter = null;
+ this.$targetLanguageFilter = null;
+ this.$cta = null;
this.init();
}
CXDashboard.prototype.init = function () {
this.render();
- this.initComponents();
+ this.initLists();
this.listen();
mw.hook( 'mw.cx.dashboard.ready' ).fire();
};
/**
+ * Get all the translations of given user.
+ *
+ * @return {jQuery.Promise}
+ */
+ CXDashboard.prototype.getTranslations = function () {
+ var api = new mw.Api();
+
+ return api.get( { list: 'contenttranslation' } );
+ };
+
+ /**
* Initialize the components
*/
- CXDashboard.prototype.initComponents = function () {
- this.$translationList.cxTranslationList( this.siteMapper );
+ CXDashboard.prototype.initLists = function () {
+ var self = this;
+
+ this.getTranslations().done( function ( response ) {
+ self.renderTranslations(
+ response.query.contenttranslation.translations
+ );
+ } );
+ // TODO: Get suggestions
+ };
+
+ /**
+ * Populate the language filter
+ *
+ * @param {jQuery} $filter Source filter or target filter to fill
+ * @param {String[]} languages Array of language codes
+ */
+ CXDashboard.prototype.populateLanguageFilter = function ( $filter,
languages ) {
+ var i;
+
+ for ( i = 0; i < languages.length; i++ ) {
+ $filter.append( $( '<option>' )
+ // Todo: use translated language name
+ .text( $.uls.data.getAutonym( languages[ i ] ) )
+ .attr( 'value', languages[ i ] )
+ );
+ }
+ };
+
+ /**
+ * Populates various UI components with data in the given translations.
+ */
+ CXDashboard.prototype.renderTranslations = function ( translations ) {
+ var sourceLanguages, targetLanguages;
+
+ // Remove unnecessary object wrapping to get plain list of
objects
+ translations = $.map( translations, function ( e ) {
+ return e.translation;
+ } );
+
+ this.translations = translations;
+ this.translationList = new mw.cx.CXTranslationList(
+ this.$translationListContainer,
+ this.translations,
+ this.siteMapper
+ );
+ this.translationList.init();
+ sourceLanguages = $.map( translations, function ( e ) {
+ return e.sourceLanguage;
+ } );
+
+ this.populateLanguageFilter( this.$sourceLanguageFilter,
mw.cx.unique( sourceLanguages ) );
+
+ targetLanguages = $.map( translations, function ( e ) {
+ return e.targetLanguage;
+ } );
+ this.populateLanguageFilter( this.$targetLanguageFilter,
mw.cx.unique( targetLanguages ) );
};
CXDashboard.prototype.getSidebarItems = function () {
@@ -87,28 +159,183 @@
.append( $header, $links );
};
+ /**
+ * Creates a jQuery select element from given options.
+ * @param {string} classes
+ * @param {Object} options
+ * @return {jQuery}
+ */
+ function createSelect( classes, options ) {
+ var i, value, key,
+ keys = Object.keys( options ),
+ $select = $( '<select>' ).addClass( classes );
+
+ for ( i = 0; i < keys.length; i++ ) {
+ value = keys[ i ];
+ key = options[ value ];
+
+ $select.append( $( '<option>' ).text( key ).attr(
'value', value ) );
+ }
+
+ return $select;
+ }
+
CXDashboard.prototype.render = function () {
this.$header = $( '<div>' )
.addClass( 'cx-header--dashboard' );
this.$header.cxHeader( this.siteMapper, mw.msg(
'cx-dashboard-header' ) );
- this.$translationList = $( '<div>' )
- .addClass( 'cx-translationlist-container' );
+ this.$translationListContainer = this.buildTranslationList();
this.$sidebar = $( '<div>' )
.addClass( 'cx-dashboard__sidebar' )
.append( this.buildSidebar() );
this.$dashboard = $( '<div>' )
.addClass( 'cx-dashboard' )
- .append( this.$translationList, this.$sidebar );
+ .append( this.$translationListContainer, this.$sidebar
);
this.$container.append( this.$header, this.$dashboard );
};
+ CXDashboard.prototype.buildTranslationList = function () {
+ var $sourceLanguageContainer, $targetLanguageContainer;
+
+ this.$listHeader = $( '<div>' )
+ .addClass( 'translation-filter' );
+
+ this.$newTranslationButton = $( '<button>' )
+ .addClass( 'cx-cta__new-translation mw-ui-button
mw-ui-constructive' )
+ .text( mw.msg( 'cx-create-new-translation' ) );
+ this.$cta = $( '<div>' )
+ .addClass( 'cx-cta' )
+ .append( this.$newTranslationButton );
+
+ this.$filter = $( '<span>' )
+ .addClass( 'cx-statusfilter' )
+ .append(
+ $( '<span>' )
+ .addClass( 'cx-status cx-status--draft
cx-status--selected mw-ui-input' )
+ .text( mw.msg(
'cx-translation-filter-draft-translations' ) ),
+ $( '<span>' )
+ .addClass( 'cx-status cx-status--published
mw-ui-input' )
+ .text( mw.msg(
'cx-translation-filter-published-translations' ) )
+ );
+
+ this.$sourceLanguageFilter = createSelect(
+ 'translation-source-language-filter', {
+ '': mw.msg(
'cx-translation-filter-from-any-language' )
+ }
+ );
+
+ this.$targetLanguageFilter = createSelect(
+ 'translation-target-language-filter', {
+ '': mw.msg(
'cx-translation-filter-to-any-language' )
+ }
+ );
+
+ $sourceLanguageContainer = $( '<div>' )
+ .addClass( 'translation-language-source-container' )
+ .append(
+ this.$sourceLanguageFilter,
+ $( '<div>' )
+ .addClass(
'translation-language-select-content' )
+ .text( mw.msg(
'cx-translation-filter-from-any-language' ) ),
+ $( '<div>' )
+ .addClass( 'translation-language-select-arrow' )
+ );
+
+ $targetLanguageContainer = $( '<div>' )
+ .addClass( 'translation-language-target-container' )
+ .append(
+ this.$targetLanguageFilter,
+ $( '<div>' )
+ .addClass(
'translation-language-select-content' )
+ .text( mw.msg(
'cx-translation-filter-to-any-language' ) ),
+ $( '<div>' ).addClass(
'translation-language-select-arrow' )
+ );
+
+ this.$listHeader.append(
+ this.$filter,
+ $( '<div>' ).addClass( 'translation-language-filter'
).append(
+ $sourceLanguageContainer,
+ $( '<div>' ).addClass(
'translation-language-arrow' ),
+ $targetLanguageContainer
+ ),
+ this.$cta
+ );
+
+ return $( '<div>' )
+ .addClass( 'cx-translationlist-container' )
+ .append( this.$listHeader );
+ };
+
CXDashboard.prototype.listen = function () {
+ var setFilter,
+ self = this;
+
+ setFilter = $.proxy( this.setFilter, this );
+
+ this.$filter.click( '.cx-status', function ( e ) {
+ var $filter = $( e.target );
+
+ self.$filter
+ .find( '.cx-status--selected' )
+ .removeClass( 'cx-status--selected' );
+
+ $filter.addClass( 'cx-status--selected' );
+
+ if ( $filter.is( '.cx-status--draft' ) ) {
+ setFilter( 'status', 'draft' );
+ } else if ( $filter.is( '.cx-status--published' ) ) {
+ setFilter( 'status', 'published' );
+ }
+ } );
+
+ this.$sourceLanguageFilter.on( 'change', function () {
+ var code = $( this ).val();
+
+ setFilter( 'sourceLanguage', code );
+
+ self.$sourceLanguageFilter
+ .siblings(
'.translation-language-select-content' )
+ .text( $.uls.data.getAutonym( code ) );
+ } );
+
+ this.$targetLanguageFilter.on( 'change', function () {
+ var code = $( this ).val();
+
+ setFilter( 'targetLanguage', code );
+ self.$targetLanguageFilter
+ .siblings(
'.translation-language-select-content' )
+ .text( $.uls.data.getAutonym( code ) );
+ } );
+
+ this.initSourceSelector();
+ // Scroll handler
$( window ).scroll( $.throttle( 250, $.proxy( this.scroll, this
) ) );
};
+ CXDashboard.prototype.setFilter = function ( type, value ) {
+ this.translationList.filters[ type ] = value;
+ this.translationList.applyFilters( this.translationList.filters
);
+ };
+
+ CXDashboard.prototype.initSourceSelector = function () {
+ var query,
+ sourceSelectorOptions = {};
+
+ query = new mw.Uri().query;
+ sourceSelectorOptions.sourceLanguage = query.from;
+ sourceSelectorOptions.targetLanguage = query.to;
+ sourceSelectorOptions.sourceTitle = query.page;
+ sourceSelectorOptions.targetTitle = query.targettitle;
+ this.$newTranslationButton.cxSourceSelector(
sourceSelectorOptions );
+
+ if ( query.campaign ) {
+ mw.hook( 'mw.cx.cta.accept' ).fire( query.campaign,
query.from, query.to );
+ }
+ };
+
CXDashboard.prototype.scroll = function () {
var scrollTop = $( window ).scrollTop(),
offsetTop = this.$dashboard.offset().top;
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index 9ed86d1..c5f88c9 100644
--- a/modules/dashboard/ext.cx.translationlist.js
+++ b/modules/dashboard/ext.cx.translationlist.js
@@ -14,64 +14,29 @@
*
* @class
*/
- function CXTranslationList( element, siteMapper ) {
- this.$container = $( element );
+ function CXTranslationList( $container, translations, siteMapper ) {
+ this.$container = $container;
this.siteMapper = siteMapper;
- this.translations = [];
+ this.translations = translations;
this.filters = {
status: null,
sourceLanguage: null,
targetLanguage: null
};
- this.$statusFilter = null;
this.$sourceLanguageFilter = null;
this.$targetLanguageFilter = null;
this.$header = null;
this.$confirmationDialog = null;
this.$overlay = null;
- this.init();
- this.render();
this.listen();
}
CXTranslationList.prototype.init = function () {
- var translationList = this;
-
- this.getTranslations().done( function ( response ) {
- translationList.getTranslationsCallback(
- response.query.contenttranslation.translations
- );
- } );
- };
-
- /**
- * Populates various UI components with data in the given translations.
- */
- CXTranslationList.prototype.getTranslationsCallback = function (
translations ) {
- var sourceLanguages, targetLanguages;
-
- // Remove unnecessary object wrapping to get plain list of
objects
- translations = $.map( translations, function ( e ) {
- return e.translation;
- } );
-
- this.translations = translations;
- this.$header.show();
- this.listTranslations( this.translations );
+ this.listTranslations();
this.filters.status = 'draft';
- this.applyFilters( this.filters, translations );
-
- sourceLanguages = $.map( translations, function ( e ) {
- return e.sourceLanguage;
- } );
- this.populateLanguageFilter( this.$sourceLanguageFilter,
mw.cx.unique( sourceLanguages ) );
-
- targetLanguages = $.map( translations, function ( e ) {
- return e.targetLanguage;
- } );
- this.populateLanguageFilter( this.$targetLanguageFilter,
mw.cx.unique( targetLanguages ) );
+ this.applyFilters( this.filters );
};
/**
@@ -98,20 +63,6 @@
};
/**
- * Get all the translations of given user.
- * @return {jQuery.Promise}
- */
- CXTranslationList.prototype.getTranslations = function () {
- var api = new mw.Api();
-
- return api.get( {
- action: 'query',
- list: 'contenttranslation',
- format: 'json'
- } );
- };
-
- /**
* Show a title image of the translation based on source title.
* @param {Object} translation
*/
@@ -131,9 +82,8 @@
/**
* List all translations.
- * @param {Object[]} translations
*/
- CXTranslationList.prototype.listTranslations = function ( translations
) {
+ CXTranslationList.prototype.listTranslations = function () {
var i, translation, progress, $translation,
$lastUpdated, $imageBlock, $image, $progressbar,
sourceDir, targetDir,
@@ -143,8 +93,8 @@
$titleLanguageBlock,
$translations = [];
- for ( i = 0; i < translations.length; i++ ) {
- translation = translations[ i ];
+ for ( i = 0; i < this.translations.length; i++ ) {
+ translation = this.translations[ i ];
try {
progress = JSON.parse( translation.progress );
@@ -296,130 +246,8 @@
}
};
- CXTranslationList.prototype.populateLanguageFilter = function (
$filter, languages ) {
- var i;
-
- for ( i = 0; i < languages.length; i++ ) {
- $filter.append( $( '<option>' )
- // Todo: use translated language name
- .text( $.uls.data.getAutonym( languages[ i ] ) )
- .attr( 'value', languages[ i ] )
- );
- }
- };
-
- CXTranslationList.prototype.render = function () {
- var $sourceLanguageContainer, $targetLanguageContainer;
-
- this.$header = $( '<div>' )
- .addClass( 'translation-filter' );
-
- this.$newTranslationButton = $( '<button>' )
- .addClass( 'cx-cta__new-translation mw-ui-button
mw-ui-constructive' )
- .text( mw.msg( 'cx-create-new-translation' ) );
- this.$cta = $( '<div>' )
- .addClass( 'cx-cta' )
- .append( this.$newTranslationButton );
-
- this.$statusFilter = $( '<span>' )
- .addClass( 'cx-statusfilter' )
- .append(
- $( '<span>' )
- .addClass( 'cx-status cx-status--draft
cx-status--selected mw-ui-input' )
- .text( mw.msg(
'cx-translation-filter-draft-translations' ) ),
- $( '<span>' )
- .addClass( 'cx-status
cx-status--published mw-ui-input' )
- .text( mw.msg(
'cx-translation-filter-published-translations' ) )
- );
-
- this.$sourceLanguageFilter = createSelect(
- 'translation-source-language-filter', {
- '': mw.msg(
'cx-translation-filter-from-any-language' )
- }
- );
-
- this.$targetLanguageFilter = createSelect(
- 'translation-target-language-filter', {
- '': mw.msg(
'cx-translation-filter-to-any-language' )
- }
- );
-
- $sourceLanguageContainer = $( '<div>' )
- .addClass( 'translation-language-source-container' )
- .append(
- this.$sourceLanguageFilter,
- $( '<div>' )
- .addClass(
'translation-language-select-content' )
- .text( mw.msg(
'cx-translation-filter-from-any-language' ) ),
- $( '<div>' )
- .addClass(
'translation-language-select-arrow' )
- );
-
- $targetLanguageContainer = $( '<div>' )
- .addClass( 'translation-language-target-container' )
- .append(
- this.$targetLanguageFilter,
- $( '<div>' )
- .addClass(
'translation-language-select-content' )
- .text( mw.msg(
'cx-translation-filter-to-any-language' ) ),
- $( '<div>' ).addClass(
'translation-language-select-arrow' )
- );
-
- this.$header.append(
- this.$statusFilter,
- $( '<div>' ).addClass( 'translation-language-filter'
).append(
- $sourceLanguageContainer,
- $( '<div>' ).addClass(
'translation-language-arrow' ),
- $targetLanguageContainer
- ),
- this.$cta
- );
-
- // Hide the filters till we see there are translations to list.
- this.$header.hide();
- this.$container.append( this.$header );
- };
-
CXTranslationList.prototype.listen = function () {
- var setFilter,
- translationList = this;
-
- setFilter = $.proxy( this.setFilter, this );
-
- this.$statusFilter.click( '.cx-status', function ( e ) {
- var $filter = $( e.target );
-
- translationList.$statusFilter
- .find( '.cx-status--selected' )
- .removeClass( 'cx-status--selected' );
-
- $filter.addClass( 'cx-status--selected' );
-
- if ( $filter.is( '.cx-status--draft' ) ) {
- setFilter( 'status', 'draft' );
- } else if ( $filter.is( '.cx-status--published' ) ) {
- setFilter( 'status', 'published' );
- }
- } );
-
- this.$sourceLanguageFilter.on( 'change', function () {
- var code = $( this ).val();
-
- setFilter( 'sourceLanguage', code );
-
- translationList.$sourceLanguageFilter
- .siblings(
'.translation-language-select-content' )
- .text( $.uls.data.getAutonym( code ) );
- } );
-
- this.$targetLanguageFilter.on( 'change', function () {
- var code = $( this ).val();
-
- setFilter( 'targetLanguage', code );
- translationList.$targetLanguageFilter
- .siblings(
'.translation-language-select-content' )
- .text( $.uls.data.getAutonym( code ) );
- } );
+ var translationList = this;
this.$container.on( 'click', '.cx-discard-translation',
function ( e ) {
var translation;
@@ -453,25 +281,7 @@
location.href = $( this ).find( '.translation-link'
).attr( 'href' );
} );
- this.initSourceSelector();
-
$( window ).scroll( $.throttle( 250, $.proxy( this.scroll, this
) ) );
- };
-
- CXTranslationList.prototype.initSourceSelector = function () {
- var query,
- sourceSelectorOptions = {};
-
- query = new mw.Uri().query;
- sourceSelectorOptions.sourceLanguage = query.from;
- sourceSelectorOptions.targetLanguage = query.to;
- sourceSelectorOptions.sourceTitle = query.page;
- sourceSelectorOptions.targetTitle = query.targettitle;
- this.$newTranslationButton.cxSourceSelector(
sourceSelectorOptions );
-
- if ( query.campaign ) {
- mw.hook( 'mw.cx.cta.accept' ).fire( query.campaign,
query.from, query.to );
- }
};
CXTranslationList.prototype.scroll = function () {
@@ -577,17 +387,12 @@
return new mw.Api().postWithToken( 'edit', apiParams );
};
- CXTranslationList.prototype.setFilter = function ( type, value ) {
- this.filters[ type ] = value;
- this.applyFilters( this.filters, this.translations );
- };
-
- CXTranslationList.prototype.applyFilters = function ( filters,
translations ) {
+ CXTranslationList.prototype.applyFilters = function ( filters ) {
var i, translation, visible, j, filterProp, filterValue,
keys = Object.keys( filters );
- for ( i = 0; i < translations.length; i++ ) {
- translation = translations[ i ];
+ for ( i = 0; i < this.translations.length; i++ ) {
+ translation = this.translations[ i ];
visible = true;
for ( j = 0; j < keys.length; j++ ) {
@@ -609,35 +414,5 @@
}
};
- /**
- * Creates a jQuery select element from given options.
- * @param {string} classes
- * @param {Object} options
- * @return {jQuery}
- */
- function createSelect( classes, options ) {
- var i, value, key,
- keys = Object.keys( options ),
- $select = $( '<select>' ).addClass( classes );
-
- for ( i = 0; i < keys.length; i++ ) {
- value = keys[ i ];
- key = options[ value ];
-
- $select.append( $( '<option>' ).text( key ).attr(
'value', value ) );
- }
-
- return $select;
- }
-
- $.fn.cxTranslationList = function ( siteMapper ) {
- return this.each( function () {
- var $this = $( this ),
- data = $this.data( 'cxtranslationlist' );
-
- if ( !data ) {
- $this.data( 'cx', ( data = new
CXTranslationList( this, siteMapper ) ) );
- }
- } );
- };
+ mw.cx.CXTranslationList = CXTranslationList;
}( jQuery, mediaWiki ) );
diff --git a/modules/dashboard/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index 8b08e3a..b2a0edd 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -5,9 +5,27 @@
background-color: #f0f0f0;
}
-.cx-column__title {
- font-size: 2.2em;
- font-family: 'Linux Libertine', Georgia, Times, serif;
+.cx-cta {
+ .mw-ui-item;
+ .mw-ui-one-whole;
+
+ padding: 20px 0;
+ float: left;
+ font-size: 16px;
+ background-color: #f0f0f0;
+ z-index: 100;
+
+ &__new-translation:before {
+ content: "";
+ display: inline-block;
+ vertical-align: baseline;
+ height: 16px;
+ width: 16px;
+ margin-right: 5px;
+ .background-image-svg('../images/plus_white.svg',
'../images/plus_white.png');
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ }
}
.cx-dashboard {
@@ -103,6 +121,148 @@
}
}
+.translation-filter {
+ .mw-ui-one-whole;
+
+ background-color: #f0f0f0;
+ padding: 0px;
+ margin-bottom: 20px;
+
+ .cx-statusfilter {
+ float: left;
+ border: 1px solid #656565;
+ border-radius: 2px;
+ overflow: hidden;
+
+ :first-child {
+ border-left: 0px;
+ }
+
+ .cx-status {
+ overflow: hidden;
+ float: left;
+ border-left: 1px solid #656565;
+ cursor: pointer;
+
+ padding: 10px;
+ background-color: white;
+ color: #333;
+
+ &--selected {
+ background-color: #656565;
+ color: #fff;
+ }
+ }
+ }
+
+ .translation-language-filter {
+ float: right;
+ border: 1px solid #9D9D9D;
+ border-radius: 2px;
+ background: #fff;
+ padding: 0;
+
+ .translation-language-source-container,
+ .translation-language-target-container {
+ height: 37px;
+ position: relative;
+
+ select {
+ // The border is necessary to adjust height
+ border: 1px solid transparent;
+ opacity: 0;
+ width: 100%;
+ height: 37px;
+ position: absolute;
+ cursor: pointer;
+ }
+
+ .translation-language-select-content {
+ margin: 0 4px 0 8px;
+ float: left;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ height: 37px;
+ line-height: 37px;
+ color: #333;
+ }
+
+ .translation-language-select-arrow {
+ position: relative;
+ float: left;
+ 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;
+ }
+ }
+ }
+
+ .translation-language-source-container {
+ float: left;
+ }
+
+ .translation-language-target-container {
+ float: right;
+ }
+
+ .translation-language-arrow {
+ position: relative;
+ float: left;
+ width: 0;
+ height: 37px;
+ margin-right: 16px;
+ }
+
+ .translation-language-arrow:after,
+ .translation-language-arrow:before {
+ left: 100%;
+ top: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ }
+
+ .translation-language-arrow:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-left-color: #fff;
+ border-width: 18px;
+ border-left-width: 12px;
+ margin-top: -18px;
+ }
+
+ .translation-language-arrow:before {
+ border-color: rgba(157,157,157, 0);
+ border-left-color: #9D9D9D;
+ border-width: 19px;
+ border-left-width: 13px;
+ margin-top: -19px;
+ }
+ }
+}
+
.skin-vector #p-personal li {
float: left;
}
diff --git a/modules/dashboard/styles/ext.cx.translationlist.less
b/modules/dashboard/styles/ext.cx.translationlist.less
index 03c9cb0..7be92a9 100644
--- a/modules/dashboard/styles/ext.cx.translationlist.less
+++ b/modules/dashboard/styles/ext.cx.translationlist.less
@@ -1,29 +1,6 @@
@import "../../widgets/common/ext.cx.common";
@import "mediawiki.mixins";
-.cx-cta {
- .mw-ui-item;
- .mw-ui-one-whole;
-
- padding: 20px 0;
- float: left;
- font-size: 16px;
- background-color: #f0f0f0;
- z-index: 100;
-
- &__new-translation:before {
- content: "";
- display: inline-block;
- vertical-align: baseline;
- height: 16px;
- width: 16px;
- margin-right: 5px;
- .background-image-svg('../images/plus_white.svg',
'../images/plus_white.png');
- background-size: 16px 16px;
- background-repeat: no-repeat;
- }
-}
-
.cx-translationlist-container {
.mw-ui-item;
.mw-ui-two-thirds;
@@ -254,148 +231,6 @@
z-index: 1000;
width: 66%;
padding-left: 50px;
-}
-
-.translation-filter {
- .mw-ui-one-whole;
-
- background-color: #f0f0f0;
- padding: 0px;
- margin-bottom: 20px;
-
- .cx-statusfilter {
- float: left;
- border: 1px solid #656565;
- border-radius: 2px;
- overflow: hidden;
-
- :first-child {
- border-left: 0px;
- }
-
- .cx-status {
- overflow: hidden;
- float: left;
- border-left: 1px solid #656565;
- cursor: pointer;
-
- padding: 10px;
- background-color: white;
- color: #333;
-
- &--selected {
- background-color: #656565;
- color: #fff;
- }
- }
- }
-
- .translation-language-filter {
- float: right;
- border: 1px solid #9D9D9D;
- border-radius: 2px;
- background: #fff;
- padding: 0;
-
- .translation-language-source-container,
- .translation-language-target-container {
- height: 37px;
- position: relative;
-
- select {
- // The border is necessary to adjust height
- border: 1px solid transparent;
- opacity: 0;
- width: 100%;
- height: 37px;
- position: absolute;
- cursor: pointer;
- }
-
- .translation-language-select-content {
- margin: 0 4px 0 8px;
- float: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- height: 37px;
- line-height: 37px;
- color: #333;
- }
-
- .translation-language-select-arrow {
- position: relative;
- float: left;
- 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;
- }
- }
- }
-
- .translation-language-source-container {
- float: left;
- }
-
- .translation-language-target-container {
- float: right;
- }
-
- .translation-language-arrow {
- position: relative;
- float: left;
- width: 0;
- height: 37px;
- margin-right: 16px;
- }
-
- .translation-language-arrow:after,
- .translation-language-arrow:before {
- left: 100%;
- top: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
-
- .translation-language-arrow:after {
- border-color: rgba(255, 255, 255, 0);
- border-left-color: #fff;
- border-width: 18px;
- border-left-width: 12px;
- margin-top: -18px;
- }
-
- .translation-language-arrow:before {
- border-color: rgba(157,157,157, 0);
- border-left-color: #9D9D9D;
- border-width: 19px;
- border-left-width: 13px;
- margin-top: -19px;
- }
- }
}
.cx-draft-discard-dialog {
--
To view, visit https://gerrit.wikimedia.org/r/232677
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I647c4b5348e59f3c5385a08907b1953da113952e
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>
Gerrit-Reviewer: Amire80 <[email protected]>
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
