mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-21 09:38:48 +02:00
N°6406 - Newsroom: Allow news to contain hyperlinks without breaking DOM
This commit is contained in:
Molkobain
@@ -36,31 +36,30 @@ $ibo-popover-menu--item--no-message--image--svg--padding : 15px !default;
|
||||
#ibo-navigation-menu--notifications-menu {
|
||||
flex-flow: column;
|
||||
min-width: $ibo-navigation-menu--notifications-menu--min-width;
|
||||
.ibo-navigation-menu--notifications--messages-section{
|
||||
.ibo-navigation-menu--notifications--messages-section {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.ibo-navigation-menu--notifications--show-all-messages, .ibo-navigation-menu--notifications-dismiss-all, .ibo-navigation-menu--notifications-show-all-multiple{
|
||||
.ibo-navigation-menu--notifications--show-all-messages, .ibo-navigation-menu--notifications-dismiss-all, .ibo-navigation-menu--notifications-show-all-multiple {
|
||||
overflow-x: inherit;
|
||||
text-align: center;
|
||||
min-height: 45px;
|
||||
}
|
||||
|
||||
.ibo-navigation-menu--notifications--item--image{
|
||||
.ibo-navigation-menu--notifications--item--image {
|
||||
max-width: $ibo-navigation-menu--notifications--item--image--max-width;
|
||||
max-height: $ibo-navigation-menu--notifications--item--image--max-height;
|
||||
margin: $ibo-navigation-menu--notifications--item--image--margin-y $ibo-navigation-menu--notifications--item--image--margin-x;
|
||||
border-radius: $ibo-navigation-menu--notifications--item--image--border-radius;
|
||||
}
|
||||
|
||||
img.ibo-navigation-menu--notifications--item--image[src=""]{
|
||||
.ibo-navigation-menu--notifications--item--image[src=""] {
|
||||
display: none;
|
||||
}
|
||||
img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-navigation-menu--notifications--item--image
|
||||
{
|
||||
.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ .ibo-navigation-menu--notifications--item--image {
|
||||
display: none;
|
||||
}
|
||||
.ibo-navigation-menu--notifications--item--bottom-text{
|
||||
.ibo-navigation-menu--notifications--item--bottom-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -68,18 +67,23 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga
|
||||
align-self: center;
|
||||
margin-left: $ibo-navigation-menu--notifications--item--bottom-text--margin-left;
|
||||
}
|
||||
.ibo-navigation-menu--notifications--item--content{
|
||||
.ibo-navigation-menu--notifications--item--content {
|
||||
padding: $ibo-navigation-menu--notifications--item--content--padding-y $ibo-navigation-menu--notifications--item--content--padding-x;
|
||||
img{
|
||||
|
||||
img {
|
||||
max-height: $ibo-navigation-menu--notifications--item--content--img--max-height;
|
||||
padding: $ibo-navigation-menu--notifications--item--content--img--padding;
|
||||
}
|
||||
}
|
||||
.ibo-navigation-menu--notifications-item{
|
||||
.ibo-navigation-menu--notifications-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.ibo-navigation-menu--notifications--item--content a {
|
||||
@extend %ibo-hyperlink-forced-colors;
|
||||
}
|
||||
}
|
||||
.ibo-navigation-menu--notifications--item--new-message-indicator{
|
||||
.ibo-navigation-menu--notifications--item--new-message-indicator {
|
||||
width: $ibo-navigation-menu--notifications--item--new-message-indicator--width;
|
||||
height: $ibo-navigation-menu--notifications--item--new-message-indicator--height;
|
||||
background-color: $ibo-navigation-menu--notifications--item--new-message-indicator--background-color;
|
||||
@@ -87,22 +91,22 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga
|
||||
margin-top: $ibo-navigation-menu--notifications--item--new-message-indicator--margin-top;
|
||||
}
|
||||
|
||||
.ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu{
|
||||
.ibo-navigation-menu--notifications--item--new-message-indicator{
|
||||
.ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu {
|
||||
.ibo-navigation-menu--notifications--item--new-message-indicator {
|
||||
display: inline-block;
|
||||
margin-right: $ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right;
|
||||
}
|
||||
.ibo-navigation-menu--notifications-show-all-multiple--counter{
|
||||
.ibo-navigation-menu--notifications-show-all-multiple--counter {
|
||||
@extend %ibo-font-weight-600;
|
||||
}
|
||||
}
|
||||
.ibo-navigation-menu--notifications-dismiss-all--icon{
|
||||
.ibo-navigation-menu--notifications-dismiss-all--icon {
|
||||
margin: $ibo-navigation-menu--notifications-dismiss-all--icon--margin;
|
||||
}
|
||||
.ibo-popover-menu--item--no-message{
|
||||
.ibo-popover-menu--item--no-message {
|
||||
text-align: center;
|
||||
}
|
||||
.ibo-popover-menu--item--no-message--image>svg{
|
||||
.ibo-popover-menu--item--no-message--image > svg {
|
||||
display: flex;
|
||||
width: $ibo-popover-menu--item--no-message--image--svg--width;
|
||||
height: $ibo-popover-menu--item--no-message--image--svg--height;
|
||||
|
||||
@@ -28,6 +28,8 @@ $(function()
|
||||
{
|
||||
menu_toggler: '[data-role="ibo-navigation-menu--notifications-toggler"]',
|
||||
menu_toggler_message: '[data-role="ibo-navigation-menu--user-notifications--toggler--message"]',
|
||||
notification_message: '[data-role="ibo-navigation-menu--notifications-item"]',
|
||||
notification_dismiss_all: '[data-role="ibo-navigation-menu--notifications-dismiss-all"]',
|
||||
},
|
||||
|
||||
// the constructor
|
||||
@@ -124,7 +126,23 @@ $(function()
|
||||
jsonp: "callback"
|
||||
})
|
||||
.done(function(oJSONData) {
|
||||
me._cacheData(idx, oJSONData);
|
||||
oJSONData = [{
|
||||
"id": 31,
|
||||
"image": "https:\/\/www.itophub.io\/bundles\/combodonotifications\/images\/messages-default-images.svg",
|
||||
"url": "https:\/\/www.itophub.io\/api\/messages\/messages\/redirect\/30?uuid%5Bbdd%5D=1C4F5832-F6F8-B5C1-8728-BF599B001826&uuid%5Bfile%5D=3AD70B4D-54F8-3556-EBA3-0DC66E53BD4D&uuid%5Buser%5D=1",
|
||||
"start_date": "2020-12-17T15:39:00+00:00",
|
||||
"priority": 1,
|
||||
"text": "Discover the \"Time Tracking\" extension for iTop.\r\n\r\nMake it [clear](https://www.google.com) and easy to track the time spent."
|
||||
}, {
|
||||
"id": 51,
|
||||
"image": "https:\/\/www.itophub.io\/bundles\/combodonotifications\/images\/messages-default-images.svg",
|
||||
"url": "https:\/\/www.itophub.io\/api\/messages\/messages\/redirect\/50?uuid%5Bbdd%5D=1C4F5832-F6F8-B5C1-8728-BF599B001826&uuid%5Bfile%5D=3AD70B4D-54F8-3556-EBA3-0DC66E53BD4D&uuid%5Buser%5D=1",
|
||||
"start_date": "2024-01-03T10:43:00+00:00",
|
||||
"priority": 3,
|
||||
"text": "Happy New Year to our community!\r\niTop 3.1.1-1 is now out!\r\n\r\nThis maintenance version includes bug and security fixes described in the changelog, as well as improvements to:\r\n* Bring new possibilities for controlling link edition in iTop console\r\n* Enable the creation of calculated fields and integrity checks that take into account the evolution of links between objects.\r\n* Improve search indexing on Enum, Date and Tagset values\r\n* Support localization in portal tooltips\r\n* Improve printing of portal object page and portal dashboard page\r\n\r\nEnjoy!"
|
||||
}];
|
||||
|
||||
me._cacheData(idx, oJSONData);
|
||||
me._onMessagesFetched(idx, oJSONData);
|
||||
}).error(function() {
|
||||
console.warn('Newsroom: failed to fetch data from the web for provider '+idx+' url: '+me.options.providers[idxProvider].fetch_url);
|
||||
@@ -213,8 +231,8 @@ $(function()
|
||||
|
||||
var sBottomText = '<span class="ibo-navigation-menu--notifications--item--bottom-text">' + sImage + '<span>' + this.options.providers[sProvider].label + '</span> <span> ' + moment(sStartDate).fromNow() + '</span></span>';
|
||||
|
||||
return '<a class="ibo-popover-menu--item ibo-navigation-menu--notifications-item" data-role="ibo-navigation-menu--notifications-item" data-msg-id="' + sId + '" data-provider-id="' + sProvider + '" href="' + sUrl + '" target="' + sTarget + '" id="newsroom_menu_item_' + sId + '">' +
|
||||
sNewMessageIndicator + sRichDescription + sBottomText + '</a>';
|
||||
return '<div class="ibo-popover-menu--item ibo-navigation-menu--notifications-item" data-role="ibo-navigation-menu--notifications-item" data-msg-id="' + sId + '" data-provider-id="' + sProvider + '" href="' + sUrl + '" target="' + sTarget + '" id="newsroom_menu_item_' + sId + '">' +
|
||||
sNewMessageIndicator + sRichDescription + sBottomText + '</div>';
|
||||
},
|
||||
_buildNoMessageItem: function()
|
||||
{
|
||||
@@ -242,7 +260,7 @@ $(function()
|
||||
},
|
||||
_buildMenu: function(aAllMessages)
|
||||
{
|
||||
var me = this;
|
||||
const me = this;
|
||||
var iTotalCount = aAllMessages.length;
|
||||
var iCount = 0;
|
||||
var sDismissAllSection = this._buildDismissAllSection();
|
||||
@@ -291,11 +309,15 @@ $(function()
|
||||
$('.ibo-navigation-menu--notifications--item--content img').each(function(){
|
||||
tippy(this, {'content': this.outerHTML, 'placement': 'left', 'trigger': 'mouseenter focus', 'animation':'shift-away-subtle', 'allowHTML': true });
|
||||
});
|
||||
var me = this;
|
||||
$('[data-role="ibo-navigation-menu--notifications-item"]').on('click', function(oEvent){
|
||||
me._handleClick(this);
|
||||
|
||||
// Add events listeners
|
||||
$(this.js_selectors.notification_message).on('click', function(oEvent){
|
||||
me._handleClick(this, oEvent);
|
||||
});
|
||||
$('[data-role="ibo-navigation-menu--notifications-dismiss-all"]').on('click', function(ev) { me._markAllAsRead(); });
|
||||
$(this.js_selectors.notification_dismiss_all).on('click', function(ev) {
|
||||
me._markAllAsRead();
|
||||
});
|
||||
|
||||
// Remove class to show there is new messages
|
||||
$(this.js_selectors.menu_toggler).removeClass(this.css_classes.empty);
|
||||
|
||||
@@ -303,7 +325,7 @@ $(function()
|
||||
else
|
||||
{
|
||||
$(this.element).html(sMessageSection + sShowAllMessagesSection);
|
||||
var me = this;
|
||||
|
||||
// Add class to show there is no messages
|
||||
$(this.js_selectors.menu_toggler).addClass(this.css_classes.empty);
|
||||
}
|
||||
@@ -320,14 +342,20 @@ $(function()
|
||||
}
|
||||
this._initializePopoverMenu();
|
||||
},
|
||||
_handleClick: function(elem)
|
||||
_handleClick: function(oElem, oEvent)
|
||||
{
|
||||
var me = this;
|
||||
var idxProvider = $(elem).attr('data-provider-id');
|
||||
var msgId = $(elem).attr('data-msg-id');
|
||||
// If click was made on an hyperlink in the message, just follow the hyperlink
|
||||
if (oEvent.target.nodeName.toLowerCase() === 'a') {
|
||||
oEvent.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise we open the message as intended
|
||||
var idxProvider = $(oElem).attr('data-provider-id');
|
||||
var msgId = $(oElem).attr('data-msg-id');
|
||||
|
||||
this._markOneMessageAsRead(idxProvider, msgId);
|
||||
$(me.element).popover_menu("togglePopup");
|
||||
$(this.element).popover_menu("togglePopup");
|
||||
this._getAllMessages();
|
||||
},
|
||||
clearCache: function(idx)
|
||||
|
||||
Reference in New Issue
Block a user