Redesign non-empty schedule view

- Add button to the .overlay element
- Overlap sidebar entry (.placeholder) with the button row

Author: sukhwinder33445

library/Notifications/Widget/TimeGrid/BaseGrid.php

@@ -7,11 +7,15 @@
 use DateInterval;
 use DateTime;
 use Generator;
+use Icinga\Module\Notifications\Common\Links;
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\HtmlElement;
+use ipl\Html\Text;
 use ipl\I18n\Translation;
 use ipl\Web\Style;
+use ipl\Web\Url;
+use ipl\Web\Widget\ButtonLink;
 use ipl\Web\Widget\Link;
 use LogicException;
 use SplObjectStorage;
@@ -471,7 +475,7 @@ final protected function yieldFixedEntries(Traversable $entries): Generator
         }
 
         $this->style->addFor($this, [
-            '--primaryRows' => $lastRow === 1 ? 1 : $lastRow - $rowStartModifier + 1,
+            '--primaryRows' => $lastRow === 1 ? 1 : $lastRow - $rowStartModifier + 1 + 1, // +1 to create extra row for add rotation button
             '--rowsPerStep' => 1
         ]);
     }
@@ -490,11 +494,44 @@ protected function assembleGridOverlay(BaseHtmlElement $overlay): void
             $generator = $this->yieldFixedEntries($entries);
         }
 
+        $addButtonCreated = false;
         foreach ($generator as $gridArea => $entry) {
+            [$rowStart, $colStart, $rowEnd, $colEnd] = $gridArea;
+
+            if (! $addButtonCreated && $entry->getAttributes()->has('data-rotation-position')) {
+                $btn = new HtmlElement('div', new Attributes(['class' => 'btn-container']));
+
+                $btn->addHtml(
+                    (new ButtonLink(
+                        $this->translate('Add another Rotation'),
+                        Links::rotationAdd(Url::fromRequest()->getParam('id')),
+                        'plus'
+                    ))->openInModal(),
+                    new HtmlElement(
+                        'span',
+                        new Attributes(['class' => 'hint']),
+                        new Text($this->translate('to override rotations above'))
+                    )
+                );
+
+                // take up the entire row
+                $this->style->addFor($btn, [
+                    'grid-area' => sprintf('~"%d / %d / %d / %d"', $rowStart, 1, $rowEnd, -1)
+                ]);
+
+                $overlay->addHtml($btn);
+                $addButtonCreated = true;
+            }
+
+            if ($addButtonCreated) { // result row must be below
+                $rowStart++;
+                $rowEnd++;
+            }
+
             $this->style->addFor($entry, [
                 '--entry-bg' => $entry->getColor(10),
                 '--entry-border-color' => $entry->getColor(50),
-                'grid-area' => sprintf('~"%d / %d / %d / %d"', ...$gridArea)
+                'grid-area' => sprintf('~"%d / %d / %d / %d"', $rowStart, $colStart, $rowEnd, $colEnd)
             ]);
 
             $overlay->addHtml($entry);

library/Notifications/Widget/Timeline.php

@@ -255,7 +255,7 @@ protected function getGrid()
                 $this->grid = (new DynamicGrid($this, $this->getStyle(), $this->start))->setDays($this->days);
             }
 
-            if (! $this->minimalLayout) {
+            if (! $this->minimalLayout && $this->rotations) {
                 $rotations = $this->rotations;
                 usort($rotations, function (Rotation $a, Rotation $b) {
                     return $b->getPriority() <=> $a->getPriority();
@@ -267,6 +267,9 @@ protected function getGrid()
                         $this->grid->addToSideBar($this->assembleSidebarEntry($rotation));
                     }
                 }
+
+                // placeholder for new add button row
+                $this->grid->addToSideBar(new HtmlElement('div', new Attributes(['class' => 'placeholder'])));
             }
         }
 

public/css/calendar.less

@@ -83,7 +83,7 @@
   .grid,
   .overlay {
     display: grid;
-    overflow: hidden;
+   // overflow: hidden; //TODO(sd): is this required?
     grid-template-rows: repeat(~"calc(var(--primaryRows) * var(--rowsPerStep))", var(--stepRowHeight));
     grid-template-columns: repeat(~"calc(var(--primaryColumns) * var(--columnsPerStep))", minmax(var(--minimumStepColumnWidth), 1fr));
     border-width: 1px 0 0 1px;

public/css/timeline.less

@@ -69,6 +69,12 @@
       }
     }
 
+    .sidebar .placeholderXXX {
+      background-color: fade(@gray-light, 25%);
+      border-top: 1px solid @gray-lighter;
+      margin-top: -1px; // to cover the border-bottom area of the previous sibling
+    }
+
     .btn-container {
       display: flex;
       justify-content: center;
@@ -77,6 +83,24 @@
       height: var(--primaryRowHeight);
     }
 
+    &:not(.empty) .btn-container {
+      margin-left: ~"calc(var(--sidebarWidth) * -1)"; // overlap sidebar's .placeholder
+    }
+
+    .overlay .btn-container {
+      pointer-events: all; // allow to click on the buttons
+
+      .button-link:not(:hover) {
+        color: @disabled-gray;
+        background: none;
+      }
+
+      .hint {
+        margin-left: .5em;
+        color: @text-color-light;
+      }
+    }
+
     .overlay .entry {
       margin-top: 1em;
       margin-bottom: 1em;
@@ -242,7 +266,7 @@
   }
 
   .btn-container {
-    background-color: fade(@gray-light, 25%);
+    background-color: mix(@gray-light, @body-bg-color, 25%);
 
     .empty-notice {
       margin-right: 1em;
@@ -313,3 +337,9 @@
 #layout.twocols .schedule .timescale:has(:nth-child(n+62)) { // month view (--timestampsPerDay * --primaryColumns = 62)
   display: none;
 }
+
+@light-mode: {
+  .timeline .btn-container {
+    background-color: mix(#d0d3da, #F5F9FA, 25%); //@gray-light, @light-body-bg-color
+  }
+};