N°3530 Replace hardcoded newsroom message indicator and add tooltip when menu is collapsed

This commit is contained in:
Stephen Abello
2021-03-17 17:32:44 +01:00
parent 610ff6494a
commit bab2febb24
5 changed files with 30 additions and 13 deletions

View File

@@ -1595,6 +1595,7 @@ Dict::Add('EN US', 'English', 'English', array(
//
Dict::Add('EN US', 'English', 'English', array(
'UI:Newsroom:NoNewMessage' => 'No new message',
'UI:Newsroom:XNewMessage' => '%1$s new message(s)',
'UI:Newsroom:MarkAllAsRead' => 'Mark all messages as read',
'UI:Newsroom:ViewAllMessages' => 'View all messages',
'UI:Newsroom:Preferences' => 'Newsroom preferences',

View File

@@ -13,9 +13,10 @@ $(function()
placeholder_image_icon: '',
providers: [],
labels: {
'no_message': 'No new message',
'mark_all_as_read': 'Mark all as read',
'view_all': 'View all messages'
no_notification: 'UI:Newsroom:NoNewMessage',
x_notifications: 'UI:Newsroom:XNewMessage',
mark_all_as_read: 'UI:Newsroom:MarkAllAsRead',
view_all: 'UI:Newsroom:ViewAllMessages'
}
},
css_classes:
@@ -26,6 +27,7 @@ $(function()
js_selectors:
{
menu_toggler: '[data-role="ibo-navigation-menu--notifications-toggler"]',
menu_toggler_message: '[data-role="ibo-navigation-menu--user-notifications--toggler--message"]',
},
// the constructor
@@ -170,12 +172,22 @@ $(function()
if (oDate1 < oDate2) return 1;
return 1;
});
this._refreshTogglerMessage(aAllMessages.length);
this._buildMenu(aAllMessages);
},
_refreshTogglerMessage : function(iItemCount){
var sMessage = this.options.labels.no_notification;
if(iItemCount > 0){
sMessage = Dict.Format(this.options.labels.x_notifications, iItemCount);
}
$(this.js_selectors.menu_toggler_message).html(sMessage);
$(this.js_selectors.menu_toggler).attr('data-tooltip-content', sMessage);
CombodoTooltip.InitTooltipFromMarkup($(this.js_selectors.menu_toggler), true);
},
_buildDismissAllSection: function()
{
return '<div class="ibo-popover-menu--section ibo-navigation-menu--notifications-dismiss-all" data-role="ibo-popover-menu--section"><a class="ibo-popover-menu--item" data-role="ibo-navigation-menu--notifications-dismiss-all" ><i class="fas fa-fw fa-check ibo-navigation-menu--notifications-dismiss-all--icon"></i>' + this.options.labels.mark_all_as_read + '</a><hr class="ibo-popover-menu--item ibo-popover-menu--separator"></div>';
return '<div class="ibo-popover-menu--section ibo-navigation-menu--notifications-dismiss-all" data-role="ibo-popover-menu--section"><a class="ibo-popover-menu--item" data-role="ibo-navigation-menu--notifications-dismiss-all" ><i class="fas fa-fw fa-check' +
' ibo-navigation-menu--notifications-dismiss-all--icon"></i>' + Dict.S(this.options.labels.mark_all_as_read) + '</a><hr class="ibo-popover-menu--item ibo-popover-menu--separator"></div>';
},
_buildMessageSection: function () {
return '<div class="ibo-popover-menu--section ibo-navigation-menu--notifications--messages-section" data-role="ibo-popover-menu--section">';
@@ -200,12 +212,12 @@ $(function()
},
_buildNoMessageItem: function()
{
return '<div class="ibo-popover-menu--item ibo-popover-menu--item--no-message">' + this.options.labels.no_message +
return '<div class="ibo-popover-menu--item ibo-popover-menu--item--no-message">' + Dict.S(this.options.labels.no_notification) +
'<div class="ibo-popover-menu--item--no-message--image ibo-svg-illustration--container">' + this.options.no_message_icon + '</div></div>';
},
_buildSingleShowAllMessagesItem: function()
{
return '<a class="ibo-popover-menu--item" data-role="ibo-navigation-menu--notifications-show-all" href="' + this.options.providers[0].view_all_url + '" target="' + this.options.providers[0].target + '">' + this.options.labels.view_all + '</a>';
return '<a class="ibo-popover-menu--item" data-role="ibo-navigation-menu--notifications-show-all" href="' + this.options.providers[0].view_all_url + '" target="' + this.options.providers[0].target + '">' + Dict.S(this.options.labels.view_all) + '</a>';
},
_buildMultipleShowAllMessagesItem: function(aUnreadMessagesByProvider)
{
@@ -219,7 +231,7 @@ $(function()
}
sUnreadMessages += '<a class="ibo-popover-menu--item" data-provider-id="' + k + '" href="' + this.options.providers[k].view_all_url + '" target="' + this.options.providers[k].target + '">' + sNewMessageIndicator + this.options.providers[k].label + sExtraMessages + '</a>';
}
return '<a class="ibo-popover-menu--item ibo-navigation-menu--notifications-show-all-multiple" data-role="ibo-navigation-menu--notifications-show-all-multiple" href="#">'+this.options.labels.view_all+'<i class="fas fas-caret-down"></i></a>' +
return '<a class="ibo-popover-menu--item ibo-navigation-menu--notifications-show-all-multiple" data-role="ibo-navigation-menu--notifications-show-all-multiple" href="#">'+Dict.S(this.options.labels.view_all)+'<i class="fas fas-caret-down"></i></a>' +
'<div class="ibo-popover-menu" data-role="ibo-popover-menu"><div class="ibo-popover-menu--section" data-role="ibo-popover-menu--section">'+sUnreadMessages+'</div></div>';
},
_buildMenu: function(aAllMessages)

View File

@@ -93,9 +93,10 @@ class NewsroomMenuFactory
'providers' => $aProviderParams,
'display_limit' => (int)appUserPreferences::GetPref('newsroom_display_size', 7),
'labels' => array(
'no_message' => Dict::S('UI:Newsroom:NoNewMessage'),
'mark_all_as_read' => Dict::S('UI:Newsroom:MarkAllAsRead'),
'view_all' => Dict::S('UI:Newsroom:ViewAllMessages'),
'no_notification' => 'UI:Newsroom:NoNewMessage',
'x_notifications' => 'UI:Newsroom:XNewMessage',
'mark_all_as_read' => 'UI:Newsroom:MarkAllAsRead',
'view_all' => 'UI:Newsroom:ViewAllMessages'
),
);
return $aParams;

View File

@@ -156,6 +156,7 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
$this->add_dict_entry('UI:UndefinedObject');
$this->add_dict_entries('Enum:Undefined');
$this->add_dict_entry('UI:Datatables:Language:Processing');
$this->add_dict_entries('UI:Newsroom');
}

View File

@@ -33,7 +33,7 @@
<div class="ibo-navigation-menu--bottom-part">
{% if oUIBlock.IsNewsroomEnabled() == true %}
<div class="ibo-navigation-menu--notifications">
<a class="ibo-navigation-menu--notifications-toggler ibo-is-empty" data-role="ibo-navigation-menu--notifications-toggler">
<a class="ibo-navigation-menu--notifications-toggler ibo-is-empty" data-role="ibo-navigation-menu--notifications-toggler" data-tooltip-content="{{ 'UI:Newsroom:NoNewMessage'|dict_s }}" data-tooltip-placement="right" data-tooltip-distance-offset="25">
<i class="fas fa-bell"></i>
<div class="ibo-navigation-menu--notifications-toggler--new-messages"></div>
</a>
@@ -69,7 +69,9 @@
{% if oUIBlock.IsNewsroomEnabled() == true %}
<div class="ibo-navigation-menu--user-notifications">
<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--message" data-role="ibo-navigation-menu--user-notifications--toggler--message">
{{ 'UI:Newsroom:NoNewMessage'|dict_s }}
</span>
<span class="ibo-navigation-menu--user-notifications--toggler--icon">
<i class="fas fa-bell"></i>
<span class="ibo-navigation-menu--notifications-toggler--new-messages"></span>