composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 Add bottom menu part :

Browse Source 
* Notifications icon
* User icon
* Extended user data
Still todo:
* Initialize Newsroom and feed infos to template
* Initialize User popover menu
This commit is contained in:
Stephen Abello
2020-08-03 17:07:21 +02:00
parent e2e62eca5e
commit ed1f3aa950
7 changed files with 135 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/userrights.class.inc.php
View File

@@ -1088,7 +1088,8 @@ class UserRights
*/
public static function GetContactPicture($sName = '')
{
$sPictureUrl = utils::GetAbsoluteUrlAppRoot().'img/user-profile-default-256px.png';
// TODO: replace with console one
$sPictureUrl = utils::GetAbsoluteUrlAppRoot().'datamodels/2.x/itop-portal-base/portal/public/img/user-profile-default-256px.png';
if (empty($sName))
{

4
css/backoffice/components/_popover-menu.scss
View File

@@ -23,16 +23,16 @@ $ibo-popover-menu--padding: 0 !default;
.ibo-popover-menu{
display: none;
flex-direction: column;
padding: $ibo-popover-menu--padding;
background-color: $ibo-popover-menu--background-color;
@extend %ibo-elevation-300;
border-radius: $ibo-popover-menu--border-radius;
flex-wrap: wrap;
position: absolute;
&.ibo-is-opened{
display: flex;
flex-direction: column;
}
}

86
css/backoffice/layout/_navigation-menu.scss
View File

@@ -110,7 +110,20 @@ $ibo-navigation-menu--menu-node--hyperlink-color: inherit !default;
$ibo-navigation-menu--menu-node--background-color: $ibo-color-grey-200 !default;
$ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--bottom-part--padding-y: 24px 0px !default;
$ibo-navigation-menu--notifications-toggler--font-size: 28px !default;
$ibo-navigation-menu--user--text-color: $ibo-color-white-100 !default;
$ibo-navigation-menu--user-picture--image-collapsed--size: 36px !default;
$ibo-navigation-menu--user-picture--image-collapsed--border-radius: 18px !default;
$ibo-navigation-menu--user-notifications--toggler--padding-left: 8px !default;
$ibo-navigation-menu--user-info-expanded--height: 100%;
$ibo-navigation-menu--user-picture--image-expanded--margin: -60px auto 0 auto !default;
$ibo-navigation-menu--user-picture--image-expanded--border: solid 3px $ibo-color-blue-grey-900 !default;
$ibo-navigation-menu--user-picture--image-expanded--border-radius: 36px !default;
$ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
/* CSS variables (can be changed directly from the browser) */
:root {
/* TODO: Introduce variables once SCSS variables are set */
@@ -154,6 +167,25 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
}
}
}
.ibo-navigation-menu--bottom-part{
.ibo-navigation-menu--notifications{
display: none;
}
.ibo-navigation-menu--user-info{
height: $ibo-navigation-menu--user-info-expanded--height;
.ibo-navigation-menu--user-welcome-message, .ibo-navigation-menu--user-notifications, .ibo-navigation-menu--user-organization{
display: block;
}
.ibo-navigation-menu--user-picture{
.ibo-navigation-menu--user-picture--image{
margin:$ibo-navigation-menu--user-picture--image-expanded--margin;
border: $ibo-navigation-menu--user-picture--image-expanded--border;
border-radius: $ibo-navigation-menu--user-picture--image-expanded--border-radius;
width: $ibo-navigation-menu--user-picture--image-expanded--size;
}
}
}
}
}
}
&.ibo-is-active{
@@ -221,6 +253,12 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
.ibo-navigation-menu--bottom-part{
height: 150px;
background-color: $ibo-navigation-menu--bottom-part--background-color;
padding: $ibo-navigation-menu--bottom-part--padding-y;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.ibo-navigation-menu--toggler,
@@ -439,7 +477,49 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
@extend %ibo-font-ral-nor-350;
@extend %ibo-text-truncated-with-ellipsis;
}
.ibo-navigation-menu--user-menu-container{
position: absolute;
bottom: 10px;
.ibo-navigation-menu--notifications{
display: flex;
flex-direction: column;
align-content: center;
.ibo-navigation-menu--notifications-toggler{
font-size: $ibo-navigation-menu--notifications-toggler--font-size;
color: $ibo-color-grey-300;
}
}
.ibo-navigation-menu--user-info{
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-between;
.ibo-navigation-menu--user-picture{
display: flex;
.ibo-navigation-menu--user-picture--image{
width: $ibo-navigation-menu--user-picture--image-collapsed--size;
border-radius: $ibo-navigation-menu--user-picture--image-collapsed--border-radius;
}
}
.ibo-navigation-menu--user-welcome-message, .ibo-navigation-menu--user-organization, .ibo-navigation-menu--user-notifications{
display: none;
text-align: center;
color: $ibo-navigation-menu--user--text-color;
}
.ibo-navigation-menu--user-welcome-message{
@extend %ibo-font-ral-med-250;
}
.ibo-navigation-menu--user-notifications{
@extend %ibo-font-ral-med-150;
.ibo-navigation-menu--user-notifications--toggler{
padding-left: $ibo-navigation-menu--user-notifications--toggler--padding-left;
}
}
.ibo-navigation-menu--user-organization{
@extend %ibo-font-ral-med-100;
}
.ibo-navigation-menu--user-menu-container{
position: absolute;
bottom: 10px;
}
}

2
dictionaries/en.dictionary.itop.ui.php
View File

@@ -387,7 +387,7 @@ Dict::Add('EN US', 'English', 'English', array(
'UI:WelcomeMenu:MyIncidents' => 'Incidents assigned to me',
'UI:AllOrganizations' => ' All Organizations ',
'UI:YourSearch' => 'Your Search',
'UI:LoggedAsMessage' => 'Logged in as %1$s',
'UI:LoggedAsMessage' => 'Hi %1$s!',
'UI:LoggedAsMessage+Admin' => 'Logged in as %1$s (Administrator)',
'UI:Button:Logoff' => 'Log off',
'UI:Button:GlobalSearch' => 'Search',

1
dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php
View File

@@ -24,4 +24,5 @@ Dict::Add('EN US', 'English', 'English', array(
'UI:Layout:NavigationMenu:MenuFilter:Input:Placeholder' => 'Filter...',
'UI:Layout:NavigationMenu:MenuFilter:Input:Tooltip' => 'Type your keywords to filter menus',
'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey' => 'Alt + M',
'UI:Layout:NavigationMenu:UserInfo:Picture:Alt' => 'User picture'
));

13
sources/application/UI/Layout/NavigationMenu/NavigationMenu.php
View File

@@ -168,6 +168,14 @@ class NavigationMenu extends UIBlock
return [$this->oUserMenu->GetId() => $this->oUserMenu];
}
/**
* @return boolean
*/
public function GetIsNewsroomEnabled()
{
return MetaModel::GetConfig()->Get('newsroom_enabled');
}
/**
* Compute if the menu is expanded or collapsed
*
@@ -212,11 +220,12 @@ class NavigationMenu extends UIBlock
];
// Logon message
$sLogonMessageDictCode = (UserRights::IsAdministrator()) ? 'UI:LoggedAsMessage+Admin' : 'UI:LoggedAsMessage';
$aData['sLogonMessage'] = Dict::Format($sLogonMessageDictCode, UserRights::GetUser());
$sLogonMessageDictCode = (UserRights::IsAdministrator()) ? 'UI:LoggedAsMessage' : 'UI:LoggedAsMessage';
$aData['sLogonMessage'] = Dict::Format($sLogonMessageDictCode, UserRights::GetContactFirstname());
$this->aUserData = $aData;
return $this;
}
}

42
templates/layouts/navigation-menu/layout.html.twig
View File

@@ -18,14 +18,42 @@
{% endfor %}
</div>
<div class="ibo-navigation-menu--bottom-part">
<div class="ibo-navigation-menu--notifications">
<div class="ibo-navigation-menu--notifications-toggler"></div>
<div class="ibo-navigation-menu--notifications-menu"></div>
</div>
{% if oNavigationMenu.IsNewsroomEnabled == true %}
<div class="ibo-navigation-menu--notifications">
<div class="ibo-navigation-menu--notifications-toggler">
<i class="fas fa-bell"></i>
</div>
<div class="ibo-navigation-menu--notifications-menu"></div>
</div>
{% endif %}
<div class="ibo-navigation-menu--user-info">
<div class="ibo-navigation-menu--user-picture"></div>
<div class="ibo-navigation-menu--user-welcome-message"></div>
<div class="ibo-navigation-menu--user-organization"></div>
<div class="ibo-navigation-menu--user-picture">
<img class="ibo-navigation-menu--user-picture--image" src="{{ oNavigationMenu.UserData.sPictureUrl }}" alt="{{ 'UI:Layout:NavigationMenu:UserInfo:Picture:Alt'|dict_s }}" />
</div>
<div class="ibo-navigation-menu--user-welcome-message">
<div class="ibo-navigation-menu--user-welcome-message--text">
{{ oNavigationMenu.UserData.sLogonMessage }}
<span class="ibo-navigation-menu--user-welcome-message--toggler">
<i class="fas fa-caret-down"></i>
</span>
</div>
</div>
{% if oNavigationMenu.IsNewsroomEnabled == true %}
<div class="ibo-navigation-menu--user-notifications">
<div class="ibo-navigation-menu--user-notifications--text">
{{ '0 notification'|dict_s }}
<span class="ibo-navigation-menu--user-notifications--toggler">
<i class="fas fa-bell"></i>
</span>
</div>
<div class="ibo-navigation-menu--user-notifications-menu"></div>
</div>
{% endif %}
<div class="ibo-navigation-menu--user-organization">
<div class="ibo-navigation-menu--user-organization--text">
{{ oNavigationMenu.UserData.sOrganization }}
</div>
</div>
<div class="ibo-navigation-menu--user-menu-container">
{{ render_block(oNavigationMenu.UserMenu) }}
</div>