diff --git a/css/backoffice/components/_popover-menu-item.scss b/css/backoffice/components/_popover-menu-item.scss
index e4a49e3b6..c1b3e4162 100644
--- a/css/backoffice/components/_popover-menu-item.scss
+++ b/css/backoffice/components/_popover-menu-item.scss
@@ -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;
+ }
}
diff --git a/css/backoffice/components/_popover-menu.scss b/css/backoffice/components/_popover-menu.scss
index 8386e65a6..1c976a57e 100644
--- a/css/backoffice/components/_popover-menu.scss
+++ b/css/backoffice/components/_popover-menu.scss
@@ -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{
diff --git a/css/backoffice/layout/_navigation-menu.scss b/css/backoffice/layout/_navigation-menu.scss
index 170c8a3a4..2067774e1 100644
--- a/css/backoffice/layout/_navigation-menu.scss
+++ b/css/backoffice/layout/_navigation-menu.scss
@@ -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;
diff --git a/js/components/popover-menu.js b/js/components/popover-menu.js
index 244912459..88cf10245 100644
--- a/js/components/popover-menu.js
+++ b/js/components/popover-menu.js
@@ -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();
+ },
});
});
diff --git a/js/layouts/navigation-menu.js b/js/layouts/navigation-menu.js
index db7a44968..c38af327d 100644
--- a/js/layouts/navigation-menu.js
+++ b/js/layouts/navigation-menu.js
@@ -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)
diff --git a/templates/layouts/navigation-menu/layout.html.twig b/templates/layouts/navigation-menu/layout.html.twig
index 6580b36d9..a7b685848 100644
--- a/templates/layouts/navigation-menu/layout.html.twig
+++ b/templates/layouts/navigation-menu/layout.html.twig
@@ -28,21 +28,26 @@
{% endif %}
-
+
+