composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-17 22:39:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 Add an indication on newsroom toggler when there is new messages

Browse Source
This commit is contained in:
Stephen Abello
2020-08-12 09:30:19 +02:00
parent f8b6b37288
commit 6436e8cef4
3 changed files with 69 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -123,12 +123,25 @@ $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;
$ibo-navigation-menu--notifications-toggler--color: $ibo-color-grey-600 !default;
$ibo-navigation-menu--notifications-toggler--loaded--color: $ibo-color-grey-300 !default;
$ibo-navigation-menu--notifications-toggler--new-messages--width: 16px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--height: 16px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--margin: 4px 0px 0px -10px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--color: $ibo-color-red-600;
$ibo-navigation-menu--notifications-toggler--new-messages--border: solid 2px $ibo-navigation-menu--bottom-part--background-color;
$ibo-navigation-menu--notifications-toggler--new-messages--border-radius: $ibo-border-radius-full;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--width: 10px !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--height: 10px !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--margin: 1px 0px 0px -4px !default;
$ibo-navigation-menu--user--text-color: $ibo-color-white-100 !default;
$ibo-navigation-menu--user-welcome-message--toggler--padding-left : 6px !default;
$ibo-navigation-menu--user-picture--image--border-radius: $ibo-border-radius-full !default;
$ibo-navigation-menu--user-picture--image--background-color: $ibo-color-grey-300;
$ibo-navigation-menu--user-notifications--toggler--padding-left: 5px !default;
$ibo-navigation-menu--user-notifications--toggler--icon--padding-left: 5px !default;
$ibo-navigation-menu--user-picture--image-collapsed--size: 36px !default;
@@ -518,9 +531,43 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
align-content: center;
.ibo-navigation-menu--notifications-toggler{
font-size: $ibo-navigation-menu--notifications-toggler--font-size;
color: $ibo-color-grey-300;
color: $ibo-navigation-menu--notifications-toggler--color;
}
}
.ibo-navigation-menu--notifications-toggler{
&.ibo-is-loaded{
color: $ibo-navigation-menu--notifications-toggler--loaded--color;
&:not(.ibo-is-empty) .ibo-navigation-menu--notifications-toggler--new-messages{
display: inline;
}
}
.ibo-navigation-menu--notifications-toggler--new-messages{
width: $ibo-navigation-menu--notifications-toggler--new-messages--width;
height: $ibo-navigation-menu--notifications-toggler--new-messages--height;
margin: $ibo-navigation-menu--notifications-toggler--new-messages--margin;
}
}
.ibo-navigation-menu--user-notifications--toggler{
&.ibo-is-loaded{
color: $ibo-navigation-menu--notifications-toggler--loaded--color;
&:not(.ibo-is-empty) .ibo-navigation-menu--notifications-toggler--new-messages{
display: inline;
}
}
.ibo-navigation-menu--notifications-toggler--new-messages {
width: $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--width;
height: $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--height;
margin: $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--margin;
}
}
.ibo-navigation-menu--notifications-toggler--new-messages{
position: absolute;
display: none;
background-color: $ibo-navigation-menu--notifications-toggler--new-messages--color;
border: $ibo-navigation-menu--notifications-toggler--new-messages--border;
border-radius: $ibo-navigation-menu--notifications-toggler--new-messages--border-radius;
}
.ibo-navigation-menu--user-info{
@extend %ibo-fully-centered-content;
@@ -554,8 +601,8 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
.ibo-navigation-menu--user-notifications--text{
color: $ibo-navigation-menu--user--text-color;
}
.ibo-navigation-menu--user-notifications--toggler{
padding-left: $ibo-navigation-menu--user-notifications--toggler--padding-left;
.ibo-navigation-menu--user-notifications--toggler--icon{
padding-left: $ibo-navigation-menu--user-notifications--toggler--icon--padding-left;
}
}
.ibo-navigation-menu--user-organization{

19
js/newsroom_menu.js
View File

@@ -24,6 +24,11 @@ $(function()
{
var me = this;
this.aMessageByProvider = [];
this._load();
},
_initializePopoverMenu: function()
{
var me = this;
$(me.element).popover_menu({'toggler': '[data-role="ibo-navigation-menu--notifications-toggler"]'});
$('[data-role="ibo-navigation-menu--notifications-toggler"]').on('click', function(oEvent) {
var oEventTarget = $(oEvent.target);
@@ -36,12 +41,9 @@ $(function()
});
$(me.element).popover_menu("togglePopup");
});
this.element
.addClass('itop-newsroom_menu');
this._load();
this.element.addClass('itop-newsroom_menu');
$('[data-role="ibo-navigation-menu--notifications-toggler"]').addClass('ibo-is-loaded');
},
// called when created, and later when changing options
_refresh: function()
{
@@ -279,11 +281,16 @@ $(function()
me._handleClick(this);
});
$('[data-role="ibo-navigation-menu--notifications-dismiss-all"]').on('click', function(ev) { me._markAllAsRead(); });
// Remove class to show there is new messages
$('[data-role="ibo-navigation-menu--notifications-toggler"]').removeClass('ibo-is-empty');
}
else
{
$(this.element).html(sMessageSection + sShowAllMessagesSection);
var me = this;
// Add class to show there is no messages
$('[data-role="ibo-navigation-menu--notifications-toggler"]').addClass('ibo-is-empty');
}
if (this.options.providers.length != 1)
@@ -301,7 +308,7 @@ $(function()
});
}
this._initializePopoverMenu();
},
_handleClick: function(elem)
{

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

@@ -23,8 +23,9 @@
<div class="ibo-navigation-menu--bottom-part">
{% if oUIBlock.IsNewsroomEnabled() == true %}
<div class="ibo-navigation-menu--notifications">
<a class="ibo-navigation-menu--notifications-toggler" data-role="ibo-navigation-menu--notifications-toggler">
<a class="ibo-navigation-menu--notifications-toggler ibo-is-empty" data-role="ibo-navigation-menu--notifications-toggler">
<i class="fas fa-bell"></i>
<div class="ibo-navigation-menu--notifications-toggler--new-messages"></div>
</a>
<div class="ibo-navigation-menu--notifications-menu">
{{ render_block(oUIBlock.GetNewsroomMenu(), {aPage: aPage}) }}
@@ -37,7 +38,6 @@
<img class="ibo-navigation-menu--user-picture--image"
src="{{ oUIBlock.GetUserData().sPictureUrl }}"
alt="{{ 'UI:Layout:NavigationMenu:UserInfo:Picture:AltText'|dict_format(oUIBlock.GetUserData().sFirstname) }}"
data-tooltip-content="{{ oUIBlock.GetUserData().sLogonMessage }}"
data-tooltip-placement="right"
data-tooltip-distance-offset="20"
@@ -58,10 +58,11 @@
</div>
{% if oUIBlock.IsNewsroomEnabled() == true %}
<div class="ibo-navigation-menu--user-notifications">
<a class="ibo-navigation-menu--user-notifications--text" data-role="ibo-navigation-menu--notifications-toggler" href="#">
<a class="ibo-navigation-menu--user-notifications--text ibo-navigation-menu--user-notifications--toggler" data-role="ibo-navigation-menu--notifications-toggler" href="#">
{{ '0 notification'|dict_s }}
<span class="ibo-navigation-menu--user-notifications--toggler">
<span class="ibo-navigation-menu--user-notifications--toggler--icon">
<i class="fas fa-bell"></i>
<div class="ibo-navigation-menu--notifications-toggler--new-messages"></div>
</span>
</a>
<div class="ibo-navigation-menu--user-notifications-menu"></div>