golem
/
MinervaNeue
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
jdlrobson 2018-01-05 10:52:17 -08:00
parent 91d5fee9d7
commit c5d09c0288
13 changed files with 52 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
includes/MinervaUI.php
View File

@ -16,13 +16,16 @@ class MinervaUI {
* @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;
}

10
includes/skins/MinervaTemplate.php
View File

@ -110,7 +110,15 @@ class MinervaTemplate extends BaseTemplate {
$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 );

25
includes/skins/SkinMinerva.php
View File

@ -468,7 +468,7 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
->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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
'mobile-frontend-watchlist-purpose',
$watchlistQuery
),
MinervaUI::iconClass( 'mf-watchlist', 'before' ),
MinervaUI::iconClass( 'watchlist', 'before' ),
[ 'data-event-name' => 'watchlist' ]
);
}
@ -528,7 +528,7 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
$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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
SpecialPage::getTitleFor( 'Preferences' ),
'prefsnologintext2'
),
MinervaUI::iconClass( 'mf-settings', 'before' ),
MinervaUI::iconClass( 'settings', 'before' ),
[ 'data-event-name' => 'preferences' ]
);
}
@ -629,7 +629,7 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
->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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
->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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
->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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
->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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
->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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
$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 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
];
if ( $title->isMainPage() ) {
$styles[] = 'skins.minerva.mainPage.styles';
} elseif ( $this->getUserPageHelper()->isUserPage() ) {
$styles[] = 'skins.minerva.userpage.styles';
$styles[] = 'skins.minerva.userpage.icons';
}
return $styles;

2
includes/skins/minerva.mustache
View File

@ -32,4 +32,4 @@
{{>footer}}
</div>
</div>
<!-- v:8.1.1 -->
<!-- v:8.1.2 -->

2
includes/skins/user_page_links.mustache
View File

@ -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>

6
resources/skins.minerva.editor/init.js
View File

@ -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(),

1
resources/skins.minerva.icons.images.scripts/watch.svg
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"><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>
Side by Side

Before

Width:  |  Height:  |  Size: 413 B

1
resources/skins.minerva.icons.images.scripts/watched.svg
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"><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>
Side by Side

Before

Width:  |  Height:  |  Size: 226 B

0
resources/skins.minerva.mainMenu.icons/anonymous.svg → resources/skins.minerva.mainMenu.icons/login.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 269 B

After

Width:  |  Height:  |  Size: 269 B

5
resources/skins.minerva.notifications.badge/NotificationBadge.js
View File

@ -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' );
/**

3
resources/skins.minerva.scripts/DownloadIcon.js
View File

@ -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 );

5
resources/skins.minerva.userpage.styles/userpage.less
View File

@ -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';

23
skin.json
View File

@ -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",