Skip to content

Commit d5f2303

Browse files
jf-cbdjf-cbd
authored
N°8673 - Avoid server overload when user access news page with a lot of unread news (#816)
1 parent 48e5845 commit d5f2303

File tree

5 files changed

+60
-31
lines changed

5 files changed

+60
-31
lines changed

‎css/backoffice/components/_panel.scss‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,12 @@ $ibo-panel--icon--spacing--as-medallion--is-sticking: $ibo-panel--icon--spacing-
7272
$ibo-panel--icon--bottom--as-medallion--is-sticking: -12px !default;
7373
$ibo-panel--icon--border--as-medallion--is-sticking: 1px $ibo-panel--base-border-style $ibo-panel--base-border-color !default;
7474

75-
$ibo-panel--icon-background--size--must-contain: contain !default;
76-
$ibo-panel--icon-background--size--must-cover: cover !default;
77-
$ibo-panel--icon-background--size--must-zoomout: 66.67% !default;
75+
$ibo-panel--icon-background--size--must-contain: contain !default; // deprecated, to be removed in favor of $ibo-panel--icon-img--size--must-contain
76+
$ibo-panel--icon-background--size--must-cover: cover !default; // deprecated, to be removed in favor of $ibo-panel--icon-img--size--must-cover
77+
$ibo-panel--icon-background--size--must-zoomout: 66.67% !default; // deprecated, to be removed in favor of $ibo-panel--icon-img--size--must-zoomout
78+
$ibo-panel--icon-img--size--must-contain: $ibo-panel--icon-background--size--must-contain !default; // TODO remove when dealing with N°9317
79+
$ibo-panel--icon-img--size--must-cover: $ibo-panel--icon-background--size--must-cover !default; // TODO remove when dealing with N°9317
80+
$ibo-panel--icon-img--size--must-zoomout: $ibo-panel--icon-background--size--must-zoomout !default; // TODO remove when dealing with N°9317
7881

7982
$ibo-panel--title--font-size--is-sticking: $ibo-font-size-150 !default;
8083
$ibo-panel--title--color: $ibo-color-grey-900 !default;
@@ -179,24 +182,25 @@ $ibo-panel--is-selectable--body--after--font-size: $ibo-font-size-700 !default;
179182
min-height: $ibo-panel--icon--size;
180183
}
181184

182-
.ibo-panel--icon-background {
185+
.ibo-panel--icon-img, .ibo-panel--icon-background { // second class is deprecated, remove it when dealing with N°9317
183186
width: 100%;
184187
height: 100%;
185188
background-position: center;
186189
background-repeat: no-repeat;
187-
background-size: $ibo-panel--icon-background--size--must-contain;
190+
background-size: $ibo-panel--icon-img--size--must-contain;
188191
}
189192

190-
.ibo-panel--icon-background--must-contain {
191-
background-size: $ibo-panel--icon-background--size--must-contain;
193+
.ibo-panel--icon-img--must-contain, .ibo-panel--icon-background--must-contain { // second class is deprecated, remove it when dealing with N°9317
194+
background-size: $ibo-panel--icon-img--size--must-contain;
192195
}
193196

194-
.ibo-panel--icon-background--must-cover {
195-
background-size: $ibo-panel--icon-background--size--must-cover;
197+
.ibo-panel--icon-img--must-cover, .ibo-panel--icon-background--must-cover { // second class is deprecated, remove it when dealing with N°9317
198+
background-size: $ibo-panel--icon-img--size--must-cover;
196199
}
197200

198-
.ibo-panel--icon-background--must-zoomout {
199-
background-size: $ibo-panel--icon-background--size--must-zoomout;
201+
.ibo-panel--icon-img--must-zoomout, .ibo-panel--icon-background--must-zoomout { // second class is deprecated, remove it when dealing with N°9317
202+
width: $ibo-panel--icon-img--size--must-zoomout;
203+
height: $ibo-panel--icon-img--size--must-zoomout;
200204
}
201205

202206
.ibo-panel--title {

‎css/backoffice/components/_title.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@ $ibo-title--icon--size: 90px !default;
1111
$ibo-title--icon--size-2: 80px !default;
1212
$ibo-title--icon--size-3: 70px !default;
1313

14-
$ibo-title--icon-background--size--must-contain: contain !default;
15-
$ibo-title--icon-background--size--must-cover: cover !default;
16-
$ibo-title--icon-background--size--must-zoomout: 66.67% !default;
14+
$ibo-title--icon-background--size--must-contain: contain !default; // deprecated, to be removed in favor of $ibo-title--icon-img--size--must-contain
15+
$ibo-title--icon-background--size--must-cover: cover !default; // deprecated, to be removed in favor of $ibo-title--icon-img--size--must-cover
16+
$ibo-title--icon-background--size--must-zoomout: 66.67% !default; // deprecated, to be removed in favor of $ibo-title--icon-img--size--must-zoomout
17+
$ibo-title--icon-img--size--must-contain: $ibo-title--icon-background--size--must-contain !default; // TODO remove when dealing with N°9317
18+
$ibo-title--icon-img--size--must-cover: $ibo-title--icon-background--size--must-cover !default; // TODO remove when dealing with N°9317
19+
$ibo-title--icon-img--size--must-zoomout: $ibo-title--icon-background--size--must-zoomout !default; // TODO remove when dealing with N°9317
1720

1821

1922
.ibo-title {
@@ -44,24 +47,23 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
4447
min-height: $ibo-title--icon--size-3;
4548
}
4649

47-
.ibo-title--icon-background {
50+
.ibo-title--icon-img, .ibo-title--icon-background { // second class is deprecated, remove it when dealing with N°9317
4851
width: 100%;
4952
height: 100%;
50-
background-position: center;
51-
background-repeat: no-repeat;
52-
background-size: $ibo-title--icon-background--size--must-contain;
53+
object-position: center;
54+
background-size: $ibo-title--icon-img--size--must-contain;
5355
}
5456

55-
.ibo-title--icon-background--must-contain {
56-
background-size: $ibo-title--icon-background--size--must-contain;
57+
.ibo-title--icon-img--must-contain, .ibo-title--icon-background--must-contain { // second class is deprecated, remove it when dealing with N°9317
58+
background-size: $ibo-title--icon-img--size--must-contain;
5759
}
5860

59-
.ibo-title--icon-background--must-cover {
60-
background-size: $ibo-title--icon-background--size--must-cover;
61+
.ibo-title--icon-img--must-cover, .ibo-title--icon-background--must-cover { // second class is deprecated, remove it when dealing with N°9317
62+
background-size: $ibo-title--icon-img--size--must-cover;
6163
}
6264

63-
.ibo-title--icon-background--must-zoomout {
64-
background-size: $ibo-title--icon-background--size--must-zoomout;
65+
.ibo-title--icon-img--must-zoomout, .ibo-title--icon-background--must-zoomout { // second class is deprecated, remove it when dealing with N°9317
66+
background-size: $ibo-title--icon-img--size--must-zoomout;
6567
}
6668

6769
.ibo-title--for-object-details {

‎sources/Application/UI/Base/Layout/UIContentBlock.php‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ class UIContentBlock extends UIBlock implements iUIContentBlock
3333
protected $aDeferredBlocks;
3434
/** @var bool If set to true, the content block will have a surrounding <div> no matter its options / CSS classes / ... */
3535
protected $bHasForcedDiv;
36+
/** @var bool if set to true, the icon will be lazy loaded
37+
* @since 3.2.3
38+
*/
39+
protected bool $bHasLazyLoadIcon;
3640

3741
/**
3842
* UIContentBlock constructor.
@@ -48,6 +52,7 @@ public function __construct(?string $sId = null, array $aContainerClasses = [])
4852
$this->aSubBlocks = [];
4953
$this->aDeferredBlocks = [];
5054
$this->bHasForcedDiv = false;
55+
$this->bHasLazyLoadIcon = false;
5156
$this->SetCSSClasses($aContainerClasses);
5257
}
5358

@@ -220,4 +225,24 @@ public function SetHasForcedDiv(bool $bHasForcedDiv)
220225
$this->bHasForcedDiv = $bHasForcedDiv;
221226
return $this;
222227
}
228+
229+
/**
230+
* @see static::$bHasLazyLoadIcon
231+
* @return bool
232+
*/
233+
public function HasLazyLoadIcon(): bool
234+
{
235+
return $this->bHasLazyLoadIcon;
236+
}
237+
238+
/**
239+
* @see static::$bHasLazyLoadIcon
240+
* @param bool $bLazyLoadIcon
241+
* @return $this
242+
*/
243+
public function SetHasLazyLoadIcon(bool $bLazyLoadIcon)
244+
{
245+
$this->bHasLazyLoadIcon = $bLazyLoadIcon;
246+
return $this;
247+
}
223248
}

‎sources/Controller/Newsroom/iTopNewsroomController.php‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,11 @@
77
use Combodo\iTop\Application\TwigBase\Controller\Controller;
88
use Combodo\iTop\Application\UI\Base\Component\Button\Button;
99
use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
10-
use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroupUIBlockFactory;
1110
use Combodo\iTop\Application\UI\Base\Component\Html\Html;
1211
use Combodo\iTop\Application\UI\Base\Component\Input\InputUIBlockFactory;
1312
use Combodo\iTop\Application\UI\Base\Component\Input\Toggler;
1413
use Combodo\iTop\Application\UI\Base\Component\Panel\Panel;
1514
use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
16-
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
17-
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
1815
use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
1916
use Combodo\iTop\Application\UI\Base\Component\Toolbar\ToolbarUIBlockFactory;
2017
use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectSummary;
@@ -29,13 +26,10 @@
2926
use DBObjectSearch;
3027
use DBObjectSet;
3128
use Dict;
32-
use JSPopupMenuItem;
3329
use MetaModel;
3430
use SecurityException;
35-
use URLPopupMenuItem;
3631
use UserRights;
3732
use utils;
38-
use appUserPreferences;
3933

4034
/**
4135
* Class iTopNewsroomController
@@ -376,6 +370,7 @@ classes: ['ibo-is-danger']
376370
$sReadColor = $oEvent->Get('read') === 'no' ? 'ibo-notifications--view-all--item--unread' : 'ibo-notifications--view-all--item--read';
377371
$sReadLabel = $oEvent->Get('read') === 'no' ? Dict::S('UI:Newsroom:iTopNotification:ViewAllPage:Unread:Label') : Dict::S('UI:Newsroom:iTopNotification:ViewAllPage:Read:Label');
378372
$oEventBlock = new ObjectSummary($oEvent);
373+
$oEventBlock->SetHasLazyLoadIcon(true);
379374
$oEventBlock->SetCSSColorClass($sReadColor);
380375
$oEventBlock->SetSubTitle($sReadLabel);
381376
$oEventBlock->SetClassLabel('');

‎templates/base/components/panel/layout.html.twig‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@
1818
{% if oUIBlock.HasIcon() %}
1919
<div class="ibo-panel--icon" data-role="ibo-panel--icon">
2020
{% block iboPanelIcon %}
21-
<div class="ibo-panel--icon-background ibo-panel--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}" data-role="ibo-panel--icon-background" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
21+
<img class="ibo-panel--icon-background ibo-panel--icon-img--must-{{ oUIBlock.GetIconCoverMethod() }}
22+
ibo-panel--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}"
23+
{% if oUIBlock.HasLazyLoadIcon %} loading="lazy" {% endif %}
24+
data-role="ibo-panel--icon-img" src="{{ oUIBlock.GetIconUrl()|raw }}" alt="" aria-hidden="true">
2225
{% endblock %}
2326
</div>
2427
{% endif %}

0 commit comments

Comments
 (0)