diff --git a/library/Notifications/Widget/Timeline.php b/library/Notifications/Widget/Timeline.php index b7048cdf..a9a41f9d 100644 --- a/library/Notifications/Widget/Timeline.php +++ b/library/Notifications/Widget/Timeline.php @@ -22,6 +22,7 @@ use ipl\Web\Style; use ipl\Web\Url; use ipl\Web\Widget\Icon; +use ipl\Web\Widget\Link; use SplObjectStorage; use Traversable; @@ -281,7 +282,10 @@ protected function assembleSidebarEntry(Rotation $rotation): BaseHtmlElement $entry->addHtml( $form, new Icon('bars', ['data-drag-initiator' => true]), - new HtmlElement('span', null, Text::create($rotation->getName())) + (new Link( + [new HtmlElement('span', null, Text::create($rotation->getName())), new Icon('cog')], + Links::rotationSettings($rotation->getId(), $rotation->getScheduleId()) + ))->openInModal() ); return $entry; diff --git a/library/Notifications/Widget/Timeline/Rotation.php b/library/Notifications/Widget/Timeline/Rotation.php index 2f6d2bc4..536dbc06 100644 --- a/library/Notifications/Widget/Timeline/Rotation.php +++ b/library/Notifications/Widget/Timeline/Rotation.php @@ -39,6 +39,16 @@ public function getId(): int return $this->model->id; } + /** + * Get the schedule ID of the rotation + * + * @return int + */ + public function getScheduleId(): int + { + return $this->model->schedule_id; + } + /** * Get the name of the rotation * @@ -137,7 +147,7 @@ public function fetchTimeperiodEntries(DateTime $after, DateTime $until): Genera ->setMember($member) ->setStart($recurrence) ->setEnd($recurrenceEnd) - ->setUrl(Links::rotationSettings($this->model->id, $this->model->schedule_id)); + ->setUrl(Links::rotationSettings($this->getId(), $this->getScheduleId())); yield $occurrence; } @@ -146,7 +156,7 @@ public function fetchTimeperiodEntries(DateTime $after, DateTime $until): Genera ->setMember($member) ->setStart($timeperiodEntry->start_time) ->setEnd($timeperiodEntry->end_time) - ->setUrl(Links::rotationSettings($this->model->id, $this->model->schedule_id)); + ->setUrl(Links::rotationSettings($this->getId(), $this->getScheduleId())); yield $entry; } diff --git a/public/css/timeline.less b/public/css/timeline.less index b8886084..f92c0411 100644 --- a/public/css/timeline.less +++ b/public/css/timeline.less @@ -28,6 +28,20 @@ margin-left: .5em; .text-ellipsis(); } + + > a { + display: flex; + width: 100%; + align-items: baseline; + margin-left: .5em; + + span { + width: 0; + flex: 1 0 auto; + margin-right: 0.25em; + .text-ellipsis(); + } + } } .overlay .entry { @@ -80,13 +94,14 @@ .rotation-name { font-size: 1.25em; font-weight: bold; - cursor: grab; [data-drag-initiator] { color: @gray-light; - } - &:hover [data-drag-initiator] { - color: @text-color; + + &:hover { + cursor: grab; + color: @list-item-title-hover-color; + } } // :not(:empty) is only necessary to increase specificity @@ -97,6 +112,22 @@ &.sortable-ghost { opacity: .5; } + + > a { + text-decoration: none; + + i { + display: none; + } + + &:hover { + color: @list-item-title-hover-color; + + i { + display: inline-block; + } + } + } } .entry .icon { diff --git a/public/js/schedule.js b/public/js/schedule.js index f448f09c..3119a3b0 100644 --- a/public/js/schedule.js +++ b/public/js/schedule.js @@ -41,7 +41,8 @@ Sortable.create(sideBar, { scroll: true, direction: 'vertical', - draggable: '.rotation-name' + draggable: '.rotation-name', + handle: '.rotation-name > i[data-drag-initiator]' }); }