composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°7565 - Make visual adjustments on the newsroom

Browse Source 
- New messages indicator next to the news providers removed as it was confusing and not bringing relevant information
- Add hand cursor on hover of the news
- News content now restricted to a certain height / width to avoid content overflowing everywhere
- Limit message height in the "view all" page
This commit is contained in:
Molkobain
2024-07-18 15:52:28 +02:00
parent 22e599598a
commit 06c26c99bb
4 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/backoffice/components/_newsroom-menu.scss
View File

@@ -4,7 +4,8 @@
*/
/* SCSS variables */
$ibo-navigation-menu--notifications-menu--min-width: 250px;
$ibo-navigation-menu--notifications-menu--min-width: 550px;
$ibo-navigation-menu--notifications-menu--max-width: 90vw;
$ibo-navigation-menu--notifications--item--image--margin-x: 6px !default;
$ibo-navigation-menu--notifications--item--image--margin-y: $ibo-spacing-0 !default;
@@ -17,6 +18,7 @@ $ibo-navigation-menu--notifications--item--bottom-text--margin-right: auto !defa
$ibo-navigation-menu--notifications--item--content--padding-y: $ibo-spacing-0 !default;
$ibo-navigation-menu--notifications--item--content--padding-x: 14px !default;
$ibo-navigation-menu--notifications--item--content--max-height: 128px !default;
$ibo-navigation-menu--notifications--item--content--img--max-height: 100px !default;
$ibo-navigation-menu--notifications--item--content--img--padding: 5px !default;
@@ -46,7 +48,9 @@ $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;
min-width: min(#{$ibo-navigation-menu--notifications-menu--min-width}, 90vw);
max-width: $ibo-navigation-menu--notifications-menu--max-width;
.ibo-navigation-menu--notifications--messages-section {
overflow: auto;
}
@@ -82,6 +86,9 @@ $ibo-popover-menu--item--no-message--image--svg--padding : 15px !default;
.ibo-navigation-menu--notifications--item--content {
flex-grow: 1;
padding: $ibo-navigation-menu--notifications--item--content--padding-y $ibo-navigation-menu--notifications--item--content--padding-x;
max-height: $ibo-navigation-menu--notifications--item--content--max-height;
overflow-y: auto;
white-space: normal; /* Overload rule from popupover menu item so that content wraps instead of being on a gigantic line */
img {
max-height: $ibo-navigation-menu--notifications--item--content--img--max-height;
@@ -91,6 +98,7 @@ $ibo-popover-menu--item--no-message--image--svg--padding : 15px !default;
.ibo-navigation-menu--notifications-item {
display: flex;
flex-direction: row;
cursor: pointer;
.ibo-navigation-menu--notifications--item--content a {
@extend %ibo-hyperlink-forced-colors;
@@ -103,6 +111,8 @@ $ibo-popover-menu--item--no-message--image--svg--padding : 15px !default;
border: $ibo-navigation-menu--notifications--item--new-message-indicator--border;
border-radius: $ibo-navigation-menu--notifications--item--new-message-indicator--border-radius;
margin-top: $ibo-navigation-menu--notifications--item--new-message-indicator--margin-top;
flex-shrink: 0; /* Avoid indicator to be shrinked into a non round shape */
&.ibo-is-priority-1{
background-color: $ibo-navigation-menu--notifications--item--new-message-indicator--is-priority-1--background-color;
border: $ibo-navigation-menu--notifications--item--new-message-indicator--is-priority-1--border;

2
css/backoffice/pages/_notifications.scss
View File

@@ -4,7 +4,7 @@
*/
$ibo-notifications--view-all--container--grid-gap: $ibo-spacing-600 !default;
$ibo-notifications--view-all--container--object-summary--panel--body--max-height: unset !default;
$ibo-notifications--view-all--container--object-summary--panel--body--max-height: 400px !default;
$ibo-notifications--view-all--item--unread--highlight--background-color: $ibo-color-red-600 !default;
$ibo-notifications--view-all--item--read--highlight--background-color: $ibo-color-grey-200 !default;

4
css/setup.css
View File

File diff suppressed because one or more lines are too long

4
js/components/newsroom-menu.js
View File

@@ -239,15 +239,13 @@ $(function()
},
_buildMultipleShowAllMessagesItem: function(aUnreadMessagesByProvider)
{
var sNewMessageIndicator = '<div class="ibo-navigation-menu--notifications--item--new-message-indicator"></div>';
var sUnreadMessages = ''
for(k in this.options.providers) {
var sExtraMessages = '';
if (aUnreadMessagesByProvider[k] > 0) {
sExtraMessages = ' <span class="ibo-navigation-menu--notifications-show-all-multiple--counter">(' + aUnreadMessagesByProvider[k] + ')</span>'
}
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>';
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 + '">' + 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="#">'+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>';