jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/382687 )
Change subject: Use upstream OOUI icon for list images
......................................................................
Use upstream OOUI icon for list images
No need to keep a downstream copies after this.
Also minor style tweaks to match the other MW title widgets on the page:
* Remove border-radius
* Use background-size: cover for thumbnails
Explicitly adds mediawiki.widgets as a dependency of
suggestion/translation lists, but this module is already
loaded on the dashboard.
Change-Id: Id051ee4f9290004f1dda2ddc3d6dfa7a6d66e081
---
M extension.json
M modules/dashboard/ext.cx.suggestionlist.js
M modules/dashboard/ext.cx.translationlist.js
D modules/dashboard/images/page_lightgray.png
D modules/dashboard/images/page_lightgray.svg
M modules/dashboard/styles/ext.cx.lists.common.less
M modules/source/ext.cx.source.selector.js
D modules/source/images/article-grey-ltr.png
D modules/source/images/article-grey-ltr.svg
D modules/source/images/article-grey-rtl.png
D modules/source/images/article-grey-rtl.svg
M modules/source/styles/ext.cx.source.selector.less
M modules/ui/widgets/mw.cx.ui.TitleOptionWidget.js
13 files changed, 36 insertions(+), 28 deletions(-)
Approvals:
jenkins-bot: Verified
Santhosh: Looks good to me, approved
diff --git a/extension.json b/extension.json
index 989a82c..868d83a 100644
--- a/extension.json
+++ b/extension.json
@@ -913,6 +913,7 @@
"ext.cx.util",
"jquery.uls.data",
"moment",
+ "mediawiki.widgets",
"oojs-ui.styles.icons-interactions",
"oojs-ui.styles.icons-moderation",
"oojs-ui.styles.icons-editing-core",
@@ -946,6 +947,7 @@
"ext.cx.util",
"jquery.uls.data",
"mediawiki.storage",
+ "mediawiki.widgets",
"oojs-ui.styles.icons-interactions"
],
"messages": [
diff --git a/modules/dashboard/ext.cx.suggestionlist.js
b/modules/dashboard/ext.cx.suggestionlist.js
index c1c1e32..4891018 100644
--- a/modules/dashboard/ext.cx.suggestionlist.js
+++ b/modules/dashboard/ext.cx.suggestionlist.js
@@ -358,9 +358,9 @@
}
$.each( map[ page.title ], function ( i, item ) {
if ( page.thumbnail ) {
- item.$image.css( {
- 'background-image': 'url(' +
page.thumbnail.source + ')'
- } );
+ item.$image.css( 'background-image',
'url(' + page.thumbnail.source + ')' );
+ } else {
+ item.$image.addClass(
'oo-ui-icon-page-existing' );
}
if ( page.terms ) {
item.$desc.text( page.terms.description
).show();
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index c5cb2b8..5721c10 100644
--- a/modules/dashboard/ext.cx.translationlist.js
+++ b/modules/dashboard/ext.cx.translationlist.js
@@ -192,10 +192,8 @@
apply = function ( page ) {
if ( page.thumbnail ) {
$.each( map[ page.title ], function ( i, $image
) {
- $image.css( {
- 'background-image': 'url(' +
page.thumbnail.source + ')'
- } );
-
+ $image.removeClass(
'oo-ui-icon-page-existing' )
+ .css( 'background-image',
'url(' + page.thumbnail.source + ')' );
} );
}
};
@@ -288,7 +286,7 @@
.addClass( 'last-updated' )
.text( moment( translation.lastUpdateTimestamp,
'YYYYMMDDHHmmss Z' ).fromNow() );
$image = $( '<div>' )
- .addClass( 'cx-tlitem__image' );
+ .addClass( 'cx-tlitem__image
oo-ui-icon-page-existing' );
$progressbar = $( '<div>' )
.addClass( 'progressbar' )
.cxProgressBar( {
diff --git a/modules/dashboard/images/page_lightgray.png
b/modules/dashboard/images/page_lightgray.png
deleted file mode 100644
index 43d5b58..0000000
--- a/modules/dashboard/images/page_lightgray.png
+++ /dev/null
Binary files differ
diff --git a/modules/dashboard/images/page_lightgray.svg
b/modules/dashboard/images/page_lightgray.svg
deleted file mode 100644
index c246ab7..0000000
--- a/modules/dashboard/images/page_lightgray.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 612 792">
- <path d="M321.385 365.23h123.077V211.386H321.385V365.23zm-153.847
61.54h276.924V396H167.538v30.77zm0 61.538h276.924v-30.77H167.538v30.77zm0
61.538h276.924v-30.77H167.538v30.77zm123.077-276.923H167.538v30.77h123.077v-30.77zm0
61.54H167.538v30.768h123.077v-30.768zm0-123.078H167.538v30.77h123.077v-30.77zM106
149.845h400v492.31H198.308c-52.308 0-92.308-40-92.308-92.31v-400z" id="path5"
fill="#c8ccd1"/>
-</svg>
diff --git a/modules/dashboard/styles/ext.cx.lists.common.less
b/modules/dashboard/styles/ext.cx.lists.common.less
index 475d497..3c2df5c 100644
--- a/modules/dashboard/styles/ext.cx.lists.common.less
+++ b/modules/dashboard/styles/ext.cx.lists.common.less
@@ -234,13 +234,18 @@
.cx-slitem__image {
.mw-ui-one-sixth;
- .background-image-svg('../../dashboard/images/page_lightgray.svg',
'../../dashboard/images/page_lightgray.png');
background-position: center center;
background-repeat: no-repeat;
- background-color: @gray-lighter;
- min-width: 84px;
+ background-size: cover;
width: 84px;
- height: 84px;
- border-radius: @borderRadius;
+ /* Force size in flex box model */
+ min-width: 84px;
+ min-height: 84px;
padding: 0;
+
+ &.oo-ui-icon-page-existing {
+ background-size: 80%;
+ background-color: #dfe3e8;
+ opacity: 0.65;
+ }
}
diff --git a/modules/source/ext.cx.source.selector.js
b/modules/source/ext.cx.source.selector.js
index f928135..fe6c114 100644
--- a/modules/source/ext.cx.source.selector.js
+++ b/modules/source/ext.cx.source.selector.js
@@ -942,7 +942,7 @@
};
CXSourceSelector.prototype.setSelectedItem = function ( item ) {
- var itemImage, numOfLanguages,
+ var numOfLanguages,
self = this,
itemTitle = item.getData(),
params = {
@@ -983,9 +983,10 @@
this.sourcePageSelector.setValueNoEmit( item.getData() );
- itemImage = item.$icon.css( 'background-image' );
- if ( itemImage !== 'none' ) {
- this.$selectedItemImage.css( 'background-image',
itemImage );
+ if ( item.imageUrl ) {
+ this.$selectedItemImage.css( 'background-image', 'url(
' + item.imageUrl + ')' );
+ } else {
+ this.$selectedItemImage.addClass(
'oo-ui-iconElement-icon oo-ui-icon-' + item.icon );
}
this.$selectedItemLink.prop( {
@@ -1024,7 +1025,12 @@
// Discard selected item image and info
this.$selectedItemMetrics.empty();
- this.$selectedItemImage.removeAttr( 'style' );
+ this.$selectedItemImage
+ .removeAttr( 'style' )
+ .removeClass( 'oo-ui-iconElement-icon' )
+ .attr( 'class', function ( i, className ) {
+ return className.replace(
/(?:^|\s)oo-ui-icon-page-\S+/, '' );
+ } );
this.$container.removeClass(
'cx-sourceselector-embedded--selected' );
this.isArticleSelected = false;
diff --git a/modules/source/images/article-grey-ltr.png
b/modules/source/images/article-grey-ltr.png
deleted file mode 100644
index 830f8f0..0000000
--- a/modules/source/images/article-grey-ltr.png
+++ /dev/null
Binary files differ
diff --git a/modules/source/images/article-grey-ltr.svg
b/modules/source/images/article-grey-ltr.svg
deleted file mode 100644
index 8a5ea2f..0000000
--- a/modules/source/images/article-grey-ltr.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg
xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24"><path fill="#54595d" d="M12.5 11h4V6h-4v5zm-5 2h9v-1h-9v1zm0 2h9v-1h-9v1zm0
2h9v-1h-9v1zm4-9h-4v1h4V8zm0 2h-4v1h4v-1zm0-4h-4v1h4V6zm-6-2h13v16h-10c-1.7
0-3-1.3-3-3V4z"/></svg>
\ No newline at end of file
diff --git a/modules/source/images/article-grey-rtl.png
b/modules/source/images/article-grey-rtl.png
deleted file mode 100644
index f020a64..0000000
--- a/modules/source/images/article-grey-rtl.png
+++ /dev/null
Binary files differ
diff --git a/modules/source/images/article-grey-rtl.svg
b/modules/source/images/article-grey-rtl.svg
deleted file mode 100644
index cbd7bcf..0000000
--- a/modules/source/images/article-grey-rtl.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg
xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24"><path fill="#54595d" d="M11.5 11h-4V6h4v5zm5 2h-9v-1h9v1zm0 2h-9v-1h9v1zm0
2h-9v-1h9v1zm-4-9h4v1h-4V8zm0 2h4v1h-4v-1zm0-4h4v1h-4V6zm6-2h-13v16h10c1.7 0
3-1.3 3-3V4z"/></svg>
\ No newline at end of file
diff --git a/modules/source/styles/ext.cx.source.selector.less
b/modules/source/styles/ext.cx.source.selector.less
index 91fc940..af1337f 100644
--- a/modules/source/styles/ext.cx.source.selector.less
+++ b/modules/source/styles/ext.cx.source.selector.less
@@ -161,16 +161,17 @@
min-height: @item-height;
&__image {
- background-color: @colorGray14;
- .background-image-svg('../images/article-grey-ltr.svg',
'../images/article-grey-ltr.png');
+ background-color: #dfe3e8;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
- display: block;
+ &.oo-ui-iconElement-icon {
+ opacity: 0.65;
+ }
+
height: @image-size;
width: @image-size;
- border: 0;
margin: 0.5em;
}
diff --git a/modules/ui/widgets/mw.cx.ui.TitleOptionWidget.js
b/modules/ui/widgets/mw.cx.ui.TitleOptionWidget.js
index 055a467..af55412 100644
--- a/modules/ui/widgets/mw.cx.ui.TitleOptionWidget.js
+++ b/modules/ui/widgets/mw.cx.ui.TitleOptionWidget.js
@@ -28,6 +28,8 @@
mw.cx.ui.TitleOptionWidget.parent.call( this, config );
this.$element.addClass( 'mw-cx-widget-titleOptionWidget' );
+ // TODO: Consider upstreaming this
+ this.imageUrl = config.imageUrl;
if ( config.numOfLanguages ) {
this.numOfLanguages = config.numOfLanguages;
--
To view, visit https://gerrit.wikimedia.org/r/382687
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id051ee4f9290004f1dda2ddc3d6dfa7a6d66e081
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Petar.petkovic <ppetko...@wikimedia.org>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
