composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 Open user menu when clicking user picture or user welcome message

Browse Source
This commit is contained in:
Stephen Abello
2020-08-04 11:53:25 +02:00
parent e22c36c503
commit 4e7b68aa9a
6 changed files with 99 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/backoffice/components/_popover-menu-item.scss
View File

@@ -19,6 +19,7 @@
/* SCSS variables */
$ibo-popover-menu--item--text-color: $ibo-color-grey-900 !default;
$ibo-popover-menu--item--hyperlink-color: $ibo-popover-menu--item--text-color !default;
$ibo-popover-menu--item--border-radius: $ibo-popover-menu--border-radius !default;
.ibo-popover-menu--item{
padding: 12px 24px 12px 16px;
@@ -31,4 +32,10 @@ $ibo-popover-menu--item--hyperlink-color: $ibo-popover-menu--item--text-color !d
background-color: var(--ibo-color-grey-200);
color: inherit;
}
&:first-child{
border-radius: $ibo-popover-menu--item--border-radius $ibo-popover-menu--item--border-radius 0 0;
}
&:last-child {
border-radius: 0 0 $ibo-popover-menu--item--border-radius $ibo-popover-menu--item--border-radius;
}
}

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

@@ -18,7 +18,7 @@
/* SCSS variables */
$ibo-popover-menu--background-color: $ibo-color-white-100 !default;
$ibo-popover-menu--border-radius: 3px !default;
$ibo-popover-menu--border-radius: $ibo-border-radius-300 !default;
$ibo-popover-menu--padding: 0 !default;
.ibo-popover-menu{

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

@@ -112,6 +112,7 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--bottom-part--padding-y: 24px !default;
$ibo-navigation-menu--bottom-part--padding-x: 0px !default;
$ibo-navigation-menu--bottom-part-collapsed--direct-child--margin: auto 0 !default;
$ibo-navigation-menu--notifications-toggler--font-size: 28px !default;
@@ -170,6 +171,8 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
}
}
.ibo-navigation-menu--bottom-part{
padding: $ibo-navigation-menu--bottom-part--padding-y $ibo-navigation-menu--bottom-part--padding-x;
.ibo-navigation-menu--notifications{
display: none;
}
@@ -179,11 +182,13 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
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;
>a {
margin: $ibo-navigation-menu--user-picture--image-expanded--margin;
.ibo-navigation-menu--user-picture--image {
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;
}
}
}
}
@@ -255,12 +260,14 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !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 $ibo-navigation-menu--bottom-part--padding-x;
display: flex;
flex-direction: column;
align-items: center;
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-direction: column;
>*
{
margin: $ibo-navigation-menu--bottom-part-collapsed--direct-child--margin;
}
}
.ibo-navigation-menu--toggler,
@@ -491,10 +498,9 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
}
.ibo-navigation-menu--user-info{
display: flex;
flex-direction: column;
align-content: center;
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-direction: column;
.ibo-navigation-menu--user-picture{
display: flex;
@@ -510,6 +516,9 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
}
.ibo-navigation-menu--user-welcome-message{
@extend %ibo-font-ral-med-250;
.ibo-navigation-menu--user-welcome-message--text, .ibo-navigation-menu--user-welcome-message--toggler{
color: $ibo-navigation-menu--user--text-color;
}
}
.ibo-navigation-menu--user-welcome-message--toggler{
padding-left: $ibo-navigation-menu--user-welcome-message--toggler--padding-left;

44
js/components/popover-menu.js
View File

@@ -20,24 +20,24 @@
$(function()
{
// the widget definition, where 'itop' is the namespace,
// 'breadcrumbs' the widget name
$.widget( 'itop.popover-menu',
// 'popover-menu' the widget name
$.widget( 'itop.popover_menu',
{
// default options
options:
{
},
{
toggler: '',
},
css_classes:
{
opened: 'ibo-is-opened',
},
{
opened: 'ibo-is-opened',
},
js_selectors:
{
menu: '[data-role="ibo-popover-menu"]',
section: '[data-role="ibo-popover-menu--section"]',
item: '[data-role="ibo-popover-menu--item"]',
},
{
menu: '[data-role="ibo-popover-menu"]',
section: '[data-role="ibo-popover-menu--section"]',
item: '[data-role="ibo-popover-menu--item"]',
},
// the constructor
_create: function()
@@ -48,7 +48,6 @@ $(function()
// revert other modifications here
_destroy: function()
{
this.element.removeClass('ibo-quick-create');
},
_bindEvents: function()
{
@@ -58,12 +57,21 @@ $(function()
this.element.find(this.js_selectors.item).on('click', function(oEvent){
me._closePopup();
});
// Mostly for outside clicks that should close elements
oBodyElem.on('click', function(oEvent){
me._onBodyClick(oEvent);
});
},
// Methods
_isDrawerPopup: function()
_onBodyClick: function(oEvent)
{
return this.element.hasClass(this.css_classes.opened);
if($(oEvent.target.closest('[data-role="ibo-popover-menu"]')).length === 0 && $(oEvent.target.closest(this.options.toggler)).length === 0)
{
console.log('a');
this._closePopup();
}
},
_openPopup: function()
{
@@ -73,5 +81,9 @@ $(function()
{
this.element.removeClass(this.css_classes.opened);
},
openPopup: function()
{
this._openPopup();
},
});
});

23
js/layouts/navigation-menu.js
View File

@@ -42,6 +42,9 @@ $(function()
menu_drawer: '[data-role="ibo-navigation-menu--drawer"]',
menu_filter_input: '[data-role="ibo-navigation-menu--menu-filter-input"]',
menu_filter_clear: '[data-role="ibo-navigation-menu--menu-filter-clear"]',
user_menu_toggler: '[data-role="ibo-navigation-menu--user-menu--toggler"]',
user_menu_container: '[data-role="ibo-navigation-menu--user-menu-container"]',
user_menu: '[data-role="ibo-popover-menu"]'
},
filter_throttle_timeout: null,
@@ -49,7 +52,7 @@ $(function()
_create: function()
{
this.element.addClass('ibo-navigation-menu');
$(this.js_selectors.user_menu).popover_menu({'toggler': this.js_selectors.user_menu_toggler});
this._bindEvents();
},
// events bound via _bind are removed automatically
@@ -89,6 +92,11 @@ $(function()
this.element.find(this.js_selectors.menu_filter_clear).on('click', function(oEvent){
me._onFilterClearClick(oEvent);
})
// User info
this.element.find(this.js_selectors.user_menu_toggler).on('click', function(oEvent){
me._onUserMenuTogglerClick(oEvent);
});
},
// Events callbacks
@@ -170,6 +178,19 @@ $(function()
// Position focus in the input for better UX
this._focusFilter();
},
_onUserMenuTogglerClick: function(oEvent)
{
// Avoid anchor glitch
oEvent.preventDefault();
var oEventTarget = $(oEvent.target);
var aEventTargetPos = oEventTarget.position();
$(this.js_selectors.user_menu_container).css({
'top': (aEventTargetPos.top + parseInt(oEventTarget.css('marginTop'), 10) - $(this.js_selectors.user_menu).height()) + 'px',
'left': (aEventTargetPos.left + parseInt(oEventTarget.css('marginLeft'), 10) + oEventTarget.width()) + 'px'
});
$(this.js_selectors.user_menu).popover_menu('openPopup');
},
// Methods
_checkIfClickShouldCloseDrawer: function(oEvent)

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

@@ -28,21 +28,26 @@
{% endif %}
<div class="ibo-navigation-menu--user-info">
<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:AltText'|dict_format(oNavigationMenu.UserData.sFirstname) }}"
data-tooltip-content="{{ oNavigationMenu.UserData.sLogonMessage }}"
data-tooltip-placement="right"
data-tooltip-distance-offset="20"
/>
<a data-role="ibo-navigation-menu--user-menu--toggler" href="#">
<img class="ibo-navigation-menu--user-picture--image"
src="{{ oNavigationMenu.UserData.sPictureUrl }}"
alt="{{ 'UI:Layout:NavigationMenu:UserInfo:Picture:AltText'|dict_format(oNavigationMenu.UserData.sFirstname) }}"
data-tooltip-content="{{ oNavigationMenu.UserData.sLogonMessage }}"
data-tooltip-placement="right"
data-tooltip-distance-offset="20"
/>
</a>
</div>
<div class="ibo-navigation-menu--user-welcome-message">
<div class="ibo-navigation-menu--user-welcome-message--text">
{{ oNavigationMenu.UserData.sWelcomeMessage }}
<span class="ibo-navigation-menu--user-welcome-message--toggler">
<i class="fas fa-caret-down"></i>
</span>
</div>
<a data-role="ibo-navigation-menu--user-menu--toggler" href="#">
<div class="ibo-navigation-menu--user-welcome-message--text">
{{ oNavigationMenu.UserData.sWelcomeMessage }}
<span class="ibo-navigation-menu--user-welcome-message--toggler" data-role="ibo-navigation-menu--user-menu--toggler">
<i class="fas fa-caret-down"></i>
</span>
</div>
</a>
</div>
{% if oNavigationMenu.IsNewsroomEnabled == true %}
<div class="ibo-navigation-menu--user-notifications">
@@ -60,7 +65,7 @@
{{ oNavigationMenu.UserData.sOrganization }}
</div>
</div>
<div class="ibo-navigation-menu--user-menu-container">
<div class="ibo-navigation-menu--user-menu-container" data-role="ibo-navigation-menu--user-menu-container">
{{ render_block(oNavigationMenu.UserMenu) }}
</div>
</div>