Merge pull request #7454 from opf/feature/30501-Render-text-field-links-in-the-backend-independently-of-the-user
[30501] Render text field links in the backend independently of the user [ci skip]pull/7449/head
Oliver Günther
5 years ago
committed by
GitHub
commit
7ce157e5c2
@ -0,0 +1,24 @@ |
||||
<div class="preview-modal--container" *ngIf="workPackage"> |
||||
<span class="type" |
||||
[ngClass]="highlightingColor(workPackage.type)" |
||||
[textContent]="workPackage.type.name"> |
||||
</span> |
||||
|
||||
<span class="subject -bold" |
||||
[textContent]="workPackage.subject"> |
||||
</span> |
||||
|
||||
<span class="author -italic -small-font" |
||||
[textContent]="'Created by ' + workPackage.author.name"> |
||||
</span> |
||||
|
||||
<div [ngClass]="'status ' + highlightingColor(workPackage.status, true)" > |
||||
<span [textContent]="workPackage.status.name"></span> |
||||
</div> |
||||
|
||||
<div class="assignee" *ngIf="workPackage.assignee"> |
||||
<user-avatar [user]="workPackage.assignee" |
||||
data-class-list="avatar-mini"> |
||||
</user-avatar> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,36 @@ |
||||
@import "helpers" |
||||
|
||||
.preview-modal--container |
||||
position: absolute |
||||
z-index: 5000 |
||||
min-width: 200px |
||||
max-width: 400px |
||||
min-height: 100px |
||||
max-height: 300px |
||||
background: white |
||||
padding: 15px |
||||
border: 1px solid lightgrey |
||||
border-radius: 3px |
||||
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5) |
||||
|
||||
display: grid |
||||
grid-template: auto auto auto / auto auto 1fr 1fr |
||||
grid-column-gap: 5px |
||||
grid-row-gap: 10px |
||||
grid-template-areas: "type subject subject subject" "author author author author" "status status . assignee" |
||||
|
||||
.status |
||||
grid-area: status |
||||
padding: 0px 10px |
||||
|
||||
.type |
||||
grid-area: type |
||||
|
||||
.author |
||||
grid-area: author |
||||
|
||||
.subject |
||||
grid-area: subject |
||||
|
||||
.assignee |
||||
grid-area: assignee |
||||
@ -0,0 +1,80 @@ |
||||
// -- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
// ++
|
||||
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnInit} from "@angular/core"; |
||||
import {OpModalComponent} from "core-components/op-modals/op-modal.component"; |
||||
import {OpModalLocalsToken, OpModalService} from "core-components/op-modals/op-modal.service"; |
||||
import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types"; |
||||
import {I18nService} from "core-app/modules/common/i18n/i18n.service"; |
||||
import {WorkPackageResource} from "core-app/modules/hal/resources/work-package-resource"; |
||||
import {WorkPackageDmService} from "core-app/modules/hal/dm-services/work-package-dm.service"; |
||||
import {HalResource} from "core-app/modules/hal/resources/hal-resource"; |
||||
import {Highlighting} from "core-components/wp-fast-table/builders/highlighting/highlighting.functions"; |
||||
|
||||
@Component({ |
||||
templateUrl: './wp-preview.modal.html', |
||||
styleUrls: ['./wp-preview.modal.sass'], |
||||
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
}) |
||||
export class WpPreviewModal extends OpModalComponent implements OnInit { |
||||
public workPackage:WorkPackageResource; |
||||
|
||||
public text = { |
||||
created_by: this.i18n.t('js.label_created_by'), |
||||
}; |
||||
|
||||
constructor(readonly elementRef:ElementRef, |
||||
@Inject(OpModalLocalsToken) readonly locals:OpModalLocalsMap, |
||||
readonly cdRef:ChangeDetectorRef, |
||||
readonly i18n:I18nService, |
||||
readonly workPackageDmService:WorkPackageDmService, |
||||
readonly opModalService:OpModalService) { |
||||
super(locals, cdRef, elementRef); |
||||
} |
||||
|
||||
|
||||
ngOnInit() { |
||||
super.ngOnInit(); |
||||
const workPackageLink = this.locals.workPackageLink; |
||||
const workPackageId = HalResource.idFromLink(workPackageLink); |
||||
|
||||
this.workPackageDmService.loadWorkPackageById(workPackageId) |
||||
.then((workPackage:WorkPackageResource) => { |
||||
this.workPackage = workPackage; |
||||
this.cdRef.detectChanges(); |
||||
}); |
||||
} |
||||
|
||||
highlightingColor(resource:HalResource, background:boolean = false) { |
||||
if (background) { |
||||
return Highlighting.backgroundClass(resource.$halType.toLowerCase(), resource.id!); |
||||
} else { |
||||
return Highlighting.inlineClass(resource.$halType.toLowerCase(), resource.id!); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,88 @@ |
||||
// -- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
// ++
|
||||
|
||||
|
||||
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) { |
||||
} |
||||
|
||||
setupListener() { |
||||
jQuery(document.body).on('mouseenter', '.preview-trigger', (e) => { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
const el = jQuery(e.target); |
||||
|
||||
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:JQueryEventObject) => { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
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; |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue