Redesign empty schedule view

- Add `empty-notice` and `Add Rotation` button under `.day-header`
- Hide clock

Author: sukhwinder33445

library/Notifications/Widget/Timeline.php

@@ -24,6 +24,7 @@
 use ipl\I18n\Translation;
 use ipl\Web\Style;
 use ipl\Web\Url;
+use ipl\Web\Widget\ButtonLink;
 use ipl\Web\Widget\Icon;
 use ipl\Web\Widget\Link;
 use Locale;
@@ -297,21 +298,6 @@ protected function assembleSidebarEntry(Rotation $rotation): BaseHtmlElement
 
     protected function assemble()
     {
-        if (empty($this->rotations)) {
-            $emptyNotice = new HtmlElement(
-                'div',
-                Attributes::create(['class' => 'empty-notice']),
-                Text::create($this->translate('No rotations configured'))
-            );
-
-            if ($this->minimalLayout) {
-                $this->getAttributes()->add(['class' => 'minimal-layout']);
-                $this->addHtml($emptyNotice);
-            } else {
-                $this->getGrid()->addToSideBar($emptyNotice);
-            }
-        }
-
         if (! $this->minimalLayout) {
             $this->getGrid()->addToSideBar(
                 new HtmlElement(
@@ -358,6 +344,46 @@ protected function assemble()
                 ->addHtml($clock);
         }
 
+        if (! $this->rotations) {
+            $emptyNotice = new HtmlElement(
+                'div',
+                Attributes::create(['class' => 'empty-notice']),
+                Text::create($this->translate('No rotations configured, yet.'))
+            );
+
+            if ($this->minimalLayout) {
+                $this->getAttributes()->add(['class' => 'minimal-layout']);
+                $this->addHtml($emptyNotice);
+            } else {
+                $this->addHtml(new HtmlElement(
+                    'div',
+                    new Attributes(['class' => 'empty-state-notice']),
+                    new Icon('info-circle'),
+                    new HtmlElement(
+                        'span',
+                        null,
+                        new Text($this->translate(
+                            'With schedules Contacts can rotate in recurring shifts. You can add'
+                            .' multiple rotation layers to a schedule.'
+                        ))
+                    )
+                ));
+
+                $this->getGrid()
+                    ->addAttributes(['class' => 'empty'])
+                    ->addHtml(new HtmlElement(
+                        'div',
+                        new Attributes(['class' => 'btn-container']),
+                        $emptyNotice,
+                        (new ButtonLink(
+                            $this->translate('Add your first Rotation'),
+                            Links::rotationAdd(Url::fromRequest()->getParam('id')),
+                            'plus'
+                        ))->openInModal()
+                    ));
+            }
+        }
+
         $this->addHtml(
             $this->getGrid(),
             $this->getStyle()

public/css/timeline.less

@@ -5,6 +5,27 @@
   flex-direction: column;
   overflow: hidden;
 
+  .empty-state-notice {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1em;
+    margin-bottom: 2em;
+    border: 1px solid @gray-light;
+    .rounded-corners();
+    color: @text-color-light;
+
+    .icon {
+      font-size: 1.75em;
+    }
+
+    > span {
+      padding-left: 0.5em;
+      flex-grow: 1;
+      text-align: center;
+    }
+  }
+
   .time-grid {
     --sidebarWidth: 12em;
     --stepRowHeight: 4em;
@@ -46,6 +67,14 @@
       }
     }
 
+    .btn-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      height: var(--primaryRowHeight);
+    }
+
     .overlay .entry {
       margin-top: 1em;
       margin-bottom: 1em;
@@ -205,6 +234,24 @@
     }
   }
 
+  .btn-container {
+    background-color: fade(@gray-light, 25%);
+
+    .empty-notice {
+      margin-right: 1em;
+      color: @text-color-light;
+    }
+
+    .button-link {
+      border: 1px solid;
+
+      &:hover {
+        color: @text-color-on-icinga-blue;
+        background-color: @icinga-blue;
+      }
+    }
+  }
+
   .entry .icon {
     font-size: .75em;
     opacity: .8;
@@ -230,3 +277,29 @@
 .days-header .column-title .date {
   font-size: .75em;
 }
+
+.time-grid.empty {
+  .btn-container {
+    grid-area: ~"3 / 1 / 3 / 3";
+  }
+
+  // .empty-state is placed under the .days-header, Everything below .empty-state element must slide down one row
+  // so the grid-row-start and grid-row-end is increased by 1
+  .sidebar {
+    grid-area: ~"4 / 1 / 5 / 2";
+  }
+
+  .grid,
+  .overlay {
+    grid-area: ~"4 / 2 / 5 / 3";
+  }
+
+  .timescale {
+    grid-area: ~"5 / 2 / 5 / 3";
+  }
+
+  .clock {
+    display: none;
+  }
+}
+