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:
parent
ad04f31441
commit
f0503a52d0
|
@ -68,7 +68,7 @@ final class UserMenuDirector {
|
||||||
'checkboxID' => 'minerva-user-menu-checkbox',
|
'checkboxID' => 'minerva-user-menu-checkbox',
|
||||||
'toggleID' => 'minerva-user-menu-toggle', // See minerva.mustache too.
|
'toggleID' => 'minerva-user-menu-toggle', // See minerva.mustache too.
|
||||||
'toggleClass' => MinervaUI::iconClass(
|
'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.
|
'listClass' => 'minerva-user-menu-list toggle-list__list--drop-down', // See ToggleList/*.less.
|
||||||
'text' => $this->localizer->msg( 'minerva-user-menu-button' )->escaped(),
|
'text' => $this->localizer->msg( 'minerva-user-menu-button' )->escaped(),
|
||||||
|
|
|
@ -254,7 +254,9 @@ class MinervaTemplate extends BaseTemplate {
|
||||||
// which is problematic in Opera Mini (see T140490)
|
// which is problematic in Opera Mini (see T140490)
|
||||||
'searchButton' => Html::rawElement( 'button', [
|
'searchButton' => Html::rawElement( 'button', [
|
||||||
'id' => 'searchIcon',
|
'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' ) ),
|
], wfMessage( 'searchbutton' ) ),
|
||||||
'userNotificationsData' => $data['userNotificationsData'],
|
'userNotificationsData' => $data['userNotificationsData'],
|
||||||
'mainmenuhtml' => $this->getMainMenuHtml( $data ),
|
'mainmenuhtml' => $this->getMainMenuHtml( $data ),
|
||||||
|
|
|
@ -399,7 +399,8 @@ class SkinMinerva extends SkinTemplate {
|
||||||
[ 'returnto' => $currentTitle->getPrefixedText() ] );
|
[ 'returnto' => $currentTitle->getPrefixedText() ] );
|
||||||
|
|
||||||
$tpl->set( 'userNotificationsData', [
|
$tpl->set( 'userNotificationsData', [
|
||||||
'notificationIconClass' => MinervaUI::iconClass( 'notifications' ),
|
'notificationIconClass' => MinervaUI::iconClass( 'bellOutline-base20',
|
||||||
|
'element', '', 'wikimedia' ),
|
||||||
'title' => $notificationsMsg,
|
'title' => $notificationsMsg,
|
||||||
'url' => $url,
|
'url' => $url,
|
||||||
'notificationCountRaw' => $count,
|
'notificationCountRaw' => $count,
|
||||||
|
@ -923,6 +924,7 @@ class SkinMinerva extends SkinTemplate {
|
||||||
'mediawiki.hlist',
|
'mediawiki.hlist',
|
||||||
'mediawiki.ui.icon',
|
'mediawiki.ui.icon',
|
||||||
'mediawiki.ui.button',
|
'mediawiki.ui.button',
|
||||||
|
'skins.minerva.icons.wikimedia',
|
||||||
'skins.minerva.icons.images',
|
'skins.minerva.icons.images',
|
||||||
];
|
];
|
||||||
if ( $title->isMainPage() ) {
|
if ( $title->isMainPage() ) {
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="search-box">
|
<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}}"
|
autocomplete="off" placeholder="{{placeholder}}" aria-label="{{placeholder}}"
|
||||||
value="{{search}}">
|
value="{{search}}">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -145,7 +145,7 @@ main {
|
||||||
/* Search */
|
/* Search */
|
||||||
.search-box .search {
|
.search-box .search {
|
||||||
@border-width-base: 1px;
|
@border-width-base: 1px;
|
||||||
@searchIconSize: 20px;
|
@searchIconSize: 18px;
|
||||||
@searchIconGutter: 6px;
|
@searchIconGutter: 6px;
|
||||||
@padding-vertical-search: 8px - @border-width-base;
|
@padding-vertical-search: 8px - @border-width-base;
|
||||||
@padding-start-search-icon: @searchIconSize + ( 2 * @searchIconGutter ) - @border-width-base;
|
@padding-start-search-icon: @searchIconSize + ( 2 * @searchIconGutter ) - @border-width-base;
|
||||||
|
|
|
@ -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 |
|
@ -6,8 +6,8 @@
|
||||||
util = mobile.util,
|
util = mobile.util,
|
||||||
Icon = mobile.Icon,
|
Icon = mobile.Icon,
|
||||||
notificationIcon = new Icon( {
|
notificationIcon = new Icon( {
|
||||||
name: 'notifications',
|
name: 'bellOutline-base20',
|
||||||
glyphPrefix: 'minerva'
|
glyphPrefix: 'wikimedia'
|
||||||
} );
|
} );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
24
skin.json
24
skin.json
|
@ -244,12 +244,16 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"skins.minerva.icons.loggedin": {
|
"skins.minerva.icons.loggedin": {
|
||||||
"class": "ResourceLoaderImageModule",
|
"class": "ResourceLoaderOOUIIconPackModule",
|
||||||
"selector": ".mw-ui-icon-minerva-{name}:before",
|
"targets": [
|
||||||
|
"mobile",
|
||||||
|
"desktop"
|
||||||
|
],
|
||||||
"useDataURI": false,
|
"useDataURI": false,
|
||||||
"images": {
|
"defaultColor": "#54595d",
|
||||||
"notifications": "resources/skins.minerva.icons.loggedin/bell.svg"
|
"variants": [],
|
||||||
}
|
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}-base20:before",
|
||||||
|
"icons": [ "bellOutline" ]
|
||||||
},
|
},
|
||||||
"skins.minerva.amc.styles": {
|
"skins.minerva.amc.styles": {
|
||||||
"targets": [
|
"targets": [
|
||||||
|
@ -270,7 +274,14 @@
|
||||||
"defaultColor": "#54595d",
|
"defaultColor": "#54595d",
|
||||||
"class": "ResourceLoaderOOUIIconPackModule",
|
"class": "ResourceLoaderOOUIIconPackModule",
|
||||||
"icons": [ "articleRedirect", "info", "link", "listBullet",
|
"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": {
|
"skins.minerva.icons.images": {
|
||||||
"class": "ResourceLoaderImageModule",
|
"class": "ResourceLoaderImageModule",
|
||||||
|
@ -444,6 +455,7 @@
|
||||||
"desktop"
|
"desktop"
|
||||||
],
|
],
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
|
"skins.minerva.icons.wikimedia",
|
||||||
"mediawiki.ui.anchor",
|
"mediawiki.ui.anchor",
|
||||||
"wikimedia.ui",
|
"wikimedia.ui",
|
||||||
"skins.minerva.mainMenu.icons",
|
"skins.minerva.mainMenu.icons",
|
||||||
|
|
|
@ -267,7 +267,8 @@ class SkinMinervaTest extends MediaWikiTestCase {
|
||||||
$hasUnseen
|
$hasUnseen
|
||||||
) {
|
) {
|
||||||
return [
|
return [
|
||||||
'notificationIconClass' => MinervaUI::iconClass( 'notifications' ),
|
'notificationIconClass' =>
|
||||||
|
MinervaUI::iconClass( 'bellOutline-base20', 'element', '', 'wikimedia' ),
|
||||||
'title' => $notificationsMsg,
|
'title' => $notificationsMsg,
|
||||||
'url' => SpecialPage::getTitleFor( $notificationsTitle )
|
'url' => SpecialPage::getTitleFor( $notificationsTitle )
|
||||||
->getLocalURL(
|
->getLocalURL(
|
||||||
|
|
Loading…
Reference in New Issue