Browse Source
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>tags/v23.0.0beta1
Carl Schwan
2 years ago
11 changed files with 380 additions and 151 deletions
+ 64
- 64
apps/user_status/js/dashboard.js
File diff suppressed because it is too large
View File
+ 1
- 1
apps/user_status/js/dashboard.js.map
File diff suppressed because it is too large
View File
+ 224
- 13
apps/user_status/js/user-status-menu.js
File diff suppressed because it is too large
View File
+ 1
- 1
apps/user_status/js/user-status-menu.js.map
File diff suppressed because it is too large
View File
+ 2
- 2
apps/user_status/js/user-status-modal.js
File diff suppressed because it is too large
View File
+ 1
- 1
apps/user_status/js/user-status-modal.js.map
File diff suppressed because it is too large
View File
+ 20
- 59
apps/user_status/js/vendors-user-status-modal.js
File diff suppressed because it is too large
View File
+ 1
- 1
apps/user_status/js/vendors-user-status-modal.js.map
File diff suppressed because it is too large
View File
+ 18
- 0
apps/user_status/src/main-user-status-menu.js
View File
| @@ -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"]', | |||
+ 33
- 8
core/templates/layout.user.php
View File
| @@ -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'));?>"> | |||
+ 15
- 1
lib/private/TemplateLayout.php
View File
| @@ -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…