From 837a608dc8ba1811cb92597de6612d85f3afb30b Mon Sep 17 00:00:00 2001 From: Johannes Rauh Date: Mon, 8 Sep 2025 11:58:14 +0200 Subject: [PATCH 1/3] Add scroll to top button to history list --- application/controllers/HistoryController.php | 10 ++++++++ public/css/common.less | 23 +++++++++++++++++++ public/js/action-list.js | 1 + 3 files changed, 34 insertions(+) diff --git a/application/controllers/HistoryController.php b/application/controllers/HistoryController.php index 08a96889..1b34b227 100644 --- a/application/controllers/HistoryController.php +++ b/application/controllers/HistoryController.php @@ -10,10 +10,13 @@ use Icinga\Module\Icingadb\Web\Control\SearchBar\ObjectSuggestions; use Icinga\Module\Icingadb\Web\Controller; use Icinga\Module\Icingadb\Web\Control\ViewModeSwitcher; use Icinga\Module\Icingadb\Widget\ItemList\LoadMoreObjectList; +use ipl\Html\Attributes; +use ipl\Html\HtmlElement; use ipl\Stdlib\Filter; use ipl\Web\Control\LimitControl; use ipl\Web\Control\SortControl; use ipl\Web\Url; +use ipl\Web\Widget\ButtonLink; class HistoryController extends Controller { @@ -109,7 +112,14 @@ class HistoryController extends Controller if ($compact && $page > 1) { $this->document->addFrom($historyList); } else { + $this->addContent(new HtmlElement('span', new Attributes(['id' => 'page-1']))); $this->addContent($historyList); + $this->addContent(new ButtonLink( + '', + $this->getRequest()->getUrl() . '#page-1', + 'angles-up', + new Attributes(['class' => 'scroll-to-top', 'title' => $this->translate('Scroll to top')]) + )); } if (! $searchBar->hasBeenSubmitted() && $searchBar->hasBeenSent()) { diff --git a/public/css/common.less b/public/css/common.less index 2b21b271..9f4864be 100644 --- a/public/css/common.less +++ b/public/css/common.less @@ -309,3 +309,26 @@ form[name="form_confirm_removal"] { opacity: .9; } } + +.scroll-to-top { + .rounded-corners(50%); + + position: absolute; + right: 1em; + bottom: 1em; + font-size: 2em; + line-height: .75em; + padding: .5em; + + -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); + -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3); + box-shadow: 0 0 1/3em rgba(0,0,0,.3); + + &:hover { + background: @gray-light; + } + + i.icon::before { + margin-right: 0; + } +} diff --git a/public/js/action-list.js b/public/js/action-list.js index d4873904..24aa9704 100644 --- a/public/js/action-list.js +++ b/public/js/action-list.js @@ -643,6 +643,7 @@ // Set data-icinga-url to make it available for Icinga.History.getCurrentState() req.$target.closest('.container').data('icingaUrl', url); + req.$target.next('.scroll-to-top').attr('href', url.split('#')[0] + '#page-1'); this.icinga.history.replaceCurrentState(); }); From 385be4906ea755a3380b438585d60cfbb61e9e3f Mon Sep 17 00:00:00 2001 From: Johannes Rauh Date: Mon, 15 Sep 2025 13:25:23 +0200 Subject: [PATCH 2/3] Add button to controls section --- application/controllers/HistoryController.php | 15 ++++++---- public/css/common.less | 29 ++++++------------- public/js/action-list.js | 2 +- 3 files changed, 19 insertions(+), 27 deletions(-) diff --git a/application/controllers/HistoryController.php b/application/controllers/HistoryController.php index 1b34b227..cfca1026 100644 --- a/application/controllers/HistoryController.php +++ b/application/controllers/HistoryController.php @@ -16,6 +16,7 @@ use ipl\Stdlib\Filter; use ipl\Web\Control\LimitControl; use ipl\Web\Control\SortControl; use ipl\Web\Url; +use ipl\Web\Widget\ActionLink; use ipl\Web\Widget\ButtonLink; class HistoryController extends Controller @@ -92,6 +93,14 @@ class HistoryController extends Controller yield $this->export($history); + $this->addControl( + new ActionLink( + 'Scroll to top', + $this->getRequest()->getUrl() . '#page-1', + 'angles-up', + new Attributes(['class' => 'scroll-to-top']) + ) + ); $this->addControl($sortControl); $this->addControl($limitControl); $this->addControl($viewModeSwitcher); @@ -114,12 +123,6 @@ class HistoryController extends Controller } else { $this->addContent(new HtmlElement('span', new Attributes(['id' => 'page-1']))); $this->addContent($historyList); - $this->addContent(new ButtonLink( - '', - $this->getRequest()->getUrl() . '#page-1', - 'angles-up', - new Attributes(['class' => 'scroll-to-top', 'title' => $this->translate('Scroll to top')]) - )); } if (! $searchBar->hasBeenSubmitted() && $searchBar->hasBeenSent()) { diff --git a/public/css/common.less b/public/css/common.less index 9f4864be..913452cb 100644 --- a/public/css/common.less +++ b/public/css/common.less @@ -311,24 +311,13 @@ form[name="form_confirm_removal"] { } .scroll-to-top { - .rounded-corners(50%); - - position: absolute; - right: 1em; - bottom: 1em; - font-size: 2em; - line-height: .75em; - padding: .5em; - - -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); - -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3); - box-shadow: 0 0 1/3em rgba(0,0,0,.3); - - &:hover { - background: @gray-light; - } - - i.icon::before { - margin-right: 0; - } + border-radius: .4em; + padding: .25em; + display: inline-flex; + align-items: baseline; +} + +.scroll-to-top:hover { + background: @control-hover-bg; + text-decoration: none; } diff --git a/public/js/action-list.js b/public/js/action-list.js index 24aa9704..91ff7fbb 100644 --- a/public/js/action-list.js +++ b/public/js/action-list.js @@ -643,7 +643,7 @@ // Set data-icinga-url to make it available for Icinga.History.getCurrentState() req.$target.closest('.container').data('icingaUrl', url); - req.$target.next('.scroll-to-top').attr('href', url.split('#')[0] + '#page-1'); + req.$target.closest('.container').find('.controls .scroll-to-top').attr('href', url.split('#')[0] + '#page-1'); this.icinga.history.replaceCurrentState(); }); From ceb6c3109f8164c928ccec67db5d4e635a147935 Mon Sep 17 00:00:00 2001 From: Johannes Rauh Date: Tue, 16 Sep 2025 09:54:11 +0200 Subject: [PATCH 3/3] Avoid flickering at top of list MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adjust `#page-1` positioning so it sits in the parent’s top padding, preventing jump flicker when scrolling to it from the top of the list. --- public/css/common.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/css/common.less b/public/css/common.less index 913452cb..e378787b 100644 --- a/public/css/common.less +++ b/public/css/common.less @@ -321,3 +321,9 @@ form[name="form_confirm_removal"] { background: @control-hover-bg; text-decoration: none; } + +#page-1 { + display: block; + width: 1px; + margin: -1em 0 1em -1em; +}