Refresh the user, bell and search icon

* New module skins.minerva.icons.wikimedia provides icons
from Wikimedia UI in Minerva
* search selector in skins.minerva.content.styles.images is
retained for cached HTML
* skins.minerva.icons.loggedin now a
ResourceLoaderOOUIIconPackModule and bell removed from repo.
* userAvatar replaced with userAvatarOutline

Bug: T224070
Change-Id: Ibed609371060acc4b69e5cd4cd4f20edc871b3ba
This commit is contained in:
jdlrobson 2019-07-09 12:12:51 -07:00 committed by Jdlrobson
parent ad04f31441
commit f0503a52d0
9 changed files with 31 additions and 15 deletions

View File

@ -68,7 +68,7 @@ final class UserMenuDirector {
'checkboxID' => 'minerva-user-menu-checkbox',
'toggleID' => 'minerva-user-menu-toggle', // See minerva.mustache too.
'toggleClass' => MinervaUI::iconClass(
'page-actions-overflow', 'element', 'wikimedia-ui-' . 'userAvatar' . '-base20'
'page-actions-overflow', 'element', 'wikimedia-ui-' . 'userAvatarOutline' . '-base20'
),
'listClass' => 'minerva-user-menu-list toggle-list__list--drop-down', // See ToggleList/*.less.
'text' => $this->localizer->msg( 'minerva-user-menu-button' )->escaped(),

View File

@ -254,7 +254,9 @@ class MinervaTemplate extends BaseTemplate {
// which is problematic in Opera Mini (see T140490)
'searchButton' => Html::rawElement( 'button', [
'id' => 'searchIcon',
'class' => MinervaUI::iconClass( 'magnifying-glass', 'element', 'skin-minerva-search-trigger' ),
'class' => MinervaUI::iconClass(
'search-base20', 'element', 'skin-minerva-search-trigger', 'wikimedia'
)
], wfMessage( 'searchbutton' ) ),
'userNotificationsData' => $data['userNotificationsData'],
'mainmenuhtml' => $this->getMainMenuHtml( $data ),

View File

@ -399,7 +399,8 @@ class SkinMinerva extends SkinTemplate {
[ 'returnto' => $currentTitle->getPrefixedText() ] );
$tpl->set( 'userNotificationsData', [
'notificationIconClass' => MinervaUI::iconClass( 'notifications' ),
'notificationIconClass' => MinervaUI::iconClass( 'bellOutline-base20',
'element', '', 'wikimedia' ),
'title' => $notificationsMsg,
'url' => $url,
'notificationCountRaw' => $count,
@ -923,6 +924,7 @@ class SkinMinerva extends SkinTemplate {
'mediawiki.hlist',
'mediawiki.ui.icon',
'mediawiki.ui.button',
'skins.minerva.icons.wikimedia',
'skins.minerva.icons.images',
];
if ( $title->isMainPage() ) {

View File

@ -14,7 +14,7 @@
</a>
</div>
<div class="search-box">
<input class="search skin-minerva-search-trigger" type="search" name="search" id="searchInput"
<input class="search mw-ui-background-icon-search skin-minerva-search-trigger" type="search" name="search" id="searchInput"
autocomplete="off" placeholder="{{placeholder}}" aria-label="{{placeholder}}"
value="{{search}}">
</div>

View File

@ -145,7 +145,7 @@ main {
/* Search */
.search-box .search {
@border-width-base: 1px;
@searchIconSize: 20px;
@searchIconSize: 18px;
@searchIconGutter: 6px;
@padding-vertical-search: 8px - @border-width-base;
@padding-start-search-icon: @searchIconSize + ( 2 * @searchIconGutter ) - @border-width-base;

View File

@ -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" xmlns:xlink="http://www.w3.org/1999/xlink"><title>notification</title><defs><path id="a" 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"/><mask id="b" width="4.471" height="2.136" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(2 1)"><use stroke="#54595d" stroke-width="4" mask="url(#b)" xlink:href="#a"/><path fill="#54595d" d="M16.893 9.08v3.998l1.77 3.603v1.098H.623V16.68l1.77-3.603V9.08c0-2.894 1.822-5.41 4.475-6.47C7.13 1.327 8.284.383 9.642.383c1.357 0 2.51.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.7 2.44h14.467l-1.702-2.44V9.114c.024-4.076-3.616-5.09-4.255-5.14z"/></g></svg>

Before

Width:  |  Height:  |  Size: 879 B

View File

@ -6,8 +6,8 @@
util = mobile.util,
Icon = mobile.Icon,
notificationIcon = new Icon( {
name: 'notifications',
glyphPrefix: 'minerva'
name: 'bellOutline-base20',
glyphPrefix: 'wikimedia'
} );
/**

View File

@ -244,12 +244,16 @@
}
},
"skins.minerva.icons.loggedin": {
"class": "ResourceLoaderImageModule",
"selector": ".mw-ui-icon-minerva-{name}:before",
"class": "ResourceLoaderOOUIIconPackModule",
"targets": [
"mobile",
"desktop"
],
"useDataURI": false,
"images": {
"notifications": "resources/skins.minerva.icons.loggedin/bell.svg"
}
"defaultColor": "#54595d",
"variants": [],
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}-base20:before",
"icons": [ "bellOutline" ]
},
"skins.minerva.amc.styles": {
"targets": [
@ -270,7 +274,14 @@
"defaultColor": "#54595d",
"class": "ResourceLoaderOOUIIconPackModule",
"icons": [ "articleRedirect", "info", "link", "listBullet",
"logoWikidata", "logoWikimedia", "quotes", "upload", "userAvatar", "userTalk" ]
"logoWikidata", "logoWikimedia", "quotes", "upload", "userAvatarOutline", "userTalk" ]
},
"skins.minerva.icons.wikimedia": {
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}-base20:before, .mw-ui-background-icon-{name}",
"useDataURI": false,
"defaultColor": "#54595d",
"class": "ResourceLoaderOOUIIconPackModule",
"icons": [ "search" ]
},
"skins.minerva.icons.images": {
"class": "ResourceLoaderImageModule",
@ -444,6 +455,7 @@
"desktop"
],
"dependencies": [
"skins.minerva.icons.wikimedia",
"mediawiki.ui.anchor",
"wikimedia.ui",
"skins.minerva.mainMenu.icons",

View File

@ -267,7 +267,8 @@ class SkinMinervaTest extends MediaWikiTestCase {
$hasUnseen
) {
return [
'notificationIconClass' => MinervaUI::iconClass( 'notifications' ),
'notificationIconClass' =>
MinervaUI::iconClass( 'bellOutline-base20', 'element', '', 'wikimedia' ),
'title' => $notificationsMsg,
'url' => SpecialPage::getTitleFor( $notificationsTitle )
->getLocalURL(