Santhosh has uploaded a new change for review. https://gerrit.wikimedia.org/r/232677
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 removes 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(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation refs/changes/77/232677/1 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: newchange Gerrit-Change-Id: I647c4b5348e59f3c5385a08907b1953da113952e 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