diff --git a/css/backoffice/components/_newsroom-menu.scss b/css/backoffice/components/_newsroom-menu.scss index 9dad290c5..ed10f039a 100644 --- a/css/backoffice/components/_newsroom-menu.scss +++ b/css/backoffice/components/_newsroom-menu.scss @@ -17,20 +17,54 @@ */ /* SCSS variables */ -// Todo :( +$ibo-navigation-menu--notifications-menu--min-width: 250px; + +$ibo-navigation-menu--notifications--item--image--margin-x: 6px !default; +$ibo-navigation-menu--notifications--item--image--margin-y: 0 !default; +$ibo-navigation-menu--notifications--item--image--max-width: 20px !default; +$ibo-navigation-menu--notifications--item--image--max-height: 20px !default; +$ibo-navigation-menu--notifications--item--image--border-radius: $ibo-border-radius-full !default; + +$ibo-navigation-menu--notifications--item--bottom-text--margin-left: auto !default; + +$ibo-navigation-menu--notifications--item--content--padding-y: 0 !default; +$ibo-navigation-menu--notifications--item--content--padding-x: 14px !default; +$ibo-navigation-menu--notifications--item--content--img--max-height: 100px !default; +$ibo-navigation-menu--notifications--item--content--img--padding: 5px !default; + +$ibo-navigation-menu--notifications--item--new-message-indicator--width: 10px !default; +$ibo-navigation-menu--notifications--item--new-message-indicator--height: 10px !default; +$ibo-navigation-menu--notifications--item--new-message-indicator--background-color: $ibo-color-blue-500 !default; +$ibo-navigation-menu--notifications--item--new-message-indicator--border-radius: $ibo-border-radius-full !default; +$ibo-navigation-menu--notifications--item--new-message-indicator--margin-top: 4px !default; + +$ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right: 15px !default; + +$ibo-navigation-menu--notifications-dismiss-all--icon--margin: 0 10px 0 0 !default; + +$ibo-popover-menu--item--no-message--image--svg--width : 100% !default; +$ibo-popover-menu--item--no-message--image--svg--height : inherit !default; +$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{ overflow-x: auto; } } -.ibo-navigation-menu--notifications--item--image{ - width: 20px; - max-height: 20px; - margin: 0 6px; - border-radius: 100%; +.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; } + +.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=""]{ display: none; } @@ -39,20 +73,20 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga display: none; } .ibo-navigation-menu--notifications--item--bottom-text{ - float: right; - font-size: 12px; - align-self: center; - margin-left: auto; display: flex; flex-direction: column; align-items: center; + float: right; + align-self: center; + @extend %ibo-font-ral-nor-100; + margin-left: $ibo-navigation-menu--notifications--item--bottom-text--margin-left; } .ibo-navigation-menu--notifications--item--content{ - font-size: 14px; - padding: 0 14px; + @extend %ibo-font-ral-nor-150; + padding: $ibo-navigation-menu--notifications--item--content--padding-y $ibo-navigation-menu--notifications--item--content--padding-x; img{ - max-height: 100px; - padding: 5px; + 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{ @@ -60,31 +94,32 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga flex-direction: row; } .ibo-navigation-menu--notifications--item--new-message-indicator{ - width: 10px; - height: 10px; - background-color: $ibo-color-blue-500; - border-radius: 100%; - margin-top: 4px; + 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; + border-radius: $ibo-navigation-menu--notifications--item--new-message-indicator--border-radius; + margin-top: $ibo-navigation-menu--notifications--item--new-message-indicator--margin-top; } + .ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu{ bottom: 0; .ibo-navigation-menu--notifications--item--new-message-indicator{ display: inline-block; - margin-right: 15px; + margin-right: $ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right; } .ibo-navigation-menu--notifications-show-all-multiple--counter{ @extend %ibo-font-ral-bol-200; } } .ibo-navigation-menu--notifications-dismiss-all--icon{ - margin: 0 10px 0 0; + margin: $ibo-navigation-menu--notifications-dismiss-all--icon--margin; } .ibo-popover-menu--item--no-message{ text-align: center; } .ibo-popover-menu--item--no-message--image>svg{ display: flex; - width: 100%; - height: inherit; - margin: 10px 0px; + width: $ibo-popover-menu--item--no-message--image--svg--width; + height: $ibo-popover-menu--item--no-message--image--svg--height; + padding: $ibo-popover-menu--item--no-message--image--svg--padding; } diff --git a/js/newsroom_menu.js b/js/newsroom_menu.js index 9fead1d80..860a135ae 100644 --- a/js/newsroom_menu.js +++ b/js/newsroom_menu.js @@ -18,6 +18,15 @@ $(function() 'view_all': 'View all messages' } }, + css_classes: + { + newsroom_menu: 'ibo-newsroom-menu', + empty : 'ibo-is-empty' + }, + js_selectors: + { + menu_toggler: '[data-role="ibo-navigation-menu--notifications-toggler"]', + }, // the constructor _create: function() @@ -29,8 +38,8 @@ $(function() _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) { + $(me.element).popover_menu({'toggler': this.js_selectors.menu_toggler}); + $(this.js_selectors.menu_toggler).on('click', function(oEvent) { var oEventTarget = $(oEvent.target); var aEventTargetPos = oEventTarget.position(); @@ -41,8 +50,8 @@ $(function() }); $(me.element).popover_menu("togglePopup"); }); - this.element.addClass('itop-newsroom_menu'); - $('[data-role="ibo-navigation-menu--notifications-toggler"]').addClass('ibo-is-loaded'); + this.element.addClass(this.css_classes.newsroom_menu); + $(this.js_selectors.menu_toggler).addClass('ibo-is-loaded'); }, // called when created, and later when changing options _refresh: function() @@ -52,8 +61,7 @@ $(function() // revert other modifications here _destroy: function() { - this.element - .removeClass('itop-newsroom_menu'); + this.element.removeClass(this.css_classes.newsroom_menu); }, // _setOptions is called with a hash of all options that are changing _setOptions: function() @@ -167,17 +175,17 @@ $(function() }, _buildDismissAllSection: function() { - return '
'+this.options.labels.mark_all_as_read+'
'; + return '
'+this.options.labels.mark_all_as_read+'
'; }, _buildMessageSection: function() { - return '
'; + return '
'; }, _buildShowAllMessagesSection: function() { - return '
'; + return '
'; }, - _buildMessageItems: function(sId, sText, sImage, sStartDate, sProvider, sUrl) + _buildMessageItems: function(sId, sText, sImage, sStartDate, sProvider, sUrl, oConverter) { var sNewMessageIndicator = '
'; sImage = ''; @@ -185,10 +193,8 @@ $(function() var div = document.createElement("div"); div.textContent = sText; var sDescription = div.innerHTML; // Escape HTML entities for XSS prevention - //Todo: make only one converter per loop - var converter = new showdown.Converter({noHeaderId: true}); - var sRichDescription = '
' + converter.makeHtml(sDescription) +'
'; + var sRichDescription = '
' + oConverter.makeHtml(sDescription) +'
'; var sBottomText = ''+ sImage + '' + this.options.providers[sProvider].label+' ' + moment(sStartDate).fromNow()+''; @@ -236,14 +242,14 @@ $(function() { aUnreadMessagesByProvider[k] = 0; } + var oConverter = new showdown.Converter({noHeaderId: true}); for(var k in aAllMessages) { var oMessage = aAllMessages[k]; aUnreadMessagesByProvider[oMessage.provider]++; if (iCount < this.options.display_limit + 4) { - var sMessageItem = this._buildMessageItems(oMessage.id, oMessage.text, oMessage.image, oMessage.start_date, oMessage.provider, oMessage.url) - //$(sMessageSection).append(sMessageItem); + var sMessageItem = this._buildMessageItems(oMessage.id, oMessage.text, oMessage.image, oMessage.start_date, oMessage.provider, oMessage.url, oConverter) sMessageSection += sMessageItem; } iCount++; @@ -254,12 +260,11 @@ $(function() var sNoMessageItem = this._buildNoMessageItem(); sMessageSection += sNoMessageItem; } - sMessageSection += '
'; + sMessageSection += '
'; if (this.options.providers.length == 1) { var SingleShowAllMessagesItem = this._buildSingleShowAllMessagesItem(); - //$(sShowAllMessagesSection).append(SingleShowAllMessagesItem); sShowAllMessagesSection += SingleShowAllMessagesItem; sShowAllMessagesSection += '
' } @@ -275,14 +280,12 @@ $(function() tippy(this, {'content': this.outerHTML, 'placement': 'left', 'trigger': 'mouseenter focus', 'animation':'shift-away-subtle', 'allowHTML': true }); }); var me = this; - //$('#newsroom_menu_counter').on('click', function() {setTimeout(function(){ $('#newsroom_menu_icon').trigger('click') }, 10);}); - //$('.newsroom_menu_item[data-msg-id]').on('click', function(ev) { me._handleClick(this); }); $('[data-role="ibo-navigation-menu--notifications-item"]').on('click', function(oEvent){ 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'); + $(this.js_selectors.menu_toggler).removeClass(this.css_classes.empty); } else @@ -290,7 +293,7 @@ $(function() $(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'); + $(this.js_selectors.menu_toggler).addClass(this.css_classes.empty); } if (this.options.providers.length != 1) @@ -317,20 +320,9 @@ $(function() var msgId = $(elem).attr('data-msg-id'); this._markOneMessageAsRead(idxProvider, msgId); - // window.open(sUrl, '_blank'); - // $('#newsroom_menu').remove(); - // $('#newsroom_menu_counter_container').remove(); $(me.element).popover_menu("togglePopup"); this._getAllMessages(); }, - _resetUnseenCount: function() - { - var display = $('#newsroom_menu_counter').css('display'); - $('#newsroom_menu_counter').fadeOut(500, function() { - $(this).css('visibility', 'hidden'); - $(this).css('display', display); - }); - }, clearCache: function(idx) { if (idx == undefined) @@ -365,7 +357,7 @@ $(function() } catch(e) { - console.warn('Newsroom: Failed to store newsroom messages into local storage !! reason: '+e); + console.warn('Newsroom: Failed to store newsroom messages into local storage !! reason: ' + e); bSuccess = false; } return bSuccess; @@ -433,8 +425,6 @@ $(function() { this._markAllMessagesAsRead(k); } - $('#newsroom_menu').html(''); - $('#newsroom_menu_counter_container').remove(); this._getAllMessages(); } });