Bmansurov has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/357509 )
Change subject: Replace toast bell PNGs with optimized SVGs
......................................................................
Replace toast bell PNGs with optimized SVGs
Bug: T142532
Change-Id: Idfffb167960fc4fddddf0fe93d724e1164c0965c
---
M extension.json
A resources/mobile.startup.images/alert-bell.svg
D resources/mobile.startup/images/error.png
M resources/mobile.startup/toast.js
M resources/mobile.startup/toast.less
5 files changed, 24 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/09/357509/1
diff --git a/extension.json b/extension.json
index e62a8ca..2de9941 100644
--- a/extension.json
+++ b/extension.json
@@ -454,6 +454,13 @@
"BackToTopOverlay.hogan":
"resources/mobile.backtotop/BackToTopOverlay.hogan"
}
},
+ "mobile.startup.images": {
+ "class": "ResourceLoaderImageModule",
+ "selector": ".mw-ui-icon-{name}:before",
+ "images": {
+ "error":
"resources/mobile.startup.images/alert-bell.svg"
+ }
+ },
"mobile.startup": {
"targets": [
"mobile",
@@ -463,6 +470,7 @@
"mobile.pagelist.styles",
"mobile.pagesummary.styles",
"mediawiki.notify",
+ "mobile.startup.images",
"mobile.overlay.images",
"mobile.ajax.styles",
"mediawiki.language",
diff --git a/resources/mobile.startup.images/alert-bell.svg
b/resources/mobile.startup.images/alert-bell.svg
new file mode 100644
index 0000000..1317ec6
--- /dev/null
+++ b/resources/mobile.startup.images/alert-bell.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg";><g id="Page-1" fill="none"
fill-rule="evenodd"><g id="icon-export" fill="#D33"><g id="Bell"
transform="translate(2 1)"><path d="M9.643 21.364c1.234 0 2.235-.956
2.235-2.136h-4.47c0 1.18 1 2.136 2.234 2.136z" id="Page-1-Copy"/><path
d="M16.893 9.08v3.998l1.769 3.603v1.096H.623V16.68l1.769-3.603V9.08c0-2.894
1.824-5.41 4.477-6.47C7.13 1.327 8.285.383 9.643.383c1.357 0 2.511.944 2.773
2.227 2.653 1.06 4.477 3.576 4.477 6.47zM10.92 3.974H8.366c-2.438.553-4.255
2.64-4.255 5.14v4.474l-1.702
2.44h14.467l-1.702-2.44V9.114c.024-4.076-3.616-5.09-4.255-5.14z"
id="Combined-Shape"/></g></g></g></svg>
\ No newline at end of file
diff --git a/resources/mobile.startup/images/error.png
b/resources/mobile.startup/images/error.png
deleted file mode 100644
index b2d26f0..0000000
--- a/resources/mobile.startup/images/error.png
+++ /dev/null
Binary files differ
diff --git a/resources/mobile.startup/toast.js
b/resources/mobile.startup/toast.js
index be4c083..d7de670 100644
--- a/resources/mobile.startup/toast.js
+++ b/resources/mobile.startup/toast.js
@@ -1,7 +1,8 @@
-( function ( M ) {
+( function ( M, $ ) {
var Toast,
settingsKey = 'mobileFrontend/toast',
- settings = M.require( 'mobile.startup/settings' );
+ settings = M.require( 'mobile.startup/settings' ),
+ Icon = M.require( 'mobile.startup/Icon' );
/**
* Wrapper for one global Toast
@@ -18,6 +19,17 @@
* @param {string} cssClass CSS class to add to the element
*/
Toast.prototype.show = function ( msg, cssClass ) {
+ if ( cssClass === 'error' ) {
+ // Add the bell icon in front of the message.
+ msg = $( '<div>', {
+ 'class': new Icon( {
+ name: 'error',
+ hasText: true
+ } ).getClassName(),
+ text: msg
+ } );
+ }
+
this.notification = mw.notify( msg, {
type: cssClass,
tag: 'toast'
@@ -75,4 +87,4 @@
M.define( 'mobile.startup/toast', new Toast() );
-}( mw.mobileFrontend ) );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.startup/toast.less
b/resources/mobile.startup/toast.less
index 204fa50..1603625 100644
--- a/resources/mobile.startup/toast.less
+++ b/resources/mobile.startup/toast.less
@@ -54,25 +54,6 @@
text-align: center;
border-radius: @borderRadius;
- // Toast notification error state
- //
- // When the toast message needs to convey that an error has occurred
add the error class
- //
- // Markup:
- // <div class="toast visible error">
- // An error occurred.
- // </div>
- //
- // Styleguide 3.2.
- &.mw-notification-type-error {
- .background-image( 'images/error.png' );
- background-position: 16px 50%;
- background-repeat: no-repeat;
- padding-left: 5%;
- width: 75%;
- border: 0; // FIXME: this is needed because a global .error
adds border
- }
-
a {
color: @colorProgressive;
--
To view, visit https://gerrit.wikimedia.org/r/357509
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idfffb167960fc4fddddf0fe93d724e1164c0965c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
