Do not hide the WP preview modal when hovering over the modal itself

app/assets/stylesheets/openproject/_generic.sass

@@ -92,3 +92,11 @@
 
 .-required-highlighting
   border: 1px solid red
+
+.-no-width
+  display: block
+  width: 0
+
+.-no-height
+  display: block
+  height: 0

frontend/src/app/components/modals/preview-modal/wp-preview-modal/wp-preview.modal.sass

@@ -7,7 +7,6 @@
   max-width: 400px
   min-height: 100px
   max-height: 300px
-  top: 0
   background: white
   padding: 15px
   border: 1px solid lightgrey

frontend/src/app/components/modals/preview-modal/wp-preview-modal/wp-preview.modal.ts

@@ -45,7 +45,7 @@ export class WpPreviewModal extends OpModalComponent implements OnInit {
 
   public text = {
     created_by: this.i18n.t('js.label_created_by'),
-  }
+  };
 
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) readonly locals:OpModalLocalsMap,

frontend/src/app/globals/global-listeners/preview-trigger.service.ts

@@ -30,9 +30,12 @@
 import {Injectable, Injector} from "@angular/core";
 import {OpModalService} from "core-components/op-modals/op-modal.service";
 import {WpPreviewModal} from "core-components/modals/preview-modal/wp-preview-modal/wp-preview.modal";
+import {OpModalComponent} from "core-components/op-modals/op-modal.component";
 
 @Injectable()
 export class PreviewTriggerService {
+  private previewModal:OpModalComponent;
+  private modalElement:HTMLElement;
 
   constructor(readonly opModalService:OpModalService,
               readonly injector:Injector) {
@@ -44,22 +47,42 @@ export class PreviewTriggerService {
       e.stopPropagation();
       const el = jQuery(e.target);
 
-      const previewModal = this.opModalService.show(WpPreviewModal, this.injector, { workPackageLink: el.attr("href") });
-      jQuery(previewModal.elementRef.nativeElement).position({
+      this.previewModal = this.opModalService.show(WpPreviewModal, this.injector, { workPackageLink: el.attr("href") });
+      this.modalElement = this.previewModal.elementRef.nativeElement;
+      jQuery(this.modalElement).position({
         my: 'left top',
         at: 'left bottom',
         of: el,
         collision: 'flipfit'
-      })
+      });
+
+      jQuery(this.modalElement).addClass('-no-width -no-height');
     });
 
-    jQuery(document.body).on('mouseleave', '.preview-trigger', (e) => {
+    jQuery(document.body).on('mouseleave', '.preview-trigger', (e:JQueryEventObject) => {
       e.preventDefault();
       e.stopPropagation();
 
-      //this.opModalService.close();
+      if (this.isMouseOverPreview(e)) {
+        jQuery(this.modalElement).on('mouseleave',  () => {
+          this.opModalService.close();
+        })
+      } else {
+        this.opModalService.close();
+      }
     });
   }
 
+  private isMouseOverPreview(evt:JQueryEventObject) {
+    const previewElement = jQuery(this.modalElement.children[0]);
+    if (previewElement && previewElement.offset()) {
+      let horizontalHover = evt.pageX >= Math.floor(previewElement.offset()!.left) &&
+                            evt.pageX < previewElement.offset()!.left + previewElement.width()!;
+      let verticalHover = evt.pageY >= Math.floor(previewElement.offset()!.top) &&
+                          evt.pageY < previewElement.offset()!.top + previewElement.height()!;
+      return horizontalHover && verticalHover;
+    }
+    return false;
+  }
 
 }

lib/open_project/text_formatting/matchers/link_handlers/colon_separator.rb

@@ -91,7 +91,7 @@ module OpenProject::TextFormatting::Matchers
 
       def render_commit
         if project&.repository &&
-          (changeset = Changeset.where(['repository_id = ? AND scmid LIKE ?', project.repository.id, "#{oid}%"]).first)
+           (changeset = Changeset.where(['repository_id = ? AND scmid LIKE ?', project.repository.id, "#{oid}%"]).first)
           link_to h("#{project_prefix}#{name}"),
                   { only_path: context[:only_path], controller: '/repositories', action: 'revision', project_id: project, rev: changeset.identifier },
                   class: 'changeset',

spec/lib/open_project/text_formatting/markdown/markdown_spec.rb

@@ -222,7 +222,7 @@ describe OpenProject::TextFormatting,
       let(:issue_link) do
         link_to("##{issue.id}",
                 work_package_path(issue),
-                class: 'issue work_package status-3 priority-1 created-by-me', title: "#{issue.subject} (#{issue.status})")
+                class: 'issue work_package preview-trigger status-3 priority-1 created-by-me', title: "#{issue.subject} (#{issue.status})")
       end
 
       context 'Plain issue link' do
@@ -232,7 +232,7 @@ describe OpenProject::TextFormatting,
       end
 
       describe 'quickinfo' do
-        subject { format_text("###{issue.id}") }
+        subject { format_text("##{issue.id}") }
 
         let(:issue) do
           FactoryBot.create :work_package,
@@ -312,7 +312,7 @@ describe OpenProject::TextFormatting,
         let(:issue_link) do
           link_to("##{issue.id}",
                   work_package_path(issue),
-                  class: 'issue work_package status-3 priority-1 created-by-me',
+                  class: 'issue work_package preview-trigger status-3 priority-1 created-by-me',
                   title: "#{issue.subject} (#{issue.status})")
         end
 
@@ -329,16 +329,16 @@ describe OpenProject::TextFormatting,
         end
 
         before do
-          issue2.description = "####{issue.id}"
+          issue2.description = "##{issue.id}"
           issue2.save!
-          issue.description = "####{issue2.id}"
+          issue.description = "##{issue2.id}"
           issue.save!
         end
 
         subject { format_text issue, :description }
 
         it "doesn't replace description links with a cycle" do
-          expect(subject).to match("###{issue.id}")
+          expect(subject).to match("##{issue.id}")
         end
       end
 
@@ -706,7 +706,7 @@ describe OpenProject::TextFormatting,
       let(:expected) do
         <<~EXPECTED
           <p><a class="wiki-page" href="/projects/#{project.identifier}/wiki/cookbook-documentation">CookBook documentation</a></p>
-          <p><a class="issue work_package status-3 priority-1 created-by-me" href="/work_packages/#{issue.id}" title="#{issue.subject} (#{issue.status})">##{issue.id}</a></p>
+          <p><a class="issue work_package preview-trigger status-3 priority-1 created-by-me" href="/work_packages/#{issue.id}" title="#{issue.subject} (#{issue.status})">##{issue.id}</a></p>
           <pre><code>
           [[CookBook documentation]]
 

spec/requests/api/v3/render_resource_spec.rb

@@ -83,7 +83,7 @@ describe 'API v3 Render resource', type: :request do
             let(:title) { "#{work_package.subject} (#{work_package.status})" }
             let(:text) {
               '<p>Hello World! Have a look at <a '\
-                  "class=\"issue work_package status-1 priority-1\" "\
+                  "class=\"issue work_package preview-trigger status-1 priority-1\" "\
                   "href=\"#{href}\" "\
                   "title=\"#{title}\">##{id}</a></p>"
             }