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

pull/7454/head
Henriette Dinger 5 years ago
parent 3b094c4948
commit d0cbd450eb
  1. 8
      app/assets/stylesheets/openproject/_generic.sass
  2. 1
      frontend/src/app/components/modals/preview-modal/wp-preview-modal/wp-preview.modal.sass
  3. 2
      frontend/src/app/components/modals/preview-modal/wp-preview-modal/wp-preview.modal.ts
  4. 33
      frontend/src/app/globals/global-listeners/preview-trigger.service.ts
  5. 2
      lib/open_project/text_formatting/matchers/link_handlers/colon_separator.rb
  6. 14
      spec/lib/open_project/text_formatting/markdown/markdown_spec.rb
  7. 2
      spec/requests/api/v3/render_resource_spec.rb

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

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

@ -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,

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

@ -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',

@ -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]]

@ -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>"
}

Loading…
Cancel
Save