mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-24 06:24:22 +00:00
feat(core): ✨ migrate views menu to use RL icon module
This commit is contained in:
alistair3149
parent
a2d0d31d2a
commit
b8ca3f8d72
|
|
@ -106,6 +106,10 @@ class SkinHooks implements
|
|||
if ( isset( $links['user-menu'] ) ) {
|
||||
self::updateUserMenu( $sktemplate, $links );
|
||||
}
|
||||
|
||||
if ( isset( $links['views'] ) ) {
|
||||
self::updateViewsMenu( $sktemplate, $links );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -177,6 +181,37 @@ class SkinHooks implements
|
|||
self::addIconsToMenuItems( $links, 'user-menu' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update views menu items
|
||||
*
|
||||
* @param SkinTemplate $sktemplate
|
||||
* @param array &$links
|
||||
*/
|
||||
private static function updateViewsMenu( $sktemplate, &$links ) {
|
||||
// Most icons are not mapped yet in the views menu
|
||||
$iconMap = [
|
||||
'view' => 'article',
|
||||
// View source button only appears when the user do not have permission
|
||||
'viewsource' => 'editLock',
|
||||
'history' => 'history',
|
||||
'edit' => 'edit',
|
||||
// Extension:VisualEditor
|
||||
// For some reason the icon span element keeps getting removed
|
||||
// So we are adding this the legacy way
|
||||
// 've-edit' => 'edit',
|
||||
// Extension:DiscussionTools
|
||||
'addsection' => 'speechBubbleAdd'
|
||||
];
|
||||
|
||||
// If a VE edit button is present, use wikiText icon for source edit
|
||||
if ( isset( $links['views']['ve-edit'] ) ) {
|
||||
$iconMap['edit'] = 'wikiText';
|
||||
}
|
||||
|
||||
self::mapIconsToMenuItems( $links, 'views', $iconMap );
|
||||
self::addIconsToMenuItems( $links, 'views' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the icon parameter of the menu item based on the mapping
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>
|
||||
add
|
||||
</title>
|
||||
<path d="M11 9V4H9v5H4v2h5v5h2v-5h5V9z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 203 B |
|
|
@ -1,8 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>
|
||||
eye
|
||||
</title>
|
||||
<path d="M10 14.5a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5zM10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7z"/>
|
||||
<circle cx="10" cy="10" r="2.5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 313 B |
|
|
@ -1,7 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
|
||||
<title>
|
||||
history
|
||||
</title>
|
||||
<path d="M11.424 0C6.686 0 2.857 3.806 2.857 8.5H0l3.71 3.68.066.136L7.62 8.5H4.76c0-3.65 2.986-6.61 6.667-6.61 3.68 0 6.665 2.96 6.665 6.61 0 3.65-2.985 6.61-6.666 6.61a6.668 6.668 0 0 1-4.71-1.94l-1.35 1.337A8.553 8.553 0 0 0 11.426 17C16.16 17 20 13.194 20 8.5S16.162 0 11.424 0zm-1.037 5v4.524l3.904 2.298.66-1.1-3.192-1.877V5H10.39z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 508 B |
|
|
@ -16,7 +16,6 @@
|
|||
.citizen-ui-icon {
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
|
|
@ -26,6 +25,7 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,13 +66,13 @@
|
|||
> .mw-portlet {
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: var( --space-xxs );
|
||||
}
|
||||
|
||||
li > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: var( --space-xs ) var( --space-sm );
|
||||
border-radius: var( --border-radius--medium );
|
||||
color: var( --color-base );
|
||||
font-size: 0;
|
||||
|
|
@ -113,15 +113,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
// FIXME: This is just a temporary style for WMUI icon migration purposes
|
||||
.mw-portlet-associated-pages .mw-list-item > a {
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
||||
/* Non-WMUI icons */
|
||||
// See SkinHooks.php for why VE is here
|
||||
.page-actions__button:before,
|
||||
#ca-ve-edit > a:before,
|
||||
#citizen-languages__buttonCheckbox:before,
|
||||
.mw-portlet-views .mw-list-item > a:before,
|
||||
.mw-portlet-tb .mw-list-item > a:before {
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
|
|
@ -195,66 +191,65 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#p-views {
|
||||
// VE styles shouldn't be core but it is just a few lines :/
|
||||
#ca-ve-edit:not( .selected ) {
|
||||
order: 98; // Before source edit
|
||||
// Edit button
|
||||
#ca-edit,
|
||||
#ca-ve-edit {
|
||||
> a {
|
||||
background-color: var( --color-primary );
|
||||
color: #fff;
|
||||
|
||||
> a {
|
||||
padding-right: 1.5rem;
|
||||
&:hover {
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
// Merge two buttons together
|
||||
+ #ca-edit {
|
||||
border-left: 1px solid var( --color-primary--hover );
|
||||
margin-left: -1rem;
|
||||
|
||||
> a {
|
||||
padding-left: 0.5rem;
|
||||
border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) 0;
|
||||
font-size: 0; // hide edit source text
|
||||
|
||||
&:before {
|
||||
margin-right: 0; // reset
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
#ca-edit {
|
||||
order: 99; // Align to last
|
||||
}
|
||||
|
||||
#ca-edit,
|
||||
#ca-ve-edit {
|
||||
> a {
|
||||
background-color: var( --color-primary );
|
||||
color: #fff;
|
||||
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
// white icon
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
> a,
|
||||
.citizen-ui-icon {
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
// white icon
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
.page-actions {
|
||||
&__button--icon:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
// VE styles shouldn't be core but it is just a few lines :/
|
||||
#ca-ve-edit:not( .selected ) {
|
||||
order: 98; // Before source edit
|
||||
|
||||
li > a:before {
|
||||
> a {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
// Merge two buttons together
|
||||
+ #ca-edit {
|
||||
border-left: 1px solid var( --color-primary--hover );
|
||||
margin-left: ~'calc( var( --space-xxs ) * -1 )';
|
||||
|
||||
> a {
|
||||
padding-left: var( --space-xs );
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
font-size: 0; // hide edit source text
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#ca-edit {
|
||||
order: 99; // Align to last
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
#ca-ve-edit > a,
|
||||
.page-actions__button--icon,
|
||||
.mw-list-item > a {
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
|
@ -292,15 +287,11 @@
|
|||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.page-actions {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
> .mw-portlet {
|
||||
li > a {
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:before {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
19
skin.json
19
skin.json
|
|
@ -291,19 +291,7 @@
|
|||
".citizen-search__random:after": "resources/skins.citizen.icons/shared/random.svg",
|
||||
"#citizen-languages__buttonCheckbox:before": "resources/skins.citizen.icons/shared/language.svg",
|
||||
"#page-actions-more__buttonCheckbox:before": "resources/skins.citizen.icons/more.svg",
|
||||
"#ca-view > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/article-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/article-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#ca-viewsource > a:before": "resources/skins.citizen.icons/shared/eye.svg",
|
||||
"#ca-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
|
||||
"#ca-ve-edit + #ca-edit > a:before": "resources/skins.citizen.icons/shared/wikiText.svg",
|
||||
"#ca-ve-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
|
||||
"#ca-history > a:before": "resources/skins.citizen.icons/shared/history.svg",
|
||||
"#ca-addsection > a:before": "resources/skins.citizen.icons/shared/add.svg",
|
||||
"#ca-translate > a:before": "resources/skins.citizen.icons/shared/language.svg",
|
||||
".mw-editsection > a:before": "resources/skins.citizen.icons/shared/edit.svg",
|
||||
".mw-editsection > a.mw-editsection-visualeditor + .mw-editsection-divider + a:before": "resources/skins.citizen.icons/shared/wikiText.svg",
|
||||
"#n-mainpage-description > a:after": "resources/skins.citizen.icons/shared/home.svg",
|
||||
|
|
@ -397,7 +385,12 @@
|
|||
"unStar",
|
||||
"speechBubbles",
|
||||
"article",
|
||||
"userAvatar"
|
||||
"userAvatar",
|
||||
"editLock",
|
||||
"history",
|
||||
"edit",
|
||||
"wikiText",
|
||||
"speechBubbleAdd"
|
||||
]
|
||||
},
|
||||
"skins.citizen.icons.sections": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue