jenkins-bot has submitted this change and it was merged. Change subject: Prefix or rename classes to avoid conflicts ......................................................................
Prefix or rename classes to avoid conflicts https://bugs.launchpad.net/openstack-ci/+bug/1254911 Prefixed classes with tux- and used the BEM model for class naming for clarity. Since this made obvious some shortcomings, I also: * reordered the style file to match structure by moving related rules together; * removed one unused rule block; * combined two blocks for tux-grouplist into one; * used addClass multiple times if element has both grid classes and other classes; * changed the function to attach event listeners, * avoided repeating a $menu.find, * removed a non-existing .ext-translate-msggroup-selector-menu .footer. Since I reduced specifity in some places, I had to increase it again to override grid styles. These are now marked explicitly and they use the .grid prefix in rules for consistency. This patch mainly targets the message group selector and dropdownmenu modules. For example tux-breadcrumb still uses short unprefixed classes which were not renamed in this patch. Verified that this does not change appearance by visually comparing the group selector on Special:Translate before and after this patch. Change-Id: I0163e7fc7aead3e9309aba7b17f19e9d7217d604 --- M resources/css/ext.translate.dropdownmenu.css M resources/css/ext.translate.groupselector.css M resources/css/ext.translate.loader.css M resources/js/ext.translate.dropdownmenu.js M resources/js/ext.translate.editor.js M resources/js/ext.translate.groupselector.js M resources/js/ext.translate.special.translate.js M resources/js/ext.translate.workflowselector.js M specials/SpecialTranslate.php 9 files changed, 136 insertions(+), 117 deletions(-) Approvals: Siebrand: Looks good to me, approved Nemo bis: Looks good to me, but someone else must approve jenkins-bot: Verified diff --git a/resources/css/ext.translate.dropdownmenu.css b/resources/css/ext.translate.dropdownmenu.css index 4b48e6f..10dc335 100644 --- a/resources/css/ext.translate.dropdownmenu.css +++ b/resources/css/ext.translate.dropdownmenu.css @@ -1,4 +1,4 @@ -.dropdown-menu { +.tux-dropdown-menu { padding-top: 2em; border: 1px solid #c9c9c9; /* @noflip */ diff --git a/resources/css/ext.translate.groupselector.css b/resources/css/ext.translate.groupselector.css index a99f79a..74f0514 100644 --- a/resources/css/ext.translate.groupselector.css +++ b/resources/css/ext.translate.groupselector.css @@ -1,12 +1,11 @@ -.ext-translate-msggroup-selector-menu { - width: 600px; -} - -.ext-translate-msggroup-selector { +/* + * Breadcrumb + */ +.tux-breadcrumb { margin-bottom: 10px; } -.ext-translate-msggroup-selector .grouplink + .grouplink:before { +.tux-breadcrumb .grouplink + .grouplink:before { border-left: 4px solid #777; border-top: 4px solid transparent; border-bottom: 4px solid transparent; @@ -17,11 +16,7 @@ left: -5px; } -.ext-translate-msggroup-list:last-child { - border-radius: 0 0 5px 5px; -} - -.ext-translate-msggroup-selector span { +.tux-breadcrumb span { border: medium none; color: #555555; font-size: 14pt; @@ -32,12 +27,12 @@ padding-top: 1.25em; } -.ext-translate-msggroup-selector span.grouptitle { +.tux-breadcrumb span.grouptitle { float: left; padding: 0 6px 0 0; } -.ext-translate-msggroup-selector span.grouplink { +.tux-breadcrumb span.grouplink { color: #0645AD; cursor: pointer; float: left; @@ -46,7 +41,10 @@ position: relative; } -.ext-translate-msggroup-selector-menu { +/** + * Group selector + */ +.tux-groupselector { position: absolute; top: 14px; right: 0; @@ -55,6 +53,7 @@ float: left; margin-top: 13px; min-width: 600px; + width: 600px; padding: 0; border: 1px solid #888; background-color: #F0F0F0; @@ -68,18 +67,8 @@ text-align: left; } -.ext-translate-msggroup-selector-menu .title { - border: none; - color: #555555; - font-size: 14pt; - font-weight: normal; - line-height: 1.25em; - padding: 5px 0 0 10px; - margin: 0; -} - /* The triangle shaped callout */ -.ext-translate-msggroup-selector-menu:before { +.tux-groupselector:before { border-bottom: 7px solid #888; border-left: 7px solid transparent; border-right: 7px solid transparent; @@ -90,7 +79,7 @@ top: -7px; } -.ext-translate-msggroup-selector-menu:after { +.tux-groupselector:after { border-bottom: 6px solid #F0F0F0; border-left: 6px solid transparent; border-right: 6px solid transparent; @@ -101,25 +90,35 @@ top: -6px; } -.ext-translate-msggroup-selector-menu .filters-group { +.grid .tux-groupselector__title { + border: none; + color: #555555; + font-size: 14pt; + font-weight: normal; + line-height: 1.25em; + padding: 5px 0 0 10px; /* grid override */ + margin: 0; +} + +.tux-groupselector__filter { position: relative; height: 36px; border-bottom: solid 1px #c9c9c9; } -.ext-translate-msggroup-selector-menu .filters { - position: absolute; +.grid .tux-groupselector__filter__tabs { + position: absolute; /* grid override */ bottom: 0; } -.ext-translate-msggroup-selector-menu .search-group { - position: absolute; +.grid .tux-groupselector__filter__search { + position: absolute; /* grid override */ + padding-right: 0; /* grid override */ right: 0; bottom: 2px; - padding-right: 0; } -.ext-translate-msggroup-search-input { +.tux-groupselector__filter__search__input { font-size: 14px; width: 100%; height: 28px; @@ -127,7 +126,7 @@ padding: 0 5px; } -.ext-translate-msggroup-search-icon { +.tux-groupselector__filter__search__icon { background: url('../images/search.png') no-repeat scroll right center transparent; background-image: -webkit-linear-gradient(transparent, transparent), url(../images/search.svg); /* @embed */ @@ -138,37 +137,62 @@ float: right; } -.ext-translate-msggroup-list { +.tux-groupselector button { + height: 32px; + margin: 5px; + font-weight: bold; +} + +/* + * Group tab + */ +.tux-grouptab { + color: #252525; + cursor: pointer; + padding: 2px 5px; + margin: 0 4px; + display: inline-block; +} + +.tux-grouptab--selected { + border-bottom: 2px solid #0645AD; +} + +/* + * Group list + */ +.tux-grouplist { max-height: 400px; overflow-y: auto; overflow-x: hidden; background-color: #FFFFFF; min-height: 200px; + border-radius: 0 0 5px 5px; } -.ext-translate-msggroup-item { +.tux-grouplist__item { position: relative; border-bottom: 1px solid #EEEEEE; height: 50px; cursor: pointer; } -.ext-translate-msggroup-item .label { +.grid .tux-grouplist__item__label { + padding-bottom: 3px; /* grid override */ + padding-left: 15px; /* grid override */ font-weight: normal; line-height: 40px; - padding-bottom: 3px; - padding-left: 15px; cursor: pointer; white-space: nowrap; } -.ext-translate-msggroup-item .label .tux-statsbar { +.tux-grouplist__item__label .tux-statsbar { position: absolute; bottom: 0; width: 150px; } -.ext-translate-msggroup-item .icon { +.tux-grouplist__item__icon { background: url(../images/project.png) no-repeat scroll right center transparent; background-image: -webkit-linear-gradient(transparent, transparent), url(../images/project.svg); /* @embed */ @@ -179,42 +203,14 @@ width: 50px; } -.ext-translate-msggroup-selector-menu button { - height: 32px; - margin: 5px; - font-weight: bold; -} - -.ext-translate-msggroup-selector-menu .footer { - border-top: 1px solid #c9c9c9; -} - -.ext-translate-msggroup-selector-menu .subgroup-info { +.grid .tux-grouplist__item__subgroups { + position: absolute; /* grid override */ + padding: 0 15px 2px 0; /* grid override */ font-weight: normal; line-height: 1.25em; - position: absolute; bottom: 0; right: 0; - padding: 0 15px 2px 0; text-align: right; color: #777; font-size: 10pt; -} - -.ext-translate-msggroup-category { - color: #252525; - cursor: pointer; - padding: 2px 5px; - margin: 0 4px; - display: inline-block; -} - -.ext-translate-msggroup-category.selected { - border-bottom: 2px solid #0645AD; -} - -.ext-translate-msggroup-selector-menu .tux-loading-indicator { - top: 50%; - left: 50%; - position: absolute; } diff --git a/resources/css/ext.translate.loader.css b/resources/css/ext.translate.loader.css index c1a01e4..73594ea 100644 --- a/resources/css/ext.translate.loader.css +++ b/resources/css/ext.translate.loader.css @@ -37,3 +37,9 @@ width: 34px; backface-visibility: hidden; } + +.tux-loading-indicator--centered { + top: 50%; + left: 50%; + position: absolute; +} diff --git a/resources/js/ext.translate.dropdownmenu.js b/resources/js/ext.translate.dropdownmenu.js index 6cd0a95..0b1eb02 100644 --- a/resources/js/ext.translate.dropdownmenu.js +++ b/resources/js/ext.translate.dropdownmenu.js @@ -5,7 +5,7 @@ // Hide the dropdown menu when clicking outside of it $( 'html' ).on( 'click', function ( e ) { if ( !e.isDefaultPrevented() ) { - $( '.dropdown-menu' ).addClass( 'hide' ); + $( '.tux-dropdown-menu' ).addClass( 'hide' ); } } ); } ); diff --git a/resources/js/ext.translate.editor.js b/resources/js/ext.translate.editor.js index f3b151f..1a61c0d 100644 --- a/resources/js/ext.translate.editor.js +++ b/resources/js/ext.translate.editor.js @@ -382,7 +382,7 @@ ); return $( '<ul>' ) - .addClass( 'dropdown-menu tux-message-tools-menu hide' ) + .addClass( 'tux-dropdown-menu tux-message-tools-menu hide' ) .append( $historyItem, $deleteItem, $translationsItem ); }, diff --git a/resources/js/ext.translate.groupselector.js b/resources/js/ext.translate.groupselector.js index 8f945e2..ba7cb61 100644 --- a/resources/js/ext.translate.groupselector.js +++ b/resources/js/ext.translate.groupselector.js @@ -49,52 +49,63 @@ $loader, $msgGroupList; - this.$menu = $( '<div class="ext-translate-msggroup-selector-menu grid">' ); + this.$menu = $( '<div>' ) + .addClass( 'tux-groupselector' ) + .addClass( 'grid' ); $groupTitle = $( '<div>' ) .addClass( 'row' ) .append( $( '<h3>' ) - .addClass( 'ten columns title' ) + .addClass( 'tux-groupselector__title' ) + .addClass( 'ten columns' ) .text( mw.msg( 'translate-msggroupselector-projects' ) ) ); $searchIcon = $( '<div>' ) - .addClass( 'two columns ext-translate-msggroup-search-icon' ); + .addClass( 'two columns tux-groupselector__filter__search__icon' ); $searchInput = $( '<input>' ) .prop( 'type', 'text' ) - .addClass( 'ext-translate-msggroup-search-input' ); + .addClass( 'tux-groupselector__filter__search__input' ); if ( mw.translate.isPlaceholderSupported( $searchInput ) ) { $searchInput.prop( 'placeholder', mw.msg( 'translate-msggroupselector-search-placeholder' ) ); } - $search = $( '<div>' ).addClass( 'ten columns' ) + $search = $( '<div>' ) + .addClass( 'ten columns' ) .append( $searchInput ); - $listFilters = $( '<div>' ).addClass( 'filters six columns' ) + $listFilters = $( '<div>' ) + .addClass( 'tux-groupselector__filter__tabs' ) + .addClass( 'six columns' ) .append( $( '<div>' ) - .addClass( 'ext-translate-msggroup-category all selected' ) + .addClass( 'tux-grouptab tux-grouptab--all tux-grouptab--selected' ) .text( mw.msg( 'translate-msggroupselector-search-all' ) ), $( '<div>' ) - .addClass( 'ext-translate-msggroup-category recent' ) + .addClass( 'tux-grouptab tux-grouptab--recent' ) .text( mw.msg( 'translate-msggroupselector-search-recent' ) ) ); $searchGroup = $( '<div>' ) - .addClass( 'six columns search-group' ) + .addClass( 'tux-groupselector__filter__search' ) + .addClass( 'six columns' ) .append( $searchIcon, $search ); $listFiltersGroup = $( '<div>' ) - .addClass( 'row filters-group' ) + .addClass( 'tux-groupselector__filter' ) + .addClass( 'row' ) .append( $listFilters, $searchGroup ); $msgGroupList = $( '<div>' ) - .addClass( 'row ext-translate-msggroup-list' ); + .addClass( 'tux-grouplist' ) + .addClass( 'row' ); - $loader = $( '<div>' ).addClass( 'tux-loading-indicator' ); + $loader = $( '<div>' ) + .addClass( 'tux-loading-indicator tux-loading-indicator--centered' ); + this.$menu.append( $groupTitle, $listFiltersGroup, $loader, $msgGroupList ); $( 'body' ).append( this.$menu ); @@ -105,20 +116,20 @@ */ show: function () { // Hide all other open menus - $( '.ext-translate-msggroup-selector-menu.open' ) + $( '.tux-groupselector.open' ) .removeClass( 'open' ) .hide(); this.$menu.addClass( 'open' ).show(); this.position(); // Keep the focus in the message group search box. - this.$menu.find( '.ext-translate-msggroup-search-input' ).focus(); + this.$menu.find( '.tux-groupselector__filter__search__input' ).focus(); this.showDefaultGroups(); }, showDefaultGroups: function () { var self = this; - this.$menu.find( '.ext-translate-msggroup-list' ).empty(); + this.$menu.find( '.tux-grouplist' ).empty(); this.loadGroups().done( function( groups ) { var groupsToShow = mw.translate.findGroup( self.parentGroupId, groups ); @@ -154,8 +165,8 @@ * Attach event listeners */ listen: function () { - var groupSelector = this, - $search; + var $search, $tabs, + groupSelector = this; // Hide the selector panel when clicking outside of it $( 'html' ).on( 'click', function () { @@ -176,7 +187,7 @@ // Handle click on row item. This selects the group, and in case it has // subgroups, also opens a new menu to show them. - groupSelector.$menu.on( 'click', '.ext-translate-msggroup-item', function () { + groupSelector.$menu.on( 'click', '.tux-grouplist__item', function () { var $newLink, messageGroup = $( this ).data( 'msggroup' ); @@ -189,12 +200,12 @@ groupSelector.$trigger.addClass( 'expanded' ); // FIXME In future, if we are going to have multiple groupselectors per page // this will fail. - $( '.ext-translate-msggroup-selector .tail' ).remove(); + $( '.tux-breadcrumb .tail' ).remove(); $newLink = $( '<span>' ) .addClass( 'grouptitle grouplink tail' ) .text( messageGroup.label ); - $( '.ext-translate-msggroup-selector .grouplink:last' ).after( $newLink ); + $( '.tux-breadcrumb .grouplink:last' ).after( $newLink ); $newLink.data( 'msggroupid', messageGroup.id ); if ( messageGroup.groups && messageGroup.groups.length > 0 ) { @@ -212,7 +223,8 @@ } ); // Handle the tabs All | Recent - groupSelector.$menu.find( '.ext-translate-msggroup-category' ).on( 'click', function () { + $tabs = groupSelector.$menu.find( '.tux-grouptab' ); + $tabs.on( 'click', function () { var $this = $( this ); /* Do nothing if user clicks the active tab. @@ -220,21 +232,20 @@ * - The blue bottom border highlight doesn't jump around * - No flash when clicking recent tab again */ - if ( $this.hasClass( 'selected' ) ) { + if ( $this.hasClass( 'tux-grouptab--selected' ) ) { return; } - groupSelector.$menu.find( '.ext-translate-msggroup-category' ) - .toggleClass( 'selected' ); + $tabs.toggleClass( 'tux-grouptab--selected' ); - if ( $this.hasClass( 'recent' ) ) { + if ( $this.hasClass( 'tux-grouptab--recent' ) ) { groupSelector.getRecentGroups(); } else { groupSelector.showDefaultGroups(); } } ); - $search = this.$menu.find( '.ext-translate-msggroup-search-input' ); + $search = this.$menu.find( '.tux-groupselector__filter__search__input' ); $search.on( 'click', $.proxy( this.show, this ) ) .on( 'keypress', $.proxy( this.keyup, this ) ) .on( 'keyup', $.proxy( this.keyup, this ) ); @@ -250,7 +261,7 @@ keyup: function () { var query, groupSelector = this, - $search = this.$menu.find( '.ext-translate-msggroup-search-input' ); + $search = this.$menu.find( '.tux-groupselector__filter__search__input' ); // Respond to the keypress events after a small timeout to avoid freeze when typed fast. delay( function () { @@ -275,8 +286,8 @@ getRecentGroups: function () { var api = new mw.Api(), groupSelector = this, - $list = this.$menu.find( '.ext-translate-msggroup-list' ), - recentMessageGroups = $( '.ext-translate-msggroup-selector' ) + $list = this.$menu.find( '.tux-grouplist' ), + recentMessageGroups = $( '.tux-breadcrumb' ) .data( 'recentmsggroups' ); $list.empty(); @@ -305,7 +316,7 @@ action: 'translateuser', format: 'json' } ).done( function ( result ) { - $( '.ext-translate-msggroup-selector' ) + $( '.tux-breadcrumb' ) .data( 'recentmsggroups', result.translateuser.recentgroups ); addRecentMessageGroups( result.translateuser.recentgroups ); groupSelector.$menu.find( '.tux-loading-indicator' ).hide(); @@ -353,7 +364,7 @@ return; } - this.$menu.find( '.ext-translate-msggroup-list' ).empty(); + this.$menu.find( '.tux-grouplist' ).empty(); this.loadGroups().done( function( groups ) { var currentGroup, index, matcher, foundGroups = []; @@ -418,7 +429,7 @@ var groupSelector = this, $msgGroupRows, $parent, - $msgGroupList = this.$menu.find( '.ext-translate-msggroup-list' ), + $msgGroupList = this.$menu.find( '.tux-grouplist' ), targetLanguage = this.options.language; this.$menu.find( '.tux-loading-indicator' ).hide(); @@ -446,7 +457,7 @@ } ); if ( groupSelector.parentGroupId ) { - $parent = $msgGroupList.find( '.ext-translate-msggroup-item[data-msggroupid="' + + $parent = $msgGroupList.find( '.tux-grouplist__item[data-msggroupid="' + groupSelector.parentGroupId + '"]' ); if ( $parent.length ) { @@ -473,18 +484,23 @@ $subGroupsLabel, style = ''; - $row = $( '<div>' ).addClass( 'row ext-translate-msggroup-item' ) + $row = $( '<div>' ) + .addClass( 'row tux-grouplist__item' ) .attr( 'data-msggroupid', messagegroup.id ) .data( 'msggroup', messagegroup ); - $icon = $( '<div>' ).addClass( 'one column icon' ); + $icon = $( '<div>' ) + .addClass( 'tux-grouplist__item__icon' ) + .addClass( 'one column' ); $statsbar = $( '<div>' ).languagestatsbar( { language: this.options.language, group: messagegroup.id } ); - $label = $( '<div>' ).addClass( 'seven columns label' ) + $label = $( '<div>' ) + .addClass( 'tux-grouplist__item__label' ) + .addClass( 'seven columns' ) .append( $( '<span>' ) .prop( { dir: 'auto' } ) @@ -512,7 +528,8 @@ if ( messagegroup.groups && messagegroup.groups.length > 0 ) { $subGroupsLabel = $( '<div>' ) - .addClass( 'four columns subgroup-info' ) + .addClass( 'tux-grouplist__item__subgroups' ) + .addClass( 'four columns' ) .text( mw.msg( 'translate-msggroupselector-view-subprojects', messagegroup.groups.length ) ); } @@ -527,7 +544,7 @@ * @returns {boolean} */ eventSupported: function ( eventName ) { - var $search = this.$menu.find( '.ext-translate-msggroup-search-input' ), + var $search = this.$menu.find( '.tux-groupselector__filter__search__input' ), isSupported = eventName in $search; if ( !isSupported ) { diff --git a/resources/js/ext.translate.special.translate.js b/resources/js/ext.translate.special.translate.js index 6b49281..940fd3a 100644 --- a/resources/js/ext.translate.special.translate.js +++ b/resources/js/ext.translate.special.translate.js @@ -288,7 +288,7 @@ // This is the selector for non-TUX mode prepareWorkflowSelector(); - $( '.ext-translate-msggroup-selector .grouplink' ).msggroupselector( { + $( '.tux-breadcrumb .grouplink' ).msggroupselector( { onSelect: mw.translate.changeGroup, language: targetLanguage } ); diff --git a/resources/js/ext.translate.workflowselector.js b/resources/js/ext.translate.workflowselector.js index 0e142fc..5911ce0 100644 --- a/resources/js/ext.translate.workflowselector.js +++ b/resources/js/ext.translate.workflowselector.js @@ -101,7 +101,7 @@ } $list = $( '<ul>' ) - .addClass( 'dropdown-menu tux-workflow-status-selector hide' ); + .addClass( 'tux-dropdown-menu tux-workflow-status-selector hide' ); $display = $( '<div>' ) .addClass( 'tux-workflow-status' ) diff --git a/specials/SpecialTranslate.php b/specials/SpecialTranslate.php index b6107f6..26bcccd 100644 --- a/specials/SpecialTranslate.php +++ b/specials/SpecialTranslate.php @@ -542,7 +542,7 @@ // @todo FIXME The selector should have expanded parent-child lists $output = Html::openElement( 'div', array( - 'class' => 'eight columns ext-translate-msggroup-selector', + 'class' => 'eight columns tux-breadcrumb', 'data-language' => $this->options['language'], ) ) . Html::element( 'span', @@ -766,7 +766,7 @@ $output->addHtml( Html::openElement( 'div', array( - 'class' => 'eight columns ext-translate-msggroup-selector', + 'class' => 'eight columns tux-breadcrumb', 'data-language' => $this->options['language'], ) ) . '<span class="grouptitle">' . -- To view, visit https://gerrit.wikimedia.org/r/163187 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I0163e7fc7aead3e9309aba7b17f19e9d7217d604 Gerrit-PatchSet: 6 Gerrit-Project: mediawiki/extensions/Translate Gerrit-Branch: master Gerrit-Owner: Nikerabbit <niklas.laxst...@gmail.com> Gerrit-Reviewer: Nemo bis <federicol...@tiscali.it> Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com> Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com> Gerrit-Reviewer: Siebrand <siebr...@kitano.nl> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
