wip

Author: jrauh01

application/controllers/HistoryController.php

@@ -10,10 +10,13 @@
 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 @@ public function indexAction()
         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()) {

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;
+  }
+}

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();
             });