Legoktm has uploaded a new change for review.
https://gerrit.wikimedia.org/r/232667
Change subject: Revert "Refactor the dashboard and translationlist modules"
......................................................................
Revert "Refactor the dashboard and translationlist modules"
References a non-existent API module, breaking
action=paraminfo
This reverts commit f20737008c1ff01f53294470b01f6f69691e6473.
Bug: T109659
Change-Id: I6ac06482faecb55827947edc07673406ab598b22
---
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, 421 insertions(+), 420 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/67/232667/1
diff --git a/extension.json b/extension.json
index b9e1b1c..405ff73 100644
--- a/extension.json
+++ b/extension.json
@@ -42,7 +42,6 @@
},
"APIListModules": {
"contenttranslation": "ApiQueryContentTranslation",
- "contenttranslationlist": "ApiQueryContentTranslationList",
"contenttranslationstats": "ApiQueryContentTranslationStats",
"contenttranslationlangtrend":
"ApiQueryContentTranslationLanguageTrend",
"cxpublishedtranslations": "ApiQueryPublishedTranslations"
@@ -60,7 +59,6 @@
"ApiContentTranslationPublish":
"api/ApiContentTranslationPublish.php",
"ApiContentTranslationToken":
"api/ApiContentTranslationToken.php",
"ApiQueryContentTranslation":
"api/ApiQueryContentTranslation.php",
- "ApiQueryContentTranslationList":
"api/ApiQueryContentTranslationList.php",
"ApiQueryContentTranslationLanguageTrend":
"api/ApiQueryContentTranslationLanguageTrend.php",
"ApiQueryContentTranslationStats":
"api/ApiQueryContentTranslationStats.php",
"ApiQueryPublishedTranslations":
"api/ApiQueryPublishedTranslations.php",
@@ -194,7 +192,6 @@
"ext.cx.header",
"ext.cx.model",
"ext.cx.sitemapper",
- "ext.cx.source.selector",
"ext.cx.translationlist",
"mediawiki.Uri",
"mediawiki.ui.button"
@@ -204,13 +201,7 @@
"cx-dashboard-sidebar-title",
"cx-dashboard-sidebar-information",
"cx-dashboard-sidebar-stats",
- "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"
+ "cx-dashboard-sidebar-feedback"
]
},
"ext.cx.magnuslink": {
@@ -749,6 +740,7 @@
],
"dependencies": [
"ext.cx.progressbar",
+ "ext.cx.source.selector",
"ext.cx.util",
"ext.cx.widgets.overlay",
"jquery.uls.data",
@@ -756,6 +748,12 @@
],
"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 2583557..467da96 100644
--- a/modules/dashboard/ext.cx.dashboard.js
+++ b/modules/dashboard/ext.cx.dashboard.js
@@ -20,95 +20,23 @@
this.siteMapper = siteMapper;
this.$header = null;
this.$sidebar = null;
- this.translationList = null;
- this.$translationListContainer = null;
+ this.$translationList = 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.initLists();
+ this.initComponents();
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.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.initComponents = function () {
+ this.$translationList.cxTranslationList( this.siteMapper );
};
CXDashboard.prototype.getSidebarItems = function () {
@@ -159,181 +87,26 @@
.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.$translationListContainer = this.buildTranslationList();
+ this.$translationList = $( '<div>' )
+ .addClass( 'cx-translationlist-container' );
this.$sidebar = $( '<div>' )
.addClass( 'cx-dashboard__sidebar' )
.append( this.buildSidebar() );
this.$dashboard = $( '<div>' )
.addClass( 'cx-dashboard' )
- .append( this.$translationListContainer, this.$sidebar
);
+ .append( this.$translationList, 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 () {
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index c5f88c9..9ed86d1 100644
--- a/modules/dashboard/ext.cx.translationlist.js
+++ b/modules/dashboard/ext.cx.translationlist.js
@@ -14,29 +14,64 @@
*
* @class
*/
- function CXTranslationList( $container, translations, siteMapper ) {
- this.$container = $container;
+ function CXTranslationList( element, siteMapper ) {
+ this.$container = $( element );
this.siteMapper = siteMapper;
- this.translations = translations;
+ this.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 () {
- this.listTranslations();
+ 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.filters.status = 'draft';
- this.applyFilters( this.filters );
+ 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 ) );
};
/**
@@ -63,6 +98,20 @@
};
/**
+ * 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
*/
@@ -82,8 +131,9 @@
/**
* List all translations.
+ * @param {Object[]} translations
*/
- CXTranslationList.prototype.listTranslations = function () {
+ CXTranslationList.prototype.listTranslations = function ( translations
) {
var i, translation, progress, $translation,
$lastUpdated, $imageBlock, $image, $progressbar,
sourceDir, targetDir,
@@ -93,8 +143,8 @@
$titleLanguageBlock,
$translations = [];
- for ( i = 0; i < this.translations.length; i++ ) {
- translation = this.translations[ i ];
+ for ( i = 0; i < translations.length; i++ ) {
+ translation = translations[ i ];
try {
progress = JSON.parse( translation.progress );
@@ -246,8 +296,130 @@
}
};
+ 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 translationList = this;
+ 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 ) );
+ } );
this.$container.on( 'click', '.cx-discard-translation',
function ( e ) {
var translation;
@@ -281,7 +453,25 @@
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 () {
@@ -387,12 +577,17 @@
return new mw.Api().postWithToken( 'edit', apiParams );
};
- CXTranslationList.prototype.applyFilters = function ( filters ) {
+ CXTranslationList.prototype.setFilter = function ( type, value ) {
+ this.filters[ type ] = value;
+ this.applyFilters( this.filters, this.translations );
+ };
+
+ CXTranslationList.prototype.applyFilters = function ( filters,
translations ) {
var i, translation, visible, j, filterProp, filterValue,
keys = Object.keys( filters );
- for ( i = 0; i < this.translations.length; i++ ) {
- translation = this.translations[ i ];
+ for ( i = 0; i < translations.length; i++ ) {
+ translation = translations[ i ];
visible = true;
for ( j = 0; j < keys.length; j++ ) {
@@ -414,5 +609,35 @@
}
};
- mw.cx.CXTranslationList = CXTranslationList;
+ /**
+ * 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 ) ) );
+ }
+ } );
+ };
}( jQuery, mediaWiki ) );
diff --git a/modules/dashboard/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index b2a0edd..8b08e3a 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -5,27 +5,9 @@
background-color: #f0f0f0;
}
-.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-column__title {
+ font-size: 2.2em;
+ font-family: 'Linux Libertine', Georgia, Times, serif;
}
.cx-dashboard {
@@ -118,148 +100,6 @@
background-color: #fff;
option {
padding: 5px;
- }
-}
-
-.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;
- }
}
}
diff --git a/modules/dashboard/styles/ext.cx.translationlist.less
b/modules/dashboard/styles/ext.cx.translationlist.less
index 7be92a9..03c9cb0 100644
--- a/modules/dashboard/styles/ext.cx.translationlist.less
+++ b/modules/dashboard/styles/ext.cx.translationlist.less
@@ -1,6 +1,29 @@
@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;
@@ -233,6 +256,148 @@
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 {
.mw-ui-item;
--
To view, visit https://gerrit.wikimedia.org/r/232667
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6ac06482faecb55827947edc07673406ab598b22
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Legoktm <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
