Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navhorizontal with user avatar #400

Merged
14 changes: 14 additions & 0 deletions resources/styles/Components/NavbarHorizontal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -155,4 +155,18 @@
a.navbar-more-tools, a.navbar-usernotloggedin, a.navbar-userloggedin, a.navbar-tool-link, a:visited.navbar-tool-link {
color: $navbar-light-color;
}

.navbar-tool.avatar {
background: white;
border-radius: 99px;
overflow: hidden;
}

a.navbar-userloggedin-avatar {
width: 41px;
height: 41px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
67 changes: 59 additions & 8 deletions src/Components/NavbarHorizontal/PersonalTools.php
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
* Provides a PersonalTools component to be included in a NavbarHorizontal component.
*
* @author Stephan Gambke
* @reviewer thomas-topway-it - user-avatar (for KM-A)
* @since 1.6
* @ingroup Skins
*/
Expand All @@ -54,13 +55,18 @@ class PersonalTools extends Component {
private const SHOW_USER_NAME_YES = 'yes';
private const ATTR_PROMOTE_LONE_ITEMS = 'promoteLoneItems';

/** @var avatarUrl */
protected $avatarUrl = null;

/**
* @return String
* @throws \FatalError
* @throws \MWException
*/
public function getHtml() {
$tools = $this->getSkinTemplate()->getPersonalTools();

$this->setUserAvatar();

// Flatten classes to avoid MW bug: https://phabricator.wikimedia.org/T262160
// NB: This bug is finally fixed in MW >=1.36.
Expand Down Expand Up @@ -99,7 +105,8 @@ public function getHtml() {
return $echoHtml .
$this->indent() . '<!-- personal tools -->' .
$this->indent() . '<div class="navbar-tools navbar-nav" >' .
$this->indent( 1 ) . \Html::rawElement( 'div', [ 'class' => 'navbar-tool dropdown' ],
$this->indent( 1 ) . \Html::rawElement( 'div',
[ 'class' => 'navbar-tool' . ( !$this->avatarUrl ? '' : ' avatar' ) . ' dropdown' ],

$this->getDropdownToggle() .
$this->indent( 1 ) . \Html::rawElement( 'div',
Expand Down Expand Up @@ -225,16 +232,14 @@ protected function getDropdownToggle(): string {
$user = $this->getSkinTemplate()->getSkin()->getUser();

if ( $user->isRegistered() ) {

$toolsClass = 'navbar-userloggedin';
$toolsClass = 'navbar-userloggedin'
. ( !$this->avatarUrl ? '' : '-avatar' );
$toolsLinkText = $this->getSkinTemplate()->getMsg( 'chameleon-loggedin' )->
params( $user->getName() )->text();

} else {

} else {
$toolsClass = 'navbar-usernotloggedin';
$toolsLinkText = $this->getSkinTemplate()->getMsg( 'chameleon-notloggedin' )->text();

}

// TODO Rename '...LinkText' to '...LinkTitle' in both the hook and variable.
Expand All @@ -243,21 +248,67 @@ protected function getDropdownToggle(): string {

$newtalkNotifierHtml = $this->getNewtalkNotifier();
$userNameHtml = $this->getUserName();

MediaWikiServices::getInstance()->getHookContainer()->run( 'ChameleonNavbarHorizontalPersonalToolsLinkInnerHtml',
[ &$newtalkNotifierHtml, &$userNameHtml, $this ] );

$this->indent( 1 );

$dropdownToggle = IdRegistry::getRegistry()->element( 'a', [ 'class' => $toolsClass,
$attr = [
'class' => $toolsClass,
'href' => '#', 'data-toggle' => 'dropdown', 'data-boundary' => 'viewport',
'title' => $toolsLinkText ], $newtalkNotifierHtml . $userNameHtml,
'title' => $toolsLinkText
];

if ( $this->avatarUrl ) {
$attr['style'] = "background-image:url('$this->avatarUrl')";
}

$dropdownToggle = IdRegistry::getRegistry()->element( 'a', $attr, $newtalkNotifierHtml . $userNameHtml,
$this->indent() );

$this->indent( -1 );

return $dropdownToggle;
}

private function setUserAvatar() {
if ( !empty( $GLOBALS['chameleonDisableAvatar'] ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I merged the code, but this is not the right approach:

  • This should be a setting/attribute on the component in the XML. It is not a global Chameleon setting, but rather specific to one component.
  • It should be opt-in (avatars should be disabled by default), otherwise existing wikis might suddenly see avatars if they coincidentally had images with the matching names. This causes an unexpected change.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in #432

return;
}

$user = $this->getSkinTemplate()->getSkin()->getUser();
if ( ! $user->isRegistered() ) {
return;
}

// let users of the skin set an avatar url by some
// other criteria. e.g. SMW could use
// \SMW\DIProperty::newFromUserLabel( 'User image' )
if ( !MediaWikiServices::getInstance()->getHookContainer()->run( 'ChameleonNavbarHorizontalPersonalToolsAvatarUrl',
[ &$this->avatarUrl, $this->getSkin() ] ) ) {
return false;
}

// retrieve an image with the same name
// of the user with some common extension
$imageExt = [ 'png', 'jpg', 'jpeg' ];
$imagePage = null;
$username = $user->getName();
foreach ( $imageExt as $ext ) {
$title_ = \Title::makeTitleSafe( NS_FILE, "$username.$ext" );
if ( $title_ && $title_->isKnown() ) {
$imagePage = new \WikiFilePage( $title_ );
break;
}
}
if ( !$imagePage ) {
return;
}

$this->avatarUrl = $imagePage->getFile()->createThumb( 41, 41 );
}

/**
* @return string
*/
Expand Down