Add current status in navbar

This ports the code to vue and if the user_status app is disabled this
goes back to the previous behavior.

The Avatar vue components detects changes of the status automatically.

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Signed-off-by: Joas Schilling <coding@schilljs.com>
pull/29210/head
Carl Schwan 3 years ago
parent b585cf1ea1
commit 134167ef3f
No known key found for this signature in database
GPG Key ID: 06B35D38387B67BE

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -26,6 +26,7 @@ import Vue from 'vue'
import { getRequestToken } from '@nextcloud/auth'
import UserStatus from './UserStatus'
import store from './store'
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
// eslint-disable-next-line camelcase
__webpack_nonce__ = btoa(getRequestToken())
@ -39,6 +40,23 @@ __webpack_public_path__ = OC.linkTo('user_status', 'js/')
Vue.prototype.t = t
Vue.prototype.$t = t
const avatarDiv = document.getElementById('avatardiv-menu')
const propsData = {
preloadedUserStatus: {
message: avatarDiv.dataset.userstatus_message,
icon: avatarDiv.dataset.userstatus_icon,
status: avatarDiv.dataset.userstatus,
},
user: avatarDiv.dataset.user,
displayName: avatarDiv.dataset.displayname,
url: avatarDiv.dataset.avatar,
disableMenu: true,
disableTooltip: true,
}
const AvatarInMenu = Vue.extend(Avatar)
new AvatarInMenu({ propsData }).$mount('#avatardiv-menu')
// Register settings menu entry
export default new Vue({
el: 'li[data-id="user_status-menuitem"]',

@ -1,4 +1,18 @@
<!DOCTYPE html>
<?php
/**
* @var \OC_Defaults $theme
* @var array $_
*/
$getUserAvatar = static function (int $size) use ($_): string {
return \OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', [
'userId' => $_['user_uid'],
'size' => $size,
'v' => $_['userAvatarVersion']
]);
}
?><!DOCTYPE html>
<html class="ng-csp" data-placeholder-focus="false" lang="<?php p($_['language']); ?>" data-locale="<?php p($_['locale']); ?>" >
<head data-user="<?php p($_['user_uid']); ?>" data-user-displayname="<?php p($_['user_displayname']); ?>" data-requesttoken="<?php p($_['requesttoken']); ?>">
<meta charset="utf-8">
@ -131,19 +145,30 @@
<div id="expand" tabindex="0" role="button" class="menutoggle"
aria-label="<?php p($l->t('Settings'));?>"
aria-haspopup="true" aria-controls="expanddiv" aria-expanded="false">
<div class="avatardiv<?php if ($_['userAvatarSet']) {
<div id="avatardiv-menu" class="avatardiv<?php if ($_['userAvatarSet']) {
print_unescaped(' avatardiv-shown');
} else {
print_unescaped('" style="display: none');
} ?>">
<?php if ($_['userAvatarSet']): ?>
} ?>"
data-user="<?php p($_['user_uid']); ?>"
data-displayname="<?php p($_['user_displayname']); ?>"
<?php if ($_['userStatus'] !== false) { ?>
data-userstatus="<?php p($_['userStatus']->getStatus()); ?>"
data-userstatus_message="<?php p($_['userStatus']->getMessage()); ?>"
data-userstatus_icon="<?php p($_['userStatus']->getIcon()); ?>"
<?php }
if ($_['userAvatarSet']) {
$avatar32 = $getUserAvatar(32); ?> data-avatar="<?php p($avatar32); ?>"
<?php
} ?>>
<?php
if ($_['userAvatarSet']) {?>
<img alt="" width="32" height="32"
src="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 32, 'v' => $_['userAvatarVersion']]));?>"
srcset="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 64, 'v' => $_['userAvatarVersion']]));?> 2x, <?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 128, 'v' => $_['userAvatarVersion']]));?> 4x"
src="<?php p($avatar32);?>"
srcset="<?php p($getUserAvatar(64));?> 2x, <?php p($getUserAvatar(128));?> 4x"
>
<?php endif; ?>
<?php } ?>
</div>
<div id="expandDisplayName" class="icon-settings-white"></div>
</div>
<nav class="settings-menu" id="expanddiv" style="display:none;"
aria-label="<?php p($l->t('Settings menu'));?>">

@ -47,6 +47,7 @@ use OC\Search\SearchQuery;
use OC\Template\JSCombiner;
use OC\Template\JSConfigHelper;
use OC\Template\SCSSCacher;
use OCP\App\IAppManager;
use OCP\AppFramework\Http\TemplateResponse;
use OCP\Defaults;
use OCP\IConfig;
@ -54,6 +55,7 @@ use OCP\IInitialStateService;
use OCP\INavigationManager;
use OCP\IUserSession;
use OCP\Support\Subscription\IRegistry;
use OCP\UserStatus\IManager as IUserStatusManager;
use OCP\Util;
class TemplateLayout extends \OC_Template {
@ -131,11 +133,23 @@ class TemplateLayout extends \OC_Template {
$this->assign('user_displayname', $userDisplayName);
$this->assign('user_uid', \OC_User::getUser());
if (\OC_User::getUser() === false) {
if ($user === null) {
$this->assign('userAvatarSet', false);
$this->assign('userStatus', false);
} else {
$this->assign('userAvatarSet', true);
$this->assign('userAvatarVersion', $this->config->getUserValue(\OC_User::getUser(), 'avatar', 'version', 0));
if (\OC::$server->get(IAppManager::class)->isEnabledForUser('user_status')) {
$userStatusManager = \OC::$server->get(IUserStatusManager::class);
$userStatuses = $userStatusManager->getUserStatuses([$user->getUID()]);
if (array_key_exists($user->getUID(), $userStatuses)) {
$this->assign('userStatus', $userStatuses[$user->getUID()]);
} else {
$this->assign('userStatus', false);
}
} else {
$this->assign('userStatus', false);
}
}
// check if app menu icons should be inverted

Loading…
Cancel
Save