jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/403085 )
Change subject: Prefix icons in Minerva
......................................................................
Prefix icons in Minerva
Changes:
* MinervaUI will now prefix any icons with `minerva`
* Update definitions in skin.json, retaining selectors for cached
HTML for icons that are rendered via PHP.
* In I9021c53c2c04bdd7ce395eed33d89986acbfea6d watch and watched
and arrow are moved to MobileFrontend so are removed from the RL module
skins.minerva.icons.images.scripts as they are not
used directly in this repo. user and anonymous are no longer used
so also removed.
* Presentation of userpage now belongs to MobileFrontend. Icons
are styles were moved there in depends on. They are retained in
skin.json to support cached HTML as user pages are subject to
cache. They can be removed in a week.
* In code review we noticed the anonymous icon was badly named. We
rename to login. No caching implications.
* Main menu icons are now prefixed with minerva rather than mf to
reflect where they come from.
Depends-On: I9021c53c2c04bdd7ce395eed33d89986acbfea6d
Bug: T182162
Change-Id: I93264024f4915fc910c792b1905b89cdc6b8b546
---
M includes/MinervaUI.php
M includes/skins/MinervaTemplate.php
M includes/skins/SkinMinerva.php
M includes/skins/minerva.mustache
M includes/skins/user_page_links.mustache
M resources/skins.minerva.editor/init.js
D resources/skins.minerva.icons.images.scripts/watch.svg
D resources/skins.minerva.icons.images.scripts/watched.svg
R resources/skins.minerva.mainMenu.icons/login.svg
M resources/skins.minerva.notifications.badge/NotificationBadge.js
M resources/skins.minerva.scripts/DownloadIcon.js
M resources/skins.minerva.userpage.styles/userpage.less
M skin.json
13 files changed, 52 insertions(+), 38 deletions(-)
Approvals:
Pmiazga: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/MinervaUI.php b/includes/MinervaUI.php
index d800514..07fa2c4 100644
--- a/includes/MinervaUI.php
+++ b/includes/MinervaUI.php
@@ -16,13 +16,16 @@
* @param string $iconType element or before
* @param string $additionalClassNames additional class names you want
to associate
* with the iconed element
+ * @param string $glyphPrefix optional prefix for icons. Defaults to
minerva.
* @return string class name for use with HTML element
*/
- public static function iconClass( $iconName, $iconType = 'element',
$additionalClassNames = '' ) {
+ public static function iconClass( $iconName, $iconType = 'element',
$additionalClassNames = '',
+ $glyphPrefix = 'minerva'
+ ) {
$base = 'mw-ui-icon';
$modifiers = 'mw-ui-icon-' . $iconType;
if ( $iconName ) {
- $modifiers .= ' mw-ui-icon-' . $iconName;
+ $modifiers .= ' mw-ui-icon-' . $glyphPrefix . '-' .
$iconName;
}
return $base . ' ' . $modifiers . ' ' . $additionalClassNames;
}
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index 7726d05..268ae0c 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -110,7 +110,15 @@
$args = [
'clockIconClass' => MinervaUI::iconClass(
'clock-gray', 'before' ),
'arrowIconClass' => MinervaUI::iconClass(
- 'arrow-gray', 'element',
'mw-ui-icon-small mf-mw-ui-icon-rotate-anti-clockwise indicator' ),
+ 'arrow-gray', 'element',
'mw-ui-icon-small mf-mw-ui-icon-rotate-anti-clockwise indicator',
+ // Uses icon in MobileFrontend so must
be prefixed mf.
+ // Without MobileFrontend it will not
render.
+ // Rather than maintain 2 versions (and
variants) of the arrow icon which can conflict
+ // with each othe and bloat CSS, we'll
+ // use the MobileFrontend one. Long
term when T177432 and T160690 are resolved
+ // we should be able to use one icon
definition and break this dependency.
+ 'mf'
+ ),
] + $data['historyLink'];
$templateParser = new TemplateParser( __DIR__ );
return $templateParser->processTemplate( 'history',
$args );
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index cfc9ee5..e99e5be 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -468,7 +468,7 @@
->addComponent(
$this->msg(
'mobile-frontend-main-menu-contributions' )->escaped(),
SpecialPage::getTitleFor( 'Contributions',
$user->getName() )->getLocalUrl(),
- MinervaUI::iconClass( 'mf-contributions',
'before' ),
+ MinervaUI::iconClass( 'contributions', 'before'
),
[ 'data-event-name' => 'contributions' ]
);
}
@@ -506,7 +506,7 @@
'mobile-frontend-watchlist-purpose',
$watchlistQuery
),
- MinervaUI::iconClass( 'mf-watchlist', 'before'
),
+ MinervaUI::iconClass( 'watchlist', 'before' ),
[ 'data-event-name' => 'watchlist' ]
);
}
@@ -528,7 +528,7 @@
$this->msg(
'mobile-frontend-main-menu-settings' )->escaped(),
SpecialPage::getTitleFor(
'MobileOptions' )->
getLocalUrl( [ 'returnto' =>
$returnToTitle ] ),
- MinervaUI::iconClass( 'mf-settings',
'before' ),
+ MinervaUI::iconClass( 'settings',
'before' ),
[ 'data-event-name' => 'settings' ]
);
@@ -543,7 +543,7 @@
SpecialPage::getTitleFor(
'Preferences' ),
'prefsnologintext2'
),
- MinervaUI::iconClass( 'mf-settings',
'before' ),
+ MinervaUI::iconClass( 'settings',
'before' ),
[ 'data-event-name' => 'preferences' ]
);
}
@@ -629,7 +629,7 @@
->addComponent(
$this->msg( 'mobile-frontend-home-button'
)->escaped(),
Title::newMainPage()->getLocalUrl(),
- MinervaUI::iconClass( 'mf-home', 'before' ),
+ MinervaUI::iconClass( 'home', 'before' ),
[ 'data-event-name' => 'home' ]
);
@@ -638,7 +638,7 @@
->addComponent(
$this->msg( 'mobile-frontend-random-button'
)->escaped(),
SpecialPage::getTitleFor( 'Randompage'
)->getLocalUrl() . '#/random',
- MinervaUI::iconClass( 'mf-random', 'before' ),
+ MinervaUI::iconClass( 'random', 'before' ),
[
'id' => 'randomButton',
'data-event-name' => 'random',
@@ -655,7 +655,7 @@
->addComponent(
$this->msg(
'mobile-frontend-main-menu-nearby' )->escaped(),
SpecialPage::getTitleFor( 'Nearby'
)->getLocalURL(),
- MinervaUI::iconClass( 'mf-nearby',
'before', 'nearby' ),
+ MinervaUI::iconClass( 'nearby',
'before', 'nearby' ),
[ 'data-event-name' => 'nearby' ]
);
}
@@ -705,14 +705,14 @@
->addComponent(
$username,
Title::newFromText( $username, NS_USER
)->getLocalUrl(),
- MinervaUI::iconClass( 'mf-profile',
'before', 'truncated-text primary-action' ),
+ MinervaUI::iconClass( 'profile',
'before', 'truncated-text primary-action' ),
[ 'data-event-name' => 'profile' ]
)
->addComponent(
$this->msg(
'mobile-frontend-main-menu-logout' )->escaped(),
$url,
MinervaUI::iconClass(
- 'mf-logout', 'element',
'secondary-action truncated-text' ),
+ 'logout', 'element',
'secondary-action truncated-text' ),
[ 'data-event-name' => 'logout' ]
);
} else {
@@ -727,7 +727,7 @@
->addComponent(
$this->msg(
'mobile-frontend-main-menu-login' )->escaped(),
$url,
- MinervaUI::iconClass( 'mf-anonymous',
'before' ),
+ MinervaUI::iconClass( 'login', 'before'
),
[ 'data-event-name' => 'login' ]
);
}
@@ -893,6 +893,8 @@
$pageUser = $this->getUserPageHelper()->getPageUser();
$talkPage = $pageUser->getTalkPage();
$data = [
+ // Talk page icon is provided by
mobile.userpage.icons for time being
+ 'userPageIconClass' => MinervaUI::iconClass(
'talk', 'before', 'talk', 'mf' ),
'talkPageTitle' => $talkPage->getPrefixedURL(),
'talkPageLink' => $talkPage->getLocalUrl(),
'talkPageLinkTitle' => $this->msg(
@@ -1456,9 +1458,6 @@
];
if ( $title->isMainPage() ) {
$styles[] = 'skins.minerva.mainPage.styles';
- } elseif ( $this->getUserPageHelper()->isUserPage() ) {
- $styles[] = 'skins.minerva.userpage.styles';
- $styles[] = 'skins.minerva.userpage.icons';
}
return $styles;
diff --git a/includes/skins/minerva.mustache b/includes/skins/minerva.mustache
index 9daca50..b2754b5 100644
--- a/includes/skins/minerva.mustache
+++ b/includes/skins/minerva.mustache
@@ -32,4 +32,4 @@
{{>footer}}
</div>
</div>
-<!-- v:8.1.1 -->
+<!-- v:8.1.2 -->
diff --git a/includes/skins/user_page_links.mustache
b/includes/skins/user_page_links.mustache
index a5f5d5d..8440bc1 100644
--- a/includes/skins/user_page_links.mustache
+++ b/includes/skins/user_page_links.mustache
@@ -3,7 +3,7 @@
<a href="{{talkPageLink}}"
{{! data-title is used in talk overlay. Do not remove it }}
data-title="{{talkPageTitle}}"
- class="mw-ui-icon mw-ui-icon-before mw-ui-icon-talk
talk">{{talkPageLinkTitle}}</a>
+ class="{{userPageIconClass}}">{{talkPageLinkTitle}}</a>
</li>
<li>
<a
href="{{contributionsPageLink}}">{{contributionsPageTitle}}</a>
diff --git a/resources/skins.minerva.editor/init.js
b/resources/skins.minerva.editor/init.js
index c71dd2f..0c5e249 100644
--- a/resources/skins.minerva.editor/init.js
+++ b/resources/skins.minerva.editor/init.js
@@ -12,10 +12,12 @@
Anchor = M.require( 'mobile.startup/Anchor' ),
skin = M.require( 'skins.minerva.scripts/skin' ),
disabledEditIcon = new Icon( {
- name: 'edit'
+ name: 'edit',
+ glyphPrefix: 'minerva'
} ),
enabledEditIcon = new Icon( {
- name: 'edit-enabled'
+ name: 'edit-enabled',
+ glyphPrefix: 'minerva'
} ),
currentPage = M.getCurrentPage(),
enabledClass = enabledEditIcon.getGlyphClassName(),
diff --git a/resources/skins.minerva.icons.images.scripts/watch.svg
b/resources/skins.minerva.icons.images.scripts/watch.svg
deleted file mode 100644
index 9a4a99d..0000000
--- a/resources/skins.minerva.icons.images.scripts/watch.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg";
width="24" height="24" viewBox="0 0 24 24"><g id="Page-1" fill="none"
fill-rule="evenodd"><g id="watchstar" fill="#54595d"><path d="M8.91 9H1l6.007
5.86L5 23l7-4.319L19 23l-1.995-8.14L23 9h-7.909l-3.09-8-3.09 8zm.054
5.188L5.312 11h4.818L12 5.747 13.881 11h4.82l-3.653 3.2 1.099 4.956L12
16.516l-4.136 2.627 1.1-4.955z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/skins.minerva.icons.images.scripts/watched.svg
b/resources/skins.minerva.icons.images.scripts/watched.svg
deleted file mode 100644
index 958f1e5..0000000
--- a/resources/skins.minerva.icons.images.scripts/watched.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg";
width="24" height="24" viewBox="0 0 24 24"><path fill="#00af89" d="M8.91
9H1l6.007 5.86L5 23l7-4.319L19 23l-1.995-8.14L23 9h-7.909l-3.09-8z"/></svg>
\ No newline at end of file
diff --git a/resources/skins.minerva.mainMenu.icons/anonymous.svg
b/resources/skins.minerva.mainMenu.icons/login.svg
similarity index 100%
rename from resources/skins.minerva.mainMenu.icons/anonymous.svg
rename to resources/skins.minerva.mainMenu.icons/login.svg
diff --git a/resources/skins.minerva.notifications.badge/NotificationBadge.js
b/resources/skins.minerva.notifications.badge/NotificationBadge.js
index 18f67b3..75f1d6c 100644
--- a/resources/skins.minerva.notifications.badge/NotificationBadge.js
+++ b/resources/skins.minerva.notifications.badge/NotificationBadge.js
@@ -1,7 +1,10 @@
( function ( M ) {
var View = M.require( 'mobile.startup/View' ),
Icon = M.require( 'mobile.startup/Icon' ),
- notificationIcon = new Icon( { name: 'notifications' } ),
+ notificationIcon = new Icon( {
+ name: 'notifications',
+ glyphPrefix: 'minerva'
+ } ),
icons = M.require( 'mobile.startup/icons' );
/**
diff --git a/resources/skins.minerva.scripts/DownloadIcon.js
b/resources/skins.minerva.scripts/DownloadIcon.js
index fab7f3e..ea6a043 100644
--- a/resources/skins.minerva.scripts/DownloadIcon.js
+++ b/resources/skins.minerva.scripts/DownloadIcon.js
@@ -1,7 +1,7 @@
( function ( M, track ) {
var msg = mw.msg,
MAX_PRINT_TIMEOUT = 3000,
- GLYPH = 'mf-download',
+ GLYPH = 'download',
Icon = M.require( 'mobile.startup/Icon' ),
browser = M.require( 'mobile.startup/Browser' ).getSingleton();
@@ -41,6 +41,7 @@
this.skin = skin;
this.supportedNamespaces = supportedNamespaces || [ 0 ];
options.tagName = 'li';
+ options.glyphPrefix = 'minerva';
options.title = msg( 'minerva-download' );
options.name = GLYPH;
Icon.call( this, options );
diff --git a/resources/skins.minerva.userpage.styles/userpage.less
b/resources/skins.minerva.userpage.styles/userpage.less
index f9d4778..1382545 100644
--- a/resources/skins.minerva.userpage.styles/userpage.less
+++ b/resources/skins.minerva.userpage.styles/userpage.less
@@ -1,3 +1,8 @@
+/*
+FIXME: Remove file and module (and skins.minerva.userpage.icons)
+when mobile.userpage.icons everywhere (T182162)
+*/
+
@import 'minerva.variables';
@import 'minerva.mixins';
diff --git a/skin.json b/skin.json
index c1758a7..3dd6ae7 100644
--- a/skin.json
+++ b/skin.json
@@ -134,7 +134,7 @@
},
"skins.minerva.icons.images": {
"class": "ResourceLoaderImageModule",
- "selector": ".mw-ui-icon-{name}:before",
+ "selector": ".mw-ui-icon-minerva-{name}:before,
.mw-ui-icon-{name}:before",
"images": {
"notifications":
"resources/skins.minerva.icons.images/bell.svg",
"mainmenu":
"resources/skins.minerva.icons.images/hamburger.svg",
@@ -145,8 +145,8 @@
}
},
"skins.minerva.icons.images.variants": {
- "selectorWithoutVariant": ".mw-ui-icon-{name}:before",
- "selectorWithVariant":
".mw-ui-icon-{name}-{variant}:before",
+ "selectorWithoutVariant":
".mw-ui-icon-minerva-{name}:before",
+ "selectorWithVariant":
".mw-ui-icon-minerva-{name}-{variant}:before",
"class": "ResourceLoaderImageModule",
"variants": {
"gray": {
@@ -159,20 +159,15 @@
}
},
"images": {
- "clock":
"resources/skins.minerva.icons.images.variants/clock.svg",
- "arrow":
"resources/skins.minerva.icons.images.variants/arrow.svg"
+ "clock":
"resources/skins.minerva.icons.images.variants/clock.svg"
}
},
"skins.minerva.icons.images.scripts": {
"class": "ResourceLoaderImageModule",
- "selector": ".mw-ui-icon-{name}:before",
+ "selector": ".mw-ui-icon-minerva-{name}:before",
"position": "bottom",
"images": {
- "mf-download":
"resources/skins.minerva.icons.images.scripts/download.svg",
- "watch":
"resources/skins.minerva.icons.images.scripts/watch.svg",
- "watched":
"resources/skins.minerva.icons.images.scripts/watched.svg",
- "user":
"resources/skins.minerva.icons.images.scripts/userNormal.svg",
- "anonymous":
"resources/skins.minerva.icons.images.scripts/userAnonymous.svg"
+ "download":
"resources/skins.minerva.icons.images.scripts/download.svg"
}
},
"skins.minerva.mainPage.styles": {
@@ -187,7 +182,7 @@
},
"skins.minerva.userpage.icons": {
"class": "ResourceLoaderImageModule",
- "selector": ".mw-ui-icon-{name}:before",
+ "selector": ".mw-ui-icon-mf-{name}:before,
.mw-ui-icon-{name}:before",
"images": {
"talk":
"resources/skins.minerva.userpage.icons/talk.svg",
"userpage":
"resources/skins.minerva.userpage.icons/userpage.svg"
@@ -204,9 +199,9 @@
},
"skins.minerva.mainMenu.icons": {
"class": "ResourceLoaderImageModule",
- "selector": ".mw-ui-icon-mf-{name}:before",
+ "selector": ".mw-ui-icon-minerva-{name}:before",
"images": {
- "anonymous":
"resources/skins.minerva.mainMenu.icons/anonymous.svg",
+ "login":
"resources/skins.minerva.mainMenu.icons/login.svg",
"home":
"resources/skins.minerva.mainMenu.icons/home.svg",
"logout":
"resources/skins.minerva.mainMenu.icons/logout.svg",
"nearby":
"resources/skins.minerva.mainMenu.icons/nearby.svg",
--
To view, visit https://gerrit.wikimedia.org/r/403085
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I93264024f4915fc910c792b1905b89cdc6b8b546
Gerrit-PatchSet: 16
Gerrit-Project: mediawiki/skins/MinervaNeue
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Niedzielski <sniedziel...@wikimedia.org>
Gerrit-Reviewer: Pmiazga <pmia...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
