Nikerabbit has uploaded a new change for review.
https://gerrit.wikimedia.org/r/107345
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/translation/ext.cx.publish.js
M modules/translation/styles/ext.cx.translation.less
M tests/browser/features/support/pages/content_translation_page.rb
9 files changed, 108 insertions(+), 109 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/45/107345/1
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/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/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/support/pages/content_translation_page.rb
b/tests/browser/features/support/pages/content_translation_page.rb
index b0804b0..a09b2ae 100644
--- a/tests/browser/features/support/pages/content_translation_page.rb
+++ b/tests/browser/features/support/pages/content_translation_page.rb
@@ -3,11 +3,12 @@
include URL
page_url URL.url("Special:ContentTranslation?<%=params[:extra]%>")
+ /* Currently unused? */
a(:view_page, class: "view-page")
- button(:publish_translation, class: "publish-translation")
+ button(:publish_translation, class: "publish")
- div(:progress_bar, class: "progressbar")
+ div(:progress_bar, class: "cx-progressbar")
div(:content, class: "content")
@@ -20,14 +21,14 @@
end
def source_title
- column("source").h1(class: "source-title")
+ column("cx-column--source").h2(class: "title")
end
def target_title
- column("translation").text_field(class: "target-title")
+ column("cx-column--translation").text_field(class: "title")
end
def translation_editor
- column("translation").div(class: "translation-editor")
+ column("cx-column--translation").div(class: "article")
end
end
--
To view, visit https://gerrit.wikimedia.org/r/107345
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I8b79392c03f3dc7fda49f32e9812bc388cd7e5a5
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Nikerabbit <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
