jenkins-bot has submitted this change and it was merged.
Change subject: CSS class prefixing and BEMification
......................................................................
CSS class prefixing and BEMification
To see how it would look like
Change-Id: I8b79392c03f3dc7fda49f32e9812bc388cd7e5a5
---
M modules/base/ext.cx.base.js
M modules/base/styles/ext.cx.base.less
M modules/header/ext.cx.header.js
M modules/header/ext.cx.progressbar.js
M modules/header/styles/ext.cx.header.less
M modules/header/styles/ext.cx.progressbar.less
M modules/source/ext.cx.source.js
M modules/translation/ext.cx.publish.js
M modules/translation/ext.cx.translation.js
M modules/translation/styles/ext.cx.translation.less
M tests/browser/features/step_definitions/special_content_translation_steps.rb
M tests/browser/features/support/pages/content_translation_page.rb
12 files changed, 123 insertions(+), 134 deletions(-)
Approvals:
Amire80: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/base/ext.cx.base.js b/modules/base/ext.cx.base.js
index b826108..ee10ef0 100644
--- a/modules/base/ext.cx.base.js
+++ b/modules/base/ext.cx.base.js
@@ -43,19 +43,22 @@
ContentTranslation.prototype.render = function () {
var $content;
- $content = $( '<div>' ).addClass( 'content' )
+ $content = $( '<div>' ).addClass( 'cx-widget' )
.append(
- $( '<div>' ).addClass( 'header' ),
- $( '<div>' ).addClass( 'source' ),
- $( '<div>' ).addClass( 'translation' ),
- $( '<div>' ).addClass( 'tools' )
+ $( '<div>' ).addClass( 'cx-widget__header' ),
+ $( '<div>' ).addClass( 'cx-widget__columns' )
+ .append(
+ $( '<div>' ).addClass(
'cx-column cx-column--source' ),
+ $( '<div>' ).addClass(
'cx-column cx-column--translation' ),
+ $( '<div>' ).addClass(
'cx-column cx-column--aids' )
+ )
);
this.$container.append( $content );
- this.$header = this.$container.find( '.header' );
- this.$source = this.$container.find( '.source' );
- this.$translation = this.$container.find( '.translation' );
- this.$tools = this.$container.find( '.tools' );
+ this.$header = this.$container.find( '.cx-widget__header' );
+ this.$source = this.$container.find( '.cx-column--source' );
+ this.$translation = this.$container.find(
'.cx-column--translation' );
+ this.$tools = this.$container.find( '.cx-column--aids' );
};
$.fn.cx = function ( options ) {
diff --git a/modules/base/styles/ext.cx.base.less
b/modules/base/styles/ext.cx.base.less
index a025a14..a29bc45 100644
--- a/modules/base/styles/ext.cx.base.less
+++ b/modules/base/styles/ext.cx.base.less
@@ -6,38 +6,36 @@
color: @grey;
}
-.content {
+/**
+ * Container for the translation widget
+ */
+.cx-widget {
.mw-ui-grid;
color: @grey;
}
-.header {
+.cx-widget__header {
.mw-ui-item;
.mw-ui-one-whole;
.mw-ui-palm-one-whole;
}
-.source {
+.cx-column {
.mw-ui-item;
.mw-ui-one-third;
+}
+
+.cx-column--source,
+.cx-column--translation {
.mw-ui-palm-one-half;
}
-.translation {
- .mw-ui-item;
- .mw-ui-one-third;
- .mw-ui-palm-one-half;
-
-}
-
-.tools {
- .mw-ui-item;
- .mw-ui-one-third;
+.cx-column--aids {
.mw-ui-palm-one-whole;
background: #f0f0f0;
-
}
+/* Unused? */
.suggestion-list {
.mw-ui-grid;
}
diff --git a/modules/header/ext.cx.header.js b/modules/header/ext.cx.header.js
index 8987d21..6f6797e 100644
--- a/modules/header/ext.cx.header.js
+++ b/modules/header/ext.cx.header.js
@@ -28,14 +28,14 @@
};
ContentTranslationHeader.prototype.render = function () {
+ this.$container.addClass( 'cx-header' );
this.$container.append(
$( '<div>' )
- .addClass( 'logo' ),
+ .addClass( 'cx-header__logo' ),
$( '<div>' )
- .addClass( 'user-details' )
+ .addClass( 'cx-header__user-details' )
.append(
$( '<a>' )
- .addClass( 'user-name' )
.attr( 'href', mw.util.getUrl(
'User:' + mw.user.getName() ) )
.text ( mw.user.getName() )
)
@@ -43,20 +43,20 @@
this.$container.append(
$( '<div>' )
- .addClass( 'translation-bar' )
+ .addClass( 'cx-header__bar' )
.append(
$( '<div>' )
- .addClass(
'translation-center-link' )
+ .addClass(
'cx-header__translation-center' )
.append(
$( '<a>' )
.text(
'Translation center' )
.attr( 'href',
'#' )
),
$( '<div>' )
- .addClass(
'translation-progress' )
+ .addClass(
'cx-header__progressbar' )
.cxProgressBar(),
$( '<button>' )
- .addClass( 'publish
mw-ui-button mw-ui-constructive' )
+ .addClass( 'cx-header__publish
publish mw-ui-button mw-ui-constructive' )
.text( 'Publish translation' )
)
);
diff --git a/modules/header/ext.cx.progressbar.js
b/modules/header/ext.cx.progressbar.js
index 6ff935c..7a8c51f 100644
--- a/modules/header/ext.cx.progressbar.js
+++ b/modules/header/ext.cx.progressbar.js
@@ -31,14 +31,15 @@
ProgressBar.prototype.render = function () {
this.$container.append(
$( '<div>' )
- .addClass( 'progressbar' )
+ .addClass( 'cx-progressbar' )
.append(
- $( '<span>')
- .addClass( 'status' )
+ $( '<span>' ).addClass(
'cx-progressbar__bar' )
),
- $( '<span>' )
- .addClass( 'status-text' )
+ $( '<span>' ).addClass( 'cx-progressbar__text' )
);
+
+ this.$bar = this.$container.find( '.cx-progressbar__bar' );
+ this.$text = this.$container.find( '.cx-progressbar__text' );
this.update( 0 );
};
@@ -49,10 +50,8 @@
ProgressBar.prototype.update = function ( percentage ) {
this.status = percentage;
- this.$container.find( '.status' )
- .css( 'width', this.status + '%' );
- this.$container.find( '.status-text' )
- .text( this.status + '% translated' );
+ this.$bar.css( 'width', this.status + '%' );
+ this.$text.text( this.status + '% translated' );
};
$.fn.cxProgressBar = function ( options ) {
diff --git a/modules/header/styles/ext.cx.header.less
b/modules/header/styles/ext.cx.header.less
index b650198..b475fcd 100644
--- a/modules/header/styles/ext.cx.header.less
+++ b/modules/header/styles/ext.cx.header.less
@@ -1,52 +1,51 @@
@import "../../base/styles/grid/agora-grid";
-.header {
- .logo {
- .mw-ui-item;
- .mw-ui-two-thirds;
- height: 100px;
- background-image: url(../images/wikipedia-logo-landscape.png);
- background-repeat: no-repeat;
- background-position: left top;
- }
+.cx-header__logo {
+ .mw-ui-item;
+ .mw-ui-two-thirds;
+ height: 100px;
+ background-image: url(../images/wikipedia-logo-landscape.png);
+ background-repeat: no-repeat;
+ background-position: left top;
+}
- .user-details {
- .mw-ui-item;
- .mw-ui-one-third;
- .user-name {
- float: right;
+.cx-header__user-details {
+ .mw-ui-item;
+ .mw-ui-one-third;
+
+ > a {
+ float: right;
+ }
+}
+
+.cx-header__bar {
+ .mw-ui-item;
+ .mw-ui-one-whole;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 10px;
+}
+
+.cx-header__translation-center {
+ .mw-ui-item;
+ .mw-ui-four-sixths;
+ a {
+ &:before {
+ content: "";
+ display: inline-block;
+ border: 4px solid transparent;
+ border-right-color: #555;
+ margin: 0 8px 0 0;
}
}
+}
- .translation-bar {
- .mw-ui-item;
- .mw-ui-one-whole;
- border-bottom: 1px solid #ddd;
- padding-bottom: 10px;
- .translation-center-link {
- .mw-ui-item;
- .mw-ui-four-sixths;
- a {
- &:before {
- content: "";
- display: inline-block;
- border: 4px solid transparent;
- border-right-color: #555;
- margin: 0 8px 0 0;
- }
- }
- }
+.cx-header__progressbar {
+ .mw-ui-item;
+ .mw-ui-one-sixth;
+}
- .translation-progress {
- .mw-ui-item;
- .mw-ui-one-sixth;
- padding-bottom: 10px;
- }
-
- .publish {
- .mw-ui-item;
- .mw-ui-one-eighth;
- float: right;
- }
- }
+.cx-header__publish {
+ .mw-ui-item;
+ .mw-ui-one-eighth;
+ float: right;
}
diff --git a/modules/header/styles/ext.cx.progressbar.less
b/modules/header/styles/ext.cx.progressbar.less
index ec86d54..f77ff32 100644
--- a/modules/header/styles/ext.cx.progressbar.less
+++ b/modules/header/styles/ext.cx.progressbar.less
@@ -1,6 +1,6 @@
@import "../../base/styles/grid/agora-grid";
-.progressbar {
+.cx-progressbar {
.mw-ui-item;
.mw-ui-one-sixth;
height: 10px;
@@ -9,22 +9,23 @@
background: #fbfbfb;
vertical-align: middle;
position: absolute;
- .status {
- background: #3892E3;
- display: inline-block;
- height: 10px;
- border-radius: 10px;
- position: absolute;
- left: 0;
- transition: width 1s;
- }
}
-.status-text {
+.cx-progressbar__bar {
+ background: #3892E3;
+ display: inline-block;
+ height: 10px;
+ border-radius: 10px;
+ position: absolute;
+ left: 0;
+ transition: width 1s;
+}
+
+.cx-progressbar__text {
.mw-ui-item;
.mw-ui-one-whole;
font-size: 0.8em;
color: #999;
text-align: right;
padding-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/modules/source/ext.cx.source.js b/modules/source/ext.cx.source.js
index a0e8fac..ee746ac 100644
--- a/modules/source/ext.cx.source.js
+++ b/modules/source/ext.cx.source.js
@@ -32,28 +32,28 @@
ContentTranslationSource.prototype.render = function () {
this.$container.append(
$( '<h2>' )
- .addClass( 'title' )
+ .addClass( 'cx-column__title' )
.text( this.page )
);
this.$container.append(
$( '<div>' )
- .addClass( 'content' )
+ .addClass( 'cx-column__content' )
.text( 'Loading ' + ( this.page || '' ) )
);
};
ContentTranslationSource.prototype.load = function () {
var api = new mw.Api(),
- ctSource = this;
+ cxSource = this;
api.get( {
action: 'parse',
page: this.page,
disablepp: true
} ).done( function ( result ) {
- ctSource.$container.find( '.title' ).html(
result.parse.title );
- ctSource.$container.find( '.content' ).html(
result.parse.text['*'] );
+ cxSource.$container.find( '.cx-column__title' ).html(
result.parse.title );
+ cxSource.$container.find( '.cx-column__content' ).html(
result.parse.text['*'] );
} );
};
diff --git a/modules/translation/ext.cx.publish.js
b/modules/translation/ext.cx.publish.js
index 3484550..911c955 100644
--- a/modules/translation/ext.cx.publish.js
+++ b/modules/translation/ext.cx.publish.js
@@ -15,9 +15,10 @@
mw.cx.publish = function () {
var translatedTitle, translatedContent, summary, sourceTitle;
- sourceTitle = $( '.source > h2' ).text();
- translatedTitle = $( '.translation .title' ).text();
- translatedContent = $( '.translation .article' ).text();
+ // @todo: Refactor so that this module is not grabbing random
dom nodes
+ sourceTitle = $( '.cx-column--source > h2' ).text();
+ translatedTitle = $( '.cx-column--translation > h2' ).text();
+ translatedContent = $( '.cx-column--translation .article'
).text();
summary = '[ContentTranslation] Translated from ' + sourceTitle;
// To be saved under User:UserName
translatedTitle = 'User:' + mw.user.getName() + '/' +
translatedTitle;
diff --git a/modules/translation/ext.cx.translation.js
b/modules/translation/ext.cx.translation.js
index 3a0e91b..91160ec 100644
--- a/modules/translation/ext.cx.translation.js
+++ b/modules/translation/ext.cx.translation.js
@@ -32,13 +32,13 @@
this.$container.append(
$( '<h2>' )
.attr( 'contenteditable', true )
- .addClass( 'title' )
+ .addClass( 'cx-column__title' )
.text( 'Translated title' )
);
$content = $( '<div>' )
.attr( 'contenteditable', true )
- .addClass( 'article' )
+ .addClass( 'cx-column__content' )
.text( 'Translated text' );
this.$container.append( $content );
diff --git a/modules/translation/styles/ext.cx.translation.less
b/modules/translation/styles/ext.cx.translation.less
index f14e3f6..3419209 100644
--- a/modules/translation/styles/ext.cx.translation.less
+++ b/modules/translation/styles/ext.cx.translation.less
@@ -1,8 +1,5 @@
@import "../../base/styles/grid/agora-grid";
-.translation {
- .title,
- .article {
- outline: none;
- }
-}
\ No newline at end of file
+.cx-column--translation > [contenteditable] {
+ outline: none;
+}
diff --git
a/tests/browser/features/step_definitions/special_content_translation_steps.rb
b/tests/browser/features/step_definitions/special_content_translation_steps.rb
index 7ba9c01..dea4249 100644
---
a/tests/browser/features/step_definitions/special_content_translation_steps.rb
+++
b/tests/browser/features/step_definitions/special_content_translation_steps.rb
@@ -3,7 +3,7 @@
end
When(/^I empty the editing area in the translation column$/) do
- on(ContentTranslationPage).target_text_element
+ pending
end
When(/^I press the "Publish Translation" button$/) do
@@ -13,7 +13,6 @@
When(/^I write "(.*?)" in the editing area in the translation column$/) do
|translation|
on(ContentTranslationPage).translation_editor.send_keys(translation)
end
-
Then(/^I don't see a "Publish Translation" button$/) do
on(ContentTranslationPage).publish_translation_element.should_not
be_visible
@@ -40,11 +39,11 @@
end
Then(/^I see an input box pre\-filled with the text "(.*?)" above the editing
area in the second column$/) do |text|
- on(ContentTranslationPage).target_title.should == text
+ on(ContentTranslationPage).title("translation").should == text
end
Then(/^I see a source column with the text "(.*?)"$/) do |text|
- on(ContentTranslationPage).source_text.text.should == text
+ on(ContentTranslationPage).content("source").text.should == text
end
Then(/^I see a translation column with an empty editing area$/) do
@@ -60,11 +59,11 @@
end
Then(/^I see the message "You must be logged in to translate in this
page\."$/) do
- on(ContentTranslationPage).content.should == "You must be logged in to
translate this page"
+ on(ContentTranslationPage).main_widget.should == "You must be logged in
to translate this page"
end
Then(/^I see the title "(.*?)" at the top of the source column$/) do
|source_page_title|
- on(ContentTranslationPage).source_title.should == source_page_title
+ on(ContentTranslationPage).title("source").text.should ==
source_page_title
end
Then(/^I see the username at the top of the page$/) do |username|
@@ -100,7 +99,7 @@
end
Then(/^the source column text is not editable$/) do
-
on(ContentTranslationPage).source_text.attribute_value("contenteditable").should
== nil
+
on(ContentTranslationPage).content("source").attribute_value("contenteditable").should
== nil
end
Then(/^the text near the translation progress bar says "(.*?)"$/) do |text|
diff --git a/tests/browser/features/support/pages/content_translation_page.rb
b/tests/browser/features/support/pages/content_translation_page.rb
index 7f20899..630e863 100644
--- a/tests/browser/features/support/pages/content_translation_page.rb
+++ b/tests/browser/features/support/pages/content_translation_page.rb
@@ -5,16 +5,16 @@
a(:view_page, class: "view-page")
- button(:publish_translation, class: "publish-translation")
+ button(:publish_translation, class: "cx-header__publish")
- div(:progress_bar, class: "progressbar")
+ div(:progress_bar, class: "cx-progressbar")
div(:content, class: "content")
a(:user_name, class: "user-name")
def column(column_type)
- @browser.div(class: column_type)
+ @browser.div(class: "cx-column--#{column_type}")
end
def language_label(column_type)
@@ -25,23 +25,15 @@
@browser.div(class: "progressbar").span(class: "status-text")
end
- def source_text
- column("source").div(class: "content")
+ def content(column_type)
+ column(column_type).div(class: "cx-column__content")
end
- def source_title
- column("source").h1(class: "source-title")
- end
-
- def target_text
- column("translation").div(class: "article")
- end
-
- def target_title
- column("translation").text_field(class: "target-title")
+ def title(column_type)
+ column(column_type).div(class: "cx-column__title")
end
def translation_editor
- column("translation").div(class: "translation-editor")
+ content("translation")
end
end
--
To view, visit https://gerrit.wikimedia.org/r/107345
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8b79392c03f3dc7fda49f32e9812bc388cd7e5a5
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Nikerabbit <[email protected]>
Gerrit-Reviewer: Amire80 <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
