StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-09-24 02:38:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: move toolbox to page more menu

Browse source
This commit is contained in:
alistair3149 2021-01-27 14:52:49 -05:00
parent eb963466ed
commit e142800957
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
7 changed files with 142 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
includes/SkinCitizen.php
View file

@ -336,8 +336,6 @@ class SkinCitizen extends SkinMustache {
case 'SEARCH':
break;
case 'TOOLBOX':
$portal = $this->getMenuData( 'tb', $content );
$props[] = $portal;
break;
case 'LANGUAGES':
$languages = $skin->getLanguages();
@ -562,7 +560,8 @@ class SkinCitizen extends SkinMustache {
protected function buildPageTools(): array {
$skin = $this;
$condition = $this->getConfigValue( 'CitizenShowPageTools' );
$contentNavigation = $this->buildContentNavigationUrls();
$contentNavigation = parent::buildContentNavigationUrls();
$portals = parent::buildSidebar();
$props = [];
// Login-based condition, return true if condition is met
@ -583,20 +582,22 @@ class SkinCitizen extends SkinMustache {
if ( $condition === true ) {
$actionhtml = $this->getMenuData( 'views', $contentNavigation[ 'views' ] ?? [] );
$actionmorehtml = $this->getMenuData( 'actions', $contentNavigation[ 'actions' ] ?? [] );
$viewshtml = $this->getMenuData( 'views', $contentNavigation[ 'views' ] ?? [] );
$actionshtml = $this->getMenuData( 'actions', $contentNavigation[ 'actions' ] ?? [] );
$toolboxhtml = $this->getMenuData( 'tb', $portals['TOOLBOX'] ?? [] );
if ( $actionhtml ) {
$actionhtml[ 'label-class' ] .= 'screen-reader-text';
if ( $viewshtml ) {
$viewshtml[ 'label-class' ] .= 'screen-reader-text';
}
if ( $actionmorehtml ) {
$actionmorehtml[ 'label-class' ] .= 'screen-reader-text';
if ( $actionshtml ) {
$actionshtml[ 'label-class' ] .= 'screen-reader-text';
}
$props = [
'data-page-actions' => $actionhtml,
'data-page-actions-more' => $actionmorehtml,
'data-page-views' => $viewshtml,
'data-page-actions' => $actionshtml,
'data-page-toolbox' => $toolboxhtml,
];
}

16
includes/templates/PageTools.mustache Normal file
View file

@ -0,0 +1,16 @@
{{!
object data-page-views
object data-page-actions
object data-page-toolbox
}}
{{#data-pagetools}}
<div class="page-actions">
{{#data-page-views}}{{>Menu}}{{/data-page-views}}
<div class="page-actions-more">
<nav class="page-actions-more-menu">
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-toolbox}}{{>Menu}}{{/data-page-toolbox}}
</nav>
</div>
</div>
{{/data-pagetools}}

7
includes/templates/skin.mustache
View file

@ -34,12 +34,7 @@
</div>
<div id="siteSub">{{msg-tagline}}</div>
</div>
{{#data-pagetools}}
<div class="page-actions">
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
</div>
{{/data-pagetools}}
{{>PageTools}}
</header>
<div id="bodyContent" class="mw-body-content">
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>

9
resources/skins.citizen.styles/Drawer.less
View file

@ -111,15 +111,6 @@
font-size: @ui-menu-text;
overscroll-behavior: contain;
h3 {
padding: @margin-side / 2 @margin-side;
margin: @margin-side / 2 0 0 0;
color: var( --color-base--subtle );
font-size: inherit;
font-weight: normal;
letter-spacing: 0.75px;
}
a {
.menu-item-link;
align-items: center;

25
resources/skins.citizen.styles/Menu.less
View file

@ -1,9 +1,20 @@
// Hide selected item
.mw-portal .selected {
.mixin-screen-reader-text;
}
.mw-portal {
h3 {
padding: 10px var( --padding-page );
margin: 10px 0 0 0;
color: var( --color-base--subtle );
font-size: inherit;
font-weight: normal;
letter-spacing: 0.75px;
}
// Hide more button when it is empty
.mw-portal-empty {
display: none !important;
// Hide selected item
.selected {
.mixin-screen-reader-text;
}
// Hide empty menu
&-empty {
display: none !important;
}
}

176
resources/skins.citizen.styles/Pagetools.less
View file

@ -4,8 +4,85 @@
font-size: @ui-menu-text;
font-weight: 450;
&-more {
display: block;
width: var( --size-icon );
height: var( --size-icon );
padding: 8px;
cursor: pointer;
transition: @transition-opacity-quick;
&-menu {
position: absolute;
z-index: -1;
right: 0;
left: 0;
border: 1px solid var( --border-color-base--lighter );
margin-top: 5px;
opacity: 0;
pointer-events: none;
transition: @transition-opacity-quick, @transition-box-shadow-quick;
.menu-container;
.boxshadow(4);
a {
.menu-item-link;
justify-content: space-between;
padding: 10px var( --padding-page );
&:after {
.resource-loader-list-icon;
margin-left: @icon-padding;
opacity: var( --opacity-icon-base );
}
&:hover {
.menu-item-link-hover;
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
.menu-item-link-active;
&:after {
opacity: var( --opacity-icon-base--active );
}
}
}
}
&:before {
display: block;
width: var( --size-icon );
height: var( --size-icon );
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
}
&:hover {
.page-actions-more-menu {
z-index: 5;
opacity: 1;
pointer-events: auto;
}
&:before {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
&:before {
opacity: var( --opacity-icon-base--active );
}
}
}
ul {
display: flex;
margin: 0;
list-style: none;
}
@ -16,6 +93,10 @@
}
#p-views {
ul {
display: flex;
}
li > a {
display: flex;
align-items: center;
@ -99,81 +180,14 @@
}
}
#p-actions {
display: block;
width: var( --size-icon );
height: var( --size-icon );
padding: 8px;
cursor: pointer;
// transition: @transition-opacity-quick; - Hidden behind the menu anyways
ul {
position: absolute;
z-index: -1;
right: 0;
left: 0;
border: 1px solid var( --border-color-base--lighter );
margin-top: 5px;
opacity: 0;
pointer-events: none;
transition: @transition-opacity-quick, @transition-box-shadow-quick;
.menu-container;
.boxshadow(4);
a {
.menu-item-link;
justify-content: space-between;
padding: 10px var( --padding-page );
&:after {
.resource-loader-list-icon;
margin-left: @icon-padding;
opacity: var( --opacity-icon-base );
}
&:hover {
.menu-item-link-hover;
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
.menu-item-link-active;
&:after {
opacity: var( --opacity-icon-base--active );
}
}
}
}
&:before {
display: block;
width: var( --size-icon );
height: var( --size-icon );
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
}
&:hover ul {
z-index: 5;
opacity: 1;
pointer-events: auto;
}
}
.skin-citizen-dark {
#p-actions {
&:before {
filter: invert( 1 );
.page-actions {
&-more {
&:before {
filter: invert( 1 );
}
}
}
#p-views,
#p-actions {
li > a:after {
filter: invert( 1 );
}
@ -181,6 +195,13 @@
}
@media ( min-width: @width-breakpoint-tablet ) {
.page-actions-more-menu {
position: relative;
right: unset;
left: -172px;
width: 200px;
}
#p-views {
li > a {
font-size: @ui-menu-text;
@ -190,13 +211,4 @@
}
}
}
#p-actions {
ul {
position: relative;
right: unset;
left: -172px;
width: 200px;
}
}
}

2
skin.json
View file

@ -185,7 +185,7 @@
"#personalmenu-button:before": "resources/skins.citizen.icons/shared/userAvatar.svg",
"#searchform-icon": "resources/skins.citizen.icons/shared/search.svg",
"#searchform-random": "resources/skins.citizen.icons/shared/random.svg",
"#p-actions:before": "resources/skins.citizen.icons/more.svg"
".page-actions-more:before": "resources/skins.citizen.icons/more.svg"
}
},
"skins.citizen.icons.ca": {