mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-09-23 10:19:05 +00:00
[UI] [new] add user menu
Add new user menu. The changes required include: - Break up AuthMenuEntry into reusable components. They're now simple, independent, static functions in AuthUtil that are easy to reason about and compose. There's lots of verbose code because of the builder and director patterns. That is, most of the code is for building the thing we actually want to build instead of just building it. It's easy to write but no fun to read--even simple configurations are extremely verbose expressions that must be threaded through the system. These builders are also single purpose and unlikely to be reusable unlike a URI builder, for example. As objects, they're not especially composable either. - Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban inheritance. Inheritance has not worked well on the frontend of MobileFrontend. I don't think it's going to work well here. E.g., I could have made changes to the base class' getPersonalTools() method such that the client passes a parameter for the advanced config or maybe I just override it in the subclass. In either case, I think it makes the whole hierarchy nuanced and harder to reason about for something that should be simple. - Add ProfileMenuEntry and LogOutMenuEntry for the user menu. - Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches the entry name, AuthMenuEntry. - Extension:SandboxLink is needed to display the sandbox link in the user menu. - Performance note: the toolbar is now processed in MinervaTemplate, which corresponds to removing the buildPersonalUrls() override. - To mimic the design of main menu, the following steps would be necessary: 1. Create a user/Default and user/Advanced user menu builder and also a user/IBuilder interface. 2. Create a user/Director. 3. Create a service entry for Minerva.Menu.UserDirector in ServiceWiring. The Director is actually powerless and doesn't get to make any decisions--the appropriate builder is passed in from ServiceWiring which checks the mode. 4. Access the service in SkinMinerva to set a userMenuHTML data member on the Minerva QuickTemplate. 5. In MinervaTemplate, access the userMenuHTML QuickTemplate member and do the usual song and dance of inflating a Mustache template. This patch does everything except add a service, which was agreed to be unnecessary, so that logic is now in SkinMinerva. - Wrap the existing echo user notifications button and new user menu button in a nav element. This seems like a semantic improvement. - The existing styling and logic for the search bar and search overlay are pretty messy and delicate. Changes made to that LESS endeavored to be surgical. There's lots of room for improvement in the toolbar but it's out of scope. - Rename logout icon to logOut. Bug: T214540 Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
This commit is contained in:
parent
933dc0e370
commit
0a4f5b6126
|
@ -47,6 +47,7 @@
|
|||
"mobile-frontend-user-page-member-since": "{{GENDER:$2|Joined}} $1",
|
||||
"mobile-frontend-user-page-talk": "Talk",
|
||||
"mobile-frontend-user-page-uploads": "Uploads",
|
||||
"minerva-user-menu-button": "User menu",
|
||||
"minerva-page-actions-overflow": "Secondary page actions submenu",
|
||||
"minerva-page-actions-info": "Page information",
|
||||
"minerva-page-actions-permalink": "Permanent link",
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
"mobile-frontend-user-page-member-since": "Message below the heading. $1 is the user registration date. $2 is the gender associated with the user account.",
|
||||
"mobile-frontend-user-page-talk": "Text of the link to the user's talk page\n{{Identical|Talk}}",
|
||||
"mobile-frontend-user-page-uploads": "Text of the link to the user's uploads page\n{{Identical|Upload}}",
|
||||
"minerva-user-menu-button": "Text describing the user menu",
|
||||
"minerva-page-actions-overflow": "Text describing the secondary page menu button's action",
|
||||
"minerva-page-actions-info": "In the secondary page menu, the page information button label",
|
||||
"minerva-page-actions-permalink": "In the secondary page menu, the permanent link button label",
|
||||
|
|
|
@ -24,6 +24,8 @@ use IContextSource;
|
|||
use MediaWiki\Special\SpecialPageFactory;
|
||||
use MediaWiki\Minerva\Menu\Entries\AuthMenuEntry;
|
||||
use MediaWiki\Minerva\Menu\Entries\HomeMenuEntry;
|
||||
use MediaWiki\Minerva\Menu\Entries\LogInMenuEntry;
|
||||
use MediaWiki\Minerva\Menu\Entries\LogOutMenuEntry;
|
||||
use MediaWiki\Minerva\Menu\Entries\SingleMenuEntry;
|
||||
use Message;
|
||||
use MinervaUI;
|
||||
|
@ -108,6 +110,32 @@ final class Definitions {
|
|||
) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a log in or log out button.
|
||||
*
|
||||
* @param Group $group
|
||||
* @throws MWException
|
||||
*/
|
||||
public function insertLogInMenuItem( Group $group ) {
|
||||
$group->insertEntry( new LogInMenuEntry(
|
||||
$this->context,
|
||||
$this->newLogInOutQuery( $this->newReturnToQuery() )
|
||||
) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a log in or log out button.
|
||||
*
|
||||
* @param Group $group
|
||||
* @throws MWException
|
||||
*/
|
||||
public function insertLogOutMenuItem( Group $group ) {
|
||||
$group->insertEntry( new LogOutMenuEntry(
|
||||
$this->context,
|
||||
$this->newLogInOutQuery( $this->newReturnToQuery() )
|
||||
) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a login or logout button with a profile button.
|
||||
*
|
||||
|
|
|
@ -97,13 +97,6 @@ final class AdvancedBuilder implements IBuilder {
|
|||
private function getPersonalTools(): Group {
|
||||
$group = new Group();
|
||||
|
||||
$this->definitions->insertAuthMenuItem( $group );
|
||||
|
||||
if ( $this->user->isLoggedIn() ) {
|
||||
$this->definitions->insertWatchlistMenuItem( $group );
|
||||
$this->definitions->insertContributionsMenuItem( $group );
|
||||
}
|
||||
|
||||
// Allow other extensions to add or override tools
|
||||
Hooks::run( 'MobileMenu', [ 'personal', &$group ] );
|
||||
return $group;
|
||||
|
|
|
@ -121,7 +121,7 @@ class UserNamespaceOverflowBuilder implements IOverflowBuilder {
|
|||
* Build entry based on the $toolbox element
|
||||
*
|
||||
* @param string $name
|
||||
* @param string $icon Wikimedia UI icon name.
|
||||
* @param string $icon Icon CSS class name.
|
||||
* @param string $toolboxIdx
|
||||
* @param array $toolbox An array of common toolbox items from the sidebar menu
|
||||
* @return PageActionMenuEntry|null
|
||||
|
|
100
includes/menu/User/AdvancedUserMenuBuilder.php
Normal file
100
includes/menu/User/AdvancedUserMenuBuilder.php
Normal file
|
@ -0,0 +1,100 @@
|
|||
<?php
|
||||
/**
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 2 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along
|
||||
* with this program; if not, write to the Free Software Foundation, Inc.,
|
||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
* http://www.gnu.org/copyleft/gpl.html
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
namespace MediaWiki\Minerva\Menu\User;
|
||||
|
||||
use IContextSource;
|
||||
use MediaWiki\Minerva\Menu\Definitions;
|
||||
use MediaWiki\Minerva\Menu\Entries\ProfileMenuEntry;
|
||||
use MediaWiki\Minerva\Menu\Entries\SingleMenuEntry;
|
||||
use MediaWiki\Minerva\Menu\Group;
|
||||
use User;
|
||||
|
||||
/**
|
||||
* Logged-in, advanced Mobile Contributions user menu config generator.
|
||||
*/
|
||||
final class AdvancedUserMenuBuilder implements IUserMenuBuilder {
|
||||
/**
|
||||
* @var IContextSource
|
||||
*/
|
||||
private $context;
|
||||
|
||||
/**
|
||||
* @var User
|
||||
*/
|
||||
private $user;
|
||||
|
||||
/**
|
||||
* @var Definitions
|
||||
*/
|
||||
private $definitions;
|
||||
|
||||
/**
|
||||
* @var array|null
|
||||
*/
|
||||
private $sandbox;
|
||||
|
||||
/**
|
||||
* @param IContextSource $context
|
||||
* @param User $user
|
||||
* @param Definitions $definitions A menu items definitions set
|
||||
* @param array|null $sandbox
|
||||
*/
|
||||
public function __construct(
|
||||
IContextSource $context, User $user, Definitions $definitions, $sandbox
|
||||
) {
|
||||
$this->context = $context;
|
||||
$this->user = $user;
|
||||
$this->definitions = $definitions;
|
||||
$this->sandbox = $sandbox;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @return Group
|
||||
*/
|
||||
public function getGroup(): Group {
|
||||
$group = new Group();
|
||||
$group->insertEntry( new ProfileMenuEntry( $this->user ) );
|
||||
$group->insertEntry( new SingleMenuEntry(
|
||||
'userTalk',
|
||||
$this->context->msg( 'mobile-frontend-user-page-talk' )->escaped(),
|
||||
$this->user->getUserPage()->getTalkPage()->getLocalURL(),
|
||||
true,
|
||||
null,
|
||||
'before',
|
||||
'wikimedia-ui-userTalk-base20'
|
||||
) );
|
||||
if ( $this->sandbox ) {
|
||||
$group->insertEntry( new SingleMenuEntry(
|
||||
'userSandbox',
|
||||
$this->sandbox['text'],
|
||||
$this->sandbox['href']
|
||||
) );
|
||||
}
|
||||
$this->definitions->insertWatchlistMenuItem( $group );
|
||||
$this->definitions->insertContributionsMenuItem( $group );
|
||||
if ( $this->user->isAnon() ) {
|
||||
$this->definitions->insertLogInMenuItem( $group );
|
||||
} else {
|
||||
$this->definitions->insertLogOutMenuItem( $group );
|
||||
}
|
||||
return $group;
|
||||
}
|
||||
}
|
35
includes/menu/User/DefaultUserMenuBuilder.php
Normal file
35
includes/menu/User/DefaultUserMenuBuilder.php
Normal file
|
@ -0,0 +1,35 @@
|
|||
<?php
|
||||
/**
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 2 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along
|
||||
* with this program; if not, write to the Free Software Foundation, Inc.,
|
||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
* http://www.gnu.org/copyleft/gpl.html
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
namespace MediaWiki\Minerva\Menu\User;
|
||||
|
||||
use MediaWiki\Minerva\Menu\Group;
|
||||
|
||||
/**
|
||||
* Nonspecific user menu builder.
|
||||
*/
|
||||
final class DefaultUserMenuBuilder implements IUserMenuBuilder {
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @return Group
|
||||
*/
|
||||
public function getGroup(): Group {
|
||||
return new Group();
|
||||
}
|
||||
}
|
30
includes/menu/User/IUserMenuBuilder.php
Normal file
30
includes/menu/User/IUserMenuBuilder.php
Normal file
|
@ -0,0 +1,30 @@
|
|||
<?php
|
||||
/**
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 2 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along
|
||||
* with this program; if not, write to the Free Software Foundation, Inc.,
|
||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
* http://www.gnu.org/copyleft/gpl.html
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
namespace MediaWiki\Minerva\Menu\User;
|
||||
|
||||
use MediaWiki\Minerva\Menu\Group;
|
||||
|
||||
interface IUserMenuBuilder {
|
||||
/**
|
||||
* @return Group
|
||||
*/
|
||||
public function getGroup(): Group;
|
||||
}
|
77
includes/menu/User/UserMenuDirector.php
Normal file
77
includes/menu/User/UserMenuDirector.php
Normal file
|
@ -0,0 +1,77 @@
|
|||
<?php
|
||||
/**
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 2 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along
|
||||
* with this program; if not, write to the Free Software Foundation, Inc.,
|
||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
* http://www.gnu.org/copyleft/gpl.html
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
namespace MediaWiki\Minerva\Menu\User;
|
||||
|
||||
use MinervaUI;
|
||||
use TemplateParser;
|
||||
use MessageLocalizer;
|
||||
|
||||
/**
|
||||
* Director responsible for building the user menu.
|
||||
*/
|
||||
final class UserMenuDirector {
|
||||
/**
|
||||
* @var IUserMenuBuilder
|
||||
*/
|
||||
private $builder;
|
||||
|
||||
/**
|
||||
* @var MessageLocalizer
|
||||
*/
|
||||
private $localizer;
|
||||
|
||||
/**
|
||||
* @param IUserMenuBuilder $builder
|
||||
* @param MessageLocalizer $localizer
|
||||
*/
|
||||
public function __construct( IUserMenuBuilder $builder, MessageLocalizer $localizer ) {
|
||||
$this->builder = $builder;
|
||||
$this->localizer = $localizer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the menu data array that can be passed to views/javascript
|
||||
* @return string|null
|
||||
*/
|
||||
public function renderMenuData() {
|
||||
$entries = $this->builder->getGroup()->getEntries();
|
||||
|
||||
foreach ( $entries as &$entry ) {
|
||||
foreach ( $entry['components'] as &$component ) {
|
||||
$component['class'] .= ' toggle-list-item__anchor--menu';
|
||||
}
|
||||
}
|
||||
|
||||
$templateParser = new TemplateParser( __DIR__ . '/../../../components' );
|
||||
return empty( $entries )
|
||||
? null
|
||||
: $templateParser->processTemplate( 'ToggleList', [
|
||||
'class' => 'minerva-user-menu',
|
||||
'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'
|
||||
),
|
||||
'listClass' => 'minerva-user-menu-list toggle-list__list--drop-down', // See ToggleList/*.less.
|
||||
'text' => $this->localizer->msg( 'minerva-user-menu-button' )->escaped(),
|
||||
'items' => $entries
|
||||
] );
|
||||
}
|
||||
}
|
|
@ -266,6 +266,7 @@ class MinervaTemplate extends BaseTemplate {
|
|||
'postheadinghtml' => $data['postheadinghtml'] ?? '',
|
||||
'haspageactions' => $hasPageActions,
|
||||
'pageactionshtml' => $hasPageActions ? $this->getPageActionsHtml() : '',
|
||||
'userMenuHTML' => $data['userMenuHTML'],
|
||||
'subtitle' => $data['subtitle'],
|
||||
'contenthtml' => $this->getContentHtml( $data ),
|
||||
'secondaryactionshtml' => $this->getSecondaryActionsHtml(),
|
||||
|
|
|
@ -23,6 +23,10 @@ use MediaWiki\Minerva\Menu\Main\Director as MainMenuDirector;
|
|||
use MediaWiki\Minerva\Permissions\IMinervaPagePermissions;
|
||||
use MediaWiki\Minerva\SkinOptions;
|
||||
use MediaWiki\Minerva\SkinUserPageHelper;
|
||||
use MediaWiki\Minerva\Menu\User\UserMenuDirector;
|
||||
use MediaWiki\Minerva\Menu\User\AdvancedUserMenuBuilder;
|
||||
use MediaWiki\Minerva\Menu\User\DefaultUserMenuBuilder;
|
||||
use MediaWiki\Minerva\Menu\Definitions;
|
||||
|
||||
/**
|
||||
* Minerva: Born from the godhead of Jupiter with weapons!
|
||||
|
@ -89,6 +93,29 @@ class SkinMinerva extends SkinTemplate {
|
|||
return $this->mainMenu;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param BaseTemplate $tpl
|
||||
* @return string|null
|
||||
*/
|
||||
private function getUserMenuHTML( BaseTemplate $tpl ) {
|
||||
$services = MediaWikiServices::getInstance();
|
||||
$options = $services->getService( 'Minerva.SkinOptions' );
|
||||
$context = RequestContext::getMain();
|
||||
$definitions = new Definitions( $context, $services->getSpecialPageFactory() );
|
||||
$director = new UserMenuDirector(
|
||||
$options->get( SkinOptions::OPTION_AMC )
|
||||
? new AdvancedUserMenuBuilder(
|
||||
$context,
|
||||
$this->getUser(),
|
||||
$definitions,
|
||||
$tpl->getPersonalTools()['sandbox']['links'][0] ?? null
|
||||
)
|
||||
: new DefaultUserMenuBuilder(),
|
||||
$this
|
||||
);
|
||||
return $director->renderMenuData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the site name for the footer, either as a text or <img> tag
|
||||
* @return string
|
||||
|
@ -156,6 +183,9 @@ class SkinMinerva extends SkinTemplate {
|
|||
// Set the links for the main menu
|
||||
$tpl->set( 'mainMenu', $this->getMainMenu()->getMenuData() );
|
||||
|
||||
// Set the links for page secondary actions
|
||||
$tpl->set( 'userMenuHTML', $this->getUserMenuHTML( $tpl ) );
|
||||
|
||||
// Set the links for page secondary actions
|
||||
$tpl->set( 'secondary_actions', $this->getSecondaryActions( $tpl ) );
|
||||
|
||||
|
@ -774,14 +804,6 @@ class SkinMinerva extends SkinTemplate {
|
|||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Minerva skin do use any of those, there is no need to calculate that
|
||||
* @return array
|
||||
*/
|
||||
protected function buildPersonalUrls() {
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns array of config variables that should be added only to this skin
|
||||
* for use in JavaScript.
|
||||
|
|
|
@ -18,8 +18,15 @@
|
|||
autocomplete="off" placeholder="{{placeholder}}" aria-label="{{placeholder}}"
|
||||
value="{{search}}">
|
||||
</div>
|
||||
<div>{{{searchButton}}}</div>
|
||||
{{^isAnon}}<div>{{#userNotificationsData}}{{>userNotifications}}{{/userNotificationsData}}</div>{{/isAnon}}
|
||||
<nav class="minerva-user-navigation" aria-labelledby="minerva-user-menu-toggle"> {{! See ToggleList's toggleID. }}
|
||||
<div>{{{searchButton}}}</div>
|
||||
{{^isAnon}}
|
||||
<div class="minerva-user-notifications">
|
||||
{{#userNotificationsData}}{{>userNotifications}}{{/userNotificationsData}}
|
||||
</div>
|
||||
{{/isAnon}}
|
||||
{{#userMenuHTML}}{{{userMenuHTML}}}{{/userMenuHTML}}
|
||||
</nav>
|
||||
</form>
|
||||
</header>
|
||||
<main id="content" class="mw-body">
|
||||
|
@ -56,4 +63,4 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mw-notification-area" data-mw="interface"></div>
|
||||
<!-- v:8.1.7 -->
|
||||
<!-- v:8.1.8 -->
|
||||
|
|
|
@ -34,6 +34,7 @@
|
|||
@menuWidthTablet: 600px;
|
||||
@rightDrawerWidth: 60%;
|
||||
@primaryNavBackgroundColor: @colorGray14;
|
||||
@menuButtonIconSize: 3.5em;
|
||||
|
||||
// Headings
|
||||
@firstHeadingFontSize: 2.6525em; // 42px
|
||||
|
@ -52,7 +53,7 @@
|
|||
@searchBoxWidth: 375/16em;
|
||||
@iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;
|
||||
@deviceWidthTabletEms: unit( @width-breakpoint-tablet / @fontSizeBrowserDefault, em );
|
||||
@brandingBoxWidth: @deviceWidthTabletEms - ( @iconSizeTotal * 3 ) - @searchBoxWidth;
|
||||
@brandingBoxWidth: @deviceWidthTabletEms - (3 * @menuButtonIconSize + @iconGutterWidth) - @searchBoxWidth;
|
||||
|
||||
@titleSectionSpacingTop: 20px;
|
||||
@titleSectionSpacingBottom: 25px;
|
||||
|
|
11
resources/skins.minerva.amc.styles/userMenu.less
Normal file
11
resources/skins.minerva.amc.styles/userMenu.less
Normal file
|
@ -0,0 +1,11 @@
|
|||
@import '../../minerva.less/minerva.variables';
|
||||
|
||||
// The list that opens underneath the button.
|
||||
.minerva-user-menu-list {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-right: @contentMargin / 2;
|
||||
min-width: 200px;
|
||||
// A variable max-height is set in JavaScript so a minimum height is needed.
|
||||
min-height: 200px;
|
||||
}
|
26
resources/skins.minerva.base.styles/userMenu.less
Normal file
26
resources/skins.minerva.base.styles/userMenu.less
Normal file
|
@ -0,0 +1,26 @@
|
|||
@import '../../minerva.less/minerva.variables';
|
||||
|
||||
// The top level user account button in the upper right near the notifications button.
|
||||
.minerva-user-navigation {
|
||||
display: flex;
|
||||
height: @headerHeight;
|
||||
// Fill empty space left / start so the buttons can stay right / end.
|
||||
width: 100%;
|
||||
// Keep space for at least two buttons.
|
||||
min-width: 2 * @menuButtonIconSize;
|
||||
// Center vertically.
|
||||
align-items: center;
|
||||
// Layout from right / end.
|
||||
justify-content: flex-end;
|
||||
// Show the list relative the button.
|
||||
position: relative;
|
||||
|
||||
.mw-ui-icon-element {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toggle-list {
|
||||
width: @menuButtonIconSize;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
1
resources/skins.minerva.mainMenu.icons/logOut-ltr.svg
Normal file
1
resources/skins.minerva.mainMenu.icons/logOut-ltr.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<?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>log out</title><path d="M3 3h8V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H3z"/><path d="M13 5v4H5v2h8v4l6-5z"/></svg>
|
After Width: | Height: | Size: 242 B |
1
resources/skins.minerva.mainMenu.icons/logOut-rtl.svg
Normal file
1
resources/skins.minerva.mainMenu.icons/logOut-rtl.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<?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>log out</title><path d="M17 17H9v2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H9v2h8z"/><path d="M7 15v-4h8V9H7V5l-6 5z"/></svg>
|
After Width: | Height: | Size: 246 B |
1
resources/skins.minerva.mainMenu.icons/userSandbox.svg
Normal file
1
resources/skins.minerva.mainMenu.icons/userSandbox.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M6.5 3.5L0 10l1.5 1.5 5 5L8 15l-5-5 5-5-1.5-1.5zm7 0L12 5l5 5-5 5 1.5 1.5L20 10l-6.5-6.5z"/></svg>
|
After Width: | Height: | Size: 190 B |
|
@ -15,6 +15,7 @@
|
|||
TitleUtil = require( './TitleUtil.js' ),
|
||||
issues = require( './page-issues/index.js' ),
|
||||
Toolbar = require( './Toolbar.js' ),
|
||||
ToggleList = require( '../../components/ToggleList/ToggleList.js' ),
|
||||
router = require( 'mediawiki.router' ),
|
||||
CtaDrawer = mobile.CtaDrawer,
|
||||
Button = mobile.Button,
|
||||
|
@ -341,7 +342,8 @@
|
|||
|
||||
$( function () {
|
||||
var $toc,
|
||||
toolbarElement = document.querySelector( Toolbar.selector );
|
||||
toolbarElement = document.querySelector( Toolbar.selector ),
|
||||
userMenu = document.querySelector( '.minerva-user-menu' ); // See UserMenuDirector.
|
||||
// Init:
|
||||
// - main menu closes when you click outside of it
|
||||
// - redirects show a toast.
|
||||
|
@ -363,6 +365,10 @@
|
|||
Toolbar.bind( window, toolbarElement, eventBus );
|
||||
Toolbar.render( window, toolbarElement );
|
||||
}
|
||||
if ( userMenu ) {
|
||||
ToggleList.bind( window, userMenu, eventBus, true );
|
||||
ToggleList.render( userMenu, true );
|
||||
}
|
||||
initRedlinksCta();
|
||||
initUserRedLinks();
|
||||
initTabsScrollPosition();
|
||||
|
|
16
skin.json
16
skin.json
|
@ -203,6 +203,7 @@
|
|||
"resources/skins.minerva.base.styles/reset.less",
|
||||
"resources/skins.minerva.base.styles/ui.less",
|
||||
"resources/skins.minerva.base.styles/pageactions.less",
|
||||
"resources/skins.minerva.base.styles/userMenu.less",
|
||||
"resources/skins.minerva.base.styles/common.less",
|
||||
"resources/skins.minerva.base.styles/images.less",
|
||||
"resources/skins.minerva.base.styles/footer.less",
|
||||
|
@ -259,7 +260,8 @@
|
|||
"resources/skins.minerva.amc.styles/index.less",
|
||||
"components/ToggleList/ToggleList.less",
|
||||
"components/ToggleList/DropDownList.less",
|
||||
"components/ToggleList/MenuListItem.less"
|
||||
"components/ToggleList/MenuListItem.less",
|
||||
"resources/skins.minerva.amc.styles/userMenu.less"
|
||||
]
|
||||
},
|
||||
"wikimedia.ui": {
|
||||
|
@ -268,7 +270,7 @@
|
|||
"defaultColor": "#54595d",
|
||||
"class": "ResourceLoaderOOUIIconPackModule",
|
||||
"icons": [ "articleRedirect", "info", "link", "listBullet",
|
||||
"logoWikidata", "logoWikimedia", "quotes", "upload", "userAvatar" ]
|
||||
"logoWikidata", "logoWikimedia", "quotes", "upload", "userAvatar", "userTalk" ]
|
||||
},
|
||||
"skins.minerva.icons.images": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
|
@ -387,7 +389,12 @@
|
|||
"images": {
|
||||
"login": "resources/skins.minerva.mainMenu.icons/login.svg",
|
||||
"home": "resources/skins.minerva.mainMenu.icons/home.svg",
|
||||
"logout": "resources/skins.minerva.mainMenu.icons/logout.svg",
|
||||
"logout": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.minerva.mainMenu.icons/logOut-ltr.svg",
|
||||
"rtl": "resources/skins.minerva.mainMenu.icons/logOut-rtl.svg"
|
||||
}
|
||||
},
|
||||
"nearby": "resources/skins.minerva.mainMenu.icons/nearby.svg",
|
||||
"random": "resources/skins.minerva.mainMenu.icons/random.svg",
|
||||
"settings": "resources/skins.minerva.mainMenu.icons/settings.svg",
|
||||
|
@ -409,7 +416,8 @@
|
|||
"ltr": "resources/skins.minerva.mainMenu.icons/communityportal-ltr.svg",
|
||||
"rtl": "resources/skins.minerva.mainMenu.icons/communityportal-rtl.svg"
|
||||
}
|
||||
}
|
||||
},
|
||||
"userSandbox": "resources/skins.minerva.mainMenu.icons/userSandbox.svg"
|
||||
}
|
||||
},
|
||||
"skins.minerva.mainMenu.styles": {
|
||||
|
|
Loading…
Reference in a new issue